@toytoy.dev/chat

The chat an app's agent talks in: AI SDK messages in; a transcript, tool steps that fold into one working line, streaming answers and a message box out. It works over useChat (the AI SDK) or useUIMessages (Convex Agent).

npm i @toytoy.dev/chat

"use client";

import { useChat } from "@ai-sdk/react";
import { fromAiSdk } from "@toytoy.dev/chat";
import { Chat } from "@toytoy.dev/chat/react";
import "@toytoy.dev/chat/styles.css";

export function Assistant() {
  return <Chat source={fromAiSdk(useChat())} />;
}

Beside DocumentEditor from @toytoy.dev/documents, useDocumentLink joins the two: the editor follows the agent's live turn, and the chat's Show, Undo and Try again work on the editor.

const link = useDocumentLink({ source, edits, labels: DOCUMENT_TOOL_LABELS, thread: chat.id });
<DocumentEditor value={doc} onChange={save} agent={agent} {...link.editor} />
<Chat source={link.source} tools={{ ...myTools, ...link.tools }} composer={{ edits, onEditsChange }} />

Credit: your app keeps the ledger, the payments, the plans, the prices and the meter. The chat draws the credit (composer.credit: ok, low, out or adding), holds the box when it runs out, and reads a route's refusal (refusalOf, source.refusal).

Answers load no image the app did not list (allowedImages, empty by default), and draw a link only where allowedLinks allows (by default, every web, mail and phone link). The markdown renderer, streamdown, loads in a chunk of its own when the chat mounts.

Integrating it? Read AGENTS.md (it ships in this package, at node_modules/@toytoy.dev/chat/AGENTS.md).