# MCP Server

> Bring the CoreUI documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.

## Introduction

[Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open standard that lets AI assistants connect to external tools and data sources. The **`@coreui/docs-mcp`** server gives your assistant direct access to the official CoreUI documentation, so it answers from the current docs instead of relying on stale training data.

It provides:

- **Component documentation** — pages, props, events, and slots.
- **Live content** — read on demand from `coreui.io`, always matching the latest release.
- **Cross-framework links** — where each component is documented for Angular, Bootstrap, React, and Vue.
- **Coverage of Bootstrap, React, and Vue** from a single server.

The server runs locally over stdio via `npx` — no global install required.

## Installation

### Claude Code

Add the server with the CLI, then start a new session and run `/mcp` to verify the connection:

```bash
claude mcp add coreui-docs -s user -- npx -y @coreui/docs-mcp --framework bootstrap
```

### Cursor

Create `.cursor/mcp.json` in your project (or `~/.cursor/mcp.json` for global configuration):

```json
{
  "mcpServers": {
    "coreui-docs": {
      "command": "npx",
      "args": ["-y", "@coreui/docs-mcp", "--framework", "bootstrap"]
    }
  }
}
```

### VS Code

Create `.vscode/mcp.json` in your project. Note that VS Code uses the `servers` key:

```json
{
  "servers": {
    "coreui-docs": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@coreui/docs-mcp", "--framework", "bootstrap"]
    }
  }
}
```

### Windsurf

Edit `~/.codeium/windsurf/mcp_config.json`:

```json
{
  "mcpServers": {
    "coreui-docs": {
      "command": "npx",
      "args": ["-y", "@coreui/docs-mcp", "--framework", "bootstrap"]
    }
  }
}
```

### Claude Desktop

Edit `claude_desktop_config.json` (Settings → Developer → Edit Config):

```json
{
  "mcpServers": {
    "coreui-docs": {
      "command": "npx",
      "args": ["-y", "@coreui/docs-mcp", "--framework", "bootstrap"]
    }
  }
}
```

### OpenAI Codex

Add it with the CLI, or edit `~/.codex/config.toml` directly:

```bash
codex mcp add coreui-docs -- npx -y @coreui/docs-mcp --framework bootstrap
```

```toml
[mcp_servers.coreui-docs]
command = "npx"
args = ["-y", "@coreui/docs-mcp", "--framework", "bootstrap"]
```

## Tools

Once connected, your assistant can call the following tools:

| Tool | Description |
| --- | --- |
| `list_components` | List documentation pages, optionally filtered by section or a substring. |
| `search_docs` | Search the documentation and return the best matching pages. |
| `get_doc_page` | Fetch the full Markdown of a page by slug, component name, or URL. |
| `get_component_api` | Get the structured API (props, events, slots) for a component. |
| `get_cross_framework_links` | Get documentation URLs for a component across every CoreUI framework. |

## Configuration

| Flag | Environment variable | Default | Description |
| --- | --- | --- | --- |
| `--framework <list>` | `COREUI_DOCS_FRAMEWORKS` | `bootstrap,react,vue` | Enabled editions (comma-separated). The first is the default for tools. |
| `--base-url <url>` | `COREUI_DOCS_BASE_URL` | `https://coreui.io` | Origin of the CoreUI site. The `/<framework>/docs` path is appended automatically — override only for a staging or self-hosted mirror. |
| `--ttl <minutes>` | `COREUI_DOCS_TTL_MINUTES` | `360` | Cache freshness window. |
| — | `COREUI_DOCS_CACHE_DIR` | OS cache directory | On-disk cache location. |

## Example prompts

Once installed, try asking your AI assistant:

- "How do I use the CoreUI Multi Select component?"
- "What props does the CoreUI Date Picker accept?"
- "Show me the CoreUI Modal documentation."
- "Where is the Accordion documented across CoreUI frameworks?"

The package is open source and published as [`@coreui/docs-mcp`](https://www.npmjs.com/package/@coreui/docs-mcp).