Docs

Packages

@anvia/react-ui: Examples

Small examples and links for @anvia/react-ui.

The package page stays concise for package-reference coverage. The richer recipe set lives in the dedicated React UI examples.

The message snippet below assumes it is rendered by Thread.Messages or another message provider inside ChatProvider. The composer snippet assumes ChatProvider. The completion snippet uses its own CompletionProvider; chat primitives do not read completion context.

Quick examples

import { Message } from "@anvia/react-ui";

export function ChatMessage() {
  return (
    <Message.Root className="message">
      <Message.Content>
        <Message.Parts />
      </Message.Content>
      <Message.Actions>
        <Message.Copy>Copy</Message.Copy>
        <Message.Regenerate>Try again</Message.Regenerate>
      </Message.Actions>
    </Message.Root>
  );
}
import { Composer } from "@anvia/react-ui";

export function AttachmentComposer() {
  return (
    <Composer.Root>
      <Composer.Attachments />
      <Composer.AddAttachment>Attach</Composer.AddAttachment>
      <Composer.Input maxRows={6} />
      <Composer.Submit>Send</Composer.Submit>
    </Composer.Root>
  );
}
import { useCompletion } from "@anvia/react";
import { Completion, CompletionProvider } from "@anvia/react-ui";

export function CompletionPanel() {
  const completion = useCompletion({ endpoint: "http://localhost:8787/api/completion" });

  return (
    <CompletionProvider controller={completion}>
      <Completion.Root>
        <Completion.Output />
        <Completion.Form>
          <Completion.Input />
          <Completion.Submit />
        </Completion.Form>
      </Completion.Root>
    </CompletionProvider>
  );
}