Guides
Configure how tokens arrive. Slash /ai, format-bar continue/rewrite,
draft blocks, live MD→structure, accept / undo are built in.
import { Editor } from 'markloom/view'
import 'markloom/view/theme.css'
import 'markloom/ai/theme.css'
Pick one transport: provider | endpoint | stream.
Any host with POST …/v1/chat/completions + SSE (OpenAI, xAI, …). Needs CORS; prefer a proxy in production.
new Editor(el, doc, {
ai: {
provider: {
host: 'https://api.x.ai',
apiKey: import.meta.env.VITE_AI_KEY,
model: 'grok-3',
},
},
})
Keys stay on the server. Body from the editor:
{ action, context, docPreview, system, provider? }.
Respond with SSE — OpenAI choices[0].delta.content or { content } per data: line.
new Editor(el, doc, {
ai: { endpoint: '/api/ai/stream' },
})
npm i markloom ai @ai-sdk/openai
import { streamText } from 'ai'
import { createOpenAI } from '@ai-sdk/openai'
const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY! })
new Editor(el, doc, {
ai: {
stream: async (input, onToken) => {
const result = streamText({
model: openai('gpt-4o-mini'),
prompt: input.context,
abortSignal: input.signal,
})
for await (const t of result.textStream) onToken(t)
},
},
})
| Phase | History |
|---|---|
| Begin | dispatch — real draft blocks enter the doc |
| Stream / accept | amend — same commit grows; accept peels draft flag |
| Discard | undo — whole transaction rolls back |
Streaming soft-closes incomplete Markdown each frame and runs mdToDoc
so headings, lists, and marks preview as real structure.
ai.md next to the npm package.