Skip to content

Commit 517922e

Browse files
kylegachkylegach
authored
Merge pull request #33992 from storybookjs/docs-ai
Docs: Add AI section
2 parents 4feaa45 + 7eecfa7 commit 517922e

28 files changed

Lines changed: 1454 additions & 16 deletions

‎docs/_assets/ai/addon-mcp-splash.png‎

433 KB
Loading

‎docs/_assets/ai/manifest-debugger.png‎

485 KB
Loading

‎docs/_snippets/addon-mcp-add.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```shell renderer="common" language="js" packageManager="npm"
2+
npx storybook add @storybook/addon-mcp
3+
```
4+
5+
```shell renderer="common" language="js" packageManager="pnpm"
6+
pnpm exec storybook add @storybook/addon-mcp
7+
```
8+
9+
```shell renderer="common" language="js" packageManager="yarn"
10+
yarn exec storybook add @storybook/addon-mcp
11+
```

‎docs/_snippets/addon-mcp-options.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
2+
export default {
3+
// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
4+
framework: '@storybook/your-framework',
5+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
6+
addons: [
7+
// ... your existing addons
8+
{
9+
name: '@storybook/addon-mcp',
10+
options: {
11+
toolsets: {
12+
dev: false,
13+
},
14+
},
15+
},
16+
],
17+
};
18+
```
19+
20+
```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
21+
// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
22+
import type { StorybookConfig } from '@storybook/your-framework';
23+
24+
const config: StorybookConfig = {
25+
framework: '@storybook/your-framework',
26+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
27+
addons: [
28+
// ... your existing addons
29+
{
30+
name: '@storybook/addon-mcp',
31+
options: {
32+
toolsets: {
33+
dev: false,
34+
},
35+
},
36+
},
37+
],
38+
};
39+
40+
export default config;
41+
```
42+
43+
```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
44+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
45+
import { defineMain } from '@storybook/your-framework/node';
46+
47+
export default defineMain({
48+
framework: '@storybook/your-framework',
49+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
50+
addons: [
51+
// ... your existing addons
52+
{
53+
name: '@storybook/addon-mcp',
54+
options: {
55+
toolsets: {
56+
dev: false,
57+
},
58+
},
59+
},
60+
],
61+
});
62+
```
63+
64+
<!-- JS snippets still needed while providing both CSF 3 & Next -->
65+
66+
```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
67+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
68+
import { defineMain } from '@storybook/your-framework/node';
69+
70+
export default defineMain({
71+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
72+
framework: '@storybook/your-framework',
73+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
74+
addons: [
75+
// ... your existing addons
76+
{
77+
name: '@storybook/addon-mcp',
78+
options: {
79+
toolsets: {
80+
dev: false,
81+
},
82+
},
83+
},
84+
],
85+
});
86+
```

‎docs/_snippets/best-practices-in-story.md‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
2+
import { Button } from './Button';
3+
4+
export default {
5+
component: Button,
6+
};
7+
8+
// ✅ Good - shows the default state
9+
export const Basic = {};
10+
11+
// ✅ Good - demonstrates a specific use case
12+
export const Primary = {
13+
args: { primary: true },
14+
};
15+
16+
// ✅ Good - even though this story renders more than one button,
17+
// they both demonstrate the same concept of a disabled button
18+
export const Disabled = {
19+
args: { disabled: true },
20+
render: (args) => (
21+
<>
22+
<Button {...args}>Disabled Button</Button>
23+
<Button {...args} primary>
24+
Disabled Primary Button
25+
</Button>
26+
</>
27+
),
28+
};
29+
30+
// ❌ Bad - demonstrates too many concepts at once, making
31+
// it less clear and less useful as a reference for agents
32+
export const SizesAndVariants = {
33+
render: () => (
34+
<>
35+
<Button size="small">Small Button</Button>
36+
<Button>Medium Button</Button>
37+
<Button size="large">Large Button</Button>
38+
<Button variant="outline">Outline Button</Button>
39+
<Button variant="text">Text Button</Button>
40+
</>
41+
),
42+
};
43+
```
44+
45+
```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
46+
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
47+
import type { Meta, StoryObj } from '@storybook/your-framework';
48+
49+
import { Button } from './Button';
50+
51+
const meta = {
52+
component: Button,
53+
} satisfies Meta<typeof Button>;
54+
55+
export default meta;
56+
57+
type Story = StoryObj<typeof meta>;
58+
59+
// ✅ Good to show the default state
60+
export const Basic: Story = {};
61+
62+
// ✅ Good to demonstrate a specific use case
63+
export const Primary: Story = {
64+
args: { primary: true },
65+
};
66+
67+
// ✅ Good - even though this story renders more than one button,
68+
// they both demonstrate the same concept of a disabled button
69+
export const Disabled: Story = {
70+
args: { disabled: true },
71+
render: (args) => (
72+
<>
73+
<Button {...args}>Disabled Button</Button>
74+
<Button {...args} primary>
75+
Disabled Primary Button
76+
</Button>
77+
</>
78+
),
79+
};
80+
81+
// ❌ Bad - demonstrates too many concepts at once, making
82+
// it less clear and less useful as a reference for agents
83+
export const SizesAndVariants: Story = {
84+
render: () => (
85+
<>
86+
<Button size="small">Small Button</Button>
87+
<Button>Medium Button</Button>
88+
<Button size="large">Large Button</Button>
89+
<Button variant="outline">Outline Button</Button>
90+
<Button variant="text">Text Button</Button>
91+
</>
92+
),
93+
};
94+
```
95+
96+
```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
97+
import preview from '../.storybook/preview';
98+
99+
import { Button } from './Button';
100+
101+
const meta = preview.meta({
102+
component: Button,
103+
});
104+
105+
// ✅ Good to show the default state
106+
export const Basic = meta.story();
107+
108+
// ✅ Good to demonstrate a specific use case
109+
export const Primary = meta.story({
110+
args: { primary: true },
111+
});
112+
113+
// ✅ Good - even though this story renders more than one button,
114+
// they both demonstrate the same concept of a disabled button
115+
export const Disabled = meta.story({
116+
args: { disabled: true },
117+
render: (args) => (
118+
<>
119+
<Button {...args}>Disabled Button</Button>
120+
<Button {...args} primary>
121+
Disabled Primary Button
122+
</Button>
123+
</>
124+
),
125+
});
126+
127+
// ❌ Bad - demonstrates too many concepts at once, making
128+
// it less clear and less useful as a reference for agents
129+
export const SizesAndVariants = meta.story({
130+
render: () => (
131+
<>
132+
<Button size="small">Small Button</Button>
133+
<Button>Medium Button</Button>
134+
<Button size="large">Large Button</Button>
135+
<Button variant="outline">Outline Button</Button>
136+
<Button variant="text">Text Button</Button>
137+
</>
138+
),
139+
});
140+
```
141+
142+
<!-- JS snippets still needed while providing both CSF 3 & Next -->
143+
144+
```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
145+
import preview from '../.storybook/preview';
146+
147+
import { Button } from './Button';
148+
149+
const meta = preview.meta({
150+
component: Button,
151+
});
152+
153+
// ✅ Good to show the default state
154+
export const Basic = meta.story();
155+
156+
// ✅ Good to demonstrate a specific use case
157+
export const Primary = meta.story({
158+
args: { primary: true },
159+
});
160+
161+
// ✅ Good - even though this story renders more than one button,
162+
// they both demonstrate the same concept of a disabled button
163+
export const Disabled = meta.story({
164+
args: { disabled: true },
165+
render: (args) => (
166+
<>
167+
<Button {...args}>Disabled Button</Button>
168+
<Button {...args} primary>
169+
Disabled Primary Button
170+
</Button>
171+
</>
172+
),
173+
});
174+
175+
// ❌ Bad - demonstrates too many concepts at once, making
176+
// it less clear and less useful as a reference for agents
177+
export const SizesAndVariants = meta.story({
178+
render: () => (
179+
<>
180+
<Button size="small">Small Button</Button>
181+
<Button>Medium Button</Button>
182+
<Button size="large">Large Button</Button>
183+
<Button variant="outline">Outline Button</Button>
184+
<Button variant="text">Text Button</Button>
185+
</>
186+
),
187+
});
188+
```

‎docs/_snippets/main-config-features-components-manifest.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
2+
export default {
3+
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
4+
framework: '@storybook/your-framework',
5+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
6+
features: {
7+
componentsManifest: false,
8+
},
9+
};
10+
```
11+
12+
```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
13+
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
14+
import type { StorybookConfig } from '@storybook/your-framework';
15+
16+
const config: StorybookConfig = {
17+
framework: '@storybook/your-framework',
18+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
19+
features: {
20+
componentsManifest: false,
21+
},
22+
};
23+
24+
export default config;
25+
```
26+
27+
```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
28+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
29+
import { defineMain } from '@storybook/your-framework/node';
30+
31+
export default defineMain({
32+
framework: '@storybook/your-framework',
33+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
34+
features: {
35+
componentsManifest: false,
36+
},
37+
});
38+
```
39+
40+
<!-- JS snippets still needed while providing both CSF 3 & Next -->
41+
42+
```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
43+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
44+
import { defineMain } from '@storybook/your-framework/node';
45+
46+
export default defineMain({
47+
framework: '@storybook/your-framework',
48+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
49+
features: {
50+
componentsManifest: false,
51+
},
52+
});
53+
```

‎docs/_snippets/main-config-features-experimental-code-examples.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
2+
export default {
3+
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
4+
framework: '@storybook/your-framework',
5+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
6+
features: {
7+
experimentalCodeExamples: true,
8+
},
9+
};
10+
```
11+
12+
```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
13+
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
14+
import type { StorybookConfig } from '@storybook/your-framework';
15+
16+
const config: StorybookConfig = {
17+
framework: '@storybook/your-framework',
18+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
19+
features: {
20+
experimentalCodeExamples: true,
21+
},
22+
};
23+
24+
export default config;
25+
```
26+
27+
```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
28+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
29+
import { defineMain } from '@storybook/your-framework/node';
30+
31+
export default defineMain({
32+
framework: '@storybook/your-framework',
33+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
34+
features: {
35+
experimentalCodeExamples: true,
36+
},
37+
});
38+
```
39+
40+
<!-- JS snippets still needed while providing both CSF 3 & Next -->
41+
42+
```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
43+
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
44+
import { defineMain } from '@storybook/your-framework/node';
45+
46+
export default defineMain({
47+
framework: '@storybook/your-framework',
48+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
49+
features: {
50+
experimentalCodeExamples: true,
51+
},
52+
});
53+
```

0 commit comments

Comments
 (0)