DEV Community

Cover image for fude: React Rich Text Input with @ Mentions and AI Autocomplete
jQueryScript
jQueryScript

Posted on

fude: React Rich Text Input with @ Mentions and AI Autocomplete

fude: a React component that handles @ mention chips and AI ghost text autocomplete in a single input field.

Key features:

  • Inline tag chips from @ dropdown, with JSX labels and tooltips
  • Ghost text suggestions after typing pause — Tab to accept, Shift+Tab to cycle through multiple suggestions
  • Segment-based value model (Segment[]) that separates text from mention references
  • Built-in fuzzyFilter for local lists; remote APIs work the same way
  • Full Tailwind and TypeScript support

Worth a look if you are building AI chat interfaces, code editor prompts, or task inputs where users need to tag structured items.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)