# AI and MCP

Your coding agent can search Eased, read a component's docs and source, and install it. Connect the Eased MCP server, or point your agent at `llms.txt` or any page's Markdown. To get started fast, see [Quickstart for agents](/docs/agent-quickstart).

## Add the MCP server

The server is at `https://eased.dev/api/mcp`. It uses Streamable HTTP, keeps no session state and needs no account for free components.

### Claude Code

```bash
claude mcp add --transport http eased https://eased.dev/api/mcp
```

### Cursor

```json .cursor/mcp.json
{
  "mcpServers": {
    "eased": {
      "url": "https://eased.dev/api/mcp"
    }
  }
}
```

Add this to `.cursor/mcp.json` in your project, or to `~/.cursor/mcp.json` for every project.

### VS Code

```json .vscode/mcp.json
{
  "servers": {
    "eased": {
      "type": "http",
      "url": "https://eased.dev/api/mcp"
    }
  }
}
```

### Codex

```bash
codex mcp add eased --url https://eased.dev/api/mcp
```

### Other clients

Windsurf, Zed and other MCP clients use the same URL. Choose the client's HTTP or Streamable HTTP transport and enter `https://eased.dev/api/mcp`.

## Tools

The server has five read-only tools:

| Tool | Input | Returns |
|---|---|---|
| `get_skill` | None | The Eased design skill as Markdown: install, tokens, composition patterns and the design rules. Agents call it first. |
| `list_components` | `tier`: `"free"` or `"pro"`, optional | Every component in catalogue order: slug, title, one-line summary, tier, interaction verb and page URL |
| `search_components` | `query`: a few words, such as `"loading state"` or `"drag to adjust a number"` | Up to 10 matches, best first, ranked on title, slug, verb, description and README text |
| `get_component` | `slug`, such as `"button"` | The component as Markdown: description, tier, docs, install command and dependencies. Free components include the full source of their files and a demo. |
| `get_install_command` | `slugs`: one or more slugs | One `npx shadcn add …` command for the free components. Pro and unknown slugs are listed separately. |

A typical session:

```text
You:    Deleting a row should be undoable, like Linear.
Agent:  search_components("undo delete toast")   → undo-pill · Press · free
        get_component("undo-pill")               → docs, props, source
        npx shadcn add https://eased.dev/r/undo-pill.json
        Wired UndoPill into FilesTable. ⌘Z restores the row in place.
```

## The Eased skill

The Eased skill packages the design thinking behind the library for your agent: the alignment and grouping rules, the 1:2 spacing ratio, concentric corner radii, the three springs and when to use each, enter and exit timing, focus rings and reduced motion. It also covers how to install Eased components, which tokens to use and how to compose them. It's free and MIT, like the free components.

Install it with the shadcn CLI:

```bash
npx shadcn add https://eased.dev/r/eased-skill.json
```

The CLI writes `.claude/skills/eased/SKILL.md` at your project root. Claude Code finds it there and loads it when a task touches UI. Commit the file so your whole team's agents use it.

Over MCP, `get_skill` returns the same file, so an agent connected to the server can load it without installing anything.

### Cursor

Cursor reads project rules from `.cursor/rules/`. Copy the skill there as a rule that applies to UI files:

```bash
mkdir -p .cursor/rules
cp .claude/skills/eased/SKILL.md .cursor/rules/eased.mdc
```

Then edit the rule's front matter so it attaches to your UI files, for example `globs: ["**/*.tsx"]`, or set `alwaysApply: true`.

### AGENTS.md

Codex, Copilot and other agents read `AGENTS.md`. Point it at the skill:

```md AGENTS.md
## UI

Before building or changing UI, read `.claude/skills/eased/SKILL.md` and follow its rules.
Install Eased components with `npx shadcn add https://eased.dev/r/<name>.json`.
```

## Pro source for your agent

```bash
claude mcp add --transport http eased https://eased.dev/api/mcp \
  --header "Authorization: Bearer $EASED_PRO_TOKEN"
```

Without a token, `get_component` returns docs and metadata for Pro components, but not their source. With your Pro token in the `Authorization` header, it returns Pro source too.

1. Create a token at [eased.dev/account](/account). For details, see [Pro components](/docs/installation#pro-components).
2. Export it in your shell as `EASED_PRO_TOKEN`.
3. Add the server with the header, as shown for Claude Code.

For clients configured with JSON, add a `headers` entry:

```json
{
  "mcpServers": {
    "eased": {
      "url": "https://eased.dev/api/mcp",
      "headers": {
        "Authorization": "Bearer eased_pro_…"
      }
    }
  }
}
```

For Codex, add the server to `~/.codex/config.toml` and name the token's environment variable:

```toml
[mcp_servers.eased]
url = "https://eased.dev/api/mcp"
bearer_token_env_var = "EASED_PRO_TOKEN"
```

A missing, revoked or invalid token isn't an error. The server behaves as it does without one. Pro source through MCP opens with early access, the same as the Pro registry.

## llms.txt

For agents that read the web instead of calling tools:

- [`/llms.txt`](https://eased.dev/llms.txt) is the index: what Eased is, the agent setup prompt, how to install, every component with its install command, registry JSON and Markdown link, and these docs.
- [`/llms-full.txt`](https://eased.dev/llms-full.txt) is these docs and every free component's page (docs, install and demo) in one file.

Both are generated from the registries, so they list a component as soon as it ships.

## Every page as Markdown

Add `.md` to any component or docs page URL:

- `https://eased.dev/components/button.md`
- `https://eased.dev/docs/installation.md`

On docs pages, **Copy page** copies the Markdown so you can paste it into a chat. **View as Markdown** opens it. Both are in the **On this page** column.

## Rules for agents

- Load the skill with `get_skill`, or install it, before you build UI, and follow its rules.
- Read a component with `get_component` before you use it. Its README lists props, keyboard behaviour and motion, and says when to pick it over similar components.
- Install with the shadcn CLI, not by copying source, so the shared stylesheet and helpers (`eased-tokens`, `eased-motion`) come with it.
- Import components from `@/components/eased/<name>/<name>`. Their styles come from the merged stylesheet; there's no CSS file to import.
- Don't wrap an Eased component in another animation. Its motion is already tuned, and a second transition fights it.