TinyMCE AI Plugin

This plugin is only available for paid TinyMCE subscriptions.

The TinyMCE AI plugin integrates AI-assisted authoring with rich-text editing. Users can interact through Actions, Reviews, or Conversations that can use relevant context from multiple sources.

Interactive example

  • 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' },
  ]
});

Basic setup

To set up the TinyMCE AI plugin in TinyMCE:

  • add tinymceai to the plugins option in the editor configuration;

  • configure the tinymceai_token_provider option to provide authentication tokens (must return { token: string }). During a Tiny Cloud trial, the demo identity service can supply JWTs so a custom token endpoint is not required;

  • when the toolbar option is omitted or left at the default, the Silver theme toolbar already includes the AI toolbar buttons once the plugin is enabled: tinymceai-chat Chat icon, tinymceai-quickactions Quick Actions icon, and tinymceai-review Review icon. When a custom toolbar string is set, add those button ids to the string explicitly.

Minimal setup

The following configuration enables the plugin and token provider and relies on the default toolbar, which includes the AI buttons. If the toolbar option is set to a custom string, add tinymceai-chat, tinymceai-quickactions, and tinymceai-review to that string.

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Complete setup example

The following example sets a custom toolbar string. To use the default toolbar instead (which already includes the AI buttons), omit the toolbar option.

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  content_id: 'document-123',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  },
  tinymceai_default_model: 'agent-1',
  tinymceai_allow_model_selection: true,
  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 }) };
  },
  tinymceai_quickactions_custom: [
    { title: 'Explain like I am five', prompt: 'Explain the following text in simple terms.', type: 'chat' }
  ]
});

Options

The following configuration options affect the behavior of the TinyMCE AI plugin.

Configuration options are grouped by the feature they configure. Options in the General section apply to the plugin as a whole or to multiple features.

General options

These options apply to the plugin overall or to multiple AI features (Chat, Quick Actions, Review).

For context toolbar use cases (a toolbar that appears when text is selected), use the Quick Toolbars plugin and configure quickbars_selection_toolbar with the desired control identifiers.

content_id

A unique identifier for the document or content being edited. When set, the chat history shown for the user is scoped to this ID, allowing conversations to be preserved and associated with the specific document across sessions. When not set, all conversations for the user are shown regardless of document.

Type: String

Default value: undefined

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  content_id: 'document-123',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_token_provider

A function that returns a Promise resolving to an object with a token property containing the signed JWT token for authenticating with the TinyMCE AI service.

Type: Function (() => Promise<{ token: string }>)

Default value: undefined

The JWT payload must include these required claims:

  • iat: Issued at time (provided by JWT libraries)

  • exp: Expiration time (tokens cannot exceed 24 hours; 5-15 minutes recommended)

  • aud: The TinyMCE API key

  • auth: Authentication object

  • sub: Unique user ID

For more information about JWT setup, required claims, and the authentication object, see JWT Authentication.

During a Tiny Cloud trial, a demo identity service is available so tinymceai_token_provider can obtain JWTs without implementing a custom token endpoint. See JWT Authentication for setup and examples.

The function must return the token value within an object with a token property. Ensure the response from the token endpoint is handled correctly, based on the response format:

  • JSON response: Endpoint returns { "token": "eyJ..." }. Use fetch(url).then(r => r.json()).

  • Plain text response: Endpoint returns the raw JWT string. Use fetch(url).then(r => r.text()).then(token => ({ token })).

Example: JSON response from custom endpoint
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_token_provider: () => {
    return fetch('/api/tinymceai-token').then(r => r.json());
  }
});
Example: Plain text response from custom endpoint
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
});

tinymceai_sidebar_type

Controls how the AI sidebar is displayed. With static, the sidebar renders inside the editor. With floating, it renders in a separate container outside the editor and can be dragged on the page.

Type: String

Possible Values: 'static', 'floating'

Default value: 'static'

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_sidebar_type: 'floating',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Changing this property dynamically (after the editor has been initialized) is not supported and can result in unpredictable behavior.

tinymceai_default_model

The default AI model to use when no model is explicitly selected by the user. If undefined, the AI service will select the best model for speed, quality, and cost.

Type: String

Default value: undefined

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_default_model: 'gemini-2-5-flash',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_allow_model_selection

Whether users can select a different AI model from the chat interface.

Type: Boolean

Possible Values: true, false

Default value: true

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_allow_model_selection: false,
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Options for Chat

These options configure the AI Chat sidebar, where users have interactive conversations with the AI and can add external sources for context.

tinymceai_chat_fetch_sources

Populates the sources menu with submenus of files and web resources. Users can select these sources as additional context for chat conversations.

Takes a function that returns a Promise resolving to an array of additional context source groups. Each group has label, optional icon, and sources array. Each source has id, label, and type ('web-resource' or 'file'). A source’s id is used to fetch its content via tinymceai_chat_fetch_source.

Type: Function (() => Promise<Array>)

Possible Values: For source type property: 'web-resource', 'file'

Default value: () => Promise.resolve([])

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_fetch_sources: async () => [
    {
      label: 'My Documents',
      icon: 'folder',
      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.json());
  }
});

tinymceai_chat_fetch_source

A function that fetches the content for an additional source by ID. Receives the source id and returns a Promise resolving to the source content (either { type: 'file', file: File } or { type: 'web-resource', url: string }). The content is passed to the AI agent as additional context for the chat conversation.

Type: Function ((id: string) => Promise<Object>)

Possible Values: For return object type property: 'file', 'web-resource'

Default value: +(id) ⇒ Promise.resolve(\`Should fetch additional source with given \${id}\)+`

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_fetch_sources: async () => [
    { label: 'Docs', sources: [{ id: 'doc-1', label: 'Document 1', type: 'file' }] }
  ],
  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.json());
  }
});

tinymceai_chat_welcome_message

Customises the welcome message displayed in the Chat sidebar when starting a new conversation.

Type: String

Default value: A default message introducing the AI assistant and its capabilities.

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_welcome_message: '<p>Welcome! How can I help you today?</p>',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Options for Quick Actions

These options configure the Quick Actions menu, which provides one-click AI transformations such as writing and grammar improvements, translation, and tone changes.

tinymceai_quickactions_menu

Array of control IDs that define the order of items in the Quick Actions menu. The default value includes all predefined items, including ai-quickactions-custom which adds a submenu of custom actions defined by tinymceai_quickactions_custom.

Type: Array of String

Default value:

[
  'ai-quickactions-chat-prompts',
  'ai-quickactions-improve-writing',
  'ai-quickactions-continue-writing',
  'ai-quickactions-check-grammar',
  'ai-quickactions-change-length',
  'ai-quickactions-change-tone',
  'ai-quickactions-translate',
  'ai-quickactions-custom'
]
Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_menu: [
    'ai-quickactions-improve-writing',
    'ai-quickactions-check-grammar',
    'ai-quickactions-custom'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_quickactions_chat_prompts

Array of control IDs for the Chat Commands submenu within the AI Quick Actions menu.

Type: Array of String

Default value: ['ai-chat-explain', 'ai-chat-summarize', 'ai-chat-highlight-key-points']

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_chat_prompts: [
    'ai-chat-explain',
    'ai-chat-summarize',
    'ai-chat-highlight-key-points'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_quickactions_change_tone_menu

Array of control IDs for the Change Tone submenu within the AI Quick Actions menu.

Type: Array of String

Default value:

[
  'ai-quickactions-tone-casual',
  'ai-quickactions-tone-direct',
  'ai-quickactions-tone-friendly',
  'ai-quickactions-tone-confident',
  'ai-quickactions-tone-professional'
]
Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_change_tone_menu: [
    'ai-quickactions-tone-casual',
    'ai-quickactions-tone-professional'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_languages

Array of language options for the Translate submenu within the AI Quick Actions menu. Each item has title (displayed in the menu) and language (language name or label sent to the API, for example 'english', 'chinese').

The language string is passed to the API as the target language description. Values are not limited to the built-in examples: any clear label the model can interpret can be used (including informal or regional phrasing).

Type: Array of Object

Default value:

[
  { 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: 'Korean', language: 'korean' },
  { title: 'Italian', language: 'italian' },
  { title: 'Russian', language: 'russian' }
]
Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_languages: [
    { title: 'English', language: 'english' },
    { title: 'French', language: 'french' },
    { title: 'German', language: 'german' }
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_quickactions_custom

Array of custom actions rendered in the Custom submenu within the AI Quick Actions menu. Each item can be type action (quick action with immediate preview) or type chat (opens in chat).

  • title: Text shown in the menu and chat history

  • prompt: The prompt sent to the AI

  • type: 'action' or 'chat'

  • model: Required for action type only

Type: Array of Object

Possible Values: For type property: 'action', 'chat'

Default value: []

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_custom: [
    {
      title: 'Add a quote from a famous person',
      prompt: 'Add a quote from a known person, which would make sense in the context of the selected text.',
      type: 'action',
      model: 'gemini-2-5-flash'
    },
    {
      title: 'Summarize in 5 bullet points',
      prompt: 'Summarize the selected text in 5 bullet points.',
      type: 'chat'
    }
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Options for Review

These options configure the AI Review sidebar, which provides content quality analysis and improvement suggestions.

tinymceai_reviews

Array of review command IDs that define which review types appear in the Review sidebar and their order. Only the listed reviews are available to users.

Type: Array of String

Valid values:

  • 'ai-reviews-proofread': Check grammar, spelling, and punctuation

  • 'ai-reviews-improve-clarity': Improve logical structure and precision

  • 'ai-reviews-improve-readability': Adjust sentence structure and word choice

  • 'ai-reviews-change-length': Shorten or lengthen text

  • 'ai-reviews-change-tone': Modify tone and style

Default value:

[
  'ai-reviews-proofread',
  'ai-reviews-improve-clarity',
  'ai-reviews-improve-readability',
  'ai-reviews-change-length',
  'ai-reviews-change-tone'
]
Example
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_reviews: [
    'ai-reviews-proofread',
    'ai-reviews-improve-clarity',
    'ai-reviews-change-tone'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Toolbar buttons

The TinyMCE AI plugin provides the following toolbar buttons:

Toolbar button identifier Description

Chat icon tinymceai-chat

Opens the AI Chat sidebar for conversations with the AI agent.

Quick Actions icon tinymceai-quickactions

Opens the AI Quick Actions menu (improve writing, fix grammar, translate, and similar).

Review icon tinymceai-review

Opens the AI Review sidebar for running content review workflows.

For submenu and individual action identifiers (for example, ai-quickactions-improve-writing, ai-chat-explain), see Configuring Quick Actions menu.

These toolbar buttons can be added to the editor using:

The TinyMCE AI plugin provides the following menu items:

Menu item identifier Default Menu Location Description

Chat icon tinymceai-chat

Tools

Opens the AI Chat sidebar.

Quick Actions icon tinymceai-quickactions

Tools

Opens the AI Quick Actions menu.

Review icon tinymceai-review

Tools

Opens the AI Review sidebar.

For submenu and individual menu item identifiers (for example, ai-quickactions-improve-writing, ai-chat-explain), see Configuring Quick Actions menu.

These menu items can be added to the editor using:

The chat and review interfaces open as sidebars. From the toolbar or menu, clicking tinymceai-chat Chat icon opens the chat sidebar; clicking again minimizes it (chat history is preserved). Clicking tinymceai-review Review icon opens the review sidebar.

To toggle sidebars programmatically, use the core ToggleSidebar command:

editor.execCommand('ToggleSidebar', false, 'tinymceai-chat');
editor.execCommand('ToggleSidebar', false, 'tinymceai-review');

Keyboard shortcuts

The following keyboard shortcuts are available for the AI sidebars:

Action Windows macOS

Open or Close the AI Chat sidebar

Ctrl+J

Cmd+J

To show the chat sidebar on load:

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  sidebar_show: 'tinymceai-chat',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Commands

The TinyMCE AI plugin provides the following TinyMCE commands.

Toggling the AI Chat and AI Review sidebars

AI Chat and AI Review use sidebars registered by the plugin. To show or hide them programmatically, use the core ToggleSidebar command (listed in the Miscellaneous Core Commands table), not a command defined by the TinyMCE AI plugin. Pass the sidebar identifier as the third argument:

  • 'tinymceai-chat' — AI Chat

  • 'tinymceai-review' — AI Review

Examples
// Open the AI Chat sidebar
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat');

// Close the current sidebar (pass the same ID again to toggle off)
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat');

// Open the AI Review sidebar
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-review');