assistant-ui--assistant-ui/packages/react-ink

@assistant-ui/react-ink

Ink bindings for assistant-ui. Composable, unstyled terminal primitives that share the same runtime, adapters, and tools as @assistant-ui/react, so you can ship a CLI chat UI without rewriting your backend code.

Installation

Requires React 19 and ink 6 or newer.

npm install @assistant-ui/react-ink ink react

For markdown rendering with syntax highlighting, also install @assistant-ui/react-ink-markdown.

Usage

import { render, Box, Text } from "ink";
import {
  AssistantRuntimeProvider,
  useLocalRuntime,
  ThreadPrimitive,
  ComposerPrimitive,
  useAuiState,
  type ChatModelAdapter,
} from "@assistant-ui/react-ink";

const adapter: ChatModelAdapter = {
  async *run({ messages }) {
    yield { content: [{ type: "text", text: "Hello from AI!" }] };
  },
};

const Message = () => {
  const message = useAuiState((s) => s.message);
  const text = message.content.find((p) => p.type === "text")?.text ?? "";
  return (
    <Box marginBottom={1}>
      <Text color={message.role === "user" ? "green" : "blue"}>
        {message.role === "user" ? "You: " : "AI: "}
      </Text>
      <Text>{text}</Text>
    </Box>
  );
};

const App = () => {
  const runtime = useLocalRuntime(adapter);
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <ThreadPrimitive.Root>
        <ThreadPrimitive.Messages>{() => <Message />}</ThreadPrimitive.Messages>
        <Box borderStyle="round" paddingX={1}>
          <Text>{"> "}</Text>
          <ComposerPrimitive.Input submitOnEnter placeholder="Message..." autoFocus />
        </Box>
      </ThreadPrimitive.Root>
    </AssistantRuntimeProvider>
  );
};

render(<App />);

Documentation

• Getting Started
• Migration from Web
• Primitives
• Hooks

For other platforms

• Web: @assistant-ui/react
• React Native: @assistant-ui/react-native