# AI tools

> slotsmith-ai is an MCP server that gives coding agents slotsmith's real props, slots and adapters. Set it up in Claude Code, Cursor, VS Code or Claude Desktop.

slotsmith's AI tools are `slotsmith-ai`, an MCP server that gives coding agents the real API: every prop, slot, fallback and label, plus ready-made adapters. Add it to your agent with one command or one config file, and the agent reads the API instead of guessing prop names.

## What

Everything the server knows is generated from the library's source, so it describes the props and slots of an actual release. Nothing is installed in your project: the client runs the server with `npx` and talks to it over stdio. It needs Node 20 or later.

It covers the four components, the [data table](https://slotsmith.dev/components/data-table/), the [autocomplete](https://slotsmith.dev/components/autocomplete/), the [date picker](https://slotsmith.dev/components/date-picker/) and the [file uploader](https://slotsmith.dev/components/file-uploader/), and twenty ready-made adapters: each component for MUI, shadcn/ui, Chakra UI, Ant Design and Radix Themes. The adapters are generated from the integration suites the library is tested with. Each component's Adapters page shows the five libraries live, for example [the date picker's](https://slotsmith.dev/components/date-picker/adapters/).

The same package copies an adapter into your project as source you own, with no agent involved:

```bash
npx slotsmith-ai add date-picker --ui mui
npx slotsmith-ai add --all --ui shadcn
```

## Setup

Pick your client. Every one of them starts the same command, `npx -y slotsmith-ai mcp`.

Claude Code:

```bash
claude mcp add slotsmith -- npx -y slotsmith-ai mcp
```

Cursor:

```json
{
  "mcpServers": {
    "slotsmith": {
      "command": "npx",
      "args": ["-y", "slotsmith-ai", "mcp"]
    }
  }
}
```

VS Code:

```json
{
  "servers": {
    "slotsmith": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "slotsmith-ai", "mcp"]
    }
  }
}
```

Claude Desktop:

```json
{
  "mcpServers": {
    "slotsmith": {
      "command": "npx",
      "args": ["-y", "slotsmith-ai", "mcp"]
    }
  }
}
```

- **Claude Code:** run the command in your project. Add `--scope project` before the `--` to write the server to the project's `.mcp.json` and share it with your team. On Windows (not WSL), start `npx` through `cmd /c`: `claude mcp add slotsmith -- cmd /c npx -y slotsmith-ai mcp`.
- **Cursor:** save the file as `.cursor/mcp.json` in your project, or as `~/.cursor/mcp.json` for every project.
- **VS Code:** save the file as `.vscode/mcp.json` in your project. VS Code reads a `servers` key, not `mcpServers`, and each server names its `type`.
- **Claude Desktop:** Settings, then Developer, then Edit Config opens `claude_desktop_config.json`: `~/Library/Application Support/Claude/` on macOS, `%APPDATA%\Claude\` on Windows. Add the server and restart the app. On Windows, if the app cannot start `npx`, use `"command": "cmd"` with `"args": ["/c", "npx", "-y", "slotsmith-ai", "mcp"]`.

Then ask for a feature as you usually would. The server tells the agent to look up props and slots before it writes slotsmith code.

## Tools

The agent calls these on its own. `component` is one of `data-table`, `autocomplete`, `date-picker` and `file-uploader`. `library` is one of `mui`, `shadcn`, `chakra`, `antd` and `radix`.

| Tool | Arguments | What it gives the agent |
| --- | --- | --- |
| `list_components` | none | Every component with its entry point, CSS import, required and optional peers and a one-line summary, plus the locale packs. |
| `get_component_api` | `component` | A component's props grouped as in these docs, with types and defaults, the controlled and uncontrolled pairs, and every label. |
| `list_slots` | `component` | A component's replaceable parts: each slot's name, kind (element or widget), props type and summary. |
| `get_slot` | `component`, `slot` | One slot: the props it receives, its fallback markup, and a snippet that replaces it. |
| `get_adapter_example` | `component`, `library` | A ready-made `components` map that renders the component with a library's primitives. |
| `get_setup` | `component`, `framework` (optional), `virtual` (optional) | The install command, the imports, the CSS import, and notes for Next.js, Vite or Remix. |
| `search_docs` | `query`, `limit` (optional) | Ranked matches across props, slots, labels, guides and adapters, each with the resource or tool call to read next. |

Each successful result is Markdown for the model, with the same facts as structured JSON for clients that read it. `radix` means Radix Themes (`@radix-ui/themes`); an app built on the bare Radix primitives should ask for `shadcn`, which is built on them. A slot name that does not exist returns an error that lists the component's real slots, so the agent can correct itself.

## Resources

Resources are documents a client can list and add to a conversation. The server has two kinds, both Markdown:

- `slotsmith://components/{name}`: a component's full reference, with its import, API, labels and slots. `{name}` is a component, such as `date-picker`.
- `slotsmith://guides/{name}`: the hand-written guides: `setup`, `slots`, `theming`, `i18n`, `adapters`, and one per component.

The tools reach the same facts, so an agent does not need the resources to work.

## Prompts

Prompts are ready-made requests you start yourself. In Claude Code they are slash commands, for example `/mcp__slotsmith__adapt-slots-to-library date-picker mui`.

| Prompt | Arguments | What it gives the agent |
| --- | --- | --- |
| `build-component` | `component`, `library` (optional) | Build a feature with a component, from its real API. With a library, the prompt includes that library's adapter. |
| `adapt-slots-to-library` | `component`, `library` | Write a `components` map that renders a component with a library's primitives, starting from the ready-made adapter. |

`build-component` also takes `none` as its `library`, for the built-in fallbacks. Both prompts include the component's reference, so the agent starts from the real API.

## Versions

`slotsmith-ai` shares its major and minor version with `slotsmith`: each `slotsmith-ai` release describes the `slotsmith` release with the same major and minor number. When the server starts, it looks for `node_modules/slotsmith` in the directory the client starts it in, then in each parent directory, the way Node finds a package.

If the installed major or minor version differs from the one the server describes, every tool result starts with a one-line warning that names both versions. The agent then knows to check the installed types, or to suggest installing the matching `slotsmith`. A different patch version never warns, because patch releases do not change the API. When the server finds no `slotsmith` at all, for example because the client started it outside your project, it does not warn.

To keep the server on the release your project uses, pin it to your `slotsmith` major and minor version in its arguments: `"slotsmith-ai@<major>.<minor>"` in place of `"slotsmith-ai"`.