VikrantSingh01/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
GitHub Copilot (VS Code)
Add to .vscode/mcp.json:
Cursor
Add to .cursor/mcp.json:
Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
Microsoft 365 Copilot / Copilot Studio (HTTP/SSE)
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:
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:**
**Notifications and alerts:**
**Data and reports:**
**Forms and input:**
**Profiles and status:**
**Cross-host and versioning:**
**Validation and optimization:**
| What you say | What the AI calls |
|-------------|-------------------|
| "Create a leave approval card for Teams" | generate_and_validate → optimized card with Approve/Reject actions |
| "Here's my API response, make it a card" | data_to_card → auto-picks Table/FactSet/List based on data shape |
| "Is this card valid for Outlook?" | validate_card → schema errors, accessibility score, host compatibility |
| "Make this card accessible" | optimize_card → adds wrap, altText, speak, heading styles |
| "Convert this card to a reusable template" | template_card → static values become ${expression} bindings |
| "This card needs to work on v1.3" | transform_card → downgrades, removes unsupported features |
| "What layout should I use for a dashboard?" | suggest_layout → pattern recommendation with rationale |
Slash commands (MCP prompts)
For guided, multi-step workflows, use the built-in prompts directly:
**Create a card:**
Runs: generate → validate → optimize → host config
**Convert data to a card:**
Runs: analyze data → pick best layout → validate output
**Review an existing card:**
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:
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": [ ... ]
}
Tools, Prompt and Usage
Reference
MCP Tools (9)
| Tool | Description |
|------|-------------|
| generate_card | Natural language / data → valid Adaptive Card v1.6 JSON |
| validate_card | Schema validation + accessibility score + host compatibility + suggested fixes |
| data_to_card | Auto-select Table / FactSet / Chart / List from data shape |
| optimize_card | Improve accessibility, performance, modernize actions |
| template_card | Static card → ${expression} data-bound template |
| transform_card | Version upgrade/downgrade, host-config adaptation |
| suggest_layout | Recommend best layout pattern for a description |
| generate_and_validate | Generate + validate + optionally optimize in one call |