wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
81 lines
2.7 KiB
Markdown
81 lines
2.7 KiB
Markdown
# `@assistant-ui/react-ink`
|
|
|
|
[](https://www.npmjs.com/package/@assistant-ui/react-ink)
|
|
[](https://www.npmjs.com/package/@assistant-ui/react-ink)
|
|
[](https://github.com/assistant-ui/assistant-ui)
|
|
|
|
|
|
[Ink](https://github.com/vadimdemedes/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.
|
|
|
|
```bash
|
|
npm install @assistant-ui/react-ink ink react
|
|
```
|
|
|
|
For markdown rendering with syntax highlighting, also install [`@assistant-ui/react-ink-markdown`](https://www.npmjs.com/package/@assistant-ui/react-ink-markdown).
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
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](https://www.assistant-ui.com/docs/ink)
|
|
- [Migration from Web](https://www.assistant-ui.com/docs/ink/migration)
|
|
- [Primitives](https://www.assistant-ui.com/docs/ink/primitives)
|
|
- [Hooks](https://www.assistant-ui.com/docs/ink/hooks)
|
|
|
|
## For other platforms
|
|
|
|
- Web: [`@assistant-ui/react`](https://www.npmjs.com/package/@assistant-ui/react)
|
|
- React Native: [`@assistant-ui/react-native`](https://www.npmjs.com/package/@assistant-ui/react-native)
|