Hello

Provides a ready-to-use TypeScript MCP server exposing a component registry to AI models.

typescript

2

GitHub Stars

typescript

Language

5 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "revskill10-hello-mcp": {
      "command": "node",
      "args": [
        "/path/to/mcp-starter/dist/server.js"
      ]
    }
  }
}

You can run a ready-to-use MCP server that exposes a structured component registry to AI assistants. This server is written in TypeScript, validates data with schemas, and includes development tools for hot reload and inspection. It’s designed to help UI libraries and registries expose their components in a way that models can discover and reason about them.

How to use

You use the MCP server by running it locally or remotely and then connecting your MCP-enabled client to fetch UI components categorized from your registry. The server exposes tools that return all components and category-specific subsets, along with detailed component data and usage examples. Start the server, ensure it’s reachable by your client, and then request the appropriate tools to retrieve components you want to integrate into your UI documentation, design system, or AI-assisted workflows.

How to install

pnpm install
pnpm run build

Prerequisites you need before installing:
- Node.js 18 or higher
- pnpm (recommended) or npm
- Basic understanding of TypeScript and MCP concepts
Then follow these steps to set up the starter server locally.

Configuration and runtime

Configure the server to point at your component registry by updating the configuration file. The key settings include the project name, base URL, and the registry locations. You will customize the categories and, if needed, add new component types.

export const mcpConfig = {
  projectName: "your-project-name",
  // Replace with your actual project URL
  baseUrl: "https://your-ui-library.com",
  registryUrl: "https://your-ui-library.com/r",
  registryFileUrl: "https://your-ui-library.com/registry.json",
};

Development workflow

Use the development server to iterate quickly. The starter supports hot reload and an inspector so you can test tools and component data interactively.

pnpm run dev

pnpm run inspect

Available tools

getUIComponents

Returns a comprehensive list of all UI components from your registry.

getButtons

Dynamically available tool for retrieving all button components based on defined categories.

getForms

Dynamically available tool for retrieving all form components based on defined categories.