Claude Customer Support Agent

An advanced, fully customizable customer support chat interface powered by Claude.

Key Features

• AI-powered chat using Anthropic’s Claude model
• Built-in knowledge base with TF-IDF based search
• Real-time thinking & debug information display
• User mood detection & appropriate agent redirection
• Context viewing - click the context status to see full RAG context
• Highly customizable UI with shadcn/ui components

Clone the repo

git clone https://github.com/anthropic-krzim/claude-code-mcp-demo.git
cd claude-code-mcp-demo

⚙️ Configuration

Before running the application, you need to set up your API key.

Anthropic API Key

1. Visit console.anthropic.com
2. Sign up or log in to your account
3. Click on “Get API keys”
4. Copy the key and save it for the next step

Environment Setup

Create a .env.local file in the root directory with the following:

ANTHROPIC_API_KEY=your_anthropic_api_key_here

Important: Never commit your .env.local file to version control.

GitHub MCP Setup (Optional)

To enable GitHub integration with Claude via MCP (Model Context Protocol):

1. Get a GitHub Personal Access Token:

   • Go to GitHub Settings > Developer settings > Personal access tokens
   • Click “Generate new token (classic)” or use “Fine-grained personal access tokens” for better security
   • Give it a descriptive name (e.g., “Claude MCP”)

   For Classic Token, select these scopes:

   • repo - Full control of private repositories

   For Fine-grained Token (Recommended):

   • Repository access: Select only this specific repository

   • Repository permissions:

     • Read access to: metadata, commit statuses
     • Read and Write access to: code, issues, pull requests

   • Generate and copy the token

2. Add the token to your .env.local:

   GITHUB_PERSONAL_ACCESS_TOKEN=your_github_token_here
   

3. Run the setup script:

   ./setup-github-mcp.sh
   

This will configure Claude to access your GitHub repositories through the MCP server, enabling features like code search, issue management, and pull request operations directly from Claude.

Getting Started

1. Clone this repository
2. Ensure you’ve created the .env.local file with your API key (see Configuration above)
3. Install dependencies: npm install
4. Run the development server: npm run dev
5. Open http://localhost:3000 in your browser

Development Scripts

• npm run dev - Start development server with left sidebar only
• npm run dev:full - Start with both sidebars enabled
• npm run dev:left - Start with left sidebar only
• npm run dev:right - Start with right sidebar only
• npm run dev:chat - Start with chat interface only (no sidebars)
• npm run build - Build for production