Skip to content

Commit a9321a3

Browse files
JReinholdJReinhold
authored
Make get-component-documentation tool only accept a single component ID instead of multiple (#79)
* cleanup * get-component-documentation only accepts a single component id
1 parent cf4ef86 commit a9321a3

File tree

16 files changed

+2048
-1458
lines changed

16 files changed

+2048
-1458
lines changed

‎.changeset/config.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@
77
"access": "public",
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
10-
"ignore": ["@storybook/mcp-internal-storybook"]
10+
"ignore": [
11+
"@storybook/mcp-internal-storybook",
12+
"@storybook/mcp-eval",
13+
"@storybook/mcp-eval--*"
14+
]
1115
}

‎.changeset/petite-toes-dig.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@storybook/mcp': patch
3+
---
4+
5+
get-component-documentation now only handles one component at a time

‎.github/copilot-instructions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ export { addMyTool, MY_TOOL_NAME } from './tools/my-tool.ts';
225225
- **Optional handlers for tracking**:
226226
- `onSessionInitialize`: Called when an MCP session is initialized, receives context
227227
- `onListAllComponents`: Called when list tool is invoked, receives context and manifest
228-
- `onGetComponentDocumentation`: Called when get tool is invoked, receives context, input, found components, and not found IDs
228+
- `onGetComponentDocumentation`: Called when get tool is invoked, receives context, input with componentId, and optional foundComponent
229229
- Addon-mcp uses these handlers to collect telemetry on tool usage
230230

231231
**Storybook internals used:**

‎.github/instructions/eval.instructions.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,16 @@ The framework supports four distinct context types:
7474
- Tests baseline agent capabilities
7575
7676
2. **Component Manifest** (`--context components.json`):
77-
- Provides component documentation via `@storybook/mcp`
77+
- Provides component documentation via `@storybook/mcp` package
7878
- Uses stdio transport with `packages/mcp/bin.ts`
7979
- Best for testing agents with library/component documentation
80+
- This uses the Storybook MCP server, not a custom MCP server
8081
8182
3. **MCP Server** (`--context mcp.config.json` or inline JSON):
8283
- Custom MCP server configuration (HTTP or stdio)
8384
- Supports multiple named servers
8485
- Flexible for testing different MCP tool combinations
86+
- Use this for fully custom MCP servers; use components.json for Storybook MCP
8587
8688
4. **Extra Prompts** (`--context extra-prompt-01.md,extra-prompt-02.md`):
8789
- Appends additional markdown files to main prompt
@@ -106,9 +108,11 @@ node eval.ts
106108
107109
**Non-interactive mode:**
108110
```bash
109-
node eval.ts --agent claude-code --context components.json --upload 100-flight-booking-plain
111+
node eval.ts --agent claude-code --context components.json --upload --no-storybook 100-flight-booking-plain
110112
```
111113
114+
**IMPORTANT**: Always use the `--no-storybook` flag when running evals to prevent the process from hanging at the end waiting for user input about starting Storybook.
115+
112116
**Get help:**
113117
```bash
114118
node eval.ts --help

‎.github/instructions/mcp.instructions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ This is a Model Context Protocol (MCP) server for Storybook that serves knowledg
1717
- **Component Manifest**: Parses and formats component documentation including React prop information from react-docgen
1818
- **Schema Validation**: Uses Valibot for JSON schema validation via `@tmcp/adapter-valibot`
1919
- **HTTP Transport**: Provides HTTP-based MCP communication via `@tmcp/transport-http`
20-
- **Context System**: `StorybookContext` allows passing optional handlers (`onSessionInitialize`, `onListAllComponents`, `onGetComponentDocumentation`) that are called at various points when provided
20+
- **Context System**: `StorybookContext` allows passing optional handlers (`onSessionInitialize`, `onListAllComponents`, `onGetComponentDocumentation`) that are called at various points when provided. The `onGetComponentDocumentation` handler receives a single `componentId` input and an optional `foundComponent` result.
2121

2222
### File Structure
2323

‎eval/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ node eval.ts --agent claude-code --context components.json --upload 100-flight-b
4343
The framework supports four context modes:
4444

4545
1. **No context** (`--no-context`): Agent uses only default tools
46-
2. **Component manifest** (`--context components.json`): Provides component documentation via `@storybook/mcp`
47-
3. **MCP server config** (`--context mcp.config.json` or inline JSON): Custom MCP server setup
46+
2. **Component manifest** (`--context components.json`): Provides component documentation via the `@storybook/mcp` package
47+
3. **MCP server config** (`--context mcp.config.json` or inline JSON): Custom MCP server setup (use this for fully custom MCP servers, not for Storybook MCP)
4848
4. **Extra prompts** (`--context extra-prompt-01.md,extra-prompt-02.md`): Additional markdown files appended to main prompt
4949

5050
## Project Structure

‎eval/evals/100-flight-booking-plain/expected/stories/FlightBooking.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const Submitted: Story = {
183183
await userEvent.click(returnToggle);
184184
});
185185

186-
await step('Select fromt flight', async () => {
186+
await step('Select from flight', async () => {
187187
const fromFlightTrigger = (
188188
await looseGetInteractiveElements('flight-trigger-from', 'From', step)
189189
)[0];

‎eval/evals/120-flight-booking-radix/expected/stories/FlightBooking.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export const Submitted: Story = {
208208
await userEvent.click(returnToggle);
209209
});
210210

211-
await step('Select fromt flight', async () => {
211+
await step('Select from flight', async () => {
212212
const fromFlightTrigger = (
213213
await looseGetInteractiveElements('flight-trigger-from', 'From', step)
214214
)[0];

‎eval/evals/130-flight-booking-rsuite/hooks.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as path from 'node:path';
2-
import * as fs from 'node:fs/promises';
31
import type { Hooks } from '../../types.ts';
42
import { addDependency } from 'nypm';
53

‎packages/addon-mcp/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,12 +193,12 @@ Returns a list of all available UI components in your component library. Useful
193193

194194
#### 4. Get Component Documentation (`get-component-documentation`)
195195

196-
Retrieves detailed documentation for specific components, including:
196+
Retrieves detailed documentation for a specific component, including:
197197

198198
- Component documentation
199199
- Usage examples
200200

201-
The agent provides component IDs to retrieve their documentation.
201+
The agent provides a component ID to retrieve its documentation. To get documentation for multiple components, call this tool multiple times.
202202

203203
## Contributing
204204

0 commit comments

Comments
 (0)