trackmcp
Back to directory
ehartye

mcp-chat-demo

View on GitHub

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

1 starsAI & Machine Learning Updated Mar 7, 2025

Documentation

MCP Chat Demo

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

Project Structure

code
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:

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

2. Install dependencies:

bash
npm install

3. Start the development server:

bash
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

Frequently asked questions

What is mcp-chat-demo?

mcp-chat-demo is A sample chat application demonstrating integration with Model Context Protocol (MCP) servers

How do I install mcp-chat-demo?

Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.

Is mcp-chat-demo open source?

Yes — it is hosted on GitHub at https://github.com/ehartye/mcp-chat-demo and has 1 stars.

Related MCP tools

All-Hands-AIopenhands

🙌 OpenHands: Code Less, Make More for the Model Context Protocol. Enhance AI assistants with powerful integrations. Python-based implementation.

64,677 Python
agentartificial-intelligencechatgpt+6
Mintplex-Labsanything-llm

The all-in-one Desktop & Docker AI application with built-in RAG, AI agents, No-code agent builder, MCP compatibility, and more.

50,686 JavaScript
ai-agentscustom-ai-agentsdeepseek+16
mem0aimem0

Universal memory layer for AI Agents; Announcing OpenMemory MCP - local and secure memory management. Python-based implementation.

42,646 Python
agentsaiai-agents+12
zhayujiechatgpt-on-wechat

基于大模型搭建的聊天机器人，同时支持 微信公众号、企业微信应用、飞书、钉钉 等接入，可选择ChatGPT/Claude/DeepSeek/文心一言/讯飞星火/通义千问/ Gemini/GLM-4/Kimi/LinkAI，能处理文本、语音和图片，访问操作系统和互联网，支持基于自有知识库进行定制企业智能客服。

39,573 Python
aiai-agentchatgpt+17
mudlerlocalai

:robot: The free, Open Source alternative to OpenAI, Claude and others. Self-hosted and local-first. Drop-in replacement for OpenAI, running on consumer-gra...

36,790 Go
aiapiaudio-generation+17
CherryHQcherry-studio

🍒 Cherry Studio is a desktop client that supports for multiple LLM providers. Built for the Model Context Protocol to enhance AI capabilities.

35,025 TypeScript
agentanthropicassistant+6

Run your own MCP server? See who uses it and what to fix.

Measure it with TrackMCP