> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getloracle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

> Get up and running in minutes.

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.

<Steps>
  <Step title="Get an API key">
    Sign in to the [Loracle dashboard](https://app.getloracle.com) and navigate to **Project Settings > API Keys**. Copy your key — it starts with `sk_live_`.
  </Step>

  <Step title="Install the CLI">
    ```bash theme={null}
    npm install -g @loracle/cli
    ```
  </Step>

  <Step title="Publish">
    ```bash theme={null}
    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.
  </Step>
</Steps>

[Learn more about the CLI](/cli)

## Use with a coding agent

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

<Steps>
  <Step title="Get an API key">
    Sign in to the [Loracle dashboard](https://app.getloracle.com) and copy your API key from **Project Settings > API Keys**.
  </Step>

  <Step title="Add the MCP to your IDE">
    Add the Loracle MCP endpoint to your IDE's MCP configuration. See [MCP server](/mcp) for setup snippets for Cursor, Claude Code, and Windsurf.
  </Step>

  <Step title="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.
  </Step>
</Steps>

[Learn more about the MCP server](/mcp)

## Build stories with AI

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

<Steps>
  <Step title="Install the addon">
    ```bash theme={null}
    npm install @loracle-js/storybook-addon
    ```
  </Step>

  <Step title="Register the addon">
    Add it to your `.storybook/main.ts` addons array:

    ```typescript .storybook/main.ts theme={null}
    const config = {
      addons: [
        // ...other addons
        "@loracle-js/storybook-addon",
      ],
    };
    export default config;
    ```
  </Step>

  <Step title="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.
  </Step>
</Steps>

[Learn more about the Storybook addon](/storybook-addon)