@@ -34,11 +34,11 @@ function App() {
3434 isStreaming, // True while streaming
3535 error, // Any error that occurred
3636 send, // Function to start generation
37- abort , // Function to cancel streaming
37+ clear , // Function to reset spec and error
3838 } = useUIStream({
3939 api: '/api/generate',
40- onChunk : (chunk ) => {}, // Optional: called for each chunk
41- onFinish : (spec ) => {}, // Optional: called when complete
40+ onComplete : (spec ) => {}, // Optional: called when streaming completes
41+ onError : (error ) => {}, // Optional: called when an error occurs
4242 });
4343}` } </ Code >
4444
@@ -112,8 +112,14 @@ export async function POST(req: Request) {
112112}` } </ Code >
113113
114114 < h2 className = "text-xl font-semibold mt-12 mb-4" > Aborting Streams</ h2 >
115+ < p className = "text-sm text-muted-foreground mb-4" >
116+ Calling < code className = "text-foreground" > send</ code > again
117+ automatically aborts the previous request. Use{ " " }
118+ < code className = "text-foreground" > clear</ code > to reset the spec and
119+ error state:
120+ </ p >
115121 < Code lang = "tsx" > { `function App() {
116- const { isStreaming, send, abort } = useUIStream({
122+ const { isStreaming, send, clear } = useUIStream({
117123 api: '/api/generate',
118124 });
119125
@@ -122,9 +128,7 @@ export async function POST(req: Request) {
122128 <button onClick={() => send('Create dashboard')}>
123129 Generate
124130 </button>
125- {isStreaming && (
126- <button onClick={abort}>Cancel</button>
127- )}
131+ <button onClick={clear}>Reset</button>
128132 </div>
129133 );
130134}` } </ Code >
0 commit comments