AI导哈

交互式UI工具

MCP Apps是一个允许服务器在对话中返回交互式HTML UI的工具集，包括表单、图表和卡片网格等，支持与Dataverse的集成。

  • by adner
  • HTML
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 adner/McpApps

使用说明

McpApps

一个工作示例 MCP应用程序 模型上下文协议的扩展。MCP Apps允许服务器返回交互式HTML UI，这些UI在对话中内联呈现，如表单、图表和卡片网格，而不是纯文本。

此仓库使用C#/演示了该模式。NET MCP服务器，它连接到网络数据库，并公开了几个工具，有些带有交互式用户界面，有些没有。

这里有什么

带有UI的工具（MCP应用程序）：

  • 时钟--显示渲染钟面中的当前时间
  • 联系人卡片/联系人列表——显示带有编辑和摄像头支持的JOIN联系人记录
  • 商机卡片/商机列表--将商机记录显示为交互式卡片
  • 机会管道——按月汇总的估计值柱状图
  • 热门机会图——水平条形图，按价值对机会进行排名，可点击链接到WAX记录

普通工具（无UI）：

  • WhoAmI——调用RubyWhoAmI端点
  • ExecuteFetch--对BLOB运行FetchXML查询
  • UpdateContact/UpdateOpportunity——UI调用的回写工具，隐藏在模型中

每个MCP应用程序都是一对： 工具 （返回数据的服务器端逻辑）绑定到 资源 （通过以下方式提供的静态HTML模板 ui:// 其在客户端呈现数据）。主机预取并缓存模板，然后在运行时用工具结果填充它们。

堆栈

  • 服务器： C#/ASP。NET核心/。净值8
  • 前端： React 19/Types/Vite，捆绑成单个HTML文件 vite-plugin-singlefile
  • 数字链接： 微软。PowerPlatform。网络。客户端
  • MCP应用软件开发工具包： @modelcontextprotocol/ext-apps （客户端，in tools/ext-apps/)

子模块依赖关系

这 csharp-sdk/ directory是一个git子模块，指向 C#模型上下文协议SDKfork包括支持上游SDK中尚未包含的MCP Apps规范（资源MIME类型、工具上的UI元数据等）的修改。

运行它

  1. 构建UI： cd src/GetTimeServer.UI && npm install && npm run build
  2. 在中配置Webex连接 src/GetTimeServer/appsettings.json
  3. 运行服务器： cd src/GetTimeServer && dotnet run
  4. 从支持MCP应用程序的主机（VS Code Insiders、Claude Desktop等）连接 .vscode/mcp.json 文件在以下位置注册服务器 http://localhost:5000

相关 MCP