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

<Meta title="Guides/AI Integration" />

# AI Integration

The Design System provides tools that expose Preply Design System knowledge to AI coding assistants — components, documentation, design tokens, and icons. There are two integration options:

- **Agent Skill** — works with any AI agent (Cursor, Claude Code, Codex, Copilot, etc.). Recommended.
- **MCP Server** — for MCP-compatible clients (Cursor, Claude Code). Requires MCP client support.

Both methods expose the same underlying tools and return identical results.

## Agent Skill (recommended)

The agent skill teaches your AI assistant how to use the Design System correctly — component usage rules, styling constraints, design tokens, and tools to query components, tokens, and icons — without any server configuration.

Install via [`skills` CLI](https://github.com/vercel-labs/skills):

```bash
npx skills add https://github.com/preply/design-system/blob/main/skills/design-system
```

This auto-detects your coding agents and installs the skill to the appropriate directories.

Alternatively, copy the [skill folder](https://github.com/preply/design-system/blob/main/skills/design-system) manually into your skills directory:

- `.agents/skills/` — for Cursor, VSCode Copilot, and Codex
- `.claude/skills/` — for Claude Code

## MCP Server

The MCP Server (`@preply/ds-ai-mcp`) exposes Design System tools through the [Model Context Protocol](https://modelcontextprotocol.io/).

### 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

```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"]
        }
    }
}
```

## Available Tools

Both integration methods provide access to the same five tools:

- **list_components** — list all available components with metadata.
- **get_component_docs** — full documentation for a specific component.
- **search_token_by_name** — search design tokens by name.
- **search_token_by_value** — search design tokens by value.
- **search_icon** — search icons by name.

All tools require a `platform` parameter: `web` (for `@preply/ds-web-lib` / `@preply/ds-web-root`) or `react-native` (for `@preply/ds-rn-lib`).
