MCP Quiz

🧩 MCP测验

作为MCP应用程序构建的交互式测验 --在Cursor、VS Code或任何具有丰富React UI而非纯文本的MCP主机中运行。

______________________________________________________________________

📡 MCP客户端配置

MCP服务器有两种使用方式： 超文本传输协议 （服务器在终端本地运行；游标/VS代码连接到它）或 标准 （游标/VS代码启动进程）。建议使用HTTP变体进行本地开发。

🖥️ 在本地运行MCP服务器（HTTP需要）

MCP服务器必须在您的计算机上运行，然后Cursor或VS Code才能使用它。在项目目录中，运行：

npm run build && npm run serve

或使用 npm run dev 以文件监视方式运行。服务器监听 http://localhost:3001/mcp （或由设置的端口 PORT).

🔷 游标（HTTP）

1. 打开MCP设置: Cmd + , （Mac）或 Ctrl + , （Windows/Linux）→ 特性 → 主控程序.
2. 编辑配置：单击 编辑配置 打开你的 mcp.json （全球： ~/.cursor/mcp.json，或项目： .cursor/mcp.json).
3. 添加服务器 在...之下 mcpServers:

{
  "mcpServers": {
    "mcp-quiz": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

1. 保存和 重新加载 MCP（或重新启动Cursor）。确保MCP服务器已在本地运行（见上文）。

您还可以通过UI添加它： 添加新的MCP服务器 → 选择HTTP/SSE并输入上面的URL。

🔵 VS代码（HTTP）

1. 打开MCP配置：命令选项板(Ctrl+Shift+P / Cmd+Shift+P) → MCP：打开用户配置 （用户范围）或 MCP：打开工作区文件夹MCP配置 （仅限工作区）。
2. 添加服务器 在...之下 servers （VS代码使用 servers，不 mcpServers).MCP服务器必须在本地运行（见上文）。

{
  "servers": {
    "mcp-quiz": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    }
  }
}

1. 保存文件。该服务器将在Copilot Chat和其他MCP感知功能中可用。

通过UI添加：命令面板→ MCP：添加服务器，然后选择HTTP并输入MCP服务器URL。

⚙️ 可选：stdio（客户端启动进程）

如果您希望Cursor/VS Code启动MCP服务器进程，而不是连接到正在运行的服务器，请使用stdio。替换 ~/code/mcp-quiz 使用您的克隆路径。

光标 (mcp.json → mcpServers):

{
  "mcpServers": {
    "mcp-quiz": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/mcp-quiz && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

VS Code (.vscode/mcp.json 或用户配置→ servers):

{
  "servers": {
    "mcp-quiz": {
      "type": "stdio",
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/mcp-quiz && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

📦 从npm运行（如果已发布）

如果该软件包是全局安装的或通过 npx，配置MCP服务器如下：

光标 --MCP服务器 "command": "npx" 和 "args": ["-y", "mcp-quiz", "--stdio"].

VS Code --MCP服务器 "type": "stdio", "command": "npx", "args": ["-y", "mcp-quiz", "--stdio"].

🏗️ 建筑

┌─────────────────┐     stdio / HTTP      ┌──────────────────────────────────┐
│  MCP Host       │ ◄──────────────────►  │  MCP Server (this repo)           │
│  (Cursor,       │                        │  • Registers quiz tool             │
│   VS Code,      │                        │  • Serves UI resource (HTML)       │
│   Claude, etc.) │                        │  • Handles tool calls (submit,     │
└────────┬────────┘                        │    get questions, results)         │
         │                                 └───────────────┬────────────────────┘
         │ request UI resource / call tools                │
         │                                                 │ reads bundle
         ▼                                                 ▼
┌─────────────────┐                        ┌──────────────────────────────────┐
│  Embedded UI    │   fetch ui://mcp-quiz  │  mcp-app.html (single-file bundle) │
│  (iframe)       │ ◄─────────────────────│  React app via useApp() ↔ host    │
│  Quiz UI        │                        │  & callServerTool() ↔ server       │
└─────────────────┘                        └──────────────────────────────────┘

• 主机 与 MCP服务器 通过stdio或HTTP。服务器声明 工具 （例如“跑步测验”） _meta.ui.resourceUri 指向a UI资源.
• 当用户（或AI）调用该工具时 主机 从服务器获取该资源并将其呈现在沙盒中 内嵌框架The 用户界面 然后使用MCP App SDK回调服务器（例如提交答案、获取问题）和主机（例如发送消息、打开链接）。

📋 概述

• MCP服务器 它公开了一个带有链接的React UI的测验工具。
• 工具+资源注册：一个工具，一个UI资源URI(ui://mcp-quiz/mcp-app.html).
• React用户界面 使用 useApp() 挂钩与主持人交谈 callServerTool 与服务器对话。
• 其他应用程序API： sendMessage, sendLog, openLink.

📁 关键文件

🚀 入门指南

npm install
npm run dev

这将启动HTTP MCP服务器（默认 http://localhost:3001/mcp)在dev中，监视UI捆绑包。使用 MCP客户端配置 上面连接光标或VS代码。

🔄 运作原理

1. 服务器 注册MCP 测验 带有元数据的工具，将其链接到UI资源 ui://mcp-quiz/mcp-app.html.
2. 当工具 调用 （由用户或主机中的AI） 主机 从服务器请求该资源，并在iframe中呈现返回的HTML。
3. 这 测验用户界面 在iframe中加载，使用 useApp() 获取应用程序API，并调用 服务器工具 （例如“获取问题”、“提交答案”、“显示结果”） callServerTool()服务器以数据进行响应；UI更新，并且可以通过主机发送消息或打开链接。

📦 构建系统

UI被捆绑到 单个HTML文件 Vite和 vite-plugin-singlefile --看 vite.config.ts该文件是服务器用作UI资源的文件，因此不需要额外的静态宿主。对于加载外部资产，MCP应用程序可以设置 _meta.ui.csp.resourceDomains 在工具的UI元数据中。

📚 参考文献

• 🧩 模型上下文协议（MCP） --官方网站和 规格
• 💬 MCP-UI — MCP-UI简介 以及用于与MCP构建交互式聊天界面的工具