Hooks

import { useAuiState } from "@assistant-ui/react-ink";

// Thread state
const messages = useAuiState((s) => s.thread.messages);
const isRunning = useAuiState((s) => s.thread.isRunning);
const isEmpty = useAuiState((s) => s.thread.isEmpty);

// Composer state
const text = useAuiState((s) => s.composer.text);
const composerIsEmpty = useAuiState((s) => s.composer.isEmpty);
const attachments = useAuiState((s) => s.composer.attachments);

// Message state (inside a message context)
const role = useAuiState((s) => s.message.role);
const isLast = useAuiState((s) => s.message.isLast);

// Thread list item state
const threadId = useAuiState((s) => s.threadListItem.id);
const title = useAuiState((s) => s.threadListItem.title);

import { useAui } from "@assistant-ui/react-ink";

const aui = useAui();

// Composer actions
aui.composer().setText("Hello");
aui.composer().send();

// Thread actions
aui.thread().cancelRun();

import { useAuiEvent } from "@assistant-ui/react-ink";

useAuiEvent("thread.runStart", (payload) => {
  console.log("Run started:", payload);
});

import { useNotification } from "@assistant-ui/react-ink";

useNotification();

useNotification({
  onTaskComplete: { osc: "osc99" },
  onTaskIncomplete: false,
  onNeedsInput: {
    custom: (event) => myLogger.log(event),
  },
});

import { useLocalRuntime } from "@assistant-ui/react-ink";

const runtime = useLocalRuntime(chatModel, {
  initialMessages: [],
});

import { useRemoteThreadListRuntime, useLocalRuntime } from "@assistant-ui/react-ink";

const runtime = useRemoteThreadListRuntime({
  adapter: myRemoteAdapter,
  runtimeHook: () => useLocalRuntime(chatModel),
});

import { defineToolkit } from "@assistant-ui/react-ink";
import { Text } from "ink";
import { z } from "zod";

export default defineToolkit({
  get_weather: {
    description: "Get the current weather for a city",
    parameters: z.object({ city: z.string() }),
    execute: async ({ city }) => {
      const res = await fetch(`https://api.weather.example/${city}`);
      return res.json();
    },
    render: ({ args, result }) => (
      <Text>
        {args.city}: {result?.temperature}°F
      </Text>
    ),
  },
});

import { AuiProvider, Tools, useAui } from "@assistant-ui/react-ink";
import toolkit from "./weather-toolkit";

function ToolProvider({ children }: { children: React.ReactNode }) {
  const aui = useAui({ tools: Tools({ toolkit }) });
  return <AuiProvider value={aui}>{children}</AuiProvider>;
}

import { useAssistantInstructions } from "@assistant-ui/react-ink";

useAssistantInstructions("You are a helpful terminal assistant.");

import { useAssistantDataUI } from "@assistant-ui/react-ink";
import { Text } from "ink";

useAssistantDataUI({
  name: "weather_card",
  render: ({ data }) => (
    <Text>{data.city}: {data.temperature}°F</Text>
  ),
});

import { makeAssistantDataUI } from "@assistant-ui/react-ink";
import { Text } from "ink";

const WeatherCardUI = makeAssistantDataUI({
  name: "weather_card",
  render: ({ data }) => (
    <Text>{data.city}: {data.temperature}°F</Text>
  ),
});

// Mount inside AssistantRuntimeProvider to register
<WeatherCardUI />

import { defineToolkit, useInlineRender } from "@assistant-ui/react-ink";
import { Text } from "ink";
import { useMemo } from "react";

export function useWeatherToolkit() {
  const render = useInlineRender(({ args, result }) => (
    <Text>{args.city}: {result?.temperature}°F</Text>
  ));

  return useMemo(
    () =>
      defineToolkit({
        get_weather: {
          type: "backend",
          render,
        },
      }),
    [render],
  );
}

import { AssistantRuntimeProvider, useLocalRuntime } from "@assistant-ui/react-ink";

const runtime = useLocalRuntime(chatModel);

<AssistantRuntimeProvider runtime={runtime}>
  {/* app content */}
</AssistantRuntimeProvider>

import { MessageByIndexProvider } from "@assistant-ui/react-ink";

<MessageByIndexProvider index={0}>
  <MessagePrimitive.Root>...</MessagePrimitive.Root>
</MessageByIndexProvider>

import { PartByIndexProvider } from "@assistant-ui/react-ink";

<PartByIndexProvider index={0}>
  {/* part content */}
</PartByIndexProvider>

import { TextMessagePartProvider } from "@assistant-ui/react-ink";

<TextMessagePartProvider text="Hello world" isRunning={false}>
  {/* content rendered with a text part context */}
</TextMessagePartProvider>

import { ChainOfThoughtByIndicesProvider } from "@assistant-ui/react-ink";

<ChainOfThoughtByIndicesProvider startIndex={1} endIndex={3}>
  <ChainOfThoughtPrimitive.Root>...</ChainOfThoughtPrimitive.Root>
</ChainOfThoughtByIndicesProvider>

import { ChainOfThoughtPartByIndexProvider } from "@assistant-ui/react-ink";

<ChainOfThoughtPartByIndexProvider index={0}>
  {/* chain-of-thought part content */}
</ChainOfThoughtPartByIndexProvider>

import { SuggestionByIndexProvider } from "@assistant-ui/react-ink";

<SuggestionByIndexProvider index={0}>
  <SuggestionPrimitive.Title />
</SuggestionByIndexProvider>

import { ThreadListItemByIndexProvider } from "@assistant-ui/react-ink";

<ThreadListItemByIndexProvider index={0} archived={false}>
  <ThreadListItemPrimitive.Root>...</ThreadListItemPrimitive.Root>
</ThreadListItemByIndexProvider>

import { ThreadListItemRuntimeProvider } from "@assistant-ui/react-ink";

<ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>
  <ThreadListItemPrimitive.Root>...</ThreadListItemPrimitive.Root>
</ThreadListItemRuntimeProvider>

import { MessageAttachmentByIndexProvider } from "@assistant-ui/react-ink";

<MessageAttachmentByIndexProvider index={0}>
  <AttachmentPrimitive.Name />
</MessageAttachmentByIndexProvider>

import { ComposerAttachmentByIndexProvider } from "@assistant-ui/react-ink";

<ComposerAttachmentByIndexProvider index={0}>
  <AttachmentPrimitive.Name />
  <AttachmentPrimitive.Remove>
    <Text color="red">[x]</Text>
  </AttachmentPrimitive.Remove>
</ComposerAttachmentByIndexProvider>