AI导哈

计数器SDK演示应用

一个展示MCP Apps SDK的演示应用，包含一个简单的计数器小部件，通过模型上下文协议与AI平台集成。

  • by redfive410
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 redfive410/mcp-apps-demo

使用说明

MCP应用程序演示

一个演示应用程序，展示了MCP Apps SDK和一个简单的计数器小部件，该小部件通过模型上下文协议与AI平台集成。

特性

  • 计数器小部件：具有增量、减量和重置工具的交互式UI
  • MCP服务器：Python FastMCP服务器公开工具和小部件资源
  • 反应前端：使用React和MCP Apps SDK构建的小部件

快速开始

先决条件

  • Node.js 18+
  • Python 3.11+
  • pnpm
  • 紫外线 （Python包管理器）

安装

# Install frontend dependencies
pnpm install

# Install Python dependencies
uv sync

构建

# Build frontend assets
pnpm build

跑

# Start the MCP server
uv run python demo_server/main.py

服务器将在以下时间启动 http://localhost:8000/mcp.

项目结构

├── src/
│   └── demo/
│       ├── index.jsx      # Widget entry point with MCP wrapper
│       ├── demo.jsx       # Main widget component
│       └── demo.css       # Widget styles
├── demo_server/
│   └── main.py            # FastMCP server with tools
├── assets/                # Built widget HTML/CSS/JS
├── build-all.mts          # Build script
└── pyproject.toml         # Python project config

MCP工具

工具 说明
increment 将计数器增加指定数量（默认值：1）
decrement 将计数器减少指定数量（默认值：1）
reset 将计数器重置为零

发展

前端使用 @modelcontextprotocol/ext-apps SDK与 useApp 钩子模式用于处理工具结果和显示模式更改。

部署

A. Dockerfile 和 deploy.sh 包含用于部署到GCP Cloud Run的脚本。

相关 MCP