@neeter/react

React components and hooks for building chat UIs on top of the Claude Agent SDK. Builds on @neeter/core for state management and agent lifecycle — with drop-in components and a widget system for tool call rendering.

Part of the neeter toolkit.

Install

pnpm add @neeter/core @neeter/react

Peer dependencies:

{
  "react": ">=18.0.0",
  "react-markdown": ">=10.0.0",
  "zustand": ">=5.0.0",
  "immer": ">=10.0.0"
}

Components use Tailwind CSS v4 utility classes.

Quick start

import { AgentProvider, MessageList, ChatInput, useAgentContext } from "@neeter/react";

function App() {
  return (
    <AgentProvider>
      <Chat />
    </AgentProvider>
  );
}

function Chat() {
  const { sendMessage } = useAgentContext();

  return (
    <div className="flex h-screen flex-col">
      <MessageList className="flex-1" />
      <ChatInput onSend={sendMessage} />
    </div>
  );
}

Styling

Components use shadcn/ui-compatible CSS variable names. If you already have a shadcn theme, add one line:

@import "tailwindcss";
@source "../node_modules/@neeter/react/dist";

Without shadcn, import the bundled theme:

@import "tailwindcss";
@import "@neeter/react/theme.css";

Examples

| Example | Description | |---------|-------------| | basic-chat | Minimal component setup | | code-workbench | Custom events, widgets, split-pane preview, file checkpointing |

Documentation

• Client Guide — styling, custom events, widgets, tool lifecycle
• API Reference — all exports and types
• Built-in Widgets
• Custom Widgets

License

MIT