🤖 Discord AI Bot

Comprehensive Discord bot project integrating AI capabilities, server management, and moderation tools. Features AI-powered responses with conversation memory, automated welcome messages, anti-spam protection, logging system, role management, kick/ban commands, and modular architecture.
Try Interactive Demo

📖 Project Overview

Discord AI Bot is a comprehensive Discord bot project that integrates OpenAI API with discord.py to create a powerful bot with AI capabilities. This project offers AI-powered responses with conversation memory, automated welcome messages, anti-spam protection, logging system for tracking events, role management tools, moderation commands (kick, ban, clear), and a modular architecture using the discord.py Cogs framework. Perfect for Discord server administrators, developers, and communities looking to enhance their server with AI-powered features and automated management tools.

⚡ Quick Facts

🎯 Type: Discord Bot with AI Capabilities
🤖 AI Features: OpenAI API, Conversation Memory, AI Responses, Server Management, Moderation
⚡ Setup Time: ~5 minutes
📦 Backend: Python with discord.py
🎨 Frontend: HTML5, CSS3
🧠 AI Model: OpenAI GPT-3.5 Turbo
📱 Platform: Discord Servers
🔧 Technologies: Python, discord.py, OpenAI API
25+
Files
5000+
Lines of Code
20+
Advanced Features
200K
Context Tokens
Developer: Molla Samser | Website: rskworld.in | Email: help@rskworld.in
Difficulty Level: Intermediate - Perfect for developers learning Python, discord.py, OpenAI API integration, Discord bot development, and server management.

✨ Features

Core Features

🤖 OpenAI API Integration

Seamless integration with OpenAI GPT models for AI-powered responses with conversation memory and context awareness.

🧠 Conversation Memory

Maintains conversation context for better AI responses using collections.deque for efficient memory storage per user.

⚡ Moderation Tools

Kick, ban, and message clearing commands for effective server management and moderation with permission checks.

🛡️ Server Management

Tools for managing server information, roles, and server configuration with simple commands like !serverinfo and !roleadd.

Advanced Features

📎 Multi-Modal Support

Support for text, images, and documents. Upload files for Claude to analyze and understand.

🎤 Voice Input/Output

Speech recognition and text-to-speech capabilities for voice interactions with Claude.

💬 Multiple Chat Sessions

Create and manage multiple conversation threads for different topics or projects.

🌙 Dark Mode

Toggle between light and dark themes for comfortable viewing in any lighting condition.

💾 Export Chat History

Export conversations as PDF or TXT files for record-keeping, sharing, or analysis.

🎨 Code Syntax Highlighting

Beautiful code rendering with syntax highlighting for multiple programming languages.

📝 Markdown Rendering

Rich text formatting support with full markdown rendering including tables, lists, and links.

⚡ Streaming Responses

Real-time token streaming for faster response display and improved user experience.

📊 API Usage Tracking

Monitor token usage, API statistics, and costs with detailed tracking and analytics.

🎯 Quick Templates

Pre-built conversation templates for common tasks to quickly start conversations.

🔍 Chat Search

Search through conversation history to quickly find specific messages or topics.

⚙️ Settings Export/Import

Save and restore your preferences, model settings, and configuration easily.

🛠️ Technologies

Python

Core programming language for Discord bot

Language

discord.py

Python library for Discord API integration

Library

discord.py

Python library for Discord API integration

Discord Library

OpenAI API

AI model integration for conversational AI

AI API

python-dotenv

Environment variable management for configuration

Config

aiohttp

Async HTTP client for API requests

HTTP

Cogs Framework

Modular architecture using discord.py Cogs

Architecture

📦 Installation Guide - Step by Step

⏱️ Installation Time: ~5 minutes

Follow these simple steps to set up the Anthropic Claude Chatbot on your system.

📋 Prerequisites

🐍 Python 3.8+

Python 3.8 or higher required for the Discord bot

Download: Python

🌐 Discord Bot Token

Get your bot token from Discord Developer Portal (required for Discord bot access)

Get Token: Discord Developer Portal

🌐 OpenAI API Key

Get your API key from OpenAI Platform (required for AI features)

Get Key: OpenAI Platform

🌐 Internet Connection

Required for Discord API and OpenAI API calls

🚀 Step-by-Step Installation

📌 Step 1: Download or Clone the Project

Option A: Download ZIP

  1. Download the project ZIP file from the repository
  2. Extract it to your desired location (e.g., C:\Projects\anthropic-claude-chatbot or ~/Projects/anthropic-claude-chatbot)
  3. Navigate to the extracted folder

Option B: Clone with Git

git clone https://github.com/rskworld/anthropic-claude-chatbot.git
cd anthropic-claude-chatbot
✅ Step 2: Install Python Dependencies

Install required Python packages using pip.

# Install dependencies
pip install -r requirements.txt
🔑 Step 3: Set Up API Keys

Configure your Discord bot token and OpenAI API key in the environment file.

  1. Copy .env.example to .env
  2. Edit .env and add your keys:
    • DISCORD_TOKEN=your_discord_bot_token_here
    • OPENAI_API_KEY=sk-your-openai-key-here
    • LOG_CHANNEL_ID=optional_log_channel_id (optional)
  3. Get your Discord bot token from Discord Developer Portal
  4. Get your OpenAI API key from OpenAI Platform
🚀 Step 4: Start the Discord Bot

Start the Discord bot by running bot.py.

# Start Discord bot
python bot.py

# The bot will connect to Discord and start responding to commands
🌐 Step 5: Open Frontend

Open the HTML file in your browser or use a local web server.

Method 1: Direct File Opening

  1. Open index.html in your browser

Method 2: Using Local Web Server (Recommended)

# In a new terminal, start HTTP server
python -m http.server 8000

# Then open: http://localhost:8000

✅ Installation Complete!

Congratulations! You've successfully set up the Discord AI Bot. The bot is ready to use with all features including:

  • OpenAI API integration for AI-powered responses
  • Conversation memory for context-aware interactions
  • Moderation tools (kick, ban, clear commands)
  • Server management (serverinfo, role management)
  • Event logging system for tracking activities
  • Automated welcome messages
  • Anti-spam protection
  • Modular Cogs architecture
  • Hybrid commands (text and slash commands)

Next Steps:

  1. Ensure the bot is running (Step 4)
  2. Invite the bot to your Discord server with necessary permissions
  3. Try commands like !ask Hello to test AI responses
  4. Explore all the features, commands, and customization options!

🔧 Troubleshooting Installation

❌ API Key Issues

Solution: Ensure your .env file contains a valid ANTHROPIC_API_KEY starting with sk-ant-. Check API key has sufficient credits.

❌ Flask Server Not Starting

Solution: Check Python version (3.8+), verify dependencies installed with pip install -r requirements.txt, ensure port 5000 is available.

❌ Connection Errors

Solution: Verify Flask server is running on port 5000, check script.js has correct API_BASE_URL, ensure CORS is enabled in Flask.

❌ Import Errors

Solution: Reinstall dependencies, check virtual environment is activated, verify all packages in requirements.txt are installed.

📚 Usage Guide - Step by Step

🎯 Getting Started with Discord AI Bot

Step-by-Step Usage Instructions

📝 Step 1: Start Backend Server

  1. Ensure Flask server is running: python app.py
  2. Check server status at http://localhost:5000/api/health
  3. You should see: {"status":"healthy","anthropic_configured":true}

🌐 Step 2: Open Frontend

  1. Open index.html in your web browser
  2. You should see the Claude Chatbot interface with:
    • Chat messages area with markdown support
    • Text input field
    • Voice input button (microphone)
    • File upload button
    • Send button
    • Control buttons (Sessions, History, Export, Dark Mode, Settings)

💬 Step 3: Start Chatting

  1. Text Input: Type your message and press Enter or click Send
  2. Voice Input: Click microphone button and speak (optional)
  3. File Upload: Click paperclip icon to attach images or documents
  4. Try These:
    • "Explain quantum computing in simple terms"
    • "Write a Python function to calculate Fibonacci numbers"
    • "Solve: x² + 5x + 6 = 0"
    • "Summarize the key features of AI"
    • "Compare Python and JavaScript"
  5. View Responses: Claude will respond with formatted text, code blocks, and markdown

⚙️ Step 4: Customize Settings

Click the Settings button to customize your experience:

  • Model Selection: Choose Claude model (Sonnet, Opus, Haiku)
  • Max Tokens: Set maximum response length (1-4096)
  • Temperature: Control response creativity (0-1)
  • Stream Response: Toggle real-time streaming
  • Voice Settings: Configure voice input/output options
  • Language: Select language for voice features
  • Auto Speak: Toggle automatic text-to-speech
  • Dark Mode: Toggle between light and dark themes

📊 Step 5: Explore Advanced Features

Try out the advanced features:

  • Multiple Sessions: Create and manage multiple chat sessions
  • File Upload: Upload images or documents for Claude to analyze
  • Export: Export chat history as PDF or TXT files
  • Code Highlighting: View code with syntax highlighting
  • Markdown Rendering: See formatted text with markdown support
  • API Usage: Monitor token usage and API statistics
  • Quick Templates: Use pre-built conversation templates
  • Chat Search: Search through conversation history

💻 Using Discord Bot Commands

You can use these commands in your Discord server:

# Discord Bot Commands !ask What is Python? !clear_memory !serverinfo !roleadd @user @role !kick @user reason !ban @user reason !clear 10 !help
# Example Usage in Discord User: !ask How do I create a Python list? Bot: [AI Response with explanation] User: !serverinfo Bot: [Server Information Embed] User: !clear_memory Bot: [Memory Cleared Confirmation]

📊 Features Usage

🤖 Claude API

Start chatting and Claude will respond with advanced reasoning and helpful answers

📎 File Upload

Upload images or documents for Claude to analyze and discuss

🎤 Voice I/O

Use microphone for voice input and text-to-speech for responses

💬 Multiple Sessions

Create separate chat sessions for different topics or projects

🎨 Code Highlighting

Code blocks automatically rendered with syntax highlighting

📝 Markdown

Rich text formatting with full markdown support

⚡ Streaming

Enable streaming for real-time token-by-token responses

📊 Usage Tracking

Monitor token usage, API costs, and conversation statistics

🚀 Advanced Features & Capabilities

The Discord AI Bot includes advanced AI capabilities, server management, and moderation tools. Here's what you can do:

🧠 Advanced Reasoning

Complex problem-solving and multi-step reasoning

Claude excels at complex reasoning tasks, coding challenges, mathematics, and multi-step problem solving. Ask complex questions and get detailed, well-reasoned responses.

📎 Multi-Modal Support

Upload and analyze images and documents

Upload images, PDFs, or documents for Claude to analyze. Claude can understand visual content and extract information from various file formats.

💬 Long Context Conversations

Up to 200K tokens of context

Handle extended conversations with up to 200K tokens of context. Perfect for detailed discussions, document analysis, and maintaining context across long interactions.

🎨 Code & Markdown Rendering

Beautiful code syntax highlighting and markdown

Code blocks are automatically highlighted with syntax highlighting. Markdown formatting including tables, lists, links, and more is fully supported and rendered beautifully.

💡 Interactive Features: All features are interactive and responsive. Settings are automatically saved, and the interface adapts to your preferences. The chatbot supports both streaming and non-streaming responses for optimal user experience.

💻 Code Examples

Basic Claude API Integration

// Python Flask backend - app.py from anthropic import Anthropic from flask import Flask, request, jsonify app = Flask(__name__) client = Anthropic(api_key=os.getenv('ANTHROPIC_API_KEY')) @app.route('/api/chat', methods=['POST']) def chat(): data = request.json message = client.messages.create( model=data.get('model', 'claude-3-5-sonnet-20241022'), max_tokens=data.get('max_tokens', 1024), messages=[{"role": "user", "content": data['message']}] ) return jsonify({ 'response': message.content[0].text, 'usage': message.usage }) if __name__ == '__main__': app.run(debug=True, port=5000)

JavaScript Frontend Integration

// Frontend JavaScript - script.js async function sendMessage(message) { const response = await fetch('http://localhost:5000/api/chat', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ message: message, model: 'claude-3-5-sonnet-20241022', max_tokens: 1024, temperature: 0.7, stream: false }) }); const data = await response.json(); return data.response; } // Usage sendMessage('Hello, Claude!').then(response => { console.log('Claude:', response); });

Complete Claude Chatbot Example

// Claude Chatbot Class class ClaudeChatbot { constructor(apiUrl) { this.apiUrl = apiUrl || 'http://localhost:5000/api/chat'; this.conversationHistory = []; } async sendMessage(message, model = 'claude-3-5-sonnet-20241022') { const response = await fetch(this.apiUrl, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ message: message, model: model, max_tokens: 1024, temperature: 0.7, conversation_history: this.conversationHistory, stream: false }) }); const data = await response.json(); // Update conversation history this.conversationHistory.push( {role: 'user', content: message}, {role: 'assistant', content: data.response} ); return data.response; } clearHistory() { this.conversationHistory = []; } } // Usage const chatbot = new ClaudeChatbot(); chatbot.sendMessage('Hello, Claude!').then(response => { console.log('Claude:', response); });

Configuration Example

// Frontend config - script.js const ChatbotConfig = { api: { baseUrl: 'http://localhost:5000/api', endpoints: { chat: '/chat', health: '/health' } }, model: { default: 'claude-3-5-sonnet-20241022', maxTokens: 1024, temperature: 0.7 }, ui: { animationDuration: 300, messageDelay: 500, streamEnabled: true } }; // Access configuration console.log(ChatbotConfig.model.default);
# Backend config - config.py import os from anthropic import Anthropic class Config: ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY') DEFAULT_MODEL = 'claude-3-5-sonnet-20241022' DEFAULT_MAX_TOKENS = 1024 DEFAULT_TEMPERATURE = 0.7 client = Anthropic(api_key=ANTHROPIC_API_KEY) if ANTHROPIC_API_KEY else None

🔗 Claude API Integration

Claude API Integration

The application integrates with Anthropic's Claude API for advanced conversational AI. The backend uses Python Flask to handle API calls, while the frontend uses JavaScript for user interactions and response rendering.

Available APIs & Technologies

API/Technology Type Description
Anthropic Claude API AI API Advanced conversational AI and reasoning
Flask REST API Backend Python Flask server for API endpoints
LocalStorage Browser API Store settings and conversation history
Web Speech API Browser API Voice input/output (optional feature)

Backend API Endpoints

# Flask Backend - app.py @app.route('/api/chat', methods=['POST']) def chat(): data = request.json message = client.messages.create( model=data.get('model', 'claude-3-5-sonnet-20241022'), max_tokens=data.get('max_tokens', 1024), temperature=data.get('temperature', 0.7), messages=[{"role": "user", "content": data['message']}] ) return jsonify({ 'response': message.content[0].text, 'usage': message.usage, 'model': message.model }) @app.route('/api/health', methods=['GET']) def health_check(): return jsonify({ 'status': 'healthy', 'anthropic_configured': bool(os.getenv('ANTHROPIC_API_KEY')) })
// Frontend JavaScript - API Integration async function sendMessage(message) { try { const response = await fetch('http://localhost:5000/api/chat', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ message: message, model: 'claude-3-5-sonnet-20241022', max_tokens: 1024, temperature: 0.7, stream: false }) }); if (!response.ok) { throw new Error('API request failed'); } const data = await response.json(); return data.response; } catch (error) { console.error('Error:', error); return 'Error: ' + error.message; } }

Browser Compatibility

// Check Claude API Connection async function checkHealth() { try { const response = await fetch('http://localhost:5000/api/health'); const data = await response.json(); console.log('Server Status:', data.status); console.log('API Configured:', data.anthropic_configured); return data.anthropic_configured; } catch (error) { console.error('Health check failed:', error); return false; } } // Recommended setup: // - Backend: Python 3.8+ with Flask // - Frontend: Modern browsers (Chrome, Edge, Safari, Firefox) // - Voice Features: Chrome/Edge for Web Speech API support

⚙️ Configuration

Configuration in this application is handled through environment variables and settings files:

Environment Variables

Create a .env file in the project root (copy from env.example):

# .env file ANTHROPIC_API_KEY=sk-ant-your-api-key-here FLASK_ENV=development PORT=5000

Note: Get your API key from Anthropic Console. Never commit your .env file to version control.

Python Configuration (config.py)

The config.py file contains configuration settings:

# config.py import os from anthropic import Anthropic class Config: ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY') DEFAULT_MODEL = 'claude-3-5-sonnet-20241022' DEFAULT_MAX_TOKENS = 1024 DEFAULT_TEMPERATURE = 0.7 # Initialize Anthropic client client = Anthropic(api_key=ANTHROPIC_API_KEY) if ANTHROPIC_API_KEY else None

Frontend Configuration

Edit script.js to configure API endpoint:

// script.js const API_BASE_URL = 'http://localhost:5000/api'; const DEFAULT_MODEL = 'claude-3-5-sonnet-20241022'; const DEFAULT_MAX_TOKENS = 1024; const DEFAULT_TEMPERATURE = 0.7;

Browser LocalStorage Settings

User settings are automatically saved to browser's local storage:

// Settings are saved automatically localStorage.setItem('chatbotSettings', JSON.stringify({ model: 'claude-3-5-sonnet-20241022', maxTokens: 1024, temperature: 0.7, stream: true, darkMode: false, autoSpeak: false })); // Load settings const settings = JSON.parse(localStorage.getItem('chatbotSettings'));

Runtime Configuration

Configure settings through the web interface:

  • Model: Select Claude model (Sonnet, Opus, Haiku)
  • Max Tokens: Set maximum response length (1-4096)
  • Temperature: Control creativity (0-1, higher = more creative)
  • Stream: Toggle real-time streaming responses
  • Voice Settings: Configure voice input/output options
  • Dark Mode: Toggle between light and dark themes
  • Auto Speak: Toggle automatic text-to-speech

All settings are saved automatically and persist across browser sessions.

📁 Project Structure

anthropic-claude-chatbot 
anthropic-claude-chatbot/
├── index.html          # Main HTML file with chatbot interface
├── styles.css          # CSS styling with modern design
├── script.js           # JavaScript functionality and API integration
├── advanced-features.js # Advanced features module
├── app.py             # Flask backend server with Claude API
├── config.py          # Python configuration settings
├── setup.py           # Setup helper script
├── requirements.txt   # Python dependencies
├── env.example        # Environment variables template
├── .gitignore         # Git ignore rules
├── README.md          # Project overview and quick start guide
├── PROJECT_INFO.md    # Project information
├── ADVANCED_FEATURES.md # Advanced features documentation
├── QUICK_START.md     # Quick start guide
├── TROUBLESHOOTING.md # Troubleshooting guide
├── SETUP_ENV.md       # Environment setup guide
├── CHECKLIST.md       # Project checklist
├── RELEASE_NOTES.md   # Release notes
├── GITHUB_RELEASE_GUIDE.md # GitHub release guide
├── LICENSE            # MIT License file
├── run.bat            # Windows start script
├── run.sh             # Linux/Mac start script
├── start.bat          # Alternative Windows start script
└── start-frontend.bat # Frontend-only start script

Note: Edit config.py and .env to configure API settings and behavior.

📄 Detailed File Descriptions

📄 index.html

Purpose: Main HTML file with chatbot interface. Contains the complete UI structure and layout.

Key Features:

  • Chat messages container with markdown support
  • Input area with text, voice, and file upload
  • Control buttons (Sessions, History, Export, Dark Mode, Settings)
  • Settings panel for model configuration
  • Statistics panel for API usage
  • Code syntax highlighting

🎨 styles.css

Purpose: CSS styling with modern design. Contains all visual styles and animations.

Key Features:

  • Modern gradient backgrounds
  • Responsive design
  • Dark mode support
  • Smooth animations
  • Mobile-friendly layout

⚙️ script.js

Purpose: JavaScript functionality and Claude API integration. Core chatbot logic and frontend features.

Key Features:

  • Claude API integration
  • Message handling and conversation management
  • Voice input/output functionality
  • File upload and processing
  • Markdown rendering
  • Code syntax highlighting
  • Settings management

🚀 advanced-features.js

Purpose: Advanced features module with additional functionality.

Key Features:

  • Voice input/output features
  • File upload handling
  • Multiple chat sessions
  • Export functionality
  • Statistics tracking

🐍 app.py

Purpose: Flask backend server with Claude API integration.

Key Features:

  • RESTful API endpoints
  • Claude API integration
  • Streaming response support
  • Error handling
  • CORS configuration

⚙️ config.py

Purpose: Python configuration settings and constants.

Key Features:

  • Anthropic API client initialization
  • Default model settings
  • Configuration management
  • Environment variable handling

📖 README.md

Purpose: Project overview and quick start guide. Provides introduction, features, installation instructions, and usage examples.

Contents:

  • Project description
  • Features list
  • Installation guide
  • Usage instructions
  • Browser compatibility
  • Support information

📝 RELEASE_NOTES.md

Purpose: Release notes. Documents features, changes, and updates in the current version.

Contents:

  • Release information
  • Feature list
  • Technical details
  • Changelog

⚖️ LICENSE

Purpose: License file. Contains the license text and copyright information.

License Type: MIT License

Copyright: © 2026 RSK World

🚫 .gitignore

Purpose: Git ignore rules. Specifies files and directories that should not be tracked by version control.

Excluded Items:

  • IDE configuration files
  • OS-specific files
  • Log files
  • Build artifacts

📊 File Statistics

25+
Total Files
8
Core Files
9
Documentation Files
5000+
Lines of Code
20+
Advanced Features
200K
Context Tokens

📌 File Organization

Frontend Files: index.html, styles.css, script.js, advanced-features.js

Backend Files: app.py, config.py, setup.py

Documentation: README.md, PROJECT_INFO.md, ADVANCED_FEATURES.md, QUICK_START.md, TROUBLESHOOTING.md, SETUP_ENV.md, CHECKLIST.md, RELEASE_NOTES.md, GITHUB_RELEASE_GUIDE.md

Configuration: config.py, env.example, .gitignore

Scripts: run.bat, run.sh, start.bat, start-frontend.bat

Full-Stack: Python Flask backend + JavaScript frontend with Claude API integration

🚀 Advanced Features Details

1. Claude API Integration

Seamless integration with Anthropic's Claude API for advanced conversational AI. Supports multiple Claude models (Sonnet, Opus, Haiku) with configurable parameters.

2. Long Context Support

Handle extended conversations with up to 200K tokens of context. Perfect for detailed discussions, document analysis, and maintaining context across long interactions.

3. Advanced Reasoning

Leverage Claude's powerful reasoning capabilities for complex problem-solving, coding challenges, mathematics, and multi-step tasks with superior understanding.

4. Multi-Modal Support

Support for text, images, and documents. Upload files for Claude to analyze, understand, and discuss visual content and various document formats.

5. Voice Input/Output

Speech recognition for voice input and text-to-speech for voice responses. Enable hands-free interaction with Claude using voice commands.

6. Multiple Chat Sessions

Create and manage multiple conversation threads for different topics or projects. Each session maintains its own context and history.

7. Code Syntax Highlighting

Beautiful code rendering with syntax highlighting for multiple programming languages. Code blocks are automatically formatted and highlighted.

8. Markdown Rendering

Rich text formatting support with full markdown rendering including tables, lists, links, code blocks, and more for enhanced readability.

9. Streaming Responses

Real-time token streaming for faster response display. See responses appear token-by-token for improved user experience.

10. API Usage Tracking

Monitor token usage, API statistics, and costs with detailed tracking. Track input/output tokens and session analytics.

11. Export & Import

Export conversation history as PDF or TXT files. Import/export settings for easy configuration management across devices.

12. Dark Mode & Customization

Toggle between light and dark themes. Customizable model settings, temperature, max tokens, and UI preferences with auto-save functionality.

🔧 Troubleshooting

API Key Issues

  • Ensure your .env file contains a valid ANTHROPIC_API_KEY starting with sk-ant-
  • Check that the API key is correctly formatted and not expired
  • Verify your API key has sufficient credits in Anthropic Console
  • Make sure the .env file is in the project root directory
  • Restart the Flask server after updating the API key

Flask Server Issues

  • Server not starting: Check Python version (3.8+), verify dependencies installed with pip install -r requirements.txt
  • Port 5000 in use: Change port in .env file or stop other applications using port 5000
  • Import errors: Ensure virtual environment is activated, reinstall dependencies
  • CORS errors: Verify Flask-CORS is installed and enabled in app.py
  • Connection refused: Check firewall settings, ensure server is running on correct port

Frontend Connection Issues

  • Failed to fetch: Ensure Flask server is running, check API_BASE_URL in script.js
  • CORS errors: Make sure Flask-CORS is installed and configured in backend
  • Server offline indicator: Check server status at http://localhost:5000/api/health
  • Port mismatch: Verify frontend API_BASE_URL matches backend port

Common Issues

  • API key not found: Create .env file from env.example and add your API key
  • Module not found: Install dependencies with pip install -r requirements.txt
  • Response errors: Check API key validity, verify credits, check Anthropic API status
  • File upload not working: Check file size limits, supported formats, and Flask file handling configuration
  • Streaming not working: Verify streaming is enabled in settings and backend supports streaming

📋 Requirements

Backend Requirements: - Python 3.8 or higher - Flask web framework - Anthropic Python SDK - Flask-CORS for CORS support Frontend Requirements: - Modern Web Browser (Chrome, Edge, Safari, Firefox) - JavaScript ES6+ support - LocalStorage API - Web Speech API (for voice features, optional) API Requirements: - Anthropic API Key (get from console.anthropic.com) - Active internet connection for API calls Python Dependencies (see requirements.txt): - anthropic - flask - flask-cors - python-dotenv Optional Dependencies: - Voice features require Web Speech API (Chrome/Edge recommended) - File upload requires modern browser with File API support

Browser Compatibility: Chrome, Edge, Safari, or Firefox (Chrome/Edge recommended for voice features).

Python Version: Python 3.8 or higher required for backend server.

Internet Connection: Required for Claude API calls and CDN resources.

🎯 Use Cases

💻 Code Assistance

Get help with coding, debugging, and programming questions

📚 Education & Learning

Learn new concepts, get explanations, and study assistance

📊 Content Analysis

Analyze documents, summarize text, and extract key information

🧮 Problem Solving

Solve complex problems, math equations, and reasoning tasks

✍️ Content Creation

Writing assistance, creative content, and text generation

💬 Customer Support

Build intelligent customer support chatbots and assistants

📎 Document Analysis

Upload and analyze images, PDFs, and documents

🌐 Web Integration

Integrate Claude API into web applications and services

💬 Support

For support, questions, or more projects:

📄 License

This project is provided as-is for educational and development purposes.

MIT License - See LICENSE file for details.

📂 Demo Folder Structure

The demo/ folder contains demonstration and documentation files for this project.

demo/ ├── index.html # This comprehensive documentation page ├── demo.html # Interactive demo interface for testing Claude chatbot ├── style.css # CSS styling for documentation and demo └── script.js # JavaScript for scroll, navigation, and interactions
Try Interactive Demo

📄 Demo Files Description

📄 index.html

Purpose: Comprehensive project documentation and information page. This HTML file contains all details about the Anthropic Claude Chatbot project.

Contents:

  • Complete project overview
  • All features documentation
  • Installation instructions
  • Usage examples
  • Code examples
  • Claude API integration reference
  • Configuration details
  • Detailed file and folder descriptions
  • Project structure
  • Troubleshooting guide
  • Support information

Features:

  • Self-contained HTML with external CSS
  • Responsive design
  • Modern, beautiful UI
  • Well-organized sections
  • Easy navigation with smooth scrolling

🎨 style.css

Purpose: CSS stylesheet file with modern styling for the documentation page.

Features:

  • Modern gradient backgrounds
  • Responsive design
  • Beautiful typography
  • Smooth animations
  • Sticky navigation
  • Scroll progress bar

📜 script.js

Purpose: JavaScript file with interactive features for the documentation page.

Features:

  • Scroll progress bar
  • Back to top button
  • Smooth scrolling navigation
  • Active navigation highlighting
  • Copy to clipboard functionality

🎮 demo.html

Purpose: Interactive demo interface showcasing Anthropic Claude Chatbot features.

Features:

  • Interactive chat interface
  • Sample Claude responses
  • Quick action buttons
  • Feature showcase panel
  • Statistics tracking
  • Beautiful, responsive UI
  • Demo message types (code, explain, creative, math, etc.)

Usage: Open demo.html in your browser to try the interactive demo!

💡 About the Demo Folder

The demo/ folder contains demonstration and documentation files for the Anthropic Claude Chatbot project:

  • Documentation: index.html - Comprehensive HTML documentation page explaining the entire project
  • Interactive Demo: demo.html - Live interactive demo showcasing Claude chatbot features
  • Styling: style.css - CSS stylesheet with modern design
  • Scripts: script.js - JavaScript for scroll, navigation, and interactive features

Note: To view the documentation, open demo/index.html in your browser. To try the interactive demo, open demo.html. Both pages are self-contained and work independently.