import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/MCP" />

# MCP Server

The Design System MCP Server (`@preply/ds-mcp`) exposes Preply Design System knowledge to AI assistants through the [Model Context Protocol](https://modelcontextprotocol.io/). It enables AI-powered tools like Cursor, Claude Code, and other MCP-compatible clients to discover components, read documentation, search design tokens, and find icons—all without leaving your editor.

## Quick Start

### Cursor

Click the button below to install the MCP server in Cursor:

[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=ds-mcp&config=eyJjb21tYW5kIjoibnB4IC15IEBwcmVwbHkvZHMtbWNwQGxhdGVzdCBzdGFydCJ9)

### Claude Code

Run the following command in your terminal:

```bash
claude mcp add ds-mcp -- npx -y @preply/ds-mcp@latest start
```

### Other MCP Clients

Add an MCP server entry to your IDE or client configuration:

```json
{
    "mcpServers": {
        "ds-mcp": {
            "command": "npx",
            "args": ["-y", "@preply/ds-mcp@latest", "start"]
        }
    }
}
```

Any MCP client that supports stdio transports should work.

## Available Tools

Once installed, your AI assistant can use the following tools to help you work with the Design System.

- **list-components** - Lists all available components from `@preply/ds-web-lib` and `@preply/ds-web-root`.
- **get-component-docs** - Returns full markdown documentation for a specific component, including import statements, descriptions, and all available props.
- **search_token_by_name** - Search design tokens by name.
- **search_token_by_value** - Search design tokens by their value.
- **search_icon** - Search icons by name.
