Sign up (with export icon)

Using CKEditor 5 with AI coding agents

Contribute to this guideShow the table of contents

The official CKEditor skills teach your AI coding agent how to work with CKEditor 5. There are two skills:

  • ckeditor adds 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.
  • ckeditor-update updates an existing CKEditor 5 integration to the latest version or to a version that you name.

Install them with one command:

npx skills add ckeditor/skills
Copy code
Note

This guide covers AI agent skills that help you integrate CKEditor 5 into your application or update it to the version you want. It is not the in-editor CKEditor AI feature that helps you with content workflow.

What the skills do

Copy link

Your agent loads the correct skill automatically, based on what you ask it to do.

Set up CKEditor 5

Copy link

The ckeditor skill loads 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.

Update CKEditor 5

Copy link

The ckeditor-update skill loads when you ask your agent to update, upgrade, or migrate CKEditor 5, for example: “Update CKEditor 5 to the latest version.” You can also name the version you want. It will:

  • Find the installed version, the installation method, and the framework wrappers, and record what the editor does today.
  • Read the update guides for every version between yours and the target one, from the oldest to the newest.
  • Apply the changes to your code, including a move off legacy installation methods, such as predefined builds, when the target version needs it.
  • Put all CKEditor 5 packages on the same version and update the framework wrappers.
  • Verify that the editor still has the same features and content, and report every change with the guide section that made it necessary.

Review the changes before you commit them. The skill does not cover downgrades or migration from CKEditor 4. For CKEditor 4, see the Migration from CKEditor 4 guide.

Supported agents

Copy link

The skills use the open Agent Skills format, so they work 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

Copy link

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

Claude Code plugin marketplace

Copy link
/plugin marketplace add ckeditor/skills
/plugin install ckeditor@ckeditor
Copy code

Manual installation

Copy link

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

Connect the documentation MCP server

Copy link

The skills work on their own, but they are 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.

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.

Add the server to your agent’s MCP configuration

Copy link

Claude Code

Copy link
claude mcp add --transport http --scope project ckeditor5 https://ckeditor5.mcp.kapa.ai
Copy code
Or add it manually to .mcp.json
{
	"mcpServers": {
		"ckeditor5": {
			"type": "http",
			"url": "https://ckeditor5.mcp.kapa.ai"
		}
	}
}
Copy code

Cursor

Copy link

Add it to .cursor/mcp.json:

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

Codex

Copy link
codex mcp add ckeditor5-docs --url https://ckeditor5.mcp.kapa.ai
Copy code
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
Copy code

OpenCode

Copy link

Add it to opencode.json:

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

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

Read the documentation as markdown

Copy link

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:

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

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

To find a page, start from the index of the project you need. Each one lists every page with its summary, and every markdown page links back to it:

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

Feedback

Copy link

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