MCP cover image
See in Github
2024-12-02

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

1

Github Watches

1

Github Forks

1

Github Stars

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

相关推荐

  • https://suefel.com
  • Latest advice and best practices for custom GPT development.

  • NiKole Maxwell
  • I craft unique cereal names, stories, and ridiculously cute Cereal Baby images.

  • Yusuf Emre Yeşilyurt
  • I find academic articles and books for research and literature reviews.

  • https://maiplestudio.com
  • Find Exhibitors, Speakers and more

  • https://duotify.com
  • Professional code reviewer for a unique language, friendly and helpful.

  • Carlos Ferrin
  • Encuentra películas y series en plataformas de streaming.

  • Bora Yalcin
  • Evaluator for marketplace product descriptions, checks for relevancy and keyword stuffing.

  • Andris Teikmanis
  • Latvian GPT assistant for developing GPT applications

  • Joshua Armstrong
  • Confidential guide on numerology and astrology, based of GG33 Public information

  • https://cantaspinar.com
  • Summarizes videos and answers related questions.

  • Elijah Ng Shi Yi
  • Advanced software engineer GPT that excels through nailing the basics.

  • Contraband Interactive
  • Emulating Dr. Jordan B. Peterson's style in providing life advice and insights.

  • apappascs
  • Discover the most comprehensive and up-to-date collection of MCP servers in the market. This repository serves as a centralized hub, offering an extensive catalog of open-source and proprietary MCP servers, complete with features, documentation links, and contributors.

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

  • modelcontextprotocol
  • Model Context Protocol Servers

  • n8n-io
  • Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

  • ShrimpingIt
  • Micropython I2C-based manipulation of the MCP series GPIO expander, derived from Adafruit_MCP230xx

  • WangRongsheng
  • 🧑‍🚀 全世界最好的LLM资料总结(Agent框架、辅助编程、数据处理、模型训练、模型推理、o1 模型、MCP、小语言模型、视觉语言模型) | Summary of the world's best LLM resources.

  • OffchainLabs
  • Go implementation of Ethereum proof of stake

  • metorial
  • Containerized versions of hundreds of MCP servers 📡 🧠

    Reviews

    4 (1)
    Avatar
    user_jFxHAUFF
    2025-04-15

    The MCP book by fxamauri is a must-read for MCP enthusiasts. It offers a comprehensive understanding of the platform and its applications. The author has done an incredible job simplifying complex concepts, making this book invaluable for both beginners and advanced users. Highly recommend diving into this resource to unlock the full potential of MCP. Check it out here: https://mcp.so/server/mcpbook/fxamauri