MCP应用程序
提供交互式数据可视化的模型上下文协议（MCP）应用程序。使用TypeScript、React和MCP Apps SDK构建。
🌟 特性
- 交互式用户界面 -与MCP主机（Claude Desktop等）集成的美观、响应灵敏的显示器
- API-抽象设计 -准备与API合作（RickAndMorty API、OpenWeatherMap等）
- MCP工具集成 -将数据作为可由AI模型调用的MCP工具公开
- 主机造型 -使用CSS变量自动适应宿主主题
- 类型安全 -通过Zod验证完全支持TypeScript
- 单文件包 -React应用程序捆绑到一个HTML文件中，便于部署
📋 项目结构
mcp-app/
├── src/
│ ├── services/
│ │ ├── apiClient.ts # Generic HTTP API client
│ │ └── Service.ts # Service abstraction
│ ├── mcp-app.tsx # React MCP App component
│ ├── styles.css # Component styles (host variables)
│ └── main.tsx # React entry point
├── server.ts # MCP server with tool/resource registration
├── index.html # HTML entry point
├── vite.config.ts # Vite config with singlefile plugin
├── tsconfig.json # TypeScript configuration
├── package.json # Dependencies and scripts
├── .env.example # Environment variables template🚀 快速开始
1.安装依赖项
npm install2.配置API
复制示例环境文件并配置API：
cp .env.example .env编辑 .env 设置API凭据：
# Example: Using Open-Meteo (free, no API key needed)
WEATHER_API_BASE_URL=https://api.open-meteo.com/v1
WEATHER_API_PROVIDER=meteo
# Or use RickAndMorty API (free, no API key needed)
WEATHER_API_BASE_URL=https://rickandmortyapi.com/api
WEATHER_API_PROVIDER=rickandmorty3.构建应用程序
npm run build这将React应用程序捆绑到一个HTML文件中 dist/.
4.启动MCP服务器
npm run serve服务器将在可流式http上启动（用于MCP主机集成）。
5.本地测试（可选）
在一个终端中，启动开发服务器：
npm run dev在另一个终端中，启动MCP服务器：
npm run serve🔧 运作原理
建筑
LLM/Host
↓
MCP Server (server.ts)
├─→ Tool: get_example
│ └─→ Calls ExampleService
│ └─→ Calls Example API
└─→ Resource: example-ui
└─→ Serves bundled React app (dist/index.html)
└─→ Displays tool results interactively三个关键部分
- MCP工具 (
server.ts-get_example)
- 将位置和天气类型作为输入 - 通过ExampleService调用示例API - 返回格式化的JSON
- 示例服务 (
src/services/exampleService.ts)
- 提取示例数据 - 处理API规范化 - 支持多个提供商的框架
- React组件 (
src/mcp-app.tsx)
- 通过以下方式接收工具输入/输出 useApp 钩子 - 漂亮地显示示例数据 - 使用宿主CSS变量进行主题集成