-
-
Application image
Introduction
This AI Chatbot is an interactive 3D web application that combines immersive 3D graphics with intelligent conversation capabilities. Built with Next.js 14 and React Three Fiber, the application features a 3D animated avatar in a virtual environment that users can interact with through both text and voice inputs.
How I built it
It was a 3-step process before reaching here.
Step 1 - I gained practical experience with an ongoing project. After gaining access to Kiro, I spent a few days familiarizing myself with its functionality and then started using it on a project I was already engaged in. I vibe-coded several components, and the results were quite successful.
Step 2 - Construct a complex application from the ground up, utilizing the spec-to-code feature by establishing several spec folders and tasks.md files. After becoming familiar with Kiro, I developed an application from the ground up using the Spec-to-code feature and also implemented agent hooks to enhance the documentation and improve code quality. I worked with technologies that I either hadn’t encountered before or wasn’t very experienced with, such as Docker, the Fastify backend framework, TypeScript, and a microservices architecture, and ultimately ran into an error loop; from that point, I understood that having clear requirements in mind is essential.
Step 3 - I created the app by establishing a solid structure. At that moment, I gained an understanding of Kiro's limitations and strengths, and I started building the app with Kiro serving as a coding assistant. Initially, I generated the Package.json and the README.md files and eliminated any unnecessary requirements to prevent Kiro from making its own selections. After outlining the path, the process became significantly smoother.
--In addition to Kiro, the applications I utilized for designing and rigging a 3D model include https://readyplayer.me/, Blender 3D, and Mixamo. I express my gratitude to the developers of these tools for enabling individuals like myself to transcend our expectations and craft something captivating. --
Challenges I ran into
The project faced the challenge of upgrading AI capabilities to provide more sophisticated conversational experiences while maintaining the strict performance requirements essential for immersive 3D interaction.
Technical Challenge Analysis:
- Performance Constraint: Sub-5 second response time requirement for seamless 3D interaction flow
- Quality Enhancement Need: User feedback indicated a desire for more detailed and contextually aware responses
- Token Limitation: The Previous 1024 token limit occasionally resulted in truncated responses for complex queries, so it was increased to 2048 tokens.
- Model Compatibility: Need to ensure the new AI model integrates seamlessly with the existing conversation management system
Accomplishments that I'm proud of
What I learned
What I discovered from using Kiro is that you need to be very certain and clear about all your requirements. You have to understand what you want beforehand; otherwise, you'll waste tokens without achieving anything. Once I recognized this, it enabled me to develop this application in under 30 hours. Because I was clear about what I wanted to create and which technologies would be utilized, I provided Kiro with a structured plan, and it executed that effectively.
What's next for Interactive AI Chatbot
There is a lot to achieve in future.
- Due to a lack of time, I was unable to host it, so the first task I'll tackle is acquiring a server since loading 3D models is quite challenging, making hosting my initial priority.
- Add multimodal capabilities.
- Will add more interactive components to it.
- will add more environment options, characters, and make it multilingual.
Log in or sign up for Devpost to join the conversation.