🎌 OtakuGPT - Anime Assistant

A modern, intelligent AI companion for all things anime and manga. Built with FastAPI, React, and powered by Azure OpenAI with AniList integration.

✨ Features

🤖 Intelligent Anime Assistant

• Deep anime knowledge powered by AniList MCP tools
• Personalized recommendations based on user preferences
• Memory system that remembers your conversations and preferences
• Markdown responses with beautiful formatting
• Spoiler-aware responses (only when requested)

🎨 Beautiful Dark Theme Interface

• Dark gradient design with glass morphism effects
• Responsive chat interface built with Radix UI
• Real-time messaging with loading states
• Markdown rendering for rich content display
• Smooth animations and hover effects

🔧 Technical Features

• FastAPI backend with async support
• React frontend with modern hooks
• SQLite storage for sessions and memories
• Azure OpenAI integration
• MCP (Model Context Protocol) for AniList data
• CORS enabled for development

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 18+
• Azure OpenAI API Key
• npm/yarn/pnpm

1. Clone the Repository

git clone <your-repo-url>
cd "AniList - Copy"

2. Backend Setup

# Install Python dependencies
pip install -r requirements.txt

# Create environment file
cp .env.example .env

Configure your .env file:

ENDPOINT=your_azure_openai_endpoint
DEPLOYMENT=your_azure_deployment_name
OPENAI_API_KEY=your_azure_openai_api_key
API_VERSION=2024-02-15-preview

Start the backend

cd app/backend
python main.py

The backend will be available at http://localhost:8000

3. Frontend Setup

# Navigate to frontend directory
cd app/frontend

# Install dependencies
npm install

# Start development server
npm run dev

The frontend will be available at http://localhost:3000

📁 Project Structure

AniList - Copy/
├── app/
│   ├── backend/                 # FastAPI Backend
│   │   ├── main.py             # Main FastAPI application
│   │   ├── run.py              # Alternative runner
│   │   └── README.md           # Backend documentation
│   └── frontend/               # React Frontend
│       ├── src/
│       │   ├── components/     # React components
│       │   ├── styles/         # CSS styles
│       │   ├── App.jsx         # Main App component
│       │   └── main.jsx        # React entry point
│       ├── package.json        # Frontend dependencies
│       └── vite.config.js      # Vite configuration
├── src/
│   ├── agent/                  # AI Agent logic
│   │   ├── agent.py           # Main agent implementation
│   │   └── __init__.py
│   ├── prompts/               # AI prompts and instructions
│   │   ├── prompts.py         # Agent prompts
│   │   └── __init__.py
│   └── db/                    # Database files
│       └── anime_assistant.db # SQLite database
├── requirements.txt           # Python dependencies
├── pyproject.toml            # Python project configuration
└── README.md                 # This file

🎯 Usage

Chat Interface

1. Open your browser to http://localhost:3000
2. Type your anime questions in the chat input
3. Get intelligent responses with markdown formatting

Example Queries

🎌 "Who is the leader of the group Akatsuki in Naruto?"
🎌 "Recommend me some good shounen anime"
🎌 "Tell me about Attack on Titan without spoilers"
🎌 "What are the best anime from 2023?"
🎌 "Compare Naruto and One Piece"

API Endpoints

POST /chat

Send a message to the anime assistant

{
  "message": "Who is the leader of Akatsuki?",
  "user_id": "user123"
}

GET /health

Check backend health status

GET /ready

Check if all services are ready

🛠️ Configuration

Backend Configuration

The agent is configured in src/agent/agent.py:

• Azure OpenAI model settings
• Memory configuration for user conversations
• AniList MCP tools for anime data
• SQLite storage for persistence

Frontend Configuration

Theme customization in src/main.jsx:

<Theme
  accentColor="violet"
  grayColor="slate"
  radius="medium"
  scaling="100%"
  appearance="dark"
>

CSS Customization

Dark gradient theme variables in src/styles/globals.css:

:root {
  --gradient-bg: linear-gradient(
    135deg,
    #0c0c0c 0%,
    #1a1a2e 25%,
    #16213e 50%,
    #0f0f23 75%,
    #000000 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );
}

🔧 Development

Backend Development

cd app/backend
python main.py  # Runs with auto-reload

Frontend Development

cd app/frontend
npm run dev     # Runs with hot-reload

Building for Production

# Frontend build
cd app/frontend
npm run build

# Backend (use production ASGI server)
pip install gunicorn
gunicorn app.backend.main:app -w 4 -k uvicorn.workers.UvicornWorker

📦 Dependencies

Backend

• FastAPI - Modern web framework
• agno - AI agent framework
• SQLite - Database storage
• uvicorn - ASGI server
• python-dotenv - Environment management

Frontend

• React 18 - UI framework
• Radix UI - Component library
• Vite - Build tool
• react-markdown - Markdown rendering
• axios - HTTP client

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• AniList - For providing comprehensive anime/manga data
• Radix UI - For beautiful, accessible components
• Azure OpenAI - For powerful AI capabilities
• agno - For the AI agent framework

🐛 Troubleshooting

Common Issues

Backend not starting:

• Check your .env file configuration
• Ensure Azure OpenAI credentials are correct
• Verify Python dependencies are installed

Frontend proxy errors:

• Ensure backend is running on port 8000
• Check CORS configuration in main.py

Database errors:

• Database will be created automatically
• Check write permissions in src/db/ directory

Memory issues:

• User memories are stored in SQLite
• Clear database if needed: delete src/db/anime_assistant.db

Getting Help

1. Check the Issues page
2. Review the backend and frontend README files
3. Ensure all dependencies are correctly installed

---

Made with ❤️ for anime fans by anime fans 🎌