❌

Normal view

Anky UI: headless React primitives for text selection actions, streaming diffs and ghost autocomplete

I’m sharing Anky UI, my open-source React library for putting AI edits inside the text a user is already working on.

The interaction is select → choose an action → review a streamed diff → accept or reject. The library supplies the UI and state primitives; your application supplies the model endpoint and commits the accepted text to its editor.

  • SelectionPalette: floating actions anchored to a DOM selection, using floating-ui.
  • InlineDiff: word/character diffs while a rewrite streams, with Cmd/Ctrl+Enter to accept and Escape to reject.
  • GhostInput: textarea autocomplete with Tab/right-arrow acceptance.
  • useOptimisticAIState: streaming state, rollback, and undo/redo.

React 18/19, including Next.js App Router Client Components. Tailwind presets are optional. It consumes raw text/SSE, with helpers for OpenAI, Anthropic and Vercel AI SDK wire formats. Keep API keys on your server.

Source and quick start: https://github.com/ErAnkushPatil/anky-ui

29-second walkthrough: https://x.com/ErAnkushP/status/2115629939106230425

Install: npm i @erankushpatil/anky-ui

Or copy the source: npx anky-ui add selection-palette

To try the included mock-stream demo without a model key:

sh git clone https://github.com/ErAnkushPatil/anky-ui.git cd anky-ui pnpm install pnpm dev:demo

One integration detail: rendering an InlineDiff and accepting its state does not by itself replace the selected DOM text. Your editor owns that commit step. The rich-text adapters also need verification against your editor version.

Which edge cases would you test first: selection moving during a rewrite, interrupted streams, or undo/redo behavior?

Disclosure: this launch post was prepared with ChatGPT, using the repository documentation; I’m the library’s author.

submitted by /u/ErAnkushPatil to r/reactjs
[link] [comments]
❌