diff --git a/modules/ROOT/examples/live-demos/cloud-quick-start/index.html b/modules/ROOT/examples/live-demos/cloud-quick-start/index.html new file mode 100644 index 0000000000..748e8225fe --- /dev/null +++ b/modules/ROOT/examples/live-demos/cloud-quick-start/index.html @@ -0,0 +1,9 @@ + diff --git a/modules/ROOT/examples/live-demos/cloud-quick-start/index.js b/modules/ROOT/examples/live-demos/cloud-quick-start/index.js new file mode 100644 index 0000000000..af21e841a7 --- /dev/null +++ b/modules/ROOT/examples/live-demos/cloud-quick-start/index.js @@ -0,0 +1,11 @@ +tinymce.init({ + selector: 'textarea#cloud-quick-start', + plugins: [ + 'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons', + 'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media', + 'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount' + ], + menubar: 'file edit view insert format tools table help', + toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help', + height: 500 +}); diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index b44520412c..27f8df3a2e 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -1,9 +1,10 @@ * xref:getting-started.adoc[Getting started] ** xref:introduction-to-tinymce.adoc[Introduction to {productname}] -** xref:ai-coding-agents.adoc[Build with AI] +** xref:ai-coding-agents.adoc[Documentation for AI agents] ** xref:installation.adoc[Installation] *** xref:installation-cloud.adoc[Cloud] **** xref:cloud-quick-start.adoc[Quick start guide] +**** xref:cloud-quick-start-ai.adoc[AI quick start guide] **** Supported Integrations ***** xref:react-cloud.adoc[React] ***** xref:angular-cloud.adoc[Angular] diff --git a/modules/ROOT/pages/ai-coding-agents.adoc b/modules/ROOT/pages/ai-coding-agents.adoc index b733f559df..2f2a4a422a 100644 --- a/modules/ROOT/pages/ai-coding-agents.adoc +++ b/modules/ROOT/pages/ai-coding-agents.adoc @@ -1,60 +1,22 @@ -= Using {productname} with AI coding agents -:navtitle: Build with AI -:description: Teach AI coding agents to integrate {productname} using the official skill, the documentation MCP server, markdown pages, and llms.txt files. -:description_short: Connect {productname} to AI coding agents. -:keywords: ai, skill, agent skills, mcp, model context protocol, coding agent, claude code, cursor, codex, copilot, visual studio code, llms.txt, markdown += Connecting AI coding agents to the {productname} documentation +:navtitle: Documentation for AI agents +:description: Give AI coding agents access to the {productname} documentation through the documentation MCP server, Context7, markdown pages, and llms.txt files. +:description_short: Give AI coding agents access to the {productname} documentation. +:keywords: ai, mcp, model context protocol, coding agent, claude code, cursor, codex, copilot, visual studio code, context7, llms.txt, markdown -The official *{productname} skill* teaches an AI coding agent how to add {productname} 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: +An AI coding agent works from its training data unless it is given something better. This page describes the ways to put the current {productname} documentation in front of an agent: a documentation https://modelcontextprotocol.io/[Model Context Protocol] (MCP) server, markdown versions of every page, and the `+llms.txt+` summaries. Each method applies to any {productname} installation, whether it is served from the {cloudname} or self-hosted. -[source,bash] ----- -npx skills add tinymce/skills ----- +TIP: To add {productname} to a project with an AI coding agent, see the xref:cloud-quick-start-ai.adoc[{cloudname} AI quick start guide]. [NOTE] ==== -This page covers agent skills that help integrate {productname} into an application. It does not describe the in-editor AI features. For content generation inside the editor, see xref:tinymceai-introduction.adoc[{productname} AI]. +This page covers giving external coding agents access to this documentation. It does not describe the in-editor AI features. For content generation inside the editor, see xref:tinymceai-introduction.adoc[{productname} AI]. ==== -[[what-the-skill-does]] -== What the skill does - -The skill loads when an agent is asked to install, set up, configure, or troubleshoot {productname}. It will: - -* Choose an installation method — {cloudname}, 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 {productname} 4. For those tasks, see the xref:migration-guides.adoc[migration guides]. - -[[supported-agents]] -== Supported agents - -The skill uses the open https://agentskills.io/home[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]] -== Other ways to install - -[[claude-code-plugin-marketplace]] -=== Claude Code plugin marketplace - -[source,text] ----- -/plugin marketplace add tinymce/skills -/plugin install tinymce@tinymce ----- - -[[manual-installation]] -=== Manual installation - -Copy the `+skills/tinymce/+` directory from the https://github.com/tinymce/skills[`+tinymce/skills+`] repository into the agent's skills directory, for example `+.claude/skills/tinymce/+`. - [[connect-the-documentation-mcp-server]] == 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 {productname} documentation https://modelcontextprotocol.io/[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 {productname} AI service, described in xref:tinymceai-on-premises-mcp.adoc[MCP and web integrations]. +The hosted {productname} documentation 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 {productname} AI service, described in xref:tinymceai-on-premises-mcp.adoc[MCP and web integrations]. *Endpoint:* `+https://tinymcedocs.mcp.kapa.ai+` @@ -62,7 +24,7 @@ The skill works on its own, but is more effective when the agent can also search [IMPORTANT] ==== -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. +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. Expand the entry below that matches the agent in use. ==== [[install-from-the-documentation-site]] @@ -70,11 +32,17 @@ Each agent reads its own configuration file, and the files are not interchangeab 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. +The entries below describe the equivalent manual configuration. -[[claude-code]] -=== Claude Code +[[manual-mcp-configuration]] +=== Manual configuration by agent + +Each agent below is configured independently. Expand the entry for the agent in use. +[[claude-code]] +.Claude Code +[%collapsible] +==== [source,bash] ---- claude mcp add --transport http --scope project tinymce-docs https://tinymcedocs.mcp.kapa.ai @@ -93,10 +61,12 @@ To configure the server manually, add it to `+.mcp.json+`: } } ---- +==== [[cursor]] -=== Cursor - +.Cursor +[%collapsible] +==== Add the server to `+.cursor/mcp.json+`: [source,json] @@ -109,10 +79,12 @@ Add the server to `+.cursor/mcp.json+`: } } ---- +==== [[codex]] -=== Codex - +.Codex +[%collapsible] +==== [source,bash] ---- codex mcp add tinymce-docs --url https://tinymcedocs.mcp.kapa.ai @@ -128,10 +100,12 @@ startup_timeout_sec = 20 tool_timeout_sec = 60 enabled = true ---- +==== [[visual-studio-code]] -=== Visual Studio Code - +.Visual Studio Code +[%collapsible] +==== Add the server to `+.vscode/mcp.json+`: [source,json] @@ -145,10 +119,12 @@ Add the server to `+.vscode/mcp.json+`: } } ---- +==== [[opencode]] -=== OpenCode - +.OpenCode +[%collapsible] +==== Add the server to `+opencode.json+`: [source,json] @@ -164,16 +140,28 @@ Add the server to `+opencode.json+`: } } ---- +==== [[other-agents]] -=== Other agents - +.Other agents +[%collapsible] +==== 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: [source,text] ---- https://tinymcedocs.mcp.kapa.ai ---- +==== + +[[context7]] +== Connect Context7 + +https://context7.com/[Context7] is a general-purpose documentation MCP server that also indexes the {productname} documentation. Where the {productname} documentation MCP server returns extracts from the published site, Context7 serves version-specific library documentation across many projects from a single server, which suits an agent already using it for other libraries. + +*Library:* `+tinymce/docs+` at https://context7.com/tinymce/tinymce-docs[`+context7.com/tinymce/tinymce-docs+`] + +Configure Context7 following its own installation instructions, then reference the `+tinymce/docs+` library in prompts so the agent resolves {productname} questions against it. [[read-the-documentation-as-markdown]] == Read the documentation as markdown @@ -213,6 +201,4 @@ Two plain text files summarize the documentation set for agents that accept a si [[feedback]] == Feedback -Report guidance that is wrong, outdated, or missing from the skill by https://github.com/tinymce/skills/issues/new?template=skill-feedback.yml[opening an issue] in the https://github.com/tinymce/skills[`+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 https://github.com/tinymce/tinymce-docs/issues[`+tinymce-docs+`] repository. +Report inaccurate or outdated documentation by opening an issue in the https://github.com/tinymce/tinymce-docs/issues[`+tinymce-docs+`] repository. Agents are encouraged to file these when the documentation contradicts what actually worked. diff --git a/modules/ROOT/pages/cloud-quick-start-ai.adoc b/modules/ROOT/pages/cloud-quick-start-ai.adoc new file mode 100644 index 0000000000..91552ed931 --- /dev/null +++ b/modules/ROOT/pages/cloud-quick-start-ai.adoc @@ -0,0 +1,162 @@ += Quick start: {productname} from {cloudname} with an AI coding agent +:navtitle: AI quick start guide +:description_short: Add {productname} {productmajorversion} from the {cloudname} using the official agent skill. +:description: Add a {productname} {productmajorversion} editor to an application by installing the official agent skill and asking an AI coding agent to do the setup, then connect a documentation MCP server to configure the editor further. +:keywords: quick start, ai, agent skill, agent skills, coding agent, mcp, model context protocol, claude code, cursor, codex, copilot, context7, kapa, cloud +:productSource: cloud + +{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to an application by installing the official https://github.com/tinymce/tinymce-ai-skills[{productname} agent skill] and letting an AI coding agent perform the setup. + +TIP: For the equivalent step-by-step setup without an AI coding agent, see the xref:cloud-quick-start.adoc[{cloudname} quick start guide]. + +include::partial$misc/admon-account-creation-and-social-option.adoc[] + +[[install-the-skill]] +== Install the {productname} skill + +The official {productname} skill teaches an AI coding agent how to add {productname} to a project. Install it into the agent (Claude Code, Codex, Cursor, GitHub Copilot, and others) with a single command: + +[source,bash] +---- +npx skills add tinymce/tinymce-ai-skills +---- + +The installer detects the agents present in the project and writes the skill to each. The skill uses the open https://agentskills.io/[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 {productname}. No extra prompting is required. + +To install without the command-line interface, follow the per-agent instructions under *Manual installation* in the https://github.com/tinymce/tinymce-ai-skills[`+tinymce/tinymce-ai-skills+`] README. Report guidance that is wrong, outdated, or missing from the skill by https://github.com/tinymce/tinymce-ai-skills/issues[opening an issue] in the same repository. + +[[add-the-editor]] +== Add {productname} to an application + +Ask the agent to add {productname} wherever a rich text editor is needed, for example: + +[quote] +____ +Add a {productname} editor to the comment box on my post page. +____ + +The skill guides the agent through the whole setup: detecting the environment (vanilla JavaScript or a framework such as React, Next.js, Vue, or Angular), generating the integration code, recommending plugins for the use case, and wiring in the API key. During setup the agent prompts for a {cloudname} API key, which is created when signing up to the link:{accountsignup}/[{cloudname}]. Signing up also provides a trial of the xref:plugins.adoc#premium-plugins[Premium Plugins]. + +The result is a working, correctly configured editor. For a vanilla JavaScript project using the full set of {cloudname} plugins, the generated page resembles the following: + +[source,html,subs="attributes+"] +---- + + +
+ + + + + + + + + + + +---- + +Replace the `+no-api-key+` placeholder in the script URL with the API key. The premium plugins above require a {cloudname} plan or trial that includes them. + +Two options in this configuration need values that are specific to the account before the plugin they belong to will work: + +* `+uploadcare_public_key+` requires an Uploadcare public key, available from the link:{accountpageurl}/media-optimizer/[{accountpage}]. See xref:uploadcare.adoc[Media Optimizer]. +* `+tinymceai_token_provider+` uses the trial demo identity service above, which is intended for evaluation only. For production, return a token from an application endpoint. See xref:tinymceai-jwt-authentication-intro.adoc[{productname} AI JWT authentication]. + +The remaining options are mandatory for their plugins and are shown with working values that can be replaced with real data: `+tinycomments_mode+`, `+mergetags_list+`, `+advtemplate_list+`, and `+mentions_fetch+`. + +[[approve-the-domain]] +== 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. Add the domain on the link:{accountpageurl}/domains/[{accountpage}] to clear the following notice on the editor: + +[WARNING] +==== +**This domain is not registered with {cloudname}. Please see the quick start guide or create an 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 xref:cloud-troubleshooting.adoc#domain-not-registered[Domain not registered]. + +[[connect-live-documentation]] +== 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. Connect one of the following https://modelcontextprotocol.io/[Model Context Protocol] (MCP) servers: + +[cols="1,3",options="header"] +|=== +|Server |Description + +|https://tinymcedocs.mcp.kapa.ai[{productname} documentation MCP] +|Semantic search across the published {productname} documentation, returning relevant extracts with links to their source pages. For the endpoint, authentication, and per-agent configuration, see xref:ai-coding-agents.adoc#connect-the-documentation-mcp-server[Connect the documentation MCP server]. + +|https://context7.com/tinymce/tinymce-docs[Context7] +|A general-purpose documentation MCP server. Point it at the `+tinymce/docs+` library to serve version-specific {productname} documentation to the agent. The skill checks for Context7 before generating code, so this is the server it uses when both are available. +|=== + +With a server connected, ask the agent for the change required and it applies the change using current guidance, for example: + +[quote] +____ +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 xref:ai-coding-agents.adoc#read-the-documentation-as-markdown[Read the documentation as markdown]. + +include::partial$misc/quickstart-next-steps.adoc[] diff --git a/modules/ROOT/pages/cloud-quick-start.adoc b/modules/ROOT/pages/cloud-quick-start.adoc index 9ddaed7731..d91c971d48 100644 --- a/modules/ROOT/pages/cloud-quick-start.adoc +++ b/modules/ROOT/pages/cloud-quick-start.adoc @@ -1,46 +1,55 @@ = Quick start: {productname} from {cloudname} :navtitle: Quick start: Cloud :page-aliases: quick-start.adoc -:description_short: Setup a basic {productname} {productmajorversion} editor using the {cloudname}. -:description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}. Initialize the editor on a textarea element using its ID with tinymce.init and the selector option. -:keywords: tinymce, script, textarea, selector, id, #mytextarea, tinymce.init, initialize, quick start +:description_short: Add a {productname} {productmajorversion} editor to a web page using the {cloudname}. +:description: Add a {productname} {productmajorversion} editor to a web page using the {cloudname}. Load the script from the content delivery network, set the API key, and initialize the editor on a textarea element with tinymce.init. +:keywords: quick start, cloud, cdn, script, textarea, selector, tinymce.init, api key, approved domains :productSource: cloud - {productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using the {cloudname}. +TIP: To have an AI coding agent perform this setup instead, see the xref:cloud-quick-start-ai.adoc[AI quick start guide]. + include::partial$misc/admon-account-creation-and-social-option.adoc[] -== Include the {productname} script +[[add-the-script]] +== Add the {productname} script -Include the following script tag in the `++` of a HTML file: +Add the following script tag to the `++` of an HTML file. It loads {productname} from the {cloudname} content delivery network (CDN): [source,html,subs="attributes+"] ---- ---- -== Initialize {productname} - -include::partial$install/initialize-editor-cloud.adoc[] - -Adding this content to the HTML file and opening it in a web browser will load a {productname} editor, such as: - -liveDemo::default[] - -== Update the "no-api-key" placeholder +[[add-the-api-key]] +== Add the API key -Update the `+no-api-key+` placeholder in the source script URL (`+ ---- +Every plugin above is included with {productname}, so this configuration requires no further setup. To start from a minimal editor instead, pass only the `+selector+` and add options as needed. diff --git a/modules/ROOT/partials/misc/quickstart-next-steps.adoc b/modules/ROOT/partials/misc/quickstart-next-steps.adoc index 10389578d4..4100dd5762 100644 --- a/modules/ROOT/partials/misc/quickstart-next-steps.adoc +++ b/modules/ROOT/partials/misc/quickstart-next-steps.adoc @@ -8,6 +8,9 @@ endif::[] ifeval::["{productSource}" == "package-manager"] * Installing premium plugins, see: xref:npm-projects.adoc#install-premium-plugins[Installing premium plugins from NPM]. endif::[] +ifeval::["{productSource}" == "cloud"] +* Getting and setting the editor content, see: xref:apis/tinymce.editor.adoc#getContent[`+getContent+`] and xref:apis/tinymce.editor.adoc#setContent[`+setContent+`]. +endif::[] * Customizing {productname}, see: xref:basic-setup.adoc[Basic Setup]. * The three editor modes, see: ** xref:use-tinymce-classic.adoc[{productname} classic editing mode].