TinyMCE AI Chat

The TinyMCE AI Chat is a conversational AI that can be used to aid content creation and editing. It introduces a dynamic chat interface designed to facilitate rich, multi-turn interactions between users and an AI Assistant. This capability moves beyond single-prompt content generation, enabling a more interactive and collaborative experience within writing workflows.

Overview

The Chat feature provides context setting and model selection to better suit the needs of specific content and holds chat history for quick reference of previous work. The Chat is also capable of using the web for more up-to-date information and reasoning to think more deeply about the answers and changes it is allowed to make.

TinyMCE AI Chat interface showing the conversational AI assistant

Working with the document

TinyMCE AI operates directly within the context of your document. When you chat with it, you can ask questions about specific sections, request a full-document proofreading, and more.

By enabling Web search or Reasoning, you can extend its capabilities — allowing the chat to look up information online and tackle complex tasks step by step.

Making changes to the content

Not only can you chat with the AI, but you can also use it to introduce changes to your 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 you can review and accept or discard one by one. Copying and pasting chat transcripts is over; TinyMCE AI understands your content and edits with you hand in hand.

Brainstorming

The chat feature jump-starts your creative process. Begin with a blank document and ask the AI for ideas. Build your 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.

Demo

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="tinymceai">
  <h1 style="font-size: 1.5em; color: black; margin-top: 0; text-align: left;">TinyMCE AI</h1>
  <p style="font-size: 1em; color: #333; margin: 15px 0;">TinyMCE AI provides AI-powered features including AI chat, AI review, and quick actions.</p>
</textarea>
tinymce.init({
  selector: 'textarea#tinymceai',
  height: '800px',
  plugins: ["tinymceai", "advlist", "anchor", "autolink", "charmap", "code"],
  toolbar: "undo redo | tinymceai | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

Integration

To start using the Chat feature, first load the TinyMCE AI plugin in your editor configuration. The Chat button Chat icon will appear in the AI user interface along with the Chat history History icon. See Plugin Reference for 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. If you want to change the model, you can start a new conversation using a dedicated New chat icon button at the top-right corner of the chat panel.

Web search in Chat allows it 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. Toggle the "Enable web search" button Web search icon for a compatible model to start using the Web search functionality.

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. Toggle the "Enable reasoning" button Reasoning icon for a compatible model to start using the Reasoning functionality.

Configuration

The tinymceai_conversations_models configuration property allows you to configure model selection for AI chat. The property lets the integrator set the default model, tailor the available models list, or turn the list off. Learn more about available AI models.

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai',
  tinymceai_token_provider: function() {
    return fetch('/api/token').then(response => response.text());
  },
  tinymceai_conversations_models: {
    defaultModelId: 'claude-3-5-haiku',
    modelSelectorAlwaysVisible: false,
    displayedModels: ['gpt', 'claude']
  }
});

Adding context to conversations

The AI chat can work with your document and beyond. Use the "Add context" button Add context icon on the right of the prompt input, to add URLs, files, and external resources to your 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 for you and provide information you can easily use in your document.

External resources enable you to seamlessly integrate knowledge bases and other centralized data into your AI chat conversations. Instead of uploading documents each time you want to chat, you can simply select them from a list and reference them during your conversation.

Configuration

The tinymceai_conversations_context configuration property configures the AI chat menu for adding resources to the prompt context.

The example below enables built-in options to add the current document, URLs, and files to the conversation context by the user.

It also demonstrates a context sources configuration that introduces a menu with external resources fetched from a database or an external API for the user to pick from.

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai',
  tinymceai_token_provider: function() {
    return fetch('/api/token').then(response => response.text());
  },
  tinymceai_conversations_context: {
    // Allow for adding the current document to the conversation.
    document: {
      enabled: true
    },
    // Allow for adding URLs to the conversation.
    urls: {
      enabled: true
    },
    // Allow for uploading files to the conversation.
    files: {
      enabled: true
    },
    // External resources configuration.
    sources: [
      // Definition of the custom context provider.
      {
        // The unique identifier of the provider.
        id: 'my-docs',
        // The human-readable name of the provider.
        label: 'My Documents',
        // The async callback to retrieve the list of available resources.
        // Usually involves fetching data from a database or an external API,
        // but here we use a simple array of resources for demonstration purposes.
        getResources: async (query) => [
          // Text resources.
          {
            id: 'text3',
            type: 'text',
            label: 'Internal note in HTML format',
            data: {
              content: '<h2>HTML note</h2><p>Lorem ipsum dolor sit amet...</p>',
              type: 'html'
            }
          },
          {
            id: 'text4',
            type: 'text',
            label: 'Internal note (fetched on demand)',
            // Note: Since the `data` property is not provided, the content will be retrieved using the `getData()` callback (see below).
            // This will prevent fetching large content along with the list of resources.
          },
          // URLs to resources.
          {
            id: 'url2',
            type: 'web-resource',
            label: 'Company brochure in PDF',
            data: 'https://example.com/brochure.pdf'
          },
          {
            id: 'url3',
            type: 'web-resource',
            label: 'Company website in HTML',
            data: 'https://example.com/index.html'
          },
          // ...
        ],
        // The optional callback to retrieve the content of resources without the `data` property provided by the `getResources()` callback.
        // When the user picks a specific resource,  the content will be fetched on demand (from database or external API) by this callback.
        // This prevents fetching large resources along with the list of resources.
        getData: (id) => fetchDocumentContent(id)
      },
      // More context providers...
    ]
  }
});

Working with AI-generated changes

If you ask the AI for changes to your document, for instance, "Bold key facts in the document", you will receive a series of proposed changes instead of plain text responses.

TinyMCE AI Chat changes

Move your cursor over any change to highlight the section of your document it applies to, helping you identify it among other proposed edits.

TinyMCE AI Chat highlighted changes in content

Showing details

You can toggle details of the changes by pressing the "Show details" button Show details icon. By default, you will see detailed information on what exactly was suggested, including additions (green markers), removals (red markers), and formatting changes (blue markers).

TinyMCE AI Chat highlighted changes

Click the button again to see a clean, simplified overview of the changes as they’ll appear in your document once accepted.

TinyMCE AI Chat clean view

Previewing changes

Click the "Show in the text" button Show in the text icon to display the information window about an individual change with options to apply it or turn it into a Suggested Edits suggestion. You can use this window to browse all proposed changes and work with them one by one. As you navigate through the changes, the window will automatically follow the corresponding sections of the document.

TinyMCE AI Chat changes preview in text

Applying changes

If you click the "Apply" button in the AI balloon, the change proposed by the AI will be applied to the document.

TinyMCE AI Chat apply changes

Click the "Apply all" button in chat to apply all AI suggestions at once.

TinyMCE AI Chat apply all changes

Inserting Suggested Edits suggestions

When Suggested Edits feature is available in your integration, the "Insert suggestion" button Insert suggestion icon will be available in chat. Clicking it will create a Suggested Edits suggestion that can later be reviewed or discarded.

TinyMCE AI Chat insert suggestion button

You can pick "Suggest" option from the "Apply all" menu to turn all changes suggested by AI into Suggested Edits suggestions.

Rejecting suggestions

You can click the "Delete" button Delete icon to reject AI suggestions you do not want before applying the remaining ones or turning them into Suggested Edits suggestions.

TinyMCE AI Chat reject button

Chat history

All your past conversations appear in the Chat history. Click the button Chat history icon to open the list, where you can reopen, rename, or delete any conversation.

Conversations are grouped by date to help you navigate your project easily. You can filter conversations by name using the search field at the top of the user interface.

AI Chat history

You can continue any conversation from the chat history 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.

The ability to apply suggestions to the document or generate Suggested Edits from historical conversations may be restricted in some scenarios:

After closing the browser and reopening AI chat, previous conversations will no longer interact with the document content. To continue working with a conversation, you can reopen it from the chat history.

Advanced Features

The Chat feature supports advanced capabilities:

For more information about API-level features, see Conversations API documentation.

  • AI review – For content quality analysis and improvement suggestions.

  • Quick actions – For fast, stateless content transformations.

  • Introduction – Overview of all TinyMCE AI features.