AI导哈

Webview聊天界面

MCP Webview Host是一个基于网页的聊天应用，支持与Ollama LLMs连接，并允许MCP服务器显示交互式HTML表单、可视化图表和自定义UI组件。

  • by GeorgiaDimaki-AI
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 GeorgiaDimaki-AI/mcp_host

使用说明

MCP网络视图主机

支持交互式网络视图的模型上下文协议（MCP）服务器的本地聊天界面

一个现代的基于网络的聊天应用程序，连接到Ollama LLM，允许MCP服务器显示交互式HTML表单、可视化和自定义UI组件。

什么是MCP？

模型上下文协议（MCP） 是一种标准协议，允许AI助手与外部工具和服务进行交互。将其视为AI的插件-MCP服务器提供了专门的功能（如数据库访问、API集成或自定义工作流），AI可以使用这些功能来帮助用户。

什么是网络视图？

网页浏览量 是MCP服务器可以显示的交互式HTML界面，用于收集用户输入或显示结果。MCP服务器不仅可以返回文本，还可以：

  • 显示数据收集的交互式表单
  • 显示可视化和图表
  • 渲染自定义UI组件
  • 创建多步骤向导

主要特点： Webviews可以直接将数据提交到后端，完全绕过聊天界面。这意味着敏感数据（如密码或信用卡号码）永远不会出现在聊天记录中。

运作原理

1. User asks AI a question
   ↓
2. AI decides to use an MCP tool
   ↓
3. MCP server responds with a webview (HTML)
   ↓
4. User interacts with the form
   ↓
5. Form submits directly to backend via POST
   ↓
6. MCP server processes the data
   ↓
7. AI receives the result and continues

示例流程：

User: "Make a restaurant reservation"
  → AI calls restaurant MCP tool
  → Restaurant form appears
  → User fills in name, date, time
  → Form POSTs to backend
  → Confirmation number returned

快速开始

使用NPX运行（最简单）：

npx @gdimaki-ai/mcp-webview-host

就是这样！服务器将自动启动并在浏览器中打开。

特性

  • 🔌 完全支持MCP协议 -工具、资源、提示
  • 🖼️ 交互式网络视图 -表单、可视化、自定义UI
  • 🔒 安全数据提交 -直接后端POST，绕过聊天
  • ⚡ 实时聊天 -基于WebSocket的通信
  • 🎨 现代用户界面 -React+TypeScript+顺风CSS
  • 🌓 亮/暗模式 -主题支持
  • 🤖 Olama集成 -本地LLM支持

MCP服务器示例

看看 餐厅MCP服务器 在 examples/restaurant-mcp-server.js:

  • 查看带有照片的菜单
  • 使用互动表格进行预订
  • 获取葡萄酒搭配建议
  • 查看厨师特价
  • 安全支付演示（显示绕过聊天的数据）

创建自己的MCP服务器

MCP服务器只是Node.js脚本，它们：

  1. 定义工具（AI可以调用的功能）
  2. 返回响应（文本或HTML网页视图）
  3. 处理表单提交

基本结构：

import { Server } from '@modelcontextprotocol/sdk/server/index.js';

const server = new Server({ name: 'my-server', version: '1.0.0' });

// Define a tool
server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [
    {
      name: 'my_tool',
      description: 'Does something cool',
      inputSchema: { type: 'object', properties: {} }
    }
  ]
}));

// Handle tool calls
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'my_tool') {
    return {
      content: [
        { type: 'text', text: 'Hello!' },
        {
          type: 'resource',
          resource: {
            uri: 'webview://my-form',
            mimeType: 'text/html',
            text: '<html><!-- your HTML form --></html>'
          }
        }
      ]
    };
  }
});

Webview表单

webviews中的表单可以直接提交到后端：

// In your webview HTML
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);

  // POST directly to backend - never touches chat!
  const response = await fetch('/api/mcp/tools/call', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      serverName: 'my-server',
      toolName: 'process_form',
      args: data
    })
  });

  // Handle response
  const result = await response.json();
});

配置

将您的MCP服务器添加到 backend/mcp-config.json:

{
  "mcpServers": {
    "my-server": {
      "command": "node",
      "args": ["./examples/my-server.js"],
      "description": "My custom MCP server",
      "trustLevel": "verified"
    }
  }
}

信任级别：

  • verified -完全访问后端提交
  • trusted -可以显示网络视图
  • unverified -仅文本，无网络视图

本地开发

  1. 安装依赖项：
cd backend && npm install
cd ../frontend && npm install
  1. 启动Ollama：
ollama serve
  1. 启动后端：
cd backend && npm run dev
  1. 启动前端：
cd frontend && npm run dev
  1. 打开http://localhost:5173

建筑

  • 前端：React+TypeScript（端口5173）
  • 后端：Node.js+Express（端口3000）
  • MCP服务器：Node.js脚本（stdio传输）
  • LLM：Ollama（局部推理）
  • 沟通：WebSocket用于聊天，HTTP POST用于表单

安全

Web视图被沙盒化，具有多个安全层：

  1. Iframe沙盒 -受限权限
  2. 内容安全策略 -防止XSS
  3. Dompurify -HTML净化
  4. 直接后端POST -敏感数据绕过聊天
  5. 信任级别 -控制服务器可以做什么

示例用例

  • 数据库工具 -带有表单输入的查询构建器
  • API集成 -OAuth流、凭证收集
  • 数据录入 -结构化数据表格
  • 可视化 -图表、图形、表格
  • 多步向导 -复杂的工作流程
  • 支付处理 -安全付款表格

许可证

麻省理工学院

相关 MCP