@kilnai/react 0.1.10 → 0.1.14
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 +126 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/sequelcore/kiln/main/docs/assets/mascot.png" alt="Kiln" width="120" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@kilnai/react</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.npmjs.com/package/@kilnai/react"><img src="https://img.shields.io/npm/v/@kilnai/react.svg" alt="npm version" /></a>
|
|
9
|
+
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /></a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">React hooks for building frontend apps on Kiln.</p>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## What is this?
|
|
17
|
+
|
|
18
|
+
`@kilnai/react` provides React hooks for connecting to a [Kiln](https://github.com/sequelcore/kiln) gateway. Supports both HTTP (SSE) and WebSocket transports, memory management, event streams, and human-in-the-loop approval flows.
|
|
19
|
+
|
|
20
|
+
## Install
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
bun add @kilnai/react
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Requires `react >= 19.0.0` and `@kilnai/core` as peer dependencies.
|
|
27
|
+
|
|
28
|
+
## Quick start
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { KilnProvider, useKilnWsChat } from "@kilnai/react";
|
|
32
|
+
|
|
33
|
+
function App() {
|
|
34
|
+
return (
|
|
35
|
+
<KilnProvider config={{ gatewayUrl: "ws://localhost:3000", appName: "my-agent" }}>
|
|
36
|
+
<Chat />
|
|
37
|
+
</KilnProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function Chat() {
|
|
42
|
+
const { messages, send, isConnected } = useKilnWsChat({ userId: "user-1" });
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<div>
|
|
46
|
+
{messages.map((msg, i) => (
|
|
47
|
+
<div key={i}>{msg.role}: {msg.content}</div>
|
|
48
|
+
))}
|
|
49
|
+
<button onClick={() => send("Hello!")}>Send</button>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Hooks
|
|
56
|
+
|
|
57
|
+
### `useKilnChat`
|
|
58
|
+
|
|
59
|
+
HTTP-based chat with SSE streaming.
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
const { messages, send, isLoading } = useKilnChat({ userId: "user-1" });
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### `useKilnWsChat`
|
|
66
|
+
|
|
67
|
+
WebSocket-based chat with auto-reconnect.
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
const { messages, send, isConnected, connectionStatus } = useKilnWsChat({
|
|
71
|
+
userId: "user-1",
|
|
72
|
+
widgetId: "my-widget", // for multi-tenant
|
|
73
|
+
});
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### `useKilnEvents`
|
|
77
|
+
|
|
78
|
+
Subscribe to real-time gateway events via SSE.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
const { events, isConnected } = useKilnEvents();
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### `useKilnMemory`
|
|
85
|
+
|
|
86
|
+
Read, write, and search agent memory.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
const { entries, store, recall, forget } = useKilnMemory({ scope: "user", userId: "user-1" });
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### `useKilnState`
|
|
93
|
+
|
|
94
|
+
Access dev-mode gateway state (sessions, costs, events).
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
const { state, refresh } = useKilnState();
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### `useApproval`
|
|
101
|
+
|
|
102
|
+
Human-in-the-loop approval gates for sensitive operations.
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
const { pending, approve, reject } = useApproval();
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Clients
|
|
109
|
+
|
|
110
|
+
For non-React usage, the package also exports low-level clients:
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
import { ApiClient, SseClient } from "@kilnai/react";
|
|
114
|
+
|
|
115
|
+
const api = new ApiClient({ baseUrl: "http://localhost:3000" });
|
|
116
|
+
const sse = new SseClient({ url: "http://localhost:3000/dev/events" });
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Documentation
|
|
120
|
+
|
|
121
|
+
- [React SDK Guide](https://github.com/sequelcore/kiln/blob/main/docs/sdk/react-hooks.md)
|
|
122
|
+
- [Examples](https://github.com/sequelcore/kiln/tree/main/examples)
|
|
123
|
+
|
|
124
|
+
## License
|
|
125
|
+
|
|
126
|
+
[MIT](https://github.com/sequelcore/kiln/blob/main/LICENSE)
|