Reference

Storybook

Interactive component explorers for Angular, React, and Vue. Browse stories, inspect props, and test accessibility in isolation.

React

@atelier-ui/react Open

Angular

@atelier-ui/angular Open

Vue

@atelier-ui/vue Open

MCP server

All three Storybook instances expose a hosted MCP endpoint so AI coding assistants can read component documentation directly — no local setup required.

Add the MCP server to your project

In your AI assistant's MCP configuration (e.g. .claude/settings.json for Claude Code) add one or more servers:

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

Use it in your prompts

Once connected, your AI assistant can look up component props, variants, and usage examples directly from Storybook:

Build a settings page using @atelier-ui/react components.
Use the storybook-react MCP to check available props.

Framework parity

All frameworks support prop documentation and component search. Story previews and Vitest integration are currently React and Vue only.

Feature	React	Vue	Angular
Prop documentation	Full	Full	Full
Component search	Full	Full	Full
Story previews	Full	Full	Limited
Vitest integration	Full	Full	Planned

Endpoints

Library	URL
`@atelier-ui/react`	`https://atelier.pieper.io/storybook-react/mcp`
`@atelier-ui/angular`	`https://atelier.pieper.io/storybook-angular/mcp`
`@atelier-ui/vue`	`https://atelier.pieper.io/storybook-vue/mcp`