@neeter/react 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -0
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# @neeter/react
|
|
2
|
+
|
|
3
|
+
React components and hooks for building chat UIs on top of the [Claude Agent SDK](https://github.com/anthropics/claude-agent-sdk). Connects to an `@neeter/server` backend over SSE with a Zustand store, drop-in components, and a widget system for tool call rendering.
|
|
4
|
+
|
|
5
|
+
Part of the [neeter](https://github.com/quantumleeps/neeter) toolkit.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @neeter/react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peer dependencies:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"react": ">=18.0.0",
|
|
18
|
+
"react-markdown": ">=10.0.0",
|
|
19
|
+
"zustand": ">=5.0.0",
|
|
20
|
+
"immer": ">=10.0.0"
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Components use [Tailwind CSS v4](https://tailwindcss.com/) utility classes.
|
|
25
|
+
|
|
26
|
+
## Quick start
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { AgentProvider, MessageList, ChatInput, useAgentContext } from "@neeter/react";
|
|
30
|
+
|
|
31
|
+
function App() {
|
|
32
|
+
return (
|
|
33
|
+
<AgentProvider>
|
|
34
|
+
<Chat />
|
|
35
|
+
</AgentProvider>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function Chat() {
|
|
40
|
+
const { sendMessage } = useAgentContext();
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div className="flex h-screen flex-col">
|
|
44
|
+
<MessageList className="flex-1" />
|
|
45
|
+
<ChatInput onSend={sendMessage} />
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Styling
|
|
52
|
+
|
|
53
|
+
Components use [shadcn/ui](https://ui.shadcn.com)-compatible CSS variable names. If you already have a shadcn theme, add one line:
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
@import "tailwindcss";
|
|
57
|
+
@source "../node_modules/@neeter/react/dist";
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Without shadcn, import the bundled theme:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
@import "tailwindcss";
|
|
64
|
+
@import "@neeter/react/theme.css";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Key features
|
|
68
|
+
|
|
69
|
+
- **11 built-in widgets** — Diff views for edits, code blocks for reads, expandable pills for web searches, and more. Auto-registered on import.
|
|
70
|
+
- **Custom widgets** — Register your own components for MCP tools or app-specific rendering with `registerWidget()`.
|
|
71
|
+
- **Tool call lifecycle** — Each tool moves through `pending` → `streaming_input` → `running` → `complete` with streaming JSON input.
|
|
72
|
+
- **Permissions UI** — `ToolApprovalCard` and `UserQuestionCard` for browser-side tool approval.
|
|
73
|
+
- **Extended thinking** — Collapsible thinking blocks with streaming text.
|
|
74
|
+
- **Custom events** — Handle app-specific events from `onToolResult` via `AgentProvider`'s `onCustomEvent` prop.
|
|
75
|
+
- **Abort** — Stop the agent mid-turn with `stopSession()` from `useAgentContext()`.
|
|
76
|
+
|
|
77
|
+
## Examples
|
|
78
|
+
|
|
79
|
+
| Example | Description |
|
|
80
|
+
|---------|-------------|
|
|
81
|
+
| [basic-chat](https://github.com/quantumleeps/neeter/tree/main/examples/basic-chat) | Minimal component setup |
|
|
82
|
+
| [live-preview](https://github.com/quantumleeps/neeter/tree/main/examples/live-preview) | Custom events, widgets, split-pane preview |
|
|
83
|
+
|
|
84
|
+
## Documentation
|
|
85
|
+
|
|
86
|
+
- [Full API reference](https://github.com/quantumleeps/neeter#readme)
|
|
87
|
+
- [Built-in widgets](https://github.com/quantumleeps/neeter/blob/main/docs/built-in-widgets.md)
|
|
88
|
+
- [Custom widgets](https://github.com/quantumleeps/neeter/blob/main/docs/custom-widgets.md)
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neeter/react",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"description": "React components and hooks for building chat UIs on top of the Claude Agent SDK",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Dan Leeper",
|
|
@@ -20,12 +20,13 @@
|
|
|
20
20
|
},
|
|
21
21
|
"files": [
|
|
22
22
|
"dist",
|
|
23
|
-
"src/theme.css"
|
|
23
|
+
"src/theme.css",
|
|
24
|
+
"README.md"
|
|
24
25
|
],
|
|
25
26
|
"dependencies": {
|
|
26
27
|
"clsx": "^2.1.1",
|
|
27
28
|
"tailwind-merge": "^3.4.0",
|
|
28
|
-
"@neeter/types": "0.8.
|
|
29
|
+
"@neeter/types": "0.8.1"
|
|
29
30
|
},
|
|
30
31
|
"peerDependencies": {
|
|
31
32
|
"react": ">=18.0.0",
|