help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • Blog
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
anthropic-claude-chatbot
RSK World
anthropic-claude-chatbot
Anthropic Claude Chatbot - Python + Flask + Claude API + JavaScript + AI Chatbot + Conversational AI
anthropic-claude-chatbot
  • __pycache__
  • .env578 B
  • .gitignore669 B
  • ADVANCED_FEATURES.md6.6 KB
  • CHECKLIST.md3 KB
  • GITHUB_RELEASE_GUIDE.md4.6 KB
  • LICENSE1.3 KB
  • PROJECT_INFO.md2.2 KB
  • QUICK_START.md2.8 KB
  • README.md8.5 KB
  • RELEASE_NOTES.md6.6 KB
  • SETUP_ENV.md1.9 KB
  • TROUBLESHOOTING.md5.1 KB
  • advanced-features.js24.9 KB
  • app.py9.7 KB
  • config.py2.4 KB
  • env.example550 B
  • index.html11.4 KB
  • requirements.txt440 B
  • run.bat782 B
  • run.sh713 B
  • script.js21.2 KB
  • setup.py2.5 KB
  • start-frontend.bat683 B
  • start.bat1.6 KB
  • styles.css20.2 KB
.envindex.html
.env
Raw Download
Find: Go to:
# Anthropic Claude Chatbot - Environment Variables
# Project: Anthropic Claude Chatbot
# Year: 2026
#
# Developer Details:
# - Website: https://rskworld.in
# - Email: help@rskworld.in, support@rskworld.in
# - Phone: +91 93305 39277
# - Organization: RSK World

# REQUIRED: Anthropic API Key
# Get your API key from: https://console.anthropic.com/
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# Flask Configuration
FLASK_ENV=development
PORT=5000
HOST=0.0.0.0

# CORS Configuration
CORS_ORIGINS=*

# API Configuration
API_BASE_URL=http://localhost:5000
25 lines•578 B
text
index.html
Raw Download
Find: Go to:
<!--
    Anthropic Claude Chatbot
    Project: Anthropic Claude Chatbot
    Category: OpenAI Integration
    Year: 2026
    
    Developer Details:
    - Website: https://rskworld.in
    - Email: help@rskworld.in, support@rskworld.in
    - Phone: +91 93305 39277
    - Organization: RSK World
    - Founder: Molla Samser
    - Designer & Tester: Rima Khatun
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anthropic Claude Chatbot - RSK World</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.1/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div class="container">
        <header class="chat-header">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-robot"></i>
                    <h1>Claude Chatbot <span class="logo-subtitle">by <a href="https://rskworld.in" target="_blank" title="RSK World - Free Programming Resources">RSK World</a></span></h1>
                </div>
                <div class="header-actions">
                    <button class="header-btn" id="sessionsBtn" title="Chat Sessions">
                        <i class="fas fa-comments"></i>
                        <span id="sessionCount">1</span>
                    </button>
                    <button class="header-btn" id="historyBtn" title="Chat History">
                        <i class="fas fa-history"></i>
                    </button>
                    <button class="header-btn" id="exportBtn" title="Export Chat">
                        <i class="fas fa-download"></i>
                    </button>
                    <button class="header-btn" id="darkModeBtn" title="Toggle Dark Mode">
                        <i class="fas fa-moon"></i>
                    </button>
                </div>
                <div class="header-info">
                    <span class="status-indicator" id="statusIndicator">
                        <i class="fas fa-circle"></i> Ready
                    </span>
                    <span class="api-stats" id="apiStats" title="API Usage">
                        <i class="fas fa-chart-line"></i> <span id="tokenCount">0</span>
                    </span>
                </div>
            </div>
        </header>

        <main class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="welcome-message">
                    <div class="welcome-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h2>Welcome to Claude Chatbot</h2>
                    <p>Experience advanced conversational AI with Anthropic Claude. Ask me anything!</p>
                    <div class="feature-list">
                        <span class="feature-tag"><i class="fas fa-check"></i> Long Context Support</span>
                        <span class="feature-tag"><i class="fas fa-check"></i> Advanced Reasoning</span>
                        <span class="feature-tag"><i class="fas fa-check"></i> Safe AI Interactions</span>
                    </div>
                </div>
            </div>

            <div class="chat-input-container">
                <div class="input-toolbar">
                    <button class="toolbar-btn" id="voiceInputBtn" title="Voice Input">
                        <i class="fas fa-microphone"></i>
                    </button>
                    <button class="toolbar-btn" id="voiceOutputBtn" title="Voice Output">
                        <i class="fas fa-volume-up"></i>
                    </button>
                    <button class="toolbar-btn" id="templateBtn" title="Quick Templates">
                        <i class="fas fa-lightbulb"></i>
                    </button>
                </div>
                <div class="input-wrapper">
                    <input type="file" id="fileInput" accept="image/*,.pdf,.txt,.doc,.docx" style="display: none;">
                    <button class="attach-btn" id="attachBtn" title="Attach file">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <textarea 
                        id="messageInput" 
                        placeholder="Type your message here... (Press Enter to send, Shift+Enter for new line)"
                        rows="1"
                    ></textarea>
                    <button class="send-btn" id="sendBtn" title="Send message">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <div class="input-footer">
                    <span class="char-count" id="charCount">0 characters</span>
                    <span class="model-info">
                        Powered by <a href="https://rskworld.in" target="_blank" title="RSK World - Free Programming Resources">RSK World</a> | Anthropic Claude API
                    </span>
                    <span class="search-box">
                        <input type="text" id="searchInput" placeholder="Search in chat...">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </div>
        </main>

        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <h3>Settings</h3>
                <button class="close-sidebar" id="closeSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="sidebar-content">
                <div class="setting-group">
                    <label for="modelSelect">Model:</label>
                    <select id="modelSelect">
                        <option value="claude-3-5-sonnet-20241022">Claude 3.5 Sonnet</option>
                        <option value="claude-3-opus-20240229">Claude 3 Opus</option>
                        <option value="claude-3-sonnet-20240229">Claude 3 Sonnet</option>
                        <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
                    </select>
                </div>
                <div class="setting-group">
                    <label for="maxTokens">Max Tokens:</label>
                    <input type="number" id="maxTokens" value="1024" min="1" max="4096">
                </div>
                <div class="setting-group">
                    <label for="temperature">Temperature:</label>
                    <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7">
                    <span id="temperatureValue">0.7</span>
                </div>
                <div class="setting-group">
                    <label>
                        <input type="checkbox" id="streamResponse"> Stream Response
                    </label>
                </div>
                <div class="setting-group">
                    <label>
                        <input type="checkbox" id="autoVoiceOutput"> Auto Voice Output
                    </label>
                </div>
                <div class="setting-group">
                    <label for="voiceLanguage">Voice Language:</label>
                    <select id="voiceLanguage">
                        <option value="en-US">English (US)</option>
                        <option value="en-GB">English (UK)</option>
                        <option value="es-ES">Spanish</option>
                        <option value="fr-FR">French</option>
                        <option value="de-DE">German</option>
                    </select>
                </div>
                <div class="setting-group">
                    <button class="btn-secondary" id="exportSettings">
                        <i class="fas fa-file-export"></i> Export Settings
                    </button>
                    <button class="btn-secondary" id="importSettings">
                        <i class="fas fa-file-import"></i> Import Settings
                    </button>
                </div>
                <div class="setting-group">
                    <button class="btn-clear" id="clearChat">
                        <i class="fas fa-trash"></i> Clear Chat
                    </button>
                </div>
            </div>
        </aside>

        <!-- Sessions Sidebar -->
        <aside class="sessions-sidebar" id="sessionsSidebar">
            <div class="sidebar-header">
                <h3>Chat Sessions</h3>
                <button class="close-sidebar" id="closeSessionsSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="sidebar-content">
                <button class="btn-primary" id="newSessionBtn">
                    <i class="fas fa-plus"></i> New Session
                </button>
                <div class="sessions-list" id="sessionsList">
                    <!-- Sessions will be dynamically added here -->
                </div>
            </div>
        </aside>

        <!-- Templates Modal -->
        <div class="modal" id="templatesModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Quick Templates</h3>
                    <button class="close-modal" id="closeTemplatesModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="templates-grid" id="templatesGrid">
                        <!-- Templates will be dynamically added -->
                    </div>
                </div>
            </div>
        </div>

        <!-- File Preview Modal -->
        <div class="modal" id="filePreviewModal">
            <div class="modal-content modal-large">
                <div class="modal-header">
                    <h3>File Preview</h3>
                    <button class="close-modal" id="closeFileModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="filePreviewContent"></div>
                </div>
            </div>
        </div>

        <button class="settings-btn" id="settingsBtn" title="Settings">
            <i class="fas fa-cog"></i>
        </button>
    </div>

    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="spinner"></div>
        <p>Claude is thinking...</p>
        <div class="streaming-indicator" id="streamingIndicator" style="display: none;">
            <div class="streaming-dots">
                <span></span><span></span><span></span>
            </div>
            <p>Streaming response...</p>
        </div>
    </div>

    <div class="toast-container" id="toastContainer"></div>

    <script src="script.js"></script>
    <script src="advanced-features.js"></script>
</body>
</html>
252 lines•11.4 KB
markup

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer