Skip to main content
Pick the path that matches your role. Each one takes a few minutes.

​
Publish your design system

For teams that maintain a Storybook and want to make it available to AI.
1

Get an API key

Sign in to the Loracle dashboard and navigate to Project Settings > API Keys. Copy your key — it starts with sk_live_.
2

Install the CLI

npm install -g @loracle/cli
3

Publish

export LORACLE_API_KEY="sk_live_..."
loracle publish https://your-storybook.com --version 1.0.0
The CLI connects to your Storybook, scrapes every component, and uploads the catalog to Loracle.
Learn more about the CLI

​
Use with a coding agent

For developers who want their coding agent to search the design system.
1

Get an API key

Sign in to the Loracle dashboard and copy your API key from Project Settings > API Keys.
2

Add the MCP to your IDE

Add the Loracle MCP endpoint to your IDE’s MCP configuration. See MCP server for setup snippets for Cursor, Claude Code, and Windsurf.
3

Start using it

Your coding agent now has access to get_components — ask it to find components from your design system and it will query the catalog automatically.
Learn more about the MCP server

​
Build stories with AI

For developers who want AI-assisted story generation inside Storybook.
1

Install the addon

npm install @loracle/storybook-addon
2

Register the addon

Add it to your .storybook/main.ts addons array:
.storybook/main.ts
const config = {
  addons: [
    // ...other addons
    "@loracle/storybook-addon",
  ],
};
export default config;
3

Launch Storybook

Start Storybook and open the Loracle panel. The addon uses OpenCode as its coding agent and picks up your existing provider configuration automatically.
Learn more about the Storybook addon