Atlas works with Storybook through Storybook's MCP addon, which turns the running dev server into an MCP endpoint on port 6006. Install it with npx storybook add @storybook/addon-mcp, start Storybook, then register it with atlas mcp add storybook --url http://localhost:6006/mcp. From that point Atlas reads your existing stories, args, and decorators before it writes new ones, so the stories it produces match the conventions already in your component workshop rather than a generic template.
What the Atlas and Storybook integration does
Atlas connects to Storybook through Storybook's MCP addon, which turns the running dev server into an MCP endpoint on port 6006. In 2026 that means Atlas reads your existing stories, args, and decorators before it writes new ones, instead of guessing at your component conventions.
The value of the Storybook MCP addon is that Atlas stops writing stories in a vacuum. A component workshop encodes a lot of local convention: the args a component expects, the decorators that wrap it, the way variants are named across a story file. Without the MCP endpoint on port 6006, an agent has to reconstruct all of that from source and usually gets the shape approximately right and the details wrong. With the addon installed, Atlas queries the running Storybook dev server directly and works from what your workshop actually contains. The practical outcome is that a story Atlas writes for a new component looks like a story one of your own developers would have written for it, using the same args and the same decorators, because Atlas read the neighbors first.
How to set up the Storybook MCP addon for Atlas
Setting up Atlas with Storybook takes 3 commands: install the addon with npx storybook add @storybook/addon-mcp, start Storybook, then register the endpoint with atlas mcp add storybook --url http://localhost:6006/mcp. The MCP server is served by the running Storybook dev server itself.
Run npx storybook add @storybook/addon-mcp inside the project that already has Storybook, and the addon is wired into your Storybook config. Start Storybook next. The ordering matters because the MCP server is served by the running Storybook dev server, so there is no separate process to launch and nothing to keep alive on the side. Once the dev server is up, run atlas mcp add storybook --url http://localhost:6006/mcp to tell Atlas where the endpoint lives. Atlas now has a Storybook tool available in the session. If Storybook is not running, the endpoint is not there, so treat a running dev server as a precondition of the integration rather than an optional convenience.
Which Storybook frameworks the MCP addon supports
The Storybook MCP addon is Vite-only today, covering 3 framework packages: @storybook/react-vite, @storybook/nextjs-vite, and @storybook/sveltekit. Check which framework your project uses before running npx storybook add @storybook/addon-mcp, because a Storybook outside those three packages is not covered by the addon.
Framework support is the first thing to confirm, because it decides whether the rest of the setup is even possible. The addon is Vite-only today. If your Storybook is built on @storybook/react-vite, @storybook/nextjs-vite, or @storybook/sveltekit, you are covered and npx storybook add @storybook/addon-mcp will give you the MCP endpoint. A React project on the Vite builder and a Next.js project on the Vite builder are both supported, and so is SvelteKit. Look at the framework field in your Storybook configuration rather than guessing from the UI, since a project can have migrated builders at some point without anyone updating the docs. Confirming the framework first saves you from debugging a missing endpoint on port 6006 that was never going to exist.
Pointing Atlas at a custom Storybook port
Atlas talks to Storybook over whatever port the dev server is using. The default MCP endpoint is http://localhost:6006/mcp, but the MCP server is served by the running Storybook dev server, so the port follows whatever you passed to storybook dev -p in 2026.
Port 6006 is the Storybook default, and it is what atlas mcp add storybook --url http://localhost:6006/mcp assumes. Teams that run several dev servers at once often move Storybook off 6006 with storybook dev -p, and the MCP endpoint moves with it, because the MCP server is served by the running Storybook dev server rather than by a standalone process on a fixed port. So if you start Storybook on a different port, register Atlas against that port instead. The rule to remember is simple: the MCP URL is the Storybook URL with /mcp on the end, and the Storybook URL is whatever storybook dev -p gave you. A connection failure right after setup is almost always a port mismatch, not a broken addon.
The daily workflow: writing stories that match your args and decorators
The daily Atlas plus Storybook loop has 2 halves: ask Atlas to read the existing stories for a component so the new ones match your args and decorators, then have Atlas write the missing story and confirm it renders by running npx storybook build.
Start by asking Atlas to read the existing stories for a component. That single instruction is what makes the integration worth installing, because it forces Atlas through the MCP endpoint and into your real workshop before it generates anything. Atlas comes back with the args the component takes and the decorators that wrap it, and any story it then writes is shaped by those. Next, have Atlas write the missing story. Because the terminal is where Atlas already lives, the verification step is immediate: confirm it renders by running npx storybook build. A build that completes tells you the story compiles and is picked up by Storybook. A build that fails hands Atlas a concrete error to fix, and the loop repeats without you leaving the terminal.
Adding component test failures with the Storybook test addon and vitest
Pair the Storybook MCP addon with the Storybook test addon and npx vitest run, and Atlas sees component test failures as well as story source. In 2026 that gives Atlas both halves of the feedback loop: the stories it wrote, and whether those components actually pass.
Story source alone tells Atlas what a component is supposed to look like. Test output tells it whether the component behaves. Pairing the Storybook MCP addon with the Storybook test addon and npx vitest run closes that gap. Atlas reads your existing stories, args, and decorators through the endpoint on port 6006, writes the missing story, and then has a way to find out that a component test failed rather than declaring victory at the point of generation. In practice the loop becomes: read the neighbors, write the story, run npx vitest run, read the failures, fix them, and confirm the whole thing still renders with npx storybook build. Every step of that runs in the same terminal session Atlas is already in.
Setup
- 01Confirm your Storybook framework is @storybook/react-vite, @storybook/nextjs-vite, or @storybook/sveltekit, because the addon is Vite-only today.
- 02Install the addon with npx storybook add @storybook/addon-mcp in your Storybook project.
- 03Start Storybook, since the MCP server is served by the running Storybook dev server and does not exist without it.
- 04Register the endpoint with atlas mcp add storybook --url http://localhost:6006/mcp.
- 05If you launched Storybook on a custom port with storybook dev -p, point the --url at that port instead of 6006.
- 06Ask Atlas to read the existing stories for a component so the new ones match your args and decorators.
- 07Have Atlas write the missing story, then confirm it renders by running npx storybook build.
- 08Pair it with the Storybook test addon and npx vitest run so Atlas sees component test failures too.
Frequently asked questions
- how do I connect Atlas to Storybook
- Install the addon with npx storybook add @storybook/addon-mcp, start Storybook, then run atlas mcp add storybook --url http://localhost:6006/mcp. Storybook's MCP addon turns the running dev server into an MCP endpoint on port 6006.
- what port does the Storybook MCP server run on
- Port 6006 by default, so the endpoint is http://localhost:6006/mcp. The MCP server is served by the running Storybook dev server, so the port follows whatever you passed to storybook dev -p.
- does the Storybook MCP addon work with Webpack
- No. The addon is Vite-only today, covering @storybook/react-vite, @storybook/nextjs-vite, and @storybook/sveltekit. Check your Storybook framework before installing.
- can Atlas write Storybook stories that match my existing args and decorators
- Yes. Ask Atlas to read the existing stories for a component first. Through the MCP endpoint Atlas reads your existing stories, args, and decorators before it writes new ones, so the new story matches.
- how do I check a story Atlas wrote actually renders
- Have Atlas write the missing story, then confirm it renders by running npx storybook build. A failing build gives Atlas a concrete error to fix in the same terminal session.
- can Atlas see Storybook component test failures
- Yes, if you pair the Storybook MCP addon with the Storybook test addon and npx vitest run. Atlas then sees component test failures alongside the story source.
- does Storybook need to be running for Atlas to use the MCP server
- Yes. The MCP server is served by the running Storybook dev server, so the endpoint on port 6006 only exists while Storybook is up.
- how do I add Storybook as an MCP server in Atlas
- Run atlas mcp add storybook --url http://localhost:6006/mcp after installing @storybook/addon-mcp and starting the dev server.
Try Atlas in your terminal
The terminal-native AI coding agent. Free core, single binary.
Install AtlasRelated guides
Research a Third-Party API Before Integrating It with Atlas in 2026
How to research a third-party API with Atlas in 2026: websearch finds the current docs, webfetch pulls the page as markdown or text, and grep checks repo conventions.
Atlas vs Fine.dev: Terminal AI Coding Agents in 2026
Compare Atlas and Fine.dev for terminal AI coding in 2026. Atlas offers a free core TUI with permission-gated tools, while Fine.dev provides asynchronous cloud agents and prebuilt libraries.
Atlas vs Cursor: terminal AI coding agents compared (2026)
A grounded 2026 comparison of Atlas and Cursor across workflow, change review, extensibility, and pricing for developers choosing an AI coding agent.
Atlas for PHP in 2026
Atlas, the terminal-native AI coding agent, empowers PHP developers in 2026 with intelligent code understanding, secure workflows, and direct integration for Composer and PSR standards.
Atlas with Qwen3 8B (local via Ollama): The Laptop Offline Setup for 2026
Qwen3 8B (local via Ollama) is the easiest offline Atlas setup in 2026: roughly 5.2 GB at Q4_K_M, Free (self-hosted), and a thinking model on a laptop GPU.
Atlas with Codestral 22B (Ollama): 32K Context and a License Gate in 2026
Codestral 22B (Ollama) is Mistral's 13GB code model with a 32K context, fluent across many languages. Free (self-hosted), non-commercial license. Atlas setup for 2026.
Atlas with Phi-4 Mini 3.8B (Ollama): Native Function Calling at 2.5GB in 2026
Phi-4 Mini 3.8B (Ollama) is a 2.5GB model with 128K tokens (131,072) of context and native function calling, Free (self-hosted). The Atlas small_model that can route tools.
Atlas with Llama 3.2 1B (local via Ollama): the 2026 offline small_model slot
Llama 3.2 1B (local via Ollama) in Atlas: a 1.3GB CPU-friendly pull with a 128,000 token window, Free (self-hosted), best wired to small_model, not model.