Component Library

You can run a typed MCP (Model Context Protocol) server that exposes your private component library’s documentation and examples to AI assistants. This server type-safely analyzes your components, documents props, and serves code examples so agents can understand and reuse your library confidently.

How to use

Start by running the MCP server locally to enable AI assistants to query your component library. The server exposes three core tools for practical tasks: list_components to enumerate components, get_component to retrieve full component docs and props, and get_example to fetch usage examples. Connect your MCP client to the running server and issue natural‑language requests like asking for all components in a category, getting detailed docs for a specific component, or retrieving example snippets for common usage.

Practical usage patterns you can perform after starting the server include: listing all components, filtering by category, inspecting a single component's documentation and props, and pulling ready‑to‑paste usage examples for quick integration into your codebase.

How to install

Prerequisites: Node.js and npm should be available on your machine. You will clone or download the MCP server, install dependencies, and build TypeScript before running.

# 1. Clone or download the server
# Replace with your actual clone URL or path
# git clone https://example.com/component-library-mcp-ts.git

# 2. Navigate to the project
cd component-library-mcp-ts

# 3. Install dependencies
npm install

# 4. Build TypeScript
npm run build

Configure environment variables to point the server at your component library and its documentation content.

export COMPONENTS_PATH="/path/to/your/component-library/src/components"
export DOCS_PATH="/path/to/your/documentation-site/content"
export EXAMPLES_PATH="/path/to/your/documentation-site/examples"

Or create a .env file with these values:

COMPONENTS_PATH=/path/to/your/components
DOCS_PATH=/path/to/your/docs
EXAMPLES_PATH=/path/to/your/examples

Run tests to verify everything works before starting the server in normal (production) mode or development mode for hot reload during work.

npm test

For development hot reload, you can start via tsx (as shown in examples) to iterate quickly.

## Configuration and runtime notes

You will typically run the MCP server as a local process. The runtime commands shown use a local Node.js process starting from the compiled index or a development TSX runner. The server reads environment variables to locate your components, docs, and examples.

Environment variables used by the runtime include paths to the components, docs, and examples. Provide these values in your shell environment or via a dedicated environment file.

## Troubleshooting

If you encounter build or type errors, clean the build artifacts and rebuild to ensure TypeScript compiles cleanly.

If components are not found, verify that your COMPONENTS\_PATH matches the actual component files and that the component names align with the expected naming. Ensure your docs and examples paths are accessible and contain properly formatted content.

When the server cannot be reached by your MCP client, confirm that the local process is running and check that Node.js is in your PATH. Use development mode if you need to debug interactively.

## Notes

The server provides type-safe support for component metadata, props, and documentation by parsing Markdown frontmatter and extracting prop definitions from TypeScript interfaces. You can customize and extend the metadata to include additional attributes such as accessibility details and dependency graphs.

## Available tools

### list\_components

Lists all components with optional category filtering to help you discover what is available in your library.

### get\_component

Retrieves detailed documentation, props, and usage information for a specific component.

### get\_example

Provides code examples showing how to use a component in real scenarios.