AI-powered conversational interface for video, web, and document content.
ChatTube is a modern, full-stack application that allows you to chat with various content sources using advanced AI models. Simply add a YouTube video, paste a URL, or upload a document, and start having intelligent conversations with your content.
- YouTube Videos - Extract transcripts and metadata from any YouTube video
- Web Pages - Parse and process content from web articles and pages
- PDF Documents - Upload and analyze PDF files
- File Uploads - Support for various document types (up to 300MB)
- Multi-Model Support - Choose from leading AI providers:
- OpenAI (GPT models)
- Anthropic (Claude models)
- Google (Gemini models)
- Contextual Conversations - AI understands your content and provides relevant answers
- Auto-Summarization - Automatically generates titles and summaries for your chats
- Chunk-Based Processing - Intelligent content splitting for optimal context handling
- Background Worker Queue - Asynchronous processing for large content
- Content Chunking - Text is intelligently split with embeddings for semantic search
- Progress Tracking - Real-time processing status updates
- Error Recovery - Robust error handling and retry mechanisms
- Beautiful Design - Clean, modern UI built with Next.js 15 and Tailwind CSS 4
- Dark Mode - Full dark mode support with
next-themes - Responsive Layout - Works seamlessly on desktop and mobile devices
- Framer Motion Animations - Smooth, delightful user interactions
- Radix UI Components - Accessible, high-quality UI primitives
- JWT Authentication - Secure token-based authentication
- Google OAuth - Sign in with Google integration
- Rate Limiting - API rate limiting to prevent abuse
- CORS Protection - Configurable cross-origin resource sharing
ChatTube uses a monorepo structure with two main packages:
chattube/
├── frontend/ # Next.js 15 application
│ ├── app/ # App router pages
│ ├── components/ # React components
│ │ ├── auth/ # Authentication components
│ │ ├── layout/ # Layout components (chat panel, sources panel)
│ │ ├── modals/ # Modal dialogs
│ │ ├── providers/ # React context providers
│ │ └── ui/ # Reusable UI components
│ └── lib/ # Utility functions and hooks
│
├── backend/ # Express.js API server
│ └── src/
│ ├── config/ # Configuration management
│ ├── controllers/ # Route controllers
│ ├── db/ # Database connection (MongoDB)
│ ├── ingestion/ # Content processing pipeline
│ │ └── processors/ # Source-specific processors
│ ├── middlewares/ # Express middlewares
│ ├── models/ # Mongoose models
│ ├── prompts/ # AI prompt templates
│ ├── routes/ # API routes
│ ├── services/ # Business logic services
│ │ └── llm/ # LLM provider clients
│ ├── utils/ # Utility functions
│ └── workers/ # Background job workers
│
├── package.json # Root workspace configuration
└── pnpm-workspace.yaml
- Node.js >= 18.0.0
- pnpm >= 8.0.0
- MongoDB (local or Atlas)
- FFmpeg (for audio processing)
Clone the repository
git clone https://github.com/yourusername/chattube.git cd chattubeInstall dependencies
pnpm install
Configure environment variables
Create
.envfiles in bothfrontend/andbackend/directories:backend/.env
# ServerPORT=3001NODE_ENV=developmentFRONTEND_URL=http://localhost:3000# DatabaseMONGODB_URI=mongodb://localhost:27017/chattube# AuthenticationJWT_SECRET=your-super-secret-jwt-keyGOOGLE_CLIENT_ID=your-google-client-id# AI Providers (add the ones you want to use)OPENAI_API_KEY=your-openai-api-keyANTHROPIC_API_KEY=your-anthropic-api-keyGEMINI_API_KEY=your-gemini-api-key
frontend/.env
NEXT_PUBLIC_API_URL=http://localhost:3001NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
Start the development servers
# Start both frontend and backend pnpm dev # Or start individually pnpm dev:frontend # Next.js on http://localhost:3000 pnpm dev:backend # Express on http://localhost:3001
Start the background worker (in a separate terminal)
pnpm worker:dev
| Script | Description |
|---|---|
pnpm dev | Start both frontend and backend in development mode |
pnpm dev:frontend | Start only the frontend (Next.js) |
pnpm dev:backend | Start only the backend (Express) |
pnpm build | Build both packages for production |
pnpm start | Start both packages in production mode |
pnpm lint | Run linting across all packages |
pnpm worker | Start the ingestion worker (production) |
pnpm worker:dev | Start the ingestion worker (development) |
pnpm worker:status | Check worker status |
pnpm worker:cleanup | Clean up stale jobs |
| Method | Endpoint | Description |
|---|---|---|
POST | /api/auth/register | Register a new user |
POST | /api/auth/login | Login with email/password |
POST | /api/auth/google | Login with Google OAuth |
| Method | Endpoint | Description |
|---|---|---|
GET | /api/chats | Get all user chats |
POST | /api/chats | Create a new chat |
GET | /api/chats/:id | Get a specific chat |
DELETE | /api/chats/:id | Delete a chat |
POST | /api/chats/:id/messages | Send a message |
| Method | Endpoint | Description |
|---|---|---|
POST | /api/sources | Add a new source |
GET | /api/sources/:id | Get source details |
GET | /api/sources/:id/status | Get processing status |
DELETE | /api/sources/:id | Delete a source |
- Framework: Next.js 15 with App Router & Turbopack
- Language: TypeScript
- Styling: Tailwind CSS 4
- State Management: Redux Toolkit with Redux Persist
- UI Components: Radix UI primitives
- Animations: Framer Motion
- Forms: React Hook Form with Zod validation
- Markdown: React Markdown with syntax highlighting
- Runtime: Node.js
- Framework: Express.js
- Language: TypeScript
- Database: MongoDB with Mongoose
- Authentication: JWT + bcrypt
- File Processing: FFmpeg, yt-dlp
- AI SDKs: OpenAI, Anthropic, Google GenAI
- Text Processing: LangChain text splitters
- Components: Use PascalCase for component files (
ChatPanel.tsx) - Utilities: Use camelCase for utility files (
fileCleanup.ts) - Models: Mongoose models use PascalCase (
User.ts,Chat.ts) - Routes: Route files use kebab-case with suffix (
chat.routes.ts)
- Create a new processor in
backend/src/ingestion/processors/ - Implement the
SourceProcessorinterface - Register it in
backend/src/ingestion/registry.ts
- Create a new client in
backend/src/services/llm/clients/ - Implement the
LLMClientinterface - Register it in
backend/src/services/llm/factory.ts
pnpm buildThis will:
- Build the Next.js frontend to
.next/ - Compile the TypeScript backend to
dist/
Ensure all environment variables are set for your production environment. Key differences:
NODE_ENV=production- Use secure, random strings for
JWT_SECRET - Set appropriate
FRONTEND_URLfor CORS - Use MongoDB Atlas or a managed MongoDB instance
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the ISC License.
- Next.js - The React Framework
- Express.js - Fast, unopinionated web framework
- MongoDB - The database for modern applications
- Radix UI - Unstyled, accessible UI components
- Tailwind CSS - A utility-first CSS framework
- OpenAI, Anthropic, Google - AI model providers
Made with ❤️ by the ChatTube team