Skip to content
⌘K
Tutorial ~25 min Hands-on · Setup

Workshop setup

Spin up a fully-configured Atelier workspace in one command — framework selection, library install, and MCP MCP Model Context Protocol — a JSON-RPC standard that lets AI assistants call structured tools on external servers, instead of guessing from training data. In this workshop: three Storybook MCP servers expose component props to Claude Code. server wired up automatically.

What you'll learn

  • Scaffold an Atelier workspace with one command
  • Verify your environment with preflight
  • Connect Claude Code to the Storybook MCP servers
  • Run the Figma → token → component loop end-to-end

Before you start

  • Frontend experience in Angular, React or Vue
  • Comfortable with the terminal — Node 22+ available
  • Claude Code CLI (we walk you through installing it)
  • Figma account — optional, demo flow works without one

Install prerequisites

Troubleshooting

Pick your platform, run the commands below, then verify with npm run preflight inside the scaffolded workspace. Connecting Figma? See Figma Setup — it walks through the Desktop Bridge plugin and the optional REST token.

Terminal window
# 1. Node 22+ (use Homebrew or nvm)
node --version   # need v22.12 or newer


# 2. Claude Code CLI
npm install -g @anthropic-ai/claude-code
claude --version


# 3. Figma access token (or use the demo token)
export FIGMA_ACCESS_TOKEN=figd_...
  1. 01

    Run the workspace generator

    Run the following command, then follow the prompts to choose your workspace name and frameworks:

    Terminal window
    npx create-atelier-ui-workspace
    ? Workspace name: › my-workshop
    ? Which framework(s) do you want to use?
      ◉ Angular
      ◉ React
      ◉ Vue

    Or pass the name directly to skip the first prompt:

    Terminal window
    npx create-atelier-ui-workspace my-workshop
  2. 02

    Install dependencies & run preflight

    Navigate into your workspace, install deps, and verify your environment:

    Terminal window
    cd my-workshop
    npm install
    npm run preflight

    preflight checks Node, Claude Code CLI, the Figma token, MCP reachability, and port availability. If anything fails, each line prints a one-step fix.

    preflight — successful run 
    ➜ npm run preflight

Atelier UI Preflight
Checking your environment for the workshop…

Runtime
  ✓ Node.js — v22.12.0
  ✓ npm — v10.9.4
  ✓ git — git version 2.43.0

Claude Code
  ✓ Claude Code CLI — 2.1.121 (Claude Code)

Figma
  ✓ Figma Desktop Bridge plugin — manifest at ~/.figma-console-mcp/plugin/manifest.json
  ✓ Bridge port range 9223–9232 — all free (MCP will bind on first launch)
  ✓ FIGMA_ACCESS_TOKEN — set (45 chars, REST reads enabled)

MCP reachability
  ✓ MCP: storybook-angular — https://atelier.pieper.io/storybook-angular/mcp (HTTP 200)
  ✓ MCP: storybook-react — https://atelier.pieper.io/storybook-react/mcp (HTTP 200)
  ✓ MCP: storybook-vue — https://atelier.pieper.io/storybook-vue/mcp (HTTP 200)
  ✓ MCP: nx-mcp — https://atelier.pieper.io/nx-mcp (HTTP 200)

Local ports
  ✓ Port 4200 — free
  ✓ Port 4201 — free
  ✓ Port 4202 — free
  ✓ Port 6006 — free

All hard checks passed · 15 ok, 0 warning(s)

    Toggle the tabs above to compare. Each ✗ line ends with a one-step fix — copy, run, re-run preflight.

  3. 03

    Serve your app

    Start the dev server for your chosen framework:

    Terminal window
    npx nx serve workshop-angular
  4. 04

    Open in Claude Code

    Open the workspace in VS Code or any editor with Claude Code. The MCP servers connect automatically — your AI assistant can look up component props, variants, and usage examples directly from Storybook without any extra setup.

    MCP auto-configuration

    The generated .claude/settings.json wires up the Nx MCP and hosted Storybook MCP servers for all selected frameworks automatically.

What gets created

Based on your framework selection the preset scaffolds one app per framework, installs the matching Atelier UI package, and pre-configures Claude Code's MCP servers.

FrameworkAppPackageMCP
Angularworkshop-angular@atelier-ui/angularstorybook-angular
Reactworkshop-react@atelier-ui/reactstorybook-react
Vueworkshop-vue@atelier-ui/vuestorybook-vue
Angular
App
workshop-angular
Package
@atelier-ui/angular
MCP
storybook-angular
React
App
workshop-react
Package
@atelier-ui/react
MCP
storybook-react
Vue
App
workshop-vue
Package
@atelier-ui/vue
MCP
storybook-vue

MCP configuration

The generated .claude/settings.json wires up the Nx MCP, the hosted Storybook MCP servers for each selected framework, and figma-console — needed for the Figma-to-Code Tutorial: 

{
  "mcpServers": {
    "nx-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["nx", "mcp"]
    },
    "storybook-angular": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-angular/mcp"
    },
    "storybook-react": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-react/mcp"
    },
    "storybook-vue": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-vue/mcp"
    },
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

figma-console requires the Desktop Bridge plugin and a personal access token — see Figma Setup. If you only want the Storybook MCP workflow, you can remove the figma-console entry.