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:

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 feature that helps you with content workflow.

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.

Supported agents

The skill uses the open Agent Skills 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.

Other ways to install

Besides skills.sh, which installs the skill into every supported agent it detects, you have two more options.

Claude Code plugin marketplace

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

Manual installation

Copy the skills/ckeditor/ directory from the ckeditor/skills repository into your agent’s skills directory, for example .claude/skills/ckeditor/.

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 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.

Add the server to your agent’s MCP configuration.

Claude Code

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

Or add it manually to .mcp.json

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

Cursor

Add it to .cursor/mcp.json:

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

Codex

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

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

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

OpenCode

Add it to opencode.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.

Feedback

Found wrong, stale, or missing guidance? Open an issue in the ckeditor/skills repository. Agents are encouraged to file these when reality contradicts the skill.