anime-tweet-bot

People can now chat with anime characters! This AI-powered chatbot lets you have real conversations with anime characters by using authentic quotes to respond in-character.

Comment

Anime-Tweet-Bot Project Story

Inspiration

There are many people who do not have someone they can turn to to speak about their true feelings, their thoughts, and what's happening in their personal lives. At the same time, many anime fans find comfort in watching anime shows because the stories and characters really speak to them. These stories help people feel better, understand more about life, learn about the world, and can provide energy, courage, and inspiration.

This inspired me to convert anime quotes into better use with LLM models. Instead of just having quotes sitting there, people can type what they feel in the moment, and an anime character with a quote that is very relevant to what the user has typed will respond. The LLM will find a suitable quote and craft a reply that speaks directly to the user's feelings.

What it does

Anime-Tweet-Bot is an AI-powered chatbot that lets users have conversations with their favorite anime characters. The application uses Google Gemini AI to generate authentic, in-character responses by analyzing user messages, finding relevant anime quotes from a curated database of over 7,000 quotes, and synthesizing responses that maintain each character's distinct voice and personality. The interface is designed like a messaging app, making conversations feel natural and engaging.

Users can express their feelings, thoughts, or ask questions, and receive personalized responses from anime characters that are specifically tailored to their input, making the experience much more flexible and meaningful than browsing through static quote lists.

How we built it

Frontend:

  • Built with React, creating a Twitter-like interface with components for displaying conversation history
  • Styled with CSS for an aesthetic anime-themed UI
  • Deployed as a static site on Vercel

Backend:

  • Converted Express server to Vercel serverless functions for scalable deployment
  • Integrated Google Gemini AI (gemini-2.5-flash-lite) for intelligent quote selection and response generation
  • Implemented Fuse.js for fuzzy search to efficiently filter and match user messages with relevant anime quotes from the large database
  • Fetches anime quotes from an external API and caches them for performance
  • Uses a two-step AI process: first selecting the most relevant quote, then synthesizing an in-character response

Deployment:

  • Frontend and API both deployed on Vercel
  • Environment variables managed through Vercel for secure API key storage
  • Code repository hosted on GitHub with automatic deployments

Challenges we ran into

The main challenge was handling the large database of over 7,000 anime quotes. Initially, I tried to use the Gemini model directly with all the quotes, but it was too much data to process efficiently. The model couldn't handle the entire dataset at once, which prevented it from generating proper responses.

The solution was implementing Fuse.js, a powerful fuzzy search library. By using Fuse.js to pre-filter and narrow down the quotes to the most relevant ones based on the user's message, the system could then pass a manageable subset to the Gemini AI model. This two-step approach—fuzzy search filtering followed by AI processing—made the application work smoothly and efficiently.

Accomplishments that we're proud of

The biggest accomplishment is how simple this idea is, yet how powerful it could be for many people, especially anime fans. It's a very useful tool because:

  • Before LLM models, people had to read through blogs to find relevant anime quotes specific to a theme—at most, they could find maybe 100 quotes in a blog post
  • Now, the system is much more flexible and specific. Users don't have to manually search through thousands of quotes. The AI can instantly find the most relevant quote from over 7,000 options based on exactly what the user is feeling or talking about

This makes the experience personalized, immediate, and accessible—something that wasn't possible before AI integration.

What we learned

This was my first time using an AI model, and I was surprised by how easy it was to get started. I didn't know it could be this straightforward—just getting the Gemini API key and setting up the server made it possible to build something powerful.

I learned that:

  • Building with AI is very convenient and opens up many possibilities
  • Even though the codebase could be better, it's really good enough to achieve the goal
  • The integration of AI with traditional web technologies (React, Express, serverless functions) creates powerful user experiences
  • Sometimes the solution to a problem (like handling too much data) requires combining different tools—in this case, Fuse.js for search and Gemini for AI processing

What's next for anime-tweet-bot

Moving forward, I plan to:

  • Review and improve the codebase to make it more maintainable and efficient
  • Evaluate the free tier limitations to see if it's generous enough to share with more people and allow more users to use the app
  • Continue refining the user experience and potentially add more features that enhance the emotional connection between users and anime characters

Built With

Share this project:

Updates