Adaptive Cards MCP

Adaptive Cards MCP

An MCP server that helps AI assistants generate valid, accessible Adaptive Cards for Teams, Outlook, Copilot, and other Microsoft surfaces. 9 tools, 3 guided workflows, 924 tests.

Blog: I Built an MCP Server That Makes AI 10x Better at Adaptive Cards

Demo

Your browser does not support the video tag.

Quick Start

No install needed — npx downloads and runs it automatically.

1. Add to your AI assistant

Claude Code

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

GitHub Copilot (VS Code)

Add to .vscode/mcp.json:

{

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

</details>

Cursor

Add to .cursor/mcp.json:

{

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

</details>

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{

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

</details>

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. Open Copilot Studio → your agent → Tools → Add a tool → New tool → Model Context Protocol
2. Enter your MCP server URL (e.g., https://your-server.azurewebsites.net/sse)
3. Select the tools to expose

OpenAI ChatGPT

1. Enable Developer mode in ChatGPT settings
2. Go to Settings → Connectors → Create
3. Enter your MCP server HTTPS URL

2. Start using it

Just ask your AI assistant in natural language:

> 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)

The AI picks the right tools, generates a valid card, validates it, and returns production-ready JSON you can paste directly into the Adaptive Cards Designer to preview.

Usage

Natural language (recommended)

Describe what you need — the AI figures out which tools to call:

Approvals and workflows:

> 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

Notifications and alerts:

> 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

Data and reports:

> 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

Forms and input:

> 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

Profiles and status:

> 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

Cross-host and versioning:

> 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

Validation and optimization:

> 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 commands (MCP prompts)

For guided, multi-step workflows, use the built-in prompts directly:

Create a card:

> /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

Runs: generate → validate → optimize → host config

/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

Convert data to a card:

> /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

Runs: analyze data → pick best layout → validate output

Review an existing card:

> /adaptive-cards-mcp:review-adaptive-card

card: { "type": "AdaptiveCard", "version": "1.6", "body": [...your card...] } host: outlook

Runs: validate schema + accessibility → auto-fix issues → summary report

npm library (programmatic)

For use in your own code (bots, APIs, CI pipelines), install the package:

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

See the Library API reference for full details.

What you get back

Card-producing tools return two clean blocks — card JSON you can copy, and a metadata summary:

```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 Local Preview: file:///tmp/ac-preview-xyz.html

Tools, Prompt and Usage

Reference

MCP Tools (9)

MCP Prompts (3)

MCP Resources (5) + Templates (2)

| ac://hosts | Host compatibility matrix for all 7