skills.rest
velt-js
velt-jsOFFICIAL
Explore all skills by this author →
Website𝕏@veltjsGitHub

velt-rewriter-best-practices

Implement the Velt Rewriter pipeline for AI text rewrites and anchored comments.

1|Updated Jan 23, 2026
Search Tags:#React#LLM integration#wireframe#text selection#velt#ai rewriter#replace text
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-rewriter-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-rewriter-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-rewriter-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-rewriter-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Integrating an AI text-rewriter into a web app involves wiring feature toggles, text-selection events, multi-provider AI calls, and safe DOM replacement — and getting the order or event-threading wrong causes silent failures. This Skill provides the canonical implementation rules for the Velt Rewriter so agents generate correct integration code. ## Core Features & Use Cases - End-to-End Pipeline: Wire the four-step flow — enableRewriter, subscribe to textSelected, call askAi, then replaceText or addComment — with correct event threading. - Multi-Provider AI Generation: Call askAi with OpenAI, Anthropic, or Gemini models, auto-routed by model prefix, with custom LLM keys configured via the Velt Console. - Custom UI & Typing: Hide the default toolbar with disableDefaultUI, build custom dialogs with wireframe componentConfig bindings, and type models with the open AiModel union. - Use Case: A reviewer workflow where the AI suggests a rewrite, the suggestion is anchored as a Velt comment via addComment, and replaceText applies it only after approval. ## Quick Start Use the velt-rewriter-best-practices skill to build a React component that enables the Velt Rewriter, listens for text selections, asks Gemini to rewrite the selection, and replaces the text in place.

Frequently Asked Questions about velt-rewriter-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up the Velt Rewriter in a React or Next.js app?▼

Call getRewriterElement() from the Velt client inside a useEffect, call enableRewriter(), subscribe to on('textSelected'), call askAi with the selected text, then apply the result with replaceText({ text, event }). Unsubscribe and call disableRewriter() in the cleanup.

How do I switch AI providers in Velt askAi from OpenAI to Claude?▼

Change only the model string — Velt auto-routes the provider from the prefix: gpt-*/o1-*/o3-*/o4-* for OpenAI, claude-* for Anthropic, gemini-* for Google. There is no provider field to configure.

How do I hide the Velt rewriter toolbar but keep text-selection events?▼

Call disableDefaultUI() on the RewriterElement. This hides only the built-in selection toolbar while the feature stays active and textSelected events keep firing, so you can render custom UI. Do not use disableRewriter(), which turns the feature off entirely.

Why does manually replacing DOM text break Velt comments?▼

Manual DOM edits like innerHTML lose Velt's anchor metadata, breaking anchored comments. Use replaceText({ text, event }) with the full event from the textSelected subscription so Velt locates the exact DOM range safely.

Can I anchor an AI rewrite suggestion as a comment instead of replacing text?▼

Yes, call the Rewriter's addComment({ text, event }) with the full textSelected event to pin a Velt comment annotation to the selected range. You can combine it with replaceText — comment first, then replace on reviewer approval.

Does the AiModel type reject model strings not in the official list?▼

No. AiModel is an open union with a (string & NonNullable<unknown>) escape hatch, so unenumerated or fine-tuned model identifiers still compile without a cast. Import AiModel or RewriterAskAiRequest from @veltdev/types for autocomplete.

Related Skills

Explore More Software Engineering Skills→
webinywebiny
8.0k

webiny-configure-okta

Configures Okta as an external identity provider for Webiny projects replacing Cognito.

Official
Intermediate
RorySullivan1RorySullivan1

github-comments

Write and submit GitHub PR reviews, inline comments, and issue replies via MCP tools or gh CLI.

Community
Intermediate
git-taogit-tao

stripe

Automate Stripe payment integration, checkout sessions, subscriptions, and webhook handling.

Community
Intermediate
DMT123DMT123

sentry-setup-ai-monitoring

Detect installed AI SDKs and configure Sentry AI monitoring for JavaScript and Python projects.

Community
Intermediate