Examples

Latest FeaturesCollaboration & ReviewMobile & VoiceBasic ExamplesEditor SizeInserting ContentDrag and DropTypingPluginsAPIs

AI Toolkit Demo

Runs in built-in demo mode - no API key required. Click a quick action below, or use the Ask AI toolbar button in the editor. Every suggestion is previewed before it commits.

AI Toolkit overviewProvider settings (BYOK)Structured JSON
Live · Demo resolver

Try every AI surface below

Pick a sample document, then click a quick action. Watch the editor react in real time.

Ready0 actions
Start from a sample

Each sample exercises different AI behaviors. The editor updates immediately.

Tip: select text first, then press Ask AI in the toolbar.

Launch-ready product update

RichTextEditor now supports in-editor AI actions that stay close to the document instead of opening a disconnected utility panel.

Use Ask AI to proofread, rewrite, justify an edit, add a paragraph, or open AI Chat for a multi-turn workflow. Suggestions stay reviewable before they are applied.

  • Inline AI preview with accept and reject
  • Docked AI Chat for multi-turn editing help
  • AI Review drawer for pending, accepted, and rejected suggestions

What to try

Select the first paragraph and run Proofread, or open AI Chat and ask it to summarize the content and suggest a stronger heading.

Legacy launchers:

Demo code

Everything between the BEGIN-DEMO-CODE / END-DEMO-CODE markers is the live code running on this page.

<div id="div_ai_editor"> ... </div>

<script>
    var aiEditorConfig = {
        toolbar: "full",
        height: "560px",
        showFloatTextToolBar: true,
        showFloatParagraph: true,
        showStatistics: true,
        aiToolkitPersistenceKey: "tailwind-ai-toolkit-demo"
    };

    var aiEditor = new RichTextEditor("#div_ai_editor", aiEditorConfig);

    var aiDemo = {
        openDialog: function () {
            aiEditor.aiToolkit.openDialog({ presetMode: "rewrite", useDocument: false, autoRun: false });
        },
        proofread: function () {
            selectAiIntroParagraph();
            aiEditor.aiToolkit.runQuickAction("proofread");
        },
        rewrite: function () {
            selectAiIntroParagraph();
            aiEditor.aiToolkit.runQuickAction("rewrite");
        },
        summarize: function () {
            aiEditor.aiToolkit.runQuickAction("summarize");
        },
        chat: function () {
            aiEditor.aiToolkit.openChatPanel({ focusComposer: true });
        },
        review: function () {
            aiEditor.aiToolkit.openReviewPanel({ focusPanel: true });
        },
        loadSample: function (name) {
            aiEditor.setHTMLCode(aiDemoSamples[name]);
        }
    };
</script>