TINYDOC-3571 - Add the Build with AI page for the agent skill and documentation MCP server

modules/ROOT/nav.adoc

@@ -1,5 +1,6 @@
 * xref:getting-started.adoc[Getting started]
 ** xref:introduction-to-tinymce.adoc[Introduction to {productname}]
+** xref:ai-coding-agents.adoc[Build with AI]
 ** xref:installation.adoc[Installation]
 *** xref:installation-cloud.adoc[Cloud]
 **** xref:cloud-quick-start.adoc[Quick start guide]

modules/ROOT/pages/ai-coding-agents.adoc

@@ -0,0 +1,218 @@
+= 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
+
+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:
+
+[source,bash]
+----
+npx skills add tinymce/skills
+----
+
+[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].
+====
+
+[[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].
+
+*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*.
+
+[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.
+====
+
+[[install-from-the-documentation-site]]
+=== 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 Code
+
+[source,bash]
+----
+claude mcp add --transport http --scope project tinymce-docs https://tinymcedocs.mcp.kapa.ai
+----
+
+To configure the server manually, add it to `+.mcp.json+`:
+
+[source,json]
+----
+{
+  "mcpServers": {
+    "tinymce-docs": {
+      "type": "http",
+      "url": "https://tinymcedocs.mcp.kapa.ai"
+    }
+  }
+}
+----
+
+[[cursor]]
+=== Cursor
+
+Add the server to `+.cursor/mcp.json+`:
+
+[source,json]
+----
+{
+  "mcpServers": {
+    "tinymce-docs": {
+      "url": "https://tinymcedocs.mcp.kapa.ai"
+    }
+  }
+}
+----
+
+[[codex]]
+=== Codex
+
+[source,bash]
+----
+codex mcp add tinymce-docs --url https://tinymcedocs.mcp.kapa.ai
+----
+
+To configure the server manually, add it to `+~/.codex/config.toml+`:
+
+[source,toml]
+----
+[mcp_servers.tinymce-docs]
+url = "https://tinymcedocs.mcp.kapa.ai"
+startup_timeout_sec = 20
+tool_timeout_sec = 60
+enabled = true
+----
+
+[[visual-studio-code]]
+=== Visual Studio Code
+
+Add the server to `+.vscode/mcp.json+`:
+
+[source,json]
+----
+{
+  "servers": {
+    "tinymce-docs": {
+      "type": "http",
+      "url": "https://tinymcedocs.mcp.kapa.ai"
+    }
+  }
+}
+----
+
+[[opencode]]
+=== OpenCode
+
+Add the server to `+opencode.json+`:
+
+[source,json]
+----
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "tinymce-docs": {
+      "type": "remote",
+      "url": "https://tinymcedocs.mcp.kapa.ai",
+      "enabled": true
+    }
+  }
+}
+----
+
+[[other-agents]]
+=== 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:
+
+[source,text]
+----
+https://tinymcedocs.mcp.kapa.ai
+----
+
+[[read-the-documentation-as-markdown]]
+== 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:
+
+[source,text]
+----
+https://www.tiny.cloud/docs/tinymce/latest/basic-setup/index.md
+----
+
+Markdown is available for every documented version of {productname}, not only the latest release. Replace `+latest+` with a version segment to retrieve the markdown for an earlier version:
+
+[source,text]
+----
+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]]
+== 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:
+
+[cols="1,3",options="header"]
+|===
+|File |Contents
+
+|https://www.tiny.cloud/docs/llms.txt[`+llms.txt+`]
+|A concise overview of {productname}, with key links and code examples.
+
+|https://www.tiny.cloud/docs/llms-full.txt[`+llms-full.txt+`]
+|A full index of the documentation pages and their URLs.
+|===
+
+[[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.

modules/ROOT/pages/getting-started.adoc

@@ -20,8 +20,14 @@ xref:installation.adoc[Installation]
 
 Learn how to install {productname} via {cloudname}, package managers, self-hosted zips for various integration options.
 
+|
+[.lead]
+xref:ai-coding-agents.adoc[Build with AI]
+
+Connect the {productname} documentation to AI coding agents using the documentation MCP server, markdown pages, and `+llms.txt+` files.
+
 // Empty cell to even out rows
-// | 
+|
 
 |===