The Story of Diane Digital

The Inspiration: A Mission for Trustworthy AI

The inspiration for Diane Digital came from a simple, powerful idea: technology should create genuine human connection, especially when it comes to health. I saw a gap in how information is delivered to one of the most underserved communities—Spanish-speaking women managing the complex and often overwhelming world of prediabetes and diabetes.

Generic chatbots and impersonal articles aren't enough. This community deserves a guide who is not only knowledgeable but also empathetic, patient, and culturally aware. I was inspired to build more than just an interface; I wanted to build a digital human. An AI that doesn't just answer questions, but provides support. An AI that doesn't just recite facts, but does so with a familiar face and a trustworthy voice. That was the mission: to create Diane Digital, a true AI companion for health and wellness.


How I Built It: The Technical Journey

This project was built from the ground up during the hackathon, leveraging a modern, full-stack approach to create a robust and scalable application.

  1. Scaffolding with Bolt.new:
    The journey began on Bolt.new. I used its AI to generate the foundational boilerplate for the entire project—a React/Vite frontend with Tailwind CSS, and a Node.js/Express backend. This saved hours of manual setup and allowed me to focus immediately on the core features.

  2. Conversational AI Video (Tavus):
    To make Diane a true digital human, I used Tavus to create a video replica of myself. I trained a replica by recording a short video in Spanish to ensure her expressions and cadence would feel authentic to my target audience. The backend takes the text response from OpenAI and sends it to the Tavus API, which generates a complete video of my replica speaking the words with perfectly synchronized lip movements and voice. This video is then streamed to the user, creating a powerful, face-to-face conversational experience.

  3. Frontend & UI:
    I built a “Spanish-first” user interface, carefully styling it with Tailwind CSS and shadcn/ui to create a welcoming, polished, and intuitive chat experience, complete with a beautiful gradient background inspired by modern design principles.

  4. Backend/API:
    I used Netlify Functions to securely handle Tavus session creation and manage environment variables, making the app easy to deploy and scale.

  5. Deployment:
    The app was deployed to Netlify for a fast, secure, and globally accessible experience. The “Built with Bolt.new” badge is proudly displayed on the main page, as required for the hackathon.


Challenges Faced & Lessons Learned

No ambitious project comes without its challenges. This hackathon was a powerful learning experience in debugging and problem-solving.

  1. The Environment Puzzle:
    Early on, I faced persistent issues with a Python virtual environment (.venv) that kept activating in my JavaScript project. This taught me a deep lesson about shell configurations and the importance of creating a clean, isolated development environment.

  2. Cloud Deployment Hurdles:
    The biggest challenge was getting the Tavus video agent to work across different environments. Bolt’s preview and local development often block iframes or camera/mic permissions, so I had to deploy to Netlify to fully test the integration. I also learned that for a cloud demo environment without a secrets UI, the only reliable workaround is to temporarily hardcode the keys directly into the server code within Bolt.

  3. CORS & Iframe Embedding:
    Ensuring the Tavus video loaded correctly required careful handling of CORS headers and understanding browser security policies. Deploying to a real domain (Netlify) was essential for a seamless user experience.

  4. Library Incompatibility:
    An early version of the code used a library to read PDFs, which consistently crashed the server in the cloud environment. I made the strategic decision to remove this dependency in favor of a more stable solution that relies on .txt and .md files. This taught me that for a time-sensitive project like a hackathon, reliability is always more important than a minor feature.

  5. Language Consistency:
    Ensuring the avatar never switched languages mid-conversation required strict prompt engineering and fallback translation logic.


What I Learned

This hackathon was more than just a coding challenge; it was a masterclass in building a real-world AI application. I learned the critical importance of a trustworthy AI architecture, the power of combining AI with a human persona (Tavus) to create empathy, and the gritty realities of debugging environment-specific issues. Most importantly, I learned that a successful project is not just about writing code, but about a relentless pursuit of a solution, adapting and iterating until the initial vision comes to life.


Final Thoughts

Diane Digital is more than just a hackathon project—it’s a step toward more inclusive, culturally aware digital health. I’m proud to have built it on Bolt.new, and I’m excited to see how conversational AI can continue to break down barriers in healthcare.


Thank you for the opportunity to build, learn, and share!

Built With

Share this project:

Updates

Submission history