Quick start: TinyMCE from Tiny Cloud with an AI coding agent

TinyMCE 8 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to an application by installing the official TinyMCE agent skill and letting an AI coding agent perform the setup.

For the equivalent step-by-step setup without an AI coding agent, see the Tiny Cloud quick start guide.

Install the TinyMCE skill

The official TinyMCE skill teaches an AI coding agent how to add TinyMCE to a project. From the project directory, install it into the agent (Claude Code, Codex, Cursor, GitHub Copilot, and others) with a single command:

npx skills add tinymce/tinymce-ai-skills

The installer downloads the skill, detects the agents present in the project, and writes the skill to each. Cloning the repository beforehand is not required. The skill uses the open Agent Skills format, so it works in any agent that supports that format.

Once installed, the skill loads on its own whenever the agent is asked to install, set up, configure, or troubleshoot TinyMCE. No extra prompting is required.

To install without the command-line interface, follow the per-agent instructions under Manual installation in the tinymce-ai-skills README. Report guidance that is wrong, outdated, or missing from the skill by opening an issue in the same repository.

Add TinyMCE to an application

Ask the agent to add TinyMCE wherever a rich text editor is needed, for example:

Add a TinyMCE editor to the comment box on my post page.

The skill takes the agent through the whole setup:

  • Detecting the environment, whether that is vanilla JavaScript or a framework such as React, Next.js, Vue, or Angular.

  • Prompting for the Tiny Cloud account that supplies the API key. An account is created by signing up to the Tiny Cloud, which also provides a trial of the Premium Plugins.

  • Selecting the plugins, toolbar, and menu that suit the use case.

  • Generating the integration code, wiring in the API key, and setting the options that the selected plugins require.

The result is an editor configured for the project at hand, rather than a generic configuration to be adapted afterwards.

Approve the application domain

An application served from any origin other than localhost requires its domain to be added to the approved domains stored against the API key. Until the domain is approved, the editor displays the notice "This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account." To remove the notice, add the domain to the approved domains in the Tiny Account.

Local development on localhost works without this step, so it can be deferred until the application is deployed or served from a custom host. For the diagnostic steps when the notice persists, see Domain not registered.

Configure further using live documentation

Taking the configuration deeper, by adding plugins, tailoring toolbars and menus, or refining behavior against the current API, is more reliable when the agent reads the published documentation instead of relying on its training data. The sections below cover the main options; for all four, including the per-agent configuration files, see Connect AI agents to the documentation.

Connect one of the following Model Context Protocol (MCP) servers:

Server Description

TinyMCE documentation MCP

Semantic search across the published TinyMCE documentation, returning relevant extracts with links to their source pages. For the per-agent configuration files, see Connect the TinyMCE documentation MCP server.

Context7

A general-purpose documentation MCP server. Point it at the tinymce/docs library to serve version-specific TinyMCE documentation to the agent. The skill checks for Context7 before generating code, so this is the server it uses when both are available. For the setup steps, see Connect Context7.

To connect the TinyMCE documentation MCP server, point the agent’s MCP client at the following endpoint and complete the one-time OAuth sign-in:

https://tinymcedocs.mcp.kapa.ai

Copy-to-clipboard install commands and one-click installs for supported editors are also available from the Ask AI widget on any documentation page, under Use MCP.

With a server connected, ask the agent for the change required and it applies the change using current guidance, for example:

Add the Table and Word Count plugins, and put a word counter in the status bar.

Agents that do not support MCP can read the documentation as markdown or from the llms.txt files instead. See Read the documentation as markdown and llms.txt files.

Next Steps

For information on: