Sample MCP Apps Chatflow

MCP应用程序聊天流示例

示例MCP服务器，在兼容MCP Apps的聊天客户端中呈现交互式销售分析UI。它包括一个销售指标选择器、基于图表的可视化和PDF报告生成。

条款

此项目是dev.to上发布的MCP Apps系列文章的一部分：

• 第1部分：如何使用MCP Apps在AI Agent聊天流中呈现交互式UI -涵盖了声明UI资源的核心架构模式、实用的设计原则以及如何处理沙盒主机-服务器通信。
• 第2部分：我如何构建基于MCP Apps的销售分析代理UI，并将其部署到Amazon Bedrock AgentCore上 -浏览完整的生产风格MCP Apps聊天流（聊天+工作流），并构建一个交互式销售分析UI，用户可以在其中选择销售区域，选择收入或转化率等指标，获取实时数据，用图表可视化，并创建和下载PDF报告——所有这些都无需离开AI Agent聊天窗口。它还涵盖了如何在Amazon Bedrock AgentCore Runtime上部署开发的TypeScript MCP服务器（为销售分析MCP应用程序提供动力）。

演示

Full Demo of Sample MCP Apps Chatflow

在本地运行

通过执行以下操作在本地运行MCP服务器：

cd /path/to/sample-mcp-apps-chatflow

# Install dependencies
npm install

# Development mode (with hot reload)
npm run dev

成功显示

> sample-mcp-apps-chatflow@1.0.0 dev
> tsx src/index.ts

🚀 MCP Apps Chatflow server running at http://localhost:3000
📡 MCP endpoint: http://localhost:3000/mcp

要从VS Code Insiders连接到此端点，请将以下配置添加到 .vscode/mcp.json:

{
  "servers": {
    "sample-mcp-apps-chatflow": {
      "type": "http",
      "url": "http://localhost:3000/mcp"
    }
  }
}