MagicWand

react-fancy
Registry JSON
Why
Text editors need inline AI quick-actions — rephrase, summarize, expand, tone-shift — triggered instantly when the user highlights a phrase. Without MagicWand, you're back to copy-paste loops to an external tool, breaking the editing flow and losing context. Every messaging app, prompt refiner, and chat composer hits this UX debt.
What
MagicWand is a controlled wrapper around a Textarea that floats a toolbar above text selections. Core props are value + onValueChange for controlled state, actions (array of objects with id, label, hint, tag, and an async run callback), appearance ("floating" or "pill"), and autoHide (default true). Each action's run callback receives the selected text and a MagicWandSelection object (with start, end, text), returns the replacement string, and MagicWand swaps it in-place; an optional onAction callback fires after success.
How
Import MagicWand from @particle-academy/react-fancy, wrap your text with <MagicWand value={body} onValueChange={setBody} actions={[{ id: "rephrase", label: "Rephrase", run: async (s) => await ai.rephrase(s) }, …]} />, and the toolbar auto-appears on highlight. Pass appearance="pill" for icon-only mode or autoHide={false} to keep the toolbar visible after click-away.