Skip to main content
After installing the addon, you can chat with AI to generate and modify story files directly inside Storybook.

​
Before you begin

  • Storybook 8 or higher
  • OpenCode installed locally

​
Install the addon

1

Install the package

npm install @loracle/storybook-addon
2

Register in your Storybook config

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

Start Storybook

Launch Storybook and open the Loracle panel at the bottom of the screen.

​
Connect a provider

The addon uses OpenCode as its coding agent. It automatically detects your existing OpenCode configuration and authentication — no extra setup needed if OpenCode is already configured. If no provider is detected on first launch, the onboarding screen prompts you to select a provider (Anthropic or OpenAI) and enter your API key.

​
Configure OpenCode

To pin a specific provider and model for the addon, create .storybook/opencode.json:
.storybook/opencode.json
{
  "provider": "anthropic",
  "model": "claude-sonnet-4-6"
}
The addon also reads opencode.json at your project root if it exists. The .storybook/opencode.json file takes precedence for provider and model settings.

​
Add system context with AGENTS.md

Create .storybook/AGENTS.md to inject persistent instructions into every AI prompt. Use it to describe your component library, import conventions, and coding guidelines.
.storybook/AGENTS.md
# Component guidelines

- Import components from `@acme/ui`
- Use the `variant` prop for visual styles, not custom CSS
- All stories must include a default export with `title` and `component`
- Group stories under the same title as the component folder structure
The AI follows these instructions on every generation.

​
Use the chat panel

Navigate to any story in Storybook and open the Loracle panel. Type a prompt describing what you want — the AI edits the story file directly and Storybook hot-reloads with the result. Examples of prompts:
  • “Add a disabled state to this button story”
  • “Create variants for small, medium, and large sizes”
  • “Style this to match our brand colors”

​
Attach an image

Click the image button in the chat input to attach a screenshot or design mockup. The AI uses it as visual context for the generation. Supported formats: PNG, JPEG, WebP.

​
Revert a change

Each AI response creates a snapshot of your story file. Hover over any past AI message to reveal the Restore button. Clicking it rolls the file back to that point and reloads the page.

​
Next steps

Configuration reference

See all configuration files and environment variables.

Loracle CLI

Publish your design system to make it available via MCP.