← Home

Codebase Scanner

The scanner reads your repository for React components and Storybook stories, then syncs them to your Layout project. Scanned components appear alongside Figma components in the Design System hub and feed into Explorer prompts, so the agent reuses what you already have instead of re-generating it.

What gets detected

  • React components — function exports, const exports, forwardRef, grouped exports, default exports. Props interfaces are resolved.
  • Storybook stories (CSF3) — story names, tags, argTypes, and args are parsed so the agent knows the variants you already support.
  • Import paths — resolved using the @/ alias convention so generated code can import your components cleanly.
Storybook argTypes and stories are parsed today but not yet emitted to the get_component and list_components MCP tools. Coming in a follow-up.

Setup

The scanner is part of the Layout CLI. After you've run init and install, run the scan from the root of your repository:

bash
npx @layoutdesign/context scan --sync --project <projectId>

You'll find the project ID in the Studio URL after opening a project. The --sync flag pushes scanned components to Layout; without it, the command is a dry run.

Flags

FlagDefaultDescription
[path]cwdDirectory to scan. Defaults to the current working directory.
--syncoffPush results to Layout. Without it, the scan prints locally.
--project <id>—Layout project to sync into. Required with --sync.
--type <t>allLimit to components or stories.

Auto-scan on MCP start

When your AI agent starts the Layout MCP server, the scanner runs automatically on the linked project root. Typical runs finish in 10–30 ms. You don't have to invoke scan manually for the agent to see your components.

Run scan --syncexplicitly when you want scanned components to show up in the Studio UI. The MCP-side scan feeds the agent but doesn't push to the Layout API.

Where scanned components show up

  • Design System hub → Components view — merged with extracted Figma components so you see both sources side by side.
  • Source Panel → Components tab— shows an empty state with setup instructions on projects that haven't been scanned yet.
  • Explorer prompt context — scanned components are injected into the Component Inventory section so the agent can import rather than rebuild.
  • MCP — list_components merges design system + codebase sources; get_component returns whichever has more detail.

Auto-rescan on push

Configure a GitHub webhook pointing at your Layout project. On every push, the scanner re-runs against the updated tree and the component list refreshes automatically. Add or rename a component, push, and it shows up in Layout without a manual sync.

Known limits

  • Storybook argTypes, args, and story names are parsed but not yet exposed via get_component or list_components. Coming soon.
  • Figma-to-code name matching uses normalised substring matching. Exact matches always win, but loose matches can surface unexpectedly. Rename Figma components closer to your code for best results.
  • Icon-style components (e.g. icon/alert-circle in Figma) can flood the merged list when the Figma file ships a large icon set. Filter by type in the Components view to focus on UI components.

Related