ReddRadar
Agent skill
Convex Agents Streaming
Streams agent responses in real-time to clients without blocking. Use this for responsive UIs, long-running generations, and asynchronous streaming to multiple clients.
Install this agent skill to your Project
npx add-skill https://github.com/Sstobo/convex-skills/tree/main/convex-agents-streaming
SKILL.md
Purpose
Streaming allows responses to appear character-by-character in real-time, improving UX and perceived performance. Supports async streaming and multiple clients.
When to Use This Skill
- Building real-time chat interfaces with live updates
- Generating long responses that benefit from progressive display
- Streaming to multiple clients from single generation
- Using asynchronous streaming in background actions
- Implementing smooth text animation
Basic Async Streaming
Stream and save deltas to database:
export const streamResponse = action({
args: { threadId: v.string(), prompt: v.string() },
handler: async (ctx, { threadId, prompt }) => {
const { thread } = await myAgent.continueThread(ctx, { threadId });
await thread.streamText(
{ prompt },
{ saveStreamDeltas: true }
);
return { success: true };
},
});
Configure Stream Chunking
await thread.streamText(
{ prompt },
{
saveStreamDeltas: {
chunking: "line", // "word" | "line" | regex | function
throttleMs: 500, // Save deltas every 500ms
},
}
);
Retrieve Stream Deltas
import { vStreamArgs, syncStreams } from "@convex-dev/agent";
export const listMessagesWithStreams = query({
args: {
threadId: v.string(),
paginationOpts: paginationOptsValidator,
streamArgs: vStreamArgs,
},
handler: async (ctx, { threadId, paginationOpts, streamArgs }) => {
const messages = await listUIMessages(ctx, components.agent, {
threadId,
paginationOpts,
});
const streams = await syncStreams(ctx, components.agent, {
threadId,
streamArgs,
});
return { ...messages, streams };
},
});
Display Streaming in React
import { useUIMessages, useSmoothText } from "@convex-dev/agent/react";
function ChatStreaming({ threadId }: { threadId: string }) {
const { results } = useUIMessages(
api.streaming.listMessages,
{ threadId },
{ initialNumItems: 20, stream: true }
);
return (
<div>
{results?.map((message) => (
<StreamingMessage key={message.key} message={message} />
))}
</div>
);
}
function StreamingMessage({ message }: { message: UIMessage }) {
const [visibleText] = useSmoothText(message.text, {
startStreaming: message.status === "streaming",
});
return <div>{visibleText}</div>;
}
Key Principles
- Asynchronous streaming: Best for background generations
- Delta throttling: Balances responsiveness with write volume
- Stream status: Check
message.status === "streaming" - Smooth animation: Use
useSmoothTextfor text updates - Persistence: Deltas survive page reloads
Next Steps
- See messages for message management
- See fundamentals for agent setup
- See context for streaming-aware context
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
Sstobo/convex-skills
Convex Agents Files
Handles file uploads, image attachments, and media processing in agent conversations. Use this when agents analyze images, process documents, or generate files.
Sstobo/convex-skills
convex-actions-general
This skill should be used when working with Convex actions, HTTP endpoints, validators, schemas, environment variables, scheduling, file storage, and TypeScript patterns. It provides comprehensive guidelines for function definitions, API design, database limits, and advanced Convex features.
Sstobo/convex-skills
betterauth-tanstack-convex
Step-by-step guide for setting up Better Auth authentication with Convex and TanStack Start. This skill should be used when configuring authentication in a Convex + TanStack Start project, troubleshooting auth issues, or implementing sign up/sign in/sign out flows. Covers installation, environment variables, SSR authentication, route handlers, and the expectAuth pattern.
Sstobo/convex-skills
Convex Agents Tools
Enables agents to call external functions, APIs, and database operations through tool definitions. Use this when agents need to fetch data, perform actions, or integrate with external services while maintaining clean separation.
Sstobo/convex-skills
convex-queries
This skill should be used when implementing Convex query functions. It provides comprehensive guidelines for defining, registering, calling, and optimizing queries, including pagination, full text search, and indexing patterns.
Sstobo/convex-skills
Convex Agents Debugging
Troubleshoots agent behavior, logs LLM interactions, and inspects database state. Use this when responses are unexpected, to understand context the LLM receives, or to diagnose data issues.
Didn't find tool you were looking for?