@weaveworm/react

Thin React bindings and unstyled, token-driven reference components for AI-native UI patterns — part of weaveworm.

The hook wraps @weaveworm/core via useSyncExternalStore; the components just render a snapshot. They are unstyled on purpose — copy them and dress them in your own design system through the data-* attributes they expose. No overrides, no !important.

import { useStreaming, StreamingText } from "@weaveworm/react";
import { createRawSSEAdapter } from "@weaveworm/core/adapters/raw-sse";

const adapter = createRawSSEAdapter({ url: "/api/chat" });

export function Chat() {
  const stream = useStreaming(adapter);
  return (
    <div>
      <StreamingText state={stream} showReasoning />
      {stream.status === "streaming" ? (
        <button onClick={stream.stop}>Stop</button>
      ) : (
        <button onClick={() => stream.send({ messages: [{ role: "user", content: "Explain SSE." }] })}>
          Send
        </button>
      )}
    </div>
  );
}

Components

StreamingText · Reasoning · Sources · ToolCalls · PromptInput

Theming

An optional copy-me reference theme ships alongside the components:

import "@weaveworm/react/styles/tokens.css";
import "@weaveworm/react/styles/reference.css";

Canon

Each pattern is documented with codified best practices — when to stream, honest latency masking, the unhappy path, accessibility. See the weaveworm canon.

MIT © Shan Nadige