MCP App Sample

FanPulse——MCP风扇互动平台

一个演示平台，展示如何 模型上下文协议（MCP） 和那个 MCP应用程序扩展 可以将人工智能辅助的粉丝参与从纯文本转变为交互式视觉体验。

graph LR
    Browser["🌐 Browser
(React App)"]
    LLM["GPT-4o
(GitHub Models)"]
    CS["FanPulse
C# MCP Server
:5001"]
    TS["FanPulse Apps
TS MCP Server
:3001"]
    DB[("fanpulse.db")]

    Browser -->|/api/chat| LLM
    Browser |HTTP| CS
    Browser |HTTP| TS
    CS --> DB
    TS --> DB

里面是什么

要点

FanPulse仪表板允许您提出相同的问题，并立即看到差异：

• 左侧面板（C#服务器） → AI读取JSON并将其总结为文本
• 右侧面板（应用服务器） → 呈现为交互式图表、卡片和表单的相同数据

这使得MCP Apps扩展的值在演示设置中立即可见。

机罩下（X射线）面板

仪表板包括 🔍 幕后 用通俗易懂的语言解释AI+MCP流程的每一步。

• 用打开它 "🔍 在兜帽下” 仪表板标题中的按钮
• 切换选项卡以检查 FanPulse（C#） 或 FanPulse应用程序（TS） 管道
• 扩展节点，例如 AI分析, 已选择工具, AI处理，以及 UI已加载 了解为什么选择工具以及如何将结果转化为面向用户的响应

快速开始

先决条件

• .NET 10 SDK
• ≥ 18
• A. 可访问

构建与运行

# 1. Build and seed the database (run the C# server once, then Ctrl+C)
dotnet build FanPulse
dotnet run --project FanPulse   # creates fanpulse.db, then Ctrl+C

# 2. Build the TypeScript MCP server
cd FanPulseApps && npm install && npm run build && cd ..

# 3. Install Dashboard dependencies
cd FanPulseDashboard && npm install && cd ..

# 4. Start all three services (each in its own terminal):

# Terminal 1: C# MCP server (HTTP mode)
dotnet run --project FanPulse -- --http

# Terminal 2: TypeScript MCP server (HTTP mode)
cd FanPulseApps && npm start

# Terminal 3: React Dashboard
cd FanPulseDashboard
$env:GITHUB_TOKEN = "ghp_..."
npm run dev

打开 http://localhost:5173 并开始提问：

• *“显示粉丝群”*
• *“我们为Apex Racing提供了哪些商品？”*
• *“为玛丽亚·罗德里格斯推荐商品”*
• *“为球队球衣上的超级粉丝创造20%的促销”*
• *“显示所有粉丝的参与度指标”*

运作原理

1. 这 仪表盘 通过HTTP连接到两个MCP服务器
2. 您的提示已发送至 GPT-4o 两次——一次使用C#工具，一次使用TypeScript工具（按顺序进行以避免速率限制）
3. LLM调用适当的MCP工具来获取数据
4. C#面板显示AI的文本摘要
5. 应用程序面板检查被调用的工具是否具有 ui:// 资源，获取HTML，将其加载到沙盒iframe中，并通过 AppBridge + PostMessageTransport 用于交互式渲染

两台服务器都从同一个SQLite数据库读取数据，因此底层数据是相同的——只是表示方式不同。

与VS代码副本一起使用

您还可以直接在内部使用FanPulseApps服务器 VS代码复制聊天 --不需要仪表板。此回购包括 .vscode/mcp.json 自动配置服务器。

设置

1. 构建先决条件 （如果你还没有）：

   dotnet run --project FanPulse   # creates + seeds fanpulse.db, then Ctrl+C
   cd FanPulseApps && npm install && npm run build && cd ..

1. 在VS Code中打开此项目 并打开 副驾驶聊天 在 代理模式

1. 启动MCP服务器：打开命令选项板(Ctrl+Shift+P) → MCP: List Servers → start fanpulse-apps

1. 提出问题 --试试看 *“显示粉丝群”* 或 *“我们有什么商品？”*

VS Code原生支持MCP Apps扩展，因此交互式UI（细分卡、参与度图表、产品网格等）呈现 直接在聊天面板中主机注入自己的主题——因此，在VS Code的Dark Modern主题中出现的相同UI在另一个兼容MCP的客户端中看起来会有所不同。

注： VS Code显示LLM的文本摘要和交互式UI。这是设计出来的——文本 content 是任何MCP客户端的通用回退，而UI是一个可选的增强功能，有能力的主机可以与之一起渲染。

文档

• FanPulse架构 --使用Mermaid图的系统级架构
• FanPulse应用程序概述 --ext-apps扩展是如何工作的

每个项目都有自己的 自述文件 具有详细的结构、设计决策和扩展指南。

技术栈