MCP Chat Demo

A sample chat application demonstrating integration with Model Context Protocol (MCP) servers.

Project Structure

mcp-chat-demo/
├── package.json
├── README.md
├── .gitignore
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── components/
│   │   ├── Chat.tsx
│   │   ├── MessageList.tsx
│   │   ├── MessageInput.tsx
│   │   └── MCPConnection.tsx
│   ├── lib/
│   │   ├── mcp-client.ts
│   │   └── types.ts
│   └── styles/
│       └── main.css
└── public/
    └── index.html

Setup Instructions

1. Clone the repository:

git clone https://github.com/yourusername/mcp-chat-demo.git
cd mcp-chat-demo

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Features

• Connect to local or remote MCP servers
• Real-time chat interface
• Support for MCP tools and resources
• Message history
• Error handling and reconnection logic

Technology Stack

• React 18
• TypeScript
• Vite
• TailwindCSS
• MCP TypeScript SDK