@assistant-ui/react-lexical

Lexical rich-text composer for @assistant-ui/react, with first-class support for @-mention directive chips. Drop LexicalComposerInput in place of the default plain-text composer to render mentions and slash commands as inline chips while keeping the underlying message format clean.

Installation

npm install @assistant-ui/react @assistant-ui/react-lexical lexical @lexical/react @lexical/utils @lexical/history @lexical/plain-text

lexical and the @lexical/* packages this package imports are peer dependencies: your app owns the single Lexical copy that the composer and your own plugins share, so keep every Lexical package at one version.

Usage

import { ComposerPrimitive } from "@assistant-ui/react";
import { LexicalComposerInput } from "@assistant-ui/react-lexical";

export function Composer() {
  return (
    <ComposerPrimitive.Root>
      <LexicalComposerInput aria-label="Message" placeholder="Ask anything..." />
      <ComposerPrimitive.Send />
    </ComposerPrimitive.Root>
  );
}

Use aria-label or aria-labelledby to name the editable textbox (without either, the placeholder names it), and aria-describedby to reference hint or error text. Other HTML props and the forwarded ref apply to the outer wrapper.

For custom chip rendering, pass a directiveChip render prop. Directives (e.g. @user, /command) survive cursor navigation, selection, and copy/paste as a single unit.

Pass custom Lexical plugin components as children to hook into the editor via useLexicalComposerContext, for concerns like paste normalization or length limits.

See also

• @assistant-ui/react-hook-form for binding the composer to a form whose fields the assistant can read and fill.

Full reference at assistant-ui.com/docs.