DeltaKitOverview
React hooks and helpers for DeltaKit streaming chat.
@deltakit/react provides React-specific hooks and helpers that wrap @deltakit/core for seamless streaming chat integration.
Packages
useStreamChat. The core hook that manages the full streaming lifecycle: state, network, cancellation, and event handling.EventHelpers. Helper methods for mutating message state insideonEventcallbacks.
Installation
pnpm add @deltakit/reactThis installs both @deltakit/react and @deltakit/core (its dependency).
Quick Example
import { useStreamChat } from "@deltakit/react";
function Chat() {
const { messages, isLoading, sendMessage } = useStreamChat({
api: "/api/chat",
});
return (
<div>
{messages.map((msg) => (
<div key={msg.id}>
<strong>{msg.role}:</strong>{" "}
{msg.parts
.filter((p) => p.type === "text")
.map((p) => p.text)
.join("")}
</div>
))}
<button onClick={() => sendMessage("Hello!")} disabled={isLoading}>
Send
</button>
</div>
);
}Next Steps
- useStreamChat: Full hook API reference
- EventHelpers: Event callback helpers