Claude Chatbot

A real-time chatbot application using Claude AI, built with Node.js, Express, React, and Socket.io.

Features

• Real-time streaming responses from Claude AI
• WebSocket-based communication for instant messaging
• Session management for conversation history
• Markdown support with syntax highlighting
• Dark mode support
• Responsive design with Tailwind CSS

Prerequisites

• Node.js 18+ installed
• Anthropic API key

Setup

1. Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

ANTHROPIC_API_KEY=your_actual_api_key_here
PORT=3001
CLIENT_URL=http://localhost:5173

2. Frontend Setup

cd frontend
npm install

Running the Application

Start Backend Server

cd backend
npm run dev

The backend will run on http://localhost:3001

Start Frontend Development Server

In a new terminal:

cd frontend
npm run dev

The frontend will run on http://localhost:5173

API Endpoints

• POST /api/chat/sessions - Create a new chat session
• GET /api/chat/sessions/:id/messages - Get messages for a session
• POST /api/chat/sessions/:id/messages - Send a message (non-streaming)
• DELETE /api/chat/sessions/:id/messages - Clear session messages
• GET /health - Health check endpoint

WebSocket Events

• join-session - Join a chat session room
• send-message - Send a message with streaming response
• stream-chunk - Receive streaming text chunks
• message-complete - Receive complete message after streaming

Tech Stack

Backend

• Node.js + TypeScript
• Express.js
• Socket.io
• Anthropic Claude SDK

Frontend

• React + TypeScript
• Vite
• Tailwind CSS
• Socket.io Client
• React Markdown

Project Structure

chatbot/
├── backend/
│   ├── src/
│   │   ├── routes/      # API routes
│   │   ├── services/    # Business logic
│   │   ├── types/       # TypeScript types
│   │   └── index.ts     # Server entry point
│   └── package.json
└── frontend/
    ├── src/
    │   ├── components/   # React components
    │   ├── services/     # API and Socket services
    │   ├── types/        # TypeScript types
    │   └── App.tsx       # Main app component
    └── package.json

License

MIT