storybook-addon-angular-manifest

A Storybook addon that generates component manifests for Angular components using Compodoc documentation. This enables AI-powered tools like Storybook MCP to understand your Angular component library.

Features

- Compodoc Integration: Extracts component inputs, outputs, properties, and methods from Compodoc JSON
- Angular Template Snippets: Generates Angular template syntax snippets for each story
- JSDoc Support: Extracts @summary, @desc, and other JSDoc tags from your stories
- MCP Compatible: Outputs manifests in a format compatible with the Storybook MCP addon

Prerequisites

1. Compodoc: Generate documentation for your Angular project:

``bash
npx compodoc -p tsconfig.json
`

This creates a documentation.json file that this addon reads.

2. Storybook 8+: This addon requires Storybook 8.0.0 or later.

Installation

`bash
npm install storybook-addon-angular-manifest


or

pnpm add storybook-addon-angular-manifest

or

yarn add storybook-addon-angular-manifest
`

Usage

Add the addon to your .storybook/main.js (or .storybook/main.ts):

`js
export default {
framework: '@storybook/angular',
addons: [
'storybook-addon-angular-manifest', // Must come before addon-docs
'@storybook/addon-docs',
'@storybook/addon-mcp', // Optional: for AI integration
],
};
`

$3

The order of addons matters:
1. storybook-addon-angular-manifest - Generates component manifests
2. @storybook/addon-docs - Attaches MDX documentation to components
3. @storybook/addon-mcp - Exposes manifests via MCP for AI tools

How It Works

1. When Storybook starts, this addon reads your documentation.json file (generated by Compodoc)
2. For each story file, it:
- Parses the CSF (Component Story Format) file
- Matches components to their Compodoc documentation
- Extracts inputs, outputs, and descriptions
- Generates Angular template snippets
3. The resulting manifest is served at /manifests/components.json

Compodoc Tips

For best results with Compodoc:

`typescript
/**
* A button component for user interactions.
*
* @summary Primary action button
*/
@Component({
selector: 'app-button',
// ...
})
export class ButtonComponent {
/* The button's label text /
@Input() label: string = 'Click me';

/* Whether the button is disabled /
@Input() disabled: boolean = false;

/* Emitted when the button is clicked /
@Output() clicked = new EventEmitter();
}
`

Generated Manifest Example

`json
{
"v": 0,
"components": {
"button": {
"id": "button",
"name": "ButtonComponent",
"path": "./src/stories/button.stories.ts",
"description": "A button component for user interactions.",
"summary": "Primary action button",
"import": "import { ButtonComponent } from 'my-lib';",
"stories": [
{
"name": "Primary",
"snippet": ""
}
],
"compodocData": {
"name": "ButtonComponent",
"selector": "app-button",
"inputs": [
{ "name": "label", "type": "string", "defaultValue": "'Click me'" },
{ "name": "disabled", "type": "boolean", "defaultValue": "false" }
],
"outputs": [
{ "name": "clicked", "type": "EventEmitter" }
]
}
}
}
}
`

API

$3

`typescript
import {
loadCompodocJson,
findCompodocJson,
getCompodocForComponent,
generateAngularSnippet,
extractJSDocInfo,
} from 'storybook-addon-angular-manifest';
`

$3

`typescript
import type {
CompodocDocObj,
CompodocJson,
CompodocResult,
AngularComponentManifest,
} from 'storybook-addon-angular-manifest';
`

Troubleshooting

$3

Run Compodoc to generate the documentation:

`bash
npx compodoc -p tsconfig.json
`

The addon looks for documentation.json in the project root or .compodoc/documentation.json.

$3

Make sure your component is:
1. Included in the tsconfig.json used with Compodoc
2. Properly decorated with @Component or @Directive`
3. Exported from a module

$3

The addon caches file reads for performance. Restart Storybook after:
- Updating Compodoc documentation
- Adding new components

License

MIT