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

<Meta
    title="Get started/AI assistants"
    summary="How to use the Design System with AI coding assistants via skill or MCP server."
/>

# Get started: AI assistants

The Design System ships an [agent skill](https://github.com/preply/design-system/blob/main/skills/design-system)
that teaches AI coding assistants how to use it correctly — component usage rules, styling
constraints, design tokens — and bundles reference docs for components, tokens, and icons, so no
server or network access is required.

**If your tool supports skills, install the skill.** Use the MCP server only as a fallback for
tools without skill support.

## Install the skill

The skill works with any agent that supports [skills](https://github.com/vercel-labs/skills):
Claude Code, Cursor, Codex, Copilot, and others.

Install via the [`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. Run the
same command again to update to the latest version.

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

To verify the installation, ask your assistant a Design System question — for example, "which DS
component do I use for a text input with a label?". It should answer from the skill references
without searching the web.

## No skill support? Use the MCP server

For tools that don't support skills, [`@preply/ds-ai-mcp`](https://github.com/preply/design-system/blob/main/packages/ai-mcp)
exposes the same reference docs snapshot as an [MCP](https://modelcontextprotocol.io/) server
(stdio transport):

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