Using TinyMCE with AI coding agents

The official TinyMCE skill teaches an AI coding agent how to add TinyMCE to a project: it selects an installation method, wires up the editor, configures plugins and the toolbar, loads the content styles, and sets the API key or license key. Install it with one command:

npx skills add tinymce/skills

This page covers agent skills that help integrate TinyMCE into an application. It does not describe the in-editor AI features. For content generation inside the editor, see TinyMCE AI.

What the skill does

The skill loads when an agent is asked to install, set up, configure, or troubleshoot TinyMCE. It will:

  • Choose an installation method — Tiny Cloud, a package manager, or a .zip package.

  • Wire up the editor in vanilla JavaScript or an official React, Vue, Angular, Svelte, jQuery, web component, or Blazor wrapper.

  • Configure plugins, the toolbar, the menu bar, and content styles.

  • Set the API key or license key correctly for the chosen distribution channel.

  • Send version-specific questions to the live documentation instead of guessing.

The skill deliberately excludes authoring custom plugins, upgrading between major versions, and TinyMCE 4. For those tasks, see the migration guides.

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, and Zed. The installer detects the agents present in a project and writes the skill to each.

Other ways to install

Claude Code plugin marketplace

/plugin marketplace add tinymce/skills
/plugin install tinymce@tinymce

Manual installation

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

Connect the documentation MCP server

The skill works on its own, but is more effective when the agent can also search the live documentation. The hosted TinyMCE documentation Model Context Protocol (MCP) server exposes semantic search across the published documentation, returning relevant extracts with links to their source pages. Any client that supports MCP over streamable HTTP can connect to it. This server supplies documentation to an external coding agent, and is separate from the MCP tool calling available to the TinyMCE AI service, described in MCP and web integrations.

Endpoint: https://tinymcedocs.mcp.kapa.ai

Authentication: The server is protected by OAuth and requires a one-time sign-in. The first time the agent calls the server, a browser window opens to complete sign-in, after which the agent stores the resulting token. In Claude Code, if no sign-in prompt appears, run /mcp, select the server, and then select Authenticate.

Each agent reads its own configuration file, and the files are not interchangeable. Claude Code reads .mcp.json and expects an mcpServers object, while Visual Studio Code reads .vscode/mcp.json and expects a servers object. An agent given another agent’s file or key name reports no error and exposes no tools from the server. Use the section below that matches the agent in use.

Install from the documentation site

Every page of this documentation includes an Ask AI widget. Open the widget and select Use MCP in the modal header to open the Connect to AI Tools menu, which provides copy-to-clipboard install commands, one-click installs for supported editors, and the raw server URL.

The remaining sections describe the equivalent manual configuration.

Claude Code

claude mcp add --transport http --scope project tinymce-docs https://tinymcedocs.mcp.kapa.ai

To configure the server manually, add it to .mcp.json:

{
  "mcpServers": {
    "tinymce-docs": {
      "type": "http",
      "url": "https://tinymcedocs.mcp.kapa.ai"
    }
  }
}

Cursor

Add the server to .cursor/mcp.json:

{
  "mcpServers": {
    "tinymce-docs": {
      "url": "https://tinymcedocs.mcp.kapa.ai"
    }
  }
}

Codex

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

To configure the server manually, add it to ~/.codex/config.toml:

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

Visual Studio Code

Add the server to .vscode/mcp.json:

{
  "servers": {
    "tinymce-docs": {
      "type": "http",
      "url": "https://tinymcedocs.mcp.kapa.ai"
    }
  }
}

OpenCode

Add the server to opencode.json:

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

Other agents

For any other agent, point its MCP client at the streamable HTTP endpoint and complete the sign-in described above. Agents that accept a remote MCP server without a dedicated configuration file, such as Claude and ChatGPT, can connect using the endpoint directly:

https://tinymcedocs.mcp.kapa.ai

Read the documentation as markdown

Agents can read the documentation efficiently without the MCP server. Every documentation page is also published as markdown, which is more token-efficient than the rendered HTML page. Append index.md to any documentation page URL to retrieve it:

https://www.tiny.cloud/docs/tinymce/latest/basic-setup/index.md

Markdown is available for every documented version of TinyMCE, not only the latest release. Replace latest with a version segment to retrieve the markdown for an earlier version:

https://www.tiny.cloud/docs/tinymce/7/basic-setup/index.md

Each page also includes a Copy Markdown button next to the page title, which copies the markdown URL of the current page to the clipboard for pasting into an agent prompt.

llms.txt files

Two plain text files summarize the documentation set for agents that accept a single bulk reference. Both files index the latest release:

File Contents

llms.txt

A concise overview of TinyMCE, with key links and code examples.

llms-full.txt

A full index of the documentation pages and their URLs.

Feedback

Report guidance that is wrong, outdated, or missing from the skill by opening an issue in the tinymce/skills repository, using the skill feedback template. Agents are encouraged to file these when the skill contradicts what actually worked.

Report inaccurate or outdated documentation by opening an issue in the tinymce-docs repository.