ContentStudio UI Library MCP Server

An MCP (Model Context Protocol) server that provides access to the ContentStudio UI Library documentation.

Features

• 📚 Get detailed component documentation
• 🔍 Search for components by keyword
• 📋 List all available components
• 🚀 Easy integration with Claude Desktop and other MCP clients

Installation

From NPM (Recommended)

npm install -g mcp-server-cs-ui-library

From Source

git clone https://github.com/contentstudio/mcp-server-cs-ui-library.git
cd mcp-server-cs-ui-library
npm install
npm run build

Usage

With Claude Desktop

Add this to your Claude Desktop configuration file:

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "cs-ui-library": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-server-cs-ui-library/dist/index.js"]
    }
  }
}

Or if installed globally:

{
  "mcpServers": {
    "cs-ui-library": {
      "command": "mcp-server-cs-ui-library"
    }
  }
}

With Cline or Other MCP Clients

Add the server configuration to your MCP client's settings following their specific documentation.

Available Tools

get_component_doc

Get detailed documentation for a specific component.

Example:

Get documentation for the Button component

list_components

List all available components in the library.

Example:

Show me all available CS UI components

search_components

Search for components by keyword or functionality.

Example:

Search for input components

Supported Components

The server provides documentation for components including:

• button
• input
• card
• modal
• dropdown
• tabs
• accordion
• avatar
• badge
• checkbox
• radio
• select
• switch
• textarea
• tooltip
• alert
• dialog
• popover
• progress
• slider
• spinner
• table
• toast

...and more!

Development

# Install dependencies
npm install

# Build the project
npm run build

# Watch mode for development
npm run watch

# Run in development mode
npm run dev

Customization

To customize the component list or URLs, edit the COMPONENTS array and BASE_URL in src/index.ts.

If your documentation site has a different structure, update the parseComponentDoc method selectors to match your HTML structure.

Troubleshooting

Components not loading

1. Check that the base URL is correct
2. Verify the component name is in the supported list
3. Check network connectivity
4. View the component URL directly in a browser

Configuration not working

1. Ensure the path to the server is absolute
2. Restart Claude Desktop after configuration changes
3. Check Claude Desktop logs for errors

License

MIT

Links

• Documentation Site: https://cs-ui-library.netlify.app/
• MCP Documentation: https://modelcontextprotocol.io/