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

If you are using @storybook/addon-mcp docs tools, enable the manifest route with the flag that matches your Storybook version:

// .storybook/main.ts
export default {
  features: {
    // Storybook 10.2.x
    experimentalComponentsManifest: true,
    // Storybook 10.3+
    // componentsManifest: true,
  },
};

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

Story requirements

This addon requires meta.component so it can resolve the Angular component name during CSF parsing:

export default {
  title: 'Example/Button',
  component: ButtonComponent,
};

If meta.component is missing, the manifest entry is generated with an error and MCP tooling will not have reliable component metadata.

Configuring a selector prefix

When Compodoc supplies a selector we use it verbatim. If Compodoc is missing data we now fall back to a bare kebab-case selector (e.g. ButtonComponent → button). Projects that rely on the Angular CLI-style prefix can opt back in by adding a global parameter in .storybook/preview.ts(x):

// .storybook/preview.ts
export const parameters = {
  angularManifest: {
    selectorPrefix: 'app',
  },
};

Restart Storybook after changing this value so the manifest regeneration picks it up. If your Storybook config directory lives somewhere other than .storybook, set STORYBOOK_MANIFEST_CONFIG_DIR to point at it (relative paths are resolved from the project root).

Configuring the Compodoc JSON path

By default, the addon auto-discovers documentation.json from story locations (including nested Nx library folders) and falls back to the workspace root (documentation.json or .compodoc/documentation.json).

If your file is generated in a custom location, set an explicit path:

// .storybook/preview.ts
export const parameters = {
  angularManifest: {
    compodocPath: 'libs/tile-selector-modal/documentation.json',
  },
};

compodocPath may be relative to the workspace root or absolute.

Configuring @storybook/addon-mcp compatibility

Current versions of @storybook/mcp format get-documentation from reactDocgen or reactDocgenTypescript. Angular compodocData is preserved in /manifests/components.json, but it is not rendered directly by those MCP docs tools yet.

To improve the current docs output without changing the base manifest shape for every consumer, you can opt into a compatibility layer:

// .storybook/preview.ts
export const parameters = {
  angularManifest: {
    addonMcpCompatibility: true,
  },
};

This works with the standard Angular docs setup in .storybook/preview.ts, including files that import Compodoc JSON for setCompodocJson(...). You do not need a separate preview file just for angularManifest settings.

When enabled, the addon:

• Synthesizes reactDocgen.props from Angular inputs so get-documentation can render them under ## Props
• Appends an ## Outputs section to the component description using Compodoc outputs
• Leaves compodocData unchanged

This mode is intentionally temporary and opt-in. It exists to improve current @storybook/addon-mcp docs output and is not the canonical Angular manifest contract.

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,
  type GenerateAngularSnippetOptions,
  extractJSDocInfo,
} from 'storybook-addon-angular-manifest';

Types

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

Troubleshooting

"Compodoc JSON not found"

Run Compodoc to generate the documentation:

npx compodoc -p tsconfig.json

The addon first honors angularManifest.compodocPath (if provided), then auto-discovers from story directories, then falls back to workspace-root documentation.json and .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

MCP docs tools show stories but not Angular inputs

If list-all-documentation works but get-documentation only shows snippets, enable the compatibility flag:

export const parameters = {
  angularManifest: {
    addonMcpCompatibility: true,
  },
};

This keeps the Angular manifest intact while also emitting a reactDocgen-compatible view of your inputs for current MCP docs tooling.

Manifest routes do not exist with @storybook/addon-mcp

The required Storybook feature flag depends on your Storybook version:

• Storybook 10.2.x: features.experimentalComponentsManifest = true
• Storybook 10.3+: features.componentsManifest = true

@storybook/addon-mcp 0.3.4 docs reference the renamed componentsManifest flag, but Storybook 10.2.x still uses experimentalComponentsManifest.

@storybook/addon-mcp also detects manifest availability when Storybook starts. If you upgrade this addon or change manifest-related configuration, restart Storybook so the MCP docs tools can be re-registered.

Self-signed HTTPS certificates break manifest fetching

@storybook/mcp fetches /manifests/components.json from the running Storybook origin with Node's built-in fetch(). In enterprise environments with self-signed certificates, that request can fail unless the certificate is trusted by Node.

The supported workaround is to set NODE_EXTRA_CA_CERTS before starting Storybook:

NODE_EXTRA_CA_CERTS=/path/to/root-ca.pem npm run storybook

This behavior lives downstream in @storybook/mcp, so this addon documents the workaround but does not override TLS verification itself.

meta.component is missing

Every story meta must include component:. Without it, the addon cannot resolve the Angular component name via CSF parsing, and manifest generation falls back to an error entry.

Manifest not updating

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

• Updating Compodoc documentation
• Adding new components

License

MIT