Guides
React Hooks
Build UI with the provided hooks and provider.
Import hooks from @dayhaysoos/convex-database-chat and wrap your app with
DatabaseChatProvider.
Provider setup
import { DatabaseChatProvider } from "@dayhaysoos/convex-database-chat";
import { api } from "../convex/_generated/api";
export function AppProviders({ children }: { children: React.ReactNode }) {
return (
<DatabaseChatProvider
api={{
getMessages: api.chat.getMessages,
listConversations: api.chat.listConversations,
getStreamState: api.chat.getStreamState,
getStreamDeltas: api.chat.getStreamDeltas,
createConversation: api.chat.createConversation,
abortStream: api.chat.abortStream,
sendMessage: api.chat.sendMessage,
}}
>
{children}
</DatabaseChatProvider>
);
}useDatabaseChat
const {
messages,
streamingContent,
isStreaming,
isLoading,
error,
send,
abort,
retry,
clearError,
} = useDatabaseChat({ conversationId });send(message) calls your sendMessage action. abort() stops the stream.
useConversations
const { conversations, create, isCreating } = useConversations({
externalId: "user:123",
});create(title?) returns the new conversation ID.
useStreamingContent
const { content, isStreaming } = useStreamingContent({ conversationId });Use this when you want streaming updates isolated from the message list.
useMessagesWithStreaming
const { allMessages, isStreaming } = useMessagesWithStreaming({ conversationId });allMessages merges completed messages with the in-progress assistant response.
Text smoothing
import { SmoothText, useSmoothText } from "@dayhaysoos/convex-database-chat";
const [visibleText] = useSmoothText(streamingContent, {
startStreaming: isStreaming,
initialCharsPerSecond: 200,
});
return <SmoothText text={streamingContent} startStreaming={isStreaming} />;