Compare commits

..
Author SHA1 Message Date
Chris Tate 4f35290eb0 fix stream docs 2026-02-06 14:43:41 -06:00
2 changed files with 17 additions and 13 deletions
+6 -6
View File
@@ -94,15 +94,15 @@ type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;`}</Co
<h3 className="text-lg font-semibold mt-8 mb-4">useUIStream</h3>
<Code lang="typescript">{`const {
spec, // Spec - current UI state
spec, // Spec | null - current UI state
isStreaming, // boolean - true while streaming
error, // Error | null
send, // (prompt: string) => void
abort, // () => void
send, // (prompt: string, context?: Record<string, unknown>) => Promise<void>
clear, // () => void - reset spec and error
} = useUIStream({
api: string, // API endpoint URL
onChunk?: (chunk: string) => void, // Called for each chunk
onFinish?: (spec: Spec) => void, // Called when streaming completes
api: string, // API endpoint URL
onComplete?: (spec: Spec) => void, // Called when streaming completes
onError?: (error: Error) => void, // Called when an error occurs
});`}</Code>
<h3 className="text-lg font-semibold mt-8 mb-4">useData</h3>
+11 -7
View File
@@ -34,11 +34,11 @@ function App() {
isStreaming, // True while streaming
error, // Any error that occurred
send, // Function to start generation
abort, // Function to cancel streaming
clear, // Function to reset spec and error
} = useUIStream({
api: '/api/generate',
onChunk: (chunk) => {}, // Optional: called for each chunk
onFinish: (spec) => {}, // Optional: called when complete
onComplete: (spec) => {}, // Optional: called when streaming completes
onError: (error) => {}, // Optional: called when an error occurs
});
}`}</Code>
@@ -112,8 +112,14 @@ export async function POST(req: Request) {
}`}</Code>
<h2 className="text-xl font-semibold mt-12 mb-4">Aborting Streams</h2>
<p className="text-sm text-muted-foreground mb-4">
Calling <code className="text-foreground">send</code> again
automatically aborts the previous request. Use{" "}
<code className="text-foreground">clear</code> to reset the spec and
error state:
</p>
<Code lang="tsx">{`function App() {
const { isStreaming, send, abort } = useUIStream({
const { isStreaming, send, clear } = useUIStream({
api: '/api/generate',
});
@@ -122,9 +128,7 @@ export async function POST(req: Request) {
<button onClick={() => send('Create dashboard')}>
Generate
</button>
{isStreaming && (
<button onClick={abort}>Cancel</button>
)}
<button onClick={clear}>Reset</button>
</div>
);
}`}</Code>