Building with
Claude API
+ Nodus Design System

Streams a reply through the Anthropic SDK. In this repo, app/api/sandbox/route.ts streams text deltas with client.messages.stream on claude-haiku-4-5-20251001, but only under `npm run dev` with NODE_ENV=development — a deployed build answers 503 and never imports the SDK. app/api/copilotkit/route.ts no longer calls the Claude API directly at all: in development it spawns the developer's own `claude` CLI login, with no fixed model name; a deployed build answers 503 there too. No route here defines tools, so tool use is part of the API but not exercised by this repo.

Renders the content string you pass it, with a state of streaming, complete or error. Kinds are code, markdown and text, with an optional diff view and copy button. While streaming it sets aria-live=polite. Your code feeds it from the stream.

Shows one tool call: its name, input and output as JSON blocks, a status of pending, running, done or error, and an optional duration. It is collapsible, and starts closed when defaultCollapsed is set.

Takes segments (label and token count) and a limit, and draws a segmented bar with role=meter. By default it warns at 80% of the limit and flags critical at 95% (warnAt and criticalAt props). You read the counts from the API's usage field and pass them in.

Takes a list of options (id, name, context window, capabilities, cost tier and latency tier) and renders a dropdown or a comparison panel. The list is yours to supply. Source is components/ai/ModelSelector.tsx; it is not exported from the package root.

Install the SDK

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

Create the streaming client

// Illustrative. app/api/sandbox/route.ts is the real route in this repo,
// gated to NODE_ENV=development — a deployed build answers 503 instead.
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

export function createStream(messages: Anthropic.MessageParam[]) {
  return client.messages.stream({
    model: "claude-haiku-4-5-20251001",
    max_tokens: 1200,
    messages,
    // tools: [...] would go here for tool use
  });
}

Pass stream state into the components

// Illustrative. text, state, call and segments come from your own
// handling of the stream; the components do not read it themselves.
import {
  StreamingArtifact,
  FunctionCallVisualizer,
  ContextWindowMeter,
} from "@danagraph/design-system";

export function AgentChat({ text, state, call, segments }) {
  return (
    <div>
      <ContextWindowMeter segments={segments} limit={200000} />
      <StreamingArtifact content={text} state={state} />
      {call && (
        <FunctionCallVisualizer
          name={call.name}
          input={call.input}
          status={call.status}
          output={call.output}
        />
      )}
    </div>
  );
}

Contrast — primary text on raised surface (agent bubble)

sRGB, light / dark. WCAG AA requires 4.5:1

Contrast — secondary text on raised surface

sRGB, light / dark. WCAG AA requires 4.5:1

Contrast — inverse text on temporal (user bubble)

sRGB, light / dark. WCAG AA requires 4.5:1

Contrast — inverse text on agency (Approve button)

sRGB, light / dark. WCAG AA requires 4.5:1

Contrast — inverse text on temporal, wide-gamut display (user bubble)

Display P3, light / dark, read in Chromium with color-gamut: p3 emulated. The wide-gamut primaries in tokens/bauhaus.css apply to the light theme only, so dark is the sRGB figure. WCAG AA requires 4.5:1

Contrast — inverse text on agency, wide-gamut display (Approve button)

Display P3, light / dark, read in Chromium with color-gamut: p3 emulated. The wide-gamut primaries in tokens/bauhaus.css apply to the light theme only, so dark is the sRGB figure. WCAG AA requires 4.5:1

Streaming announcements

StreamingArtifact sets aria-live=polite and aria-busy while streaming. The reference page has no live region.

Keyboard operation

The reference page uses a native input and buttons, and Enter sends. It adds no Arrow or Escape handling.

Reduced motion

A global rule in app/globals.css shortens every animation and transition under prefers-reduced-motion.

Focus indicator

The global :focus-visible ring is a 2px outline with 2px offset. The reference page's text input sets outline: none inline, so it shows no ring.