mcpserver.so LogoMCPFly
Submit
MCP Chat Demo logo

MCP Chat Demo

by ehartye

Communication/Chatchatreacttypescriptreal-time

A sample chat application demonstrating integration with Model Context Protocol (MCP) servers. It provides a real-time chat interface with MCP tools and resources support.

View on GitHub

Last updated: N/A

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
  1. Install dependencies:
npm install
  1. 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