Building with
Claude API
+ Nodus Design System

claude-opus-4-6 with streaming enabled. Messages API with tool_use blocks for structured function calls. Streaming events: message_start, content_block_delta, message_stop.

Consumes the Anthropic stream and renders token-by-token output. Handles partial markdown, code fences, and JSON artifacts. Manages streaming state machine: idle → streaming → complete → error.

Renders tool_use content blocks as structured inspector cards. Shows function name, input arguments (syntax-highlighted JSON), and the tool_result response. Collapsible by default.

Reads usage.input_tokens + usage.output_tokens from message events. Renders a segmented bar with model-specific max context (200k for Opus 4). Warning threshold at 80%, critical at 95%.

Dropdown with Haiku 4.5, Sonnet 4.6, Opus 4.6 variants. Shows context window, vision support, speed tier, and relative cost per token. Persists selection to localStorage.

Install and configure

# Nodus is in private preview — distribution details TBD
# Install the Anthropic SDK separately:
npm install @anthropic-ai/sdk

Create the streaming client

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

export async function createStream(messages: MessageParam[]) {
  return client.messages.stream({
    model: "claude-opus-4-6",
    max_tokens: 4096,
    messages,
    tools: [/* your tool definitions */],
  });
}

Wire up the components

import {
  StreamingArtifact,
  FunctionCallVisualizer,
  ContextWindowMeter,
  ModelSelector,
} from "nodus-design-system";

export function AgentChat() {
  const [stream, setStream] = useState(null);
  const [usage, setUsage] = useState({ input: 0, output: 0 });
  const [model, setModel] = useState("claude-opus-4-6");

  async function send(prompt: string) {
    const s = await createStream([{ role: "user", content: prompt }]);
    s.on("message", (msg) => setUsage({
      input: msg.usage.input_tokens,
      output: msg.usage.output_tokens,
    }));
    setStream(s);
  }

  return (
    <div>
      <ModelSelector value={model} onChange={setModel} />
      <ContextWindowMeter
        used={usage.input + usage.output}
        model={model}
      />
      <StreamingArtifact stream={stream} />
      {stream && <FunctionCallVisualizer stream={stream} />}
    </div>
  );
}

Color contrast — body text

WCAG AA requires 4.5:1

Color contrast — streaming tokens

WCAG AA requires 4.5:1

Keyboard navigation

Tab, Arrow keys, Enter, Escape

Screen reader — live regions

Streaming tokens announced progressively

Reduced motion

Streaming animation disabled on prefers-reduced-motion

Focus management

3px offset, agency-colored ring