# Using CKEditor 5 with AI coding agents

The official **CKEditor skill** teaches your AI coding agent how to add CKEditor 5 to a project: it selects an installation method, wires up the editor, maps features to your use case, loads the styles, and sets the license key. Install it with one command:

```bash
npx skills add ckeditor/skills
```

> **Note**
>
> This guide covers **AI agent skills** that help you integrate CKEditor 5 into your application. It is not the in-editor [CKEditor AI](../features/ai/ckeditor-ai-overview.md) feature that helps you with content workflow.

<a id="what-the-skill-does">

## What the skill does

The skill loads automatically when you ask your agent to install, set up, configure, or troubleshoot CKEditor 5. It will:

* Choose an install method – npm, CDN, or ZIP.
* Wire up the editor in vanilla JavaScript or an official React, Angular, or Vue wrapper.
* Configure plugins, the toolbar, content styles, and the UI language.
* Set the license key and unlock premium features.
* Send version-specific questions to the live documentation instead of guessing.

<a id="supported-agents">

## Supported agents

The skill uses the open [Agent Skills](https://agentskills.io/home) format, so it works in any agent that supports it – including **Claude Code**, **Cursor**, **Codex**, **OpenCode**, **GitHub Copilot**, **Windsurf**, **Gemini**, **Cline**, **AMP**, **Zed**, and more.

<a id="other-ways-to-install">

## Other ways to install

Besides [skills.sh](https://skills.sh), which installs the skill into every supported agent it detects, you have two more options.

<a id="claude-code-plugin-marketplace">

### Claude Code plugin marketplace

```text
/plugin marketplace add ckeditor/skills
/plugin install ckeditor@ckeditor
```

<a id="manual-installation">

### Manual installation

Copy the `skills/ckeditor/` directory from the [`ckeditor/skills`](https://github.com/ckeditor/skills) repository into your agent’s skills directory, for example `.claude/skills/ckeditor/`.

<a id="connect-the-documentation-mcp-server">

## Connect the documentation MCP server

The skill works on its own, but it is more effective when your agent can search the live documentation. The hosted **CKEditor 5 documentation MCP server** (powered by Kapa.ai) gives agents semantic search over the docs, returned as relevant snippets with source links.

> **Note**
>
> This optional server is for your coding agent and is separate from the [CKEditor AI MCP](../features/ai/ckeditor-ai-mcp.md) feature inside the editor.

* **Endpoint:** `https://ckeditor5.mcp.kapa.ai`
* **Authentication:** Google or GitHub SSO, which Kapa uses to control abuse of the MCP server.

The server requires a one-time sign-in. The first time your agent calls it, a browser window opens – sign in with your Google or GitHub account, then retry the question. If no prompt appears in Claude Code, run `/mcp`, select `ckeditor5`, and choose **Authenticate**.

<a id="add-the-server-to-your-agents-mcp-configuration">

### Add the server to your agent’s MCP configuration

<a id="claude-code">

#### Claude Code

```bash
claude mcp add --transport http --scope project ckeditor5 https://ckeditor5.mcp.kapa.ai
```

Or add it manually to `.mcp.json`

```json
{
    "mcpServers": {
        "ckeditor5": {
            "type": "http",
            "url": "https://ckeditor5.mcp.kapa.ai"
        }
    }
}
```

<a id="cursor">

#### Cursor

Add it to `.cursor/mcp.json`:

```json
{
    "mcpServers": {
        "ckeditor5": {
            "url": "https://ckeditor5.mcp.kapa.ai"
        }
    }
}
```

<a id="codex">

#### Codex

```bash
codex mcp add ckeditor5-docs --url https://ckeditor5.mcp.kapa.ai
```

Or add it manually to `~/.codex/config.toml`

```toml
[mcp_servers.ckeditor5-docs]
url = "https://ckeditor5.mcp.kapa.ai"
startup_timeout_sec = 20
tool_timeout_sec = 60
enabled = true
```

<a id="opencode">

#### OpenCode

Add it to `opencode.json`:

```json
{
    "$schema": "https://opencode.ai/config.json",
    "mcp": {
        "ckeditor5-docs": {
            "type": "remote",
            "url": "https://ckeditor5.mcp.kapa.ai",
            "enabled": true
        }
    }
}
```

For any other agent, point its MCP client at the streamable HTTP endpoint above and authenticate with Google or GitHub SSO.

<a id="read-the-documentation-as-markdown">

## Read the documentation as markdown

Even without the MCP server, agents can read the documentation efficiently: every page of the **latest** documentation is also served as clean, token-friendly markdown, in two ways. Replace `.html` with `.md` in the page URL, for example:

```text
https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/editor-types.md
```

Alternatively, request the original `.html` page with an `Accept: text/markdown` header and the server returns the markdown version.

For bulk access, <https://ckeditor.com/docs/llms-full.txt> bundles all the guides in a single plain-text file.

<a id="feedback">

## Feedback

Found wrong, stale, or missing guidance? [Open an issue](https://github.com/ckeditor/skills/issues/new?template=skill-feedback.yml) in the [`ckeditor/skills`](https://github.com/ckeditor/skills) repository. Agents are encouraged to file these when reality contradicts the skill.