Velt Rewriter Best Practices

Implementation guide for the Velt Rewriter — an AI text-rewriter primitive that lets users select text and apply AI-generated rewrites or anchor AI-assisted comments. Covers the full client-side pipeline (enableRewriter → on('textSelected') → askAi → replaceText / addComment), the default-toolbar toggle, AI model typing, and wireframe-driven custom UI.

When to Apply

Reference these guidelines when:

• Adding AI text-rewrite functionality to a React, Next.js, or web application
• Wiring the canonical Rewriter pipeline (enable → subscribe → generate → apply)
• Calling askAi and picking a model — Velt auto-routes the provider from the model prefix
• Replacing DOM text in-place after AI generation (replaceText)
• Anchoring AI suggestions as Velt comments on the selected text range (addComment)
• Controlling whether Velt's built-in selection toolbar shows (enableDefaultUI / disableDefaultUI)
• Building a custom Rewriter UI on top of the wireframe primitives (componentConfig.* bindings)
• Typing against RewriterAskAiRequest, RewriterReplaceTextRequest, RewriterAddCommentRequest, or AiModel

For server-side AI generation via the Velt Python SDK (sdk.api.rewriter.askAi), see the velt-self-hosting-data-best-practices skill — that path is documented there and is not duplicated here.

Rule Categories by Priority