Built-in AI text editing

Bring your own API key (BYOK) -- no vendor lock-in, no paid proxy. Requests go directly to your provider.

Provider setup

ai-provider.ts

import {
  createOpenAIProvider,
  createAnthropicProvider,
  createGeminiProvider
} from "@/lib/ai"

// OpenAI
const openai = createOpenAIProvider({
  apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY!,
  model: "gpt-4o"
})

// Anthropic
const anthropic = createAnthropicProvider({
  apiKey: process.env.NEXT_PUBLIC_ANTHROPIC_KEY!,
  model: "claude-sonnet-4-20250514"
})

// Google Gemini
const gemini = createGeminiProvider({
  apiKey: process.env.NEXT_PUBLIC_GEMINI_KEY!,
  model: "gemini-pro"
})

useEditorAI hook

MyEditor.tsx

import { useEditorAI } from "@/hooks/useEditorAI"

function MyEditor() {
  const { generateContent, isGenerating, abort } = useEditorAI(provider)

  return (
    <EditorProvider initialState={initialState}>
      <Editor />
      <AICommandMenu
        onGenerate={generateContent}
        isGenerating={isGenerating}
        onAbort={abort}
      />
    </EditorProvider>
  )
}

AI selection presets

Select text and click the AI sparkles button in the selection toolbar. Nine built-in presets (6 rewrite + 3 style) plus custom prompts.

01transform

Rephrase

Rephrase selected text while keeping the original meaning

02fix

Fix Grammar

Correct grammar and spelling errors automatically

03shorten

Make Shorter

Condense text while preserving the key message

04expand

Make Longer

Expand text with additional detail and context

05tone

Professional

Rewrite in a formal, professional tone

06tone

Casual

Rewrite in a casual, friendly tone

07style

Emphasize Key Words

Add bold to the most important words and phrases

08style

Add Emphasis

Add bold and italic to emphasize key concepts

09style

Code Terms

Wrap technical terms and function names in inline code

AI Styling

Style presets return markdown-formatted text that gets parsed into rich InlineText[] and applied to the editor with proper bold, italic, code, and strikethrough formatting. Use the styled option to enable this mode.

styled-ai.ts

const { replaceSelectionWithAI } = useEditorAI({ provider })

// Styled mode — AI returns markdown, parsed into InlineText[]
const { text, children } = await replaceSelectionWithAI(
  "Add **bold** to the most important words",
  selection,
  { styled: true }
)

// Apply rich formatted text to the editor
dispatch(EditorActions.replaceSelectionWithInlines(
  selection.nodeId, selection.start, selection.end, children
))

--BYOK -- you supply your own API key. Requests go directly to the provider with no intermediary.
--No vendor lock-in -- swap providers by changing one line of code.
--Streaming -- AI-generated content appears token-by-token in the editor for real-time feedback.
--Custom prompts -- write any prompt for arbitrary AI text transformations beyond the six presets.

Usage

Real-time Collaboration