Skip to content

Multi-Library Workspaces

A real design system is rarely a single package. cl-mcp analyzes an entire workspace of libraries in one run, emitting per-library metadata plus a manifest that ties them together.

The workspace layer (src/workspace/) is configured with a Zod-validated cl-mcp.yaml. Each library entry names a path and (optionally) a framework; the framework detector infers it from dependencies and a source scan when omitted.

Terminal window
npx -y @cl-mcp/cli generate --config ./cl-mcp.yaml

You can also skip the config file entirely:

Terminal window
# explicit library paths
npx -y @cl-mcp/cli generate \
--lib libs/ui --lib libs/forms --output-dir ./data
# or scan a directory for libraries
npx -y @cl-mcp/cli generate --scan libs --output-dir ./data

Discovery is not coupled to any particular monorepo tool. It combines explicit entries and scan directories, and resolves each library’s alias from, in order: tsconfig path mappings → package.json name → the relative path.

  • data/<library>/component-metadata.json — one per library.
  • data/workspace-manifest.json — every library, plus the cross-library import graph and Storybook co-occurrence data used for related-component suggestions.

Point the server or CLI at the directory and every library is loaded:

Terminal window
CL_MCP_DATA_DIR=./data npx -y @cl-mcp/mcp-server
npx -y @cl-mcp/cli list-libraries --data-dir ./data

Every tool accepts an optional library argument, and component names accept lib:Name qualifiers (for example ui:Button) so the same request can target any library in the workspace.

Workspaces can mix frameworks freely. The committed examples/multi-framework/ fixture is deliberately two different layouts — libs/ui (React, flat) and libs/forms (Angular, directory-per-component) — so the pipeline is exercised against both at once:

Terminal window
npm run example:multi