Reference

MCP playground

Explore the Model Context Protocol servers that power AI-assisted Atelier UI development — one Storybook MCP per framework plus the figma-console MCP that reads Figma directly. The full loop: inspect → prompt → ship → iterate.

An MCP server exposes a small set of functions an AI client can call over a standard request/response format (JSON-RPC — think "remote function call"); each Atelier UI MCP returns structured data, no screenshots or copy-paste.

One AI client talks to three parallel Storybook MCP servers — one per framework. The request format (JSON-RPC) is identical; only the returned props change.

Try a tool

Pick a framework, select a tool, set parameters, and call it to see exactly what structured data an AI receives.

Server@atelier-ui/angularDemo

Note: The Angular MCP server currently supports documentation tools only. Full story previews and test tools are available for React and Vue.

00Connect

Host sends initialize with capabilities. Server responds with its tool list.

01Identify need

Model decides a tool call will give a more reliable answer than training data alone.

02Call server

Structured request is sent — tool name plus typed parameters, no ambiguity.

03Receive JSON

Exact prop names, types, and defaults come back. No hallucinated APIs.

Tools

get_component_docs(component: string)

Returns the full API for a component — inputs, outputs, types, defaults, and integration notes.

Called when a user asks about a specific component. The AI gets exact prop names, types, and defaults — so it writes correct code instead of guessing the API.

Parameters

componentstring— Component slug

Use with AI tools

The MCP servers are live. Add them to your AI tool's config and every tool shown above works directly — Claude, Cursor, and any MCP-compatible host.

Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "atelier-ui-angular": {
      "url": "https://atelier.pieper.io/storybook-angular/mcp"
    },
    "atelier-ui-react": {
      "url": "https://atelier.pieper.io/storybook-react/mcp"
    },
    "atelier-ui-vue": {
      "url": "https://atelier.pieper.io/storybook-vue/mcp"
    }
  }
}

Cursor / VS Code.cursor/mcp.json · .vscode/mcp.json

mcp.json

{
  "servers": {
    "atelier-ui-angular": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-angular/mcp"
    },
    "atelier-ui-react": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-react/mcp"
    },
    "atelier-ui-vue": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-vue/mcp"
    }
  }
}