TinyMCE AI Chat

The TinyMCE AI Chat is a conversational AI feature that facilitates rich, multi-turn interactions between users and an AI Assistant. It provides context setting, model selection, chat history, and capabilities for web search and reasoning.

The Chat feature is available as part of the tinymceai plugin for TinyMCE and through the Conversations API. This page covers both:

Demo

  • TinyMCE

  • HTML

  • JS

<textarea id="tinymceai">
<h1>The Future of Content Creation: Integrating GenAI into Modern Workflows</h1>
<p>The landscape of digital content creation is undergoing a seismic shift. For years, the process of writing, editing, and publishing remained largely manual, requiring significant cognitive load for every draft. However, the emergence of Generative AI (GenAI) has introduced a new paradigm. By embedding intelligence directly into the tools where writing happens, organizations can unlock unprecedented levels of productivity and creativity.</p>
<figure class="image"><img style="width: 566px; aspect-ratio: 1536 / 1024; display: block; margin-left: auto; margin-right: auto;" src="https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/preview/" sizes="(min-width: 1536px) 1536px, 100vw" srcset="https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/100x/ 100w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/200x/ 200w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/300x/ 300w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/500x/ 500w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/750x/ 750w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/preview/ 1536w" alt="Retro pop art illustration in red and blue halftone style showing a friendly robot collaborating with three people using laptops and tablets, symbolizing AI-assisted content creation and teamwork." height="357">
  <figcaption>By embedding intelligence directly into the tools where writing happens, organizations unlock unprecedented levels of productivity and creativity.</figcaption>
</figure>
<h2>The Shift from External Tools to Native Integration</h2>
<p>Many early adopters of AI technology rely on external chat interfaces. While powerful, this "copy-paste" workflow introduces friction and disrupts the creative flow. Native integration&mdash;where the AI exists within the text editor itself&mdash;allows creators to remain focused. Instead of switching tabs to generate a summary or check facts, the AI acts as a collaborative partner that understands the context of the current document.</p>
<h3>Key Benefits of Integrated AI</h3>
<ul>
  <li><strong>Contextual Awareness:</strong> AI can analyze existing text to suggest relevant follow-up points or maintain a consistent brand voice.</li>
  <li><strong>Reduced Cognitive Load:</strong> By automating repetitive tasks like formatting and basic proofreading, writers can focus on high-level strategy and storytelling.</li>
  <li><strong>Streamlined Collaboration:</strong> Integrated tools allow teams to brainstorm and refine ideas within a single shared environment, accelerating the approval process.</li>
  <li><strong>Enhanced Accuracy:</strong> When connected to internal knowledge bases, GenAI can provide fact-checking capabilities that generic models lack.</li>
</ul>
<h2>Evaluating Workflow Improvements</h2>
<p>To understand the impact of GenAI integration, it is helpful to compare traditional workflows against AI-enhanced processes. The following table highlights common content tasks and how native AI transforms the output and efficiency for different stakeholders.</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px; border: 1px solid rgb(206, 212, 217);" border="1">
  <thead>
    <tr>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 26.6364%;">Workflow Task</th>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 35.8714%;">Traditional Method</th>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 37.4922%;">GenAI-Enhanced Method</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Drafting</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Starting from a blank page.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">AI-generated outlines and initial drafts.</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Research</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Manual searching across multiple tabs.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">Instant retrieval of internal/external data.</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Tone Adjustment</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Manual rewriting for different audiences.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">One-click conversion (e.g., Casual to Formal).</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Summarization</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Reading full text and manual condensing.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">Automated key takeaway generation.</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Localization</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">External translation services required.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">In-editor multilingual support and translation.</td>
    </tr>
  </tbody>
</table>
<h2>Overcoming Adoption Challenges</h2>
<p>While the advantages are clear, implementing GenAI requires a strategic approach. Concerns regarding data privacy, output quality, and the "human touch" are common. <em>To address these, organizations should prioritize tools that offer "human-in-the-loop" functionality</em>. AI should be viewed as an assistant&mdash;a co-pilot that offers suggestions while leaving final editorial control in the hands of the writer.</p>
<p>Furthermore, technical teams must focus on the "integrator" experience. Providing developers with straightforward APIs and pre-built UI components ensures that these advanced features can be deployed quickly <strong>without the risk of building complex AI infrastructure from scratch</strong>. As we look toward the future, the goal is simple: technology that fades into the background, empowering creators to do their best work with less friction.</p>
</textarea>
// Step 1: Set up session - this should be part of the application's user management process.
// Open-source plugins below are only for editing the demo HTML (lists, links, tables). TinyMCE AI options are the focus.
tinymce.init({
  selector: 'textarea#tinymceai',
  height: '800px',
  plugins: ['tinymceai', 'advlist', 'lists', 'link', 'autolink', 'table', 'wordcount'],
  toolbar: 'undo redo | tinymceai-chat ai-quickactions-translate tinymceai-review | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
  sidebar_show: 'tinymceai-chat',
  tinymceai_token_provider: async () => {
    return fetch('/api/tinymceai-token', { credentials: 'include' })
      .then(resp => resp.text())
      .then(token => ({ token }));
  },
  tinymceai_chat_fetch_sources: () => Promise.resolve([{
    label: 'TinyMCE resources',
    sources: [
      { id: 'docs', label: 'TinyMCE Documentation', type: 'web-resource' },
      { id: 'blog', label: 'Tiny Blog', type: 'web-resource' },
      { id: 'survey-2023', label: 'State of rich text editing 2023', type: 'web-resource' },
    ]
  }]),
  tinymceai_chat_fetch_source: (id) => {
    const urls = {
      'docs': 'https://www.tiny.cloud/docs/tinymce/latest/',
      'blog': 'https://www.tiny.cloud/blog/',
      'survey-2023': 'https://www.tiny.cloud/developer-survey-results-2023/',
    };
    return Promise.resolve({ type: 'web-resource', url: urls[id] });
  },
  tinymceai_quickactions_custom: [
    {
      type: 'chat',
      title: 'Challenge',
      prompt: 'Challenge statements, verify facts and identify assumptions'
    }
  ],
  tinymceai_languages: [
    { title: 'English', language: 'english' },
    { title: 'Chinese (Simplified)', language: 'chinese' },
    { title: 'Spanish', language: 'spanish' },
    { title: 'German', language: 'german' },
    { title: 'Japanese', language: 'japanese' },
    { title: 'Portuguese', language: 'portuguese' },
    { title: 'Swedish', language: 'swedish' },
    { title: 'Korean', language: 'korean' },
    { title: 'Hindi (Devanagari)', language: 'hindi devanagari' },
    { title: 'Italian', language: 'italian' },
    { title: 'Klingon', language: 'klingon' },
    { title: 'Dothraki', language: 'dothraki' },
  ]
});

Using Chat

The interactive demo above shows the Chat sidebar open beside the document. The following sections describe how Chat behaves in the editor.

Working with the document

TinyMCE AI operates directly within the context of the document. Users can ask questions about specific sections, request a full-document proofreading, and more.

By enabling Web search icon Web search or Reasoning icon Reasoning, the chat capabilities can be extended, allowing the chat to look up information online and tackle complex tasks step by step.

Making changes to the content

Users can chat with the AI and use it to introduce changes to the document. Ask it to "Summarize the document", "Turn this report into a one-page executive summary", or "Suggest better section titles and subheadings". The AI will then propose a series of changes to the document that can be reviewed and accepted or discarded one by one. Long AI responses can be expanded using the Expand button to view the full suggestion. TinyMCE AI works directly on the content instead of requiring copy-paste of chat transcripts.

Brainstorming

The chat feature accelerates the creative process. Begin with a blank document and ask the AI for ideas. Build content step by step by chatting and applying changes. Then review or have the AI rewrite the final draft for best results, all in one place.

Integration

To start using the Chat feature, add tinymceai to the plugins option. This will automatically add the Chat icon Chat toolbar button and menu item to the default TinyMCE toolbar and menu.

See Plugin Reference for more information regarding installation and enabling AI features.

Available models

Users can select the desired AI model for their conversation from a dropdown at the bottom of the chat.

TinyMCE AI Chat available models dropdown

Once selected, the AI model will persist for the duration of the conversation. To change the model, start a new conversation using the New Chat icon New Chat button at the top-right corner of the chat panel.

Configuration

Model selection for AI chat can be configured using these options:

  • tinymceai_default_model: Set the default model to use for AI chat.

  • tinymceai_allow_model_selection: When true, users can pick from models the service exposes in the UI; when false, the default model is used without a selector (defaults to true).

Learn more about available AI models.

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_default_model: 'claude-3-5-haiku',
  tinymceai_allow_model_selection: true,
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
});

Web search in Chat allows the AI to access and retrieve real-time information from the internet. Instead of relying only on pre-trained knowledge, the model can search the web to find up-to-date facts, verify details, and provide more accurate, current answers.

Some models use web search automatically, while others may require manual activation. Whether the "Enable web search" button Web search icon below the prompt input needs to be toggled depends on the model and sometimes even how the prompt is worded. For models that support web search, use the toggle button to enable it.

Reasoning

Reasoning in Chat models turns on the ability to think through problems, draw logical conclusions, and make sense of complex information. It enables the model to analyze context, connect ideas, and produce well-structured, coherent answers beyond simple pattern matching.

Some models use reasoning automatically, while others may require manual activation. Whether the "Enable reasoning" button Reasoning icon below the prompt input needs to be toggled depends on the model and sometimes even how the prompt is worded. For models that support reasoning, use the toggle button to enable it.

Adding context to conversations

The AI chat can work with the document and beyond. Use the "Add context" Add context icon button below the prompt input to add URLs, files, and external resources to the conversation.

TinyMCE AI Chat add context user interface

Ask the AI about specific resources, for instance, "Describe the attached image" or "Summarize the key points from the attached Word document". The AI will analyze those resources and provide information that can be easily used in the document.

External resources enable seamless integration of knowledge bases and other centralized data into AI chat conversations. Instead of uploading documents each time, they can be selected from a list and referenced during the conversation.

Adding custom context sources

Built-in options for adding the current document, URLs, and files to the conversation context are always available to users. There is no configuration option to enable or disable these built-in options.

To add custom external sources for users to select from, configure:

  • tinymceai_chat_fetch_sources: Supplies the list of sources shown in the menu (for example from a database or API).

  • tinymceai_chat_fetch_source: Loads the content for a selected source ID so it can be sent to the model as context.

Full schemas, return types, and examples are documented under Chat configuration options.

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_fetch_sources: async () => [
    {
      label: 'My Documents',
      sources: [
        { id: 'doc-1', label: 'Document 1', type: 'file' },
        { id: 'url-1', label: 'Web Page', type: 'web-resource' }
      ]
    }
  ],
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/\$\{id\}`);
    const blob = await res.blob();
    const filename = `\$\{id\}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
});

Working with AI-generated changes

When asking the AI for changes to the document, for instance, "Bold key facts in the document", the AI proposes a series of changes. The changes are displayed directly in the document content, making it easy to see what will be modified.

Previewing changes

A review bar appears at the bottom of the editor with Diff mode and Preview tabs. Toggle between them to show proposed changes inline (with markers for additions, removals, and formatting) or to preview the final result. When Diff mode is enabled, the proposed changes are highlighted in the document with markers indicating additions (green), removals (red), and formatting changes (blue). Use the arrows in the suggestion overlay to navigate through the changes. The overlay automatically follows the corresponding document sections as each suggestion is selected.

Applying changes

Click the checkmark Accept suggestion icon in the suggestion overlay to accept the current change. Use the arrow buttons to move between suggestions.

TinyMCE AI Chat apply changes

Click Apply remaining in the review bar at the bottom of the editor to apply all remaining suggestions at once. The button shows the number of remaining suggestions, for example, "Apply remaining (11)".

TinyMCE AI Chat apply all changes

Rejecting suggestions

Click the Reject suggestion icon in the suggestion overlay to reject the current suggestion. Click Skip remaining in the review bar at the bottom of the editor to skip all remaining suggestions.

TinyMCE AI Chat reject button

Chat history

All past conversations appear in the Chat history. Click the Chat history icon button in the chat header to open the list. Click a conversation to reopen it, or use the menu on each entry to pin, rename, or delete it. Click Go to AI Chat to return from the history view to the active conversation.

Conversations are grouped by date to help navigate the history. Conversations can be filtered by name using the search field at the top of the user interface.

AI Chat history

Any conversation from the chat history can be continued as long as the AI model used for that conversation is still supported by the feature. Click the conversation in the history to load it in the Chat interface.

After a full page load or new browser session, reopening Chat does not automatically reconnect the editor to pending suggestions from an older conversation. Open that conversation again from Chat history so pending suggestions are linked to the current editor session before accepting or dismissing them.

Conversations API

The Chat plugin feature is built on top of the Conversations API, which provides REST access to the same conversation functionality described in API Overview. Conversations support multiple messages with shared context, optional files and web resources, and suggestions that can update editor content.

For endpoint listings and request or response schemas, start with API Overview and API Quick Start, then use the interactive API documentation (for example the Conversations operations).

Key Features

The API supports uploading PDFs, Word docs, and images for the AI to read and understand. Ask questions about specific sections and get intelligent answers. The AI extracts text while preserving structure from PDFs, maintains formatting context from Word documents, parses web content from HTML files, and processes images with OCR and object recognition.

Each conversation builds on previous messages, so the AI keeps track of the entire discussion and any files that have been shared. Documents, images, web links, and text can be mixed in one conversation, and the AI connects information across all formats.

Example: Product Launch Workflow

  1. Upload product spec → "What are the key features for marketing?"

  2. Add competitor analysis → "How do we compare to competitors?"

  3. Reference blog post → "Write a press release using this blog post and our competitive advantages"

  4. Include brand guidelines → "Match our brand voice and key messaging"

The AI remembers everything that has been shared and builds on it throughout the conversation.

API Capabilities

When using the Conversations API directly, advanced capabilities can be configured:

  • Web Search: Enable real-time web search to access current information during conversations. Configure using the webSearch capability in API requests. See Conversation Web Resources API for endpoint details.

  • Reasoning: Enable step-by-step reasoning to see the AI’s problem-solving process. Configure using the reasoning capability in API requests. See Conversation Messages API for endpoint details.

Streaming Responses

Conversations use Server-Sent Events (SSE) for real-time streaming responses. See the Streaming Responses guide for detailed implementation information and code examples.

API Reference

The interactive API documentation lists every conversation endpoint, parameter, schema, and example. In that UI, related operations are grouped under tags such as Conversations, Conversation Documents, Conversation Files, Conversation Web Resources, and Conversation Messages (including streaming, web search, and reasoning options where applicable).

  • AI Review: For content quality analysis and improvement suggestions.

  • Quick actions: For fast, stateless content transformations.