React UI

Completion panel

Build a prompt-to-text completion panel with @anvia/react-ui.

Use completion primitives when the interface is one prompt and one generated text result rather than a multi-message chat thread.

import { useCompletion } from "@anvia/react";
import { Completion, CompletionProvider } from "@anvia/react-ui";

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

  return (
    <CompletionProvider controller={completion}>
      <Completion.Root className="completion-panel">
        <Completion.Output>
          {(text) => (
            <article className="completion-result" aria-live="polite">
              {text.length > 0 ? text : "Your draft will appear here."}
            </article>
          )}
        </Completion.Output>

        <Completion.Form className="completion-form">
          <Completion.Input rows={5} placeholder="Draft a release note for the latest changes..." />
          <Completion.Stop>Stop</Completion.Stop>
          <Completion.Submit>Generate</Completion.Submit>
        </Completion.Form>
      </Completion.Root>
    </CompletionProvider>
  );
}

.completion-panel {
  width: min(760px, 100%);
  display: grid;
  gap: 16px;
}

.completion-result {
  min-height: 180px;
  border: 1px solid #3f3f46;
  border-radius: 12px;
  background: #18181b;
  padding: 16px;
  white-space: pre-wrap;
}

.completion-form {
  display: grid;
  gap: 10px;
}

.completion-form textarea {
  resize: vertical;
}

import { useCompletion } from "@anvia/react";
import { Completion, CompletionProvider } from "@anvia/react-ui";

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

  return (
    <CompletionProvider controller={completion}>
      <Completion.Root className="grid w-full max-w-3xl gap-4">
        <Completion.Output>
          {(text) => (
            <article className="min-h-44 whitespace-pre-wrap rounded-xl border border-zinc-700 bg-zinc-900 p-4" aria-live="polite">
              {text.length > 0 ? text : "Your draft will appear here."}
            </article>
          )}
        </Completion.Output>

        <Completion.Form className="grid gap-2.5">
          <Completion.Input className="min-h-32 resize-y rounded-xl border border-zinc-700 bg-zinc-950 p-3 outline-none" rows={5} placeholder="Draft a release note for the latest changes..." />
          <div className="flex gap-2">
            <Completion.Stop>Stop</Completion.Stop>
            <Completion.Submit>Generate</Completion.Submit>
          </div>
        </Completion.Form>
      </Completion.Root>
    </CompletionProvider>
  );
}

The completion endpoint should accept the same UIStreamRequest shape as chat and return Anvia stream events. See Completion for the route example.