AI导哈

交互式数据可视化应用

一个基于MCP协议、提供交互式数据可视化的应用，支持API无关设计、MCP工具集成和主机样式适配。

  • by SergioCantera
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 SergioCantera/mcp-apps

使用说明

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 install

2.配置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=rickandmorty

3.构建应用程序

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

三个关键部分

  1. MCP工具 (server.ts - get_example)

    • 将位置和天气类型作为输入
    • 通过ExampleService调用示例API
    • 返回格式化的JSON

  2. 示例服务 (src/services/exampleService.ts)

    • 提取示例数据
    • 处理API规范化
    • 支持多个提供商的框架

  3. React组件 (src/mcp-app.tsx)

    • 通过以下方式接收工具输入/输出 useApp 钩子
    • 漂亮地显示示例数据
    • 使用宿主CSS变量进行主题集成

相关 MCP