@anvia/react: Examples

Minimal chat

import { useChat } from "@anvia/react";

export function Chat() {
  const chat = useChat({ endpoint: "http://localhost:8787/api/chat" });

  return <button onClick={() => void chat.send("Hello")}>{chat.status}</button>;
}

Minimal completion

import { useCompletion } from "@anvia/react";

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

  return (
    <section>
      <button onClick={() => void completion.complete("Draft a changelog entry")}>
        {completion.status === "streaming" ? "Writing..." : "Complete"}
      </button>
      <pre>{completion.completion}</pre>
    </section>
  );
}

Product-shaped transport

import { createChatTransport, useChat } from "@anvia/react";

const transport = createChatTransport({
  endpoint: "http://localhost:8787/api/support/chat",
  headers: () => ({ "x-client": "support-console" }),
});

export function SupportChat() {
  return useChat({ transport });
}

Harness shape

import { describe, expect, it } from "vitest";

describe("@anvia/react integration", () => {
  it("keeps the package boundary injectable", () => {
    expect(true).toBe(true);
  });
});

Replace the assertion with a focused check around the package boundary: stream format for server/react, observer registration for logging/tracing, or runtime target registration for Studio.