呈现问题mcp
一种MCP（模型上下文协议）服务器，使人工智能代理能够使用启发通过原生UI表单收集结构化、经验证的用户输入。
特性
- 6问题类型：文本、数字、布尔值、单选、下拉列表、复选框（具有真正的多选支持！）
- 多选复选框：本机阵列支持选择多个选项
- 全面验证：必填字段、最小/最大值、模式、电子邮件/URI格式
- 类型安全：使用TypeScript和Zod构建，用于运行时验证
- 原生UI：在MCP客户端的本机界面中呈现表单
- 零歧义：消除了数据收集的来回对话
安装
先决条件
- Node.js >= 20.0.0
- MCP兼容客户端（Cursor、Claude Desktop、VS Code等）
入门指南
首先，在客户端安装render-question-mcp服务器。
标准配置 适用于大多数工具：
{
"mcpServers": {
"render-question": {
"command": "npx",
"args": [
"render-question-mcp@latest"
]
}
}
}Claude Code
使用Claude Code CLI添加服务器：
claude mcp add render-question npx render-question-mcp@latestClaude Desktop
添加到您的Claude Desktop配置(~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：
{
"mcpServers": {
"render-question": {
"command": "npx",
"args": ["render-question-mcp@latest"]
}
}
}Cursor
单击按钮安装：
或手动安装：
首选 Cursor Settings → MCP → Add new MCP Server.按你的喜好命名，使用 command 使用命令键入 npx render-question-mcp@latest。您还可以通过单击来验证配置或添加命令参数 Edit.
项目特定配置
创建 .cursor/mcp.json 在项目根目录中：
{
"mcpServers": {
"render-question": {
"command": "npx",
"args": ["render-question-mcp@latest"]
}
}
}VS Code
跟随 MCP安装指南，使用上面的标准配置。
或者，使用VS Code CLI进行安装：
code --add-mcp '{"name":"render-question","command":"npx","args":["render-question-mcp@latest"]}'Cline
通过Cline VS Code扩展设置或更新您的 cline_mcp_settings.json 文件：
{
"mcpServers": {
"render-question": {
"command": "npx",
"args": [
"render-question-mcp@latest"
]
}
}
}Zed
跟随 MCP服务器文档.使用上面的标准配置。
______________________________________________________________________
地方发展
对于本地开发和测试：
{
"mcpServers": {
"render-question": {
"command": "node",
"args": ["/absolute/path/to/render-question-mcp/dist/index.js"],
"env": {
"LOG_LEVEL": "debug"
}
}
}
}______________________________________________________________________
验证安装
安装后，验证渲染问题mcp是否正常工作：
- 重新启动MCP客户端 完全
- 检查连接状态:
- 光标：在设置中查找绿点→ 工具和集成→ MCP工具 - 克劳德桌面：检查可用工具中的“render_question” - VS Code：在GitHub Copilot设置中验证
- 使用简单查询进行测试:
Ask me for my name and email address如果你看到AI代理使用 render_question 工具并显示本机表单，您就准备好了！ 🎉
用法
服务器提供了一个工具： render_question
基本示例：单个文本字段
{
"questions": [
{
"id": "email",
"type": "text",
"label": "What is your email address?",
"validation": {
"required": true,
"format": "email"
},
"helpText": "We'll use this for project notifications",
"placeholder": "developer@example.com"
}
]
}示例：多问题表单
{
"title": "Developer Onboarding",
"description": "Help us set up your development environment",
"questions": [
{
"id": "name",
"type": "text",
"label": "Your full name",
"validation": {
"required": true,
"minLength": 2
},
"placeholder": "Jane Doe"
},
{
"id": "experience",
"type": "number",
"label": "Years of experience with TypeScript",
"validation": {
"required": true,
"min": 0,
"max": 50
}
},
{
"id": "role",
"type": "dropdown",
"label": "What's your primary role?",
"options": [
{ "value": "frontend", "label": "Frontend Developer" },
{ "value": "backend", "label": "Backend Developer" },
{ "value": "fullstack", "label": "Full-Stack Developer" },
{ "value": "devops", "label": "DevOps Engineer" }
],
"validation": { "required": true }
},
{
"id": "remote",
"type": "boolean",
"label": "Are you working remotely?",
"default": true
}
]
}问题类型
文本输入
{
"id": "username",
"type": "text",
"label": "Username",
"validation": {
"required": true,
"minLength": 3,
"maxLength": 20,
"pattern": "^[a-zA-Z0-9_]+$"
},
"placeholder": "john_doe"
}数字输入
{
"id": "port",
"type": "number",
"label": "Port Number",
"validation": {
"required": true,
"min": 1,
"max": 65535
},
"default": 3000
}布尔值（单选框）
{
"id": "agree",
"type": "boolean",
"label": "I agree to the terms and conditions",
"validation": {
"required": true
}
}单选按钮（单选）
{
"id": "theme",
"type": "radio",
"label": "Select a theme",
"options": [
{ "value": "light", "label": "Light Mode" },
{ "value": "dark", "label": "Dark Mode" },
{ "value": "auto", "label": "Auto (System)" }
],
"validation": {
"required": true
}
}下拉菜单（单选）
{
"id": "framework",
"type": "dropdown",
"label": "Choose a framework",
"options": [
{ "value": "react", "label": "React" },
{ "value": "vue", "label": "Vue.js" },
{ "value": "angular", "label": "Angular" },
{ "value": "svelte", "label": "Svelte" }
]
}复选框（多选）✨ 新
{
"id": "features",
"type": "checkbox",
"label": "Select features to enable",
"options": [
{ "value": "auth", "label": "Authentication" },
{ "value": "db", "label": "Database Integration" },
{ "value": "api", "label": "REST API" },
{ "value": "websocket", "label": "WebSocket Support" }
],
"validation": {
"min": 1, // Require at least 1 selection
"max": 3 // Allow maximum 3 selections
},
"helpText": "Choose all features you want to include"
}多选响应格式：
{
"features": ["auth", "db", "api"] // Array of selected values
}验证选项
- 必需的:
boolean-必须填写字段 - 分钟 / 最大:
number-数字的最小值/最大值，或复选框数组的最小项/最大项 - 最小长度 / 最大长度:
number-字符串的最小/最大长度 - 模式:
string-正则表达式模式 - 格式:
"email" | "uri" | "url" | "date" | "date-time"-格式验证 - 错误消息:
string-自定义错误消息
响应格式
该工具返回结构化响应：
{
"answers": {
"name": "Jane Doe",
"experience": 5,
"role": "fullstack",
"remote": true,
"features": ["auth", "db", "api"]
},
"metadata": {
"completedAt": "2025-11-13T10:30:00Z",
"duration": 15000,
"action": "submit"
}
}可能采取的行动：
submit-用户已提交表单cancel-用户取消了对话框decline-用户拒绝回答
发展
设置
pnpm install
pnpm build测试
pnpm test
pnpm test:coverage局部测试
- 构建项目：
pnpm build- 本地链接：
npm link- 配置您的MCP客户端以使用本地构建
- 与MCP检查员或客户进行测试
示例
请参阅 示例 真实世界用例目录：
建筑
src/
├── index.ts # CLI entry point
├── server.ts # MCP server setup
├── stdio.ts # Stdio transport
├── types.ts # TypeScript type definitions
├── elicitation/
│ ├── core.ts # Core elicitation logic
│ └── schemas.ts # Schema builders
└── tools/
├── index.ts # Tool registry
└── render_question.ts # Main tool implementation对于AI代理
看 代理商.md 以获取在人工智能工作流程中有效使用此工具的详细指导。
许可证
麻省理工学院
贡献
欢迎投稿！请阅读投稿指南并提交PR。