adaptive-cards-mcp

Adaptive Cards MCP

Teams、Outlook、Copilot、その他の Microsoft サービス向けに、AI アシスタントが有効でアクセシブルな Adaptive Cards を生成できるよう支援する MCP サーバーです。9 個のツール、3 つのガイド付きワークフロー、924 個のテストを備えています。

ブログ： AI による Adaptive Cards の作成を 10 倍向上させる MCP サーバーを作りました

デモ

お使いのブラウザーは video タグに対応していません。

クイックスタート

インストールは不要です。npx が自動的にダウンロードして実行します。

1. AI アシスタントに追加する

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

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

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

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

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

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

2. 使い始める

AI アシスタントに自然な言葉で依頼するだけです：

> 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 を返します。この JSON は Adaptive Cards Designer に直接貼り付けてプレビューできます。

使用方法

自然言語（推奨）

必要な内容を説明すると、AI が呼び出すツールを判断します。

承認とワークフロー：

> 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

スラッシュコマンド（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 リファレンスを参照してください。

返される内容

カードを生成するツールは、2 つの整ったブロックを返します。コピーして使えるカード JSON と、メタデータの概要です。

```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 Code 拡張機能： 初回インストール時に、一度だけ同意を求めるプロンプトが表示されます。設定 → Adaptive Cards → Telemetry でいつでも 変更できます。
• CLI／MCP サーバー： 環境に MCP_TELEMETRY=true を設定するか、 ~/.adaptive-cards-mcp/config.json を編集して "telemetry": true を設定します。

送信される情報： ツール名、呼び出し回数、所要時間、エラー率、プラットフォーム（OS）、 Node のバージョン、パッケージのバージョン、トランスポートの種類。

送信されない情報： カードの内容、ユーザープロンプト、データペイロード、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 Inspector（ビジュアル 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 Registry — 公式 MCP Registry に掲載されました
• E2E テストスイート — 品質ゲート（アクセシビリティスコア、要素数）を備えた、28 件のツールテストと 10 件のプロンプトテスト

詳細は、CHANGELOG をご覧ください。

リンク

• npm — インストール方法とパッケージの詳細
• GitHub — ソースコード、課題、コントリビューション
• MCP Registry — 公式 MCP サーバーの掲載ページ

関連プロジェクト

• AdaptiveCards-Mobile — クロスプラットフォームの Adaptive Cards レンダラー
• openclaw-adaptive-cards — このライブラリを使用する OpenClaw AI エージェントプラグイン
• Adaptive Cards Documentation — 公式ドキュメント
• Adaptive Cards Designer — インタラクティブなカードデザイナー
• Adaptive Cards Schema Explorer — インタラクティブなスキーマリファレンス

ライセンス

MIT