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\
\
- Clone the repository:\
git clone https://github.com/yourusername/mcp-chat-demo.git\
cd mcp-chat-demo\\
- Install dependencies:\
npm install\\
- 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