AI导哈

AI MCP前端界面

这是一个基于Angular 20.3的前端项目，用于与AI驱动的MCP代理交互，支持通过自然语言请求数据并以表格或图表形式动态渲染。

  • by dmarcosl
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 dmarcosl/ai-mcp-front

使用说明

AI MCP正面

这个项目很简单 角度20.3 用于与AI驱动的MCP代理交互的前端。

它通过以下方式连接到AI编排器后端 POST /agent 端点，并将响应动态呈现为表格或图表。

UI完全由以下组件构建 角形材料 和 Chart.js，使用允许您以自然语言请求数据的对话界面，例如：

“在表格中显示所有销售额”→ 表格可视化
“在饼图中显示它们”→ 饼图可视化

您可以单独使用它，也可以与其他解决方案一起使用：https://github.com/dmarcosl/spring-ai-mcp-demoents.

🐳 使用Docker运行

1.塑造形象

docker build -t ai-mcp-front .

2.运行容器

docker run --rm -p 8080:80 ai-mcp-front

该应用程序将在以下网址提供：

http://localhost:8080

3.额外（可选）

默认情况下，它期望后端代理位于：

http://localhost:8086/agent

您可以在中进行配置 src/app/app.config.ts 通过更改：

{ provide: 'AGENT_BASE_URL', useValue: 'http://localhost:8086' }

🧩 JSON响应示例（来自后端）

只聊天

{
  "assistantText": "The requested combination of item and color is not available."
}

表格

{
  "assistantText": "Here is the current stock by item and color.",
  "uiSpec": {
    "type": "table",
    "title": "Current Stock",
    "columns": [
      { "id": "name", "header": "Item" },
      { "id": "color", "header": "Color" },
      { "id": "quantity", "header": "Units" }
    ],
    "rows": [
      { "name": "Pants", "color": "Pink", "quantity": 34 },
      { "name": "Pants", "color": "Green", "quantity": 15 },
      { "name": "Skirt", "color": "Black", "quantity": 22 }
    ]
  }
}

饼图

{
  "assistantText": "Here’s the stock distribution by item and color.",
  "uiSpec": {
    "type": "pie",
    "title": "Stock Distribution",
    "labels": ["Pants Pink", "Pants Green", "Skirt Black"],
    "data": [34, 15, 22]
  }
}

柱状图

{
  "assistantText": "Here are the total sales by item and color.",
  "uiSpec": {
    "type": "bar",
    "title": "Units Sold",
    "labels": ["Pants Pink", "Pants Green", "Skirt Black"],
    "data": [34, 15, 22]
  }
}

🧠 特性

组件 描述
聊天面板 用于向发送提示的对话界面 /agent 后端。
渲染面板 以表格、条形图或饼图的形式动态显示数据。
UiSpec发动机 响应式服务，将后端JSON响应映射到Material和Chart.js组件。

🪪 许可证

麻省理工学院

相关 MCP