Adaptive Cards MCP

自适应卡MCP

    ](https://www.npmjs.com/package/adaptive-cards-mcp) ](https://www.npmjs.com/package/adaptive-cards-mcp)  ](https://github.com/VikrantSingh01/adaptive-cards-mcp)

一个MCP服务器，帮助人工智能助手为团队、Outlook、Copilot和其他微软界面生成有效、可访问的自适应卡。9个工具，3个指导工作流程，924个测试。

博客： 我构建了一个MCP服务器，使AI在自适应卡方面的表现提高了10倍

演示

Your browser does not support the video tag.

快速开始

无需安装-- npx 自动下载并运行它。

1.添加到您的AI助手

Claude Code

claude mcp add adaptive-cards-mcp -- npx adaptive-cards-mcp

GitHub Copilot (VS Code)

添加 .vscode/mcp.json:

{
  "servers": {
    "adaptive-cards-mcp": {
      "command": "npx",
      "args": ["adaptive-cards-mcp"]
    }
  }
}

Cursor

添加 .cursor/mcp.json:

{
  "mcpServers": {
    "adaptive-cards-mcp": {
      "command": "npx",
      "args": ["adaptive-cards-mcp"]
    }
  }
}

Windsurf

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "adaptive-cards-mcp": {
      "command": "npx",
      "args": ["adaptive-cards-mcp"]
    }
  }
}

Microsoft 365 Copilot / Copilot Studio (HTTP/SSE)

TRANSPORT=sse PORT=3001 npx adaptive-cards-mcp

# With auth enabled
TRANSPORT=sse MCP_API_KEY=your-secret npx adaptive-cards-mcp

1. 打开 Copilot工作室 → 代理→ 工具→ 添加工具→ 新工具→ 模型上下文协议
2. 输入您的MCP服务器URL（例如。， https://your-server.azurewebsites.net/sse)
3. 选择要公开的工具

OpenAI ChatGPT

1. 启用 开发者模式 在ChatGPT设置中
2. 转到“设置”→ 连接器→ 创建
3. 输入您的MCP服务器HTTPS URL

2.开始使用它

用自然语言问你的人工智能助手：

> Create an expense approval card for Teams

> Convert this JSON data into an Adaptive Card table

> Validate this card and fix accessibility issues

> Make this card work on Outlook (v1.4)

AI会选择正确的工具，生成有效的卡片，对其进行验证，并返回可直接粘贴到生产环境中的JSON 自适应卡片设计器 预览。

用法

自然语言（推荐）

描述你需要什么——人工智能会找出要调用哪些工具：

审批和工作流程：

> Create an expense approval card for Teams with requester photo, amount,
  category, line items, and approve/reject/comment buttons

> Build a time-off request card — employee name, dates, remaining PTO balance,
  manager approval with optional rejection reason

通知和警报：

> Create a CI/CD deployment notification: service name, environment, build number,
  commit SHA, deploy status with rollback button

> Generate a PagerDuty-style incident alert card — severity P1, affected service,
  start time, on-call engineer, acknowledge/escalate actions

数据和报告：

> Here's our Q1 sales data, turn it into a card:
  [{"region":"APAC","revenue":1250000,"growth":"12%"},
   {"region":"EMEA","revenue":980000,"growth":"8%"},
   {"region":"Americas","revenue":2100000,"growth":"15%"}]

> Convert this CSV to a card:
  Employee,Department,Start Date,Status
  Jane Kim,Engineering,2026-01-15,Active
  Bob Lee,Design,2026-02-01,Active
  Carol Wu,PM,2026-03-10,Onboarding

表格和输入：

> Create an employee onboarding checklist — new hire name, start date,
  assigned buddy, IT setup tasks with checkboxes, and a submit button

> Build a customer feedback survey card with a 1-5 star rating,
  comment field, and NPS score dropdown

配置文件和状态：

> Create a team member profile card with photo, name, title, department,
  skills tags, and contact buttons for email/chat/calendar

> Build a service health dashboard card showing 5 microservices
  with status indicators (healthy/degraded/down) and last check time

跨主机和版本控制：

> This card works in Teams but breaks in Outlook — fix it
> Make this card work on Webex (v1.3 only, no Table, no Action.Execute)
> Downgrade this v1.6 card to v1.4 for Viva Connections

验证和优化：

> Validate this card and tell me what's wrong — I'm getting render errors
> Make this card accessible — it needs to work with screen readers
> This card is too complex, optimize it for performance and compact layout

Slash命令（MCP提示）

对于有指导的多步骤工作流程，请直接使用内置提示：

创建卡片：

> /adaptive-cards-mcp:create-adaptive-card
  description: "Expense approval with requester photo, line items table, total amount,
                and approve/reject buttons with comment field"
  host: teams
  intent: approval

运行：生成→ 验证→ 优化→ 主机配置

> /adaptive-cards-mcp:create-adaptive-card
  description: "CI/CD deployment notification with service name, environment,
                build number, status badge, and rollback action"
  host: teams
  intent: notification

> /adaptive-cards-mcp:create-adaptive-card
  description: "Employee profile card with photo, name, title, department,
                contact info, and skills tags"
  host: outlook
  intent: profile

将数据转换为卡：

> /adaptive-cards-mcp:convert-data-to-card
  data: [
    { "task": "Review PR #482", "assignee": "Jane", "due": "2026-03-21", "status": "pending" },
    { "task": "Deploy hotfix v2.1.3", "assignee": "Bob", "due": "2026-03-19", "status": "in-progress" },
    { "task": "Update API docs", "assignee": "Carol", "due": "2026-03-22", "status": "done" }
  ]
  title: "Sprint Tasks"
  presentation: table

> /adaptive-cards-mcp:convert-data-to-card
  data: { "service": "api-gateway", "cpu": "92%", "memory": "78%", "requests": "12.4k/min",
          "p99_latency": "245ms", "error_rate": "0.3%", "uptime": "99.97%" }
  title: "Service Health — api-gateway"
  presentation: facts

运行：分析数据→ 选择最佳布局→ 验证输出

查看现有卡：

> /adaptive-cards-mcp:review-adaptive-card
  card: { "type": "AdaptiveCard", "version": "1.6", "body": [...your card...] }
  host: outlook

运行：验证架构+可访问性→ 自动修复问题→ 总结报告

npm库（程序化）

要在您自己的代码（机器人、API、CI管道）中使用，请安装该包：

npm install adaptive-cards-mcp

import { generateCard, validateCardFull, dataToCard, optimizeCard } from 'adaptive-cards-mcp';

const result = await generateCard({
  content: "Create a flight status card",
  host: "teams",
  intent: "display"
});

console.log(result.card);       // Adaptive Card JSON
console.log(result.cardId);     // Reference ID for subsequent calls
console.log(result.validation); // Schema + accessibility + host compat

看 库API参考 了解全部细节。

你得到了什么

制卡工具归还 两个干净的块 --可以复制的JSON卡，以及元数据摘要：

{ "type": "AdaptiveCard", "version": "1.6", "body": [ ... ], "actions": [ ... ] }

---

**Validation:** Valid
**Accessibility Score:** 100/100
**Elements:** 7 | **Nesting Depth:** 2 | **Version:** 1.6
**Card ID:** card-abc123
**Steps:** generate → validate → optimize
**Try it out:** Paste the card JSON into the [Adaptive Cards Designer](https://adaptivecards.microsoft.com/designer)
**Local Preview:** file:///tmp/ac-preview-xyz.html

工具、提示和用法

参考

MCP工具（9）

MCP提示（3）

MCP资源（5）+模板（2）

主机兼容性

配置

注： 当通过MCP（Claude Code、Copilot、Cursor）使用时，主机LLM提供智能-不需要API密钥。仅为独立/库使用设置API密钥。

遥测和隐私

遥测是 选择加入 默认情况下禁用。启用后，服务器将收集 匿名使用指标，并将汇总数据发送给PostHog，以帮助改进项目。

如何启用：

• VS代码扩展名： 首次安装时会出现一次性同意提示。你可以

在“设置”中随时更改它→ 自适应卡→ 遥测。

• CLI/MCP服务器： 集 MCP_TELEMETRY=true 在您的环境中，或编辑

~/.adaptive-cards-mcp/config.json 并设置 "telemetry": true.

发送内容： 工具名称、调用次数、持续时间、错误率、平台（OS）、， 节点版本、包版本、传输类型。

从未发送的内容： 卡内容、用户提示、数据有效载荷、IP地址、， 文件路径、环境变量。

每次服务器启动时都会生成一个随机会话ID——没有持久性 标识符跨会话存储。

要禁用： 集 MCP_TELEMETRY=false 或保持未配置（默认为关闭）。

发展

cd packages/core
npm install
npm run build         # TypeScript + copy data files
npm test              # 924 tests (vitest)
npm run test:coverage # With coverage report
npm run lint          # TypeScript type check
npm run lint:eslint   # ESLint check
npm run format        # Prettier formatting

本地测试

烟雾测试所有工具和提示：

./test-mcp-tools.sh --local     # 28 tests — all 9 tools with real-world scenarios
./test-mcp-prompts.sh --local   # 10 tests — all 3 prompts (guided workflows)
./test-mcp-tools.sh             # same tests against published npm package
./test-mcp-prompts.sh           # same tests against published npm package

MCP检查员（可视化UI）：

cd packages/core && npm run build
npx @modelcontextprotocol/inspector node dist/server.js
# Opens http://localhost:6274 — pick a tool, enter params, click Run

终端（stdio）：

cd packages/core
echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}
{"jsonrpc":"2.0","id":2,"method":"tools/call","params":{"name":"generate_card","arguments":{"content":"expense approval card","intent":"approval","host":"teams"}}}' \
  | node dist/server.js 2>/dev/null | tail -1 | python3 -m json.tool

SSE模式：

TRANSPORT=sse PORT=3001 node packages/core/dist/server.js
curl http://localhost:3001/health

建筑

packages/core/src/
├── server.ts              # MCP server (stdio + SSE, 9 tools, 3 prompts)
├── index.ts               # Library exports
├── types/                 # TypeScript interfaces
├── core/                  # Schema validator, analyzer, accessibility, host compat
├── generation/            # 21 layout patterns, data analyzer, assembler, LLM client
├── tools/                 # 9 tool handlers
├── utils/                 # Logger, input guards, rate limiter, card store, auth, telemetry, preview
└── data/                  # v1.6 schema, 36 examples, host configs

生态系统

v2.3.0的新增功能

• 可访问性100/100 --所有生成的卡现在都包括 speak 财产自动
• 不再有损坏的JSON --内容中的新行经过净化，标题不再截断版本号
• 主机感知生成 — generate_and_validate 自动降级Outlook（v1.4）、Webex（v1.3）的卡版本
• CSV修复 --在构建FactSet/Table卡之前正确解析CSV数据
• 遥测 — /metrics 具有会话跟踪、按工具调用分布、主机/意图使用的端点
• MCP注册表 --列在 MCP官方注册
• E2E测试套件 --28个工具测试+10个带有质量门的即时测试（11分，元素计数）

查看完整 更新日志 了解详情。

链接

• --安装和打包详细信息
• --源代码、问题和贡献
• MCP注册表 --MCP服务器官方列表

相关项目

• 移动适配卡 --跨平台自适应卡渲染器
• openclaw自适应卡 --使用此库的OpenClaw AI代理插件
• 自适应卡文档 --官方文件
• 自适应卡片设计器 --交互式卡片设计师
• 自适应卡架构浏览器 --交互式架构引用

许可证

麻省理工学院