Inspiration
I wanted to bridge the gap between complex backend logic and smooth user experiences. My goal for Jasper was to build a tool that felt responsive and helpful, moving beyond basic text-in, text-out interfaces. I was curious to see how effectively I could integrate a large language model into a custom-built web environment while maintaining high performance.
What it does
Jasper is a multimodal AI agent designed for high-fidelity, real-time interaction. By integrating live vision, low-latency audio, and text processing, Jasper provides a seamless conversational experience. It can analyze visual environments, engage in natural vocal dialogue, and provide accurate information grounded in real-time web data.
How we built it
The platform is engineered for performance using a full-stack TypeScript architecture: Intelligence: Powered by the Gemini 2.5 Flash Live API for synchronized multimodal reasoning. Audio/Vision: Built with the Web Audio API for raw PCM streaming and a custom Canvas-based frame processing pipeline for real-time visual analysis. Interface: Developed with React and Tailwind CSS, utilizing Framer Motion for a responsive, high-performance user interface.
Challenges we ran into
The main difficulty was the networking setup for the production container. The app wouldn't start because it wasn't listening on Port 8080, which is required by Cloud Run. I also hit a wall with Vite's security settings, which initially blocked the cloud URL until I manually updated the config file to allow the new host.
Accomplishments that we're proud of
I’m really happy with the automated deployment pipeline. Now, whenever I push code to GitHub, Google Cloud automatically builds and updates the live site. Getting the networking fixed so the app finally loaded on a public link was a great moment.
What we learned
This project taught me a lot about DevOps and cloud infrastructure. I learned how to manage environment variables safely and how to troubleshoot container errors using logs. I also gained a better understanding of how to handle asynchronous data in a React frontend.
What's next for Jasper: Gemini AI Assistant
I plan to add the ability to process images and documents alongside text. I'd also like to build a database to store conversation history so users can pick up right where they left off.
Built With
- github
- google-cloud-build
- google-cloud-run
- google-gemini-api
- node.js
- react
- tailwind-css
- typescript
- vite

Log in or sign up for Devpost to join the conversation.