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:

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

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):

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
  ],
};

Addon Order

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:

/**
 * 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<void>();
}

Generated Manifest Example

{
  "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": "<app-button label=\"Primary\"></app-button>"
        }
      ],
      "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<void>" }
        ]
      }
    }
  }
}

API

Exported Functions

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

Types

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

Troubleshooting

"Compodoc JSON not found"

Run Compodoc to generate the documentation:

npx compodoc -p tsconfig.json

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

Component not found in Compodoc

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

Manifest not updating

The addon caches file reads for performance. Restart Storybook after:

• Updating Compodoc documentation
• Adding new components

License

MIT