Compare commits

...
Author SHA1 Message Date
Chris Tate 651e52f529 include remove op in system prompt 2026-02-06 17:52:11 -06:00
Chris Tate 39fcc192e9 fix stream docs (#72) 2026-02-06 14:48:32 -06:00
3 changed files with 19 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> <h3 className="text-lg font-semibold mt-8 mb-4">useUIStream</h3>
<Code lang="typescript">{`const { <Code lang="typescript">{`const {
spec, // Spec - current UI state spec, // Spec | null - current UI state
isStreaming, // boolean - true while streaming isStreaming, // boolean - true while streaming
error, // Error | null error, // Error | null
send, // (prompt: string) => void send, // (prompt: string, context?: Record<string, unknown>) => Promise<void>
abort, // () => void clear, // () => void - reset spec and error
} = useUIStream({ } = useUIStream({
api: string, // API endpoint URL api: string, // API endpoint URL
onChunk?: (chunk: string) => void, // Called for each chunk onComplete?: (spec: Spec) => void, // Called when streaming completes
onFinish?: (spec: Spec) => void, // Called when streaming completes onError?: (error: Error) => void, // Called when an error occurs
});`}</Code> });`}</Code>
<h3 className="text-lg font-semibold mt-8 mb-4">useData</h3> <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 isStreaming, // True while streaming
error, // Any error that occurred error, // Any error that occurred
send, // Function to start generation send, // Function to start generation
abort, // Function to cancel streaming clear, // Function to reset spec and error
} = useUIStream({ } = useUIStream({
api: '/api/generate', api: '/api/generate',
onChunk: (chunk) => {}, // Optional: called for each chunk onComplete: (spec) => {}, // Optional: called when streaming completes
onFinish: (spec) => {}, // Optional: called when complete onError: (error) => {}, // Optional: called when an error occurs
}); });
}`}</Code> }`}</Code>
@@ -112,8 +112,14 @@ export async function POST(req: Request) {
}`}</Code> }`}</Code>
<h2 className="text-xl font-semibold mt-12 mb-4">Aborting Streams</h2> <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() { <Code lang="tsx">{`function App() {
const { isStreaming, send, abort } = useUIStream({ const { isStreaming, send, clear } = useUIStream({
api: '/api/generate', api: '/api/generate',
}); });
@@ -122,9 +128,7 @@ export async function POST(req: Request) {
<button onClick={() => send('Create dashboard')}> <button onClick={() => send('Create dashboard')}>
Generate Generate
</button> </button>
{isStreaming && ( <button onClick={clear}>Reset</button>
<button onClick={abort}>Cancel</button>
)}
</div> </div>
); );
}`}</Code> }`}</Code>
+2
View File
@@ -502,6 +502,7 @@ export function generateSystemPrompt<
lines.push( lines.push(
'{"op":"add","path":"/elements/key","value":{"key":"...","type":"...","props":{...},"children":[...]}}', '{"op":"add","path":"/elements/key","value":{"key":"...","type":"...","props":{...},"children":[...]}}',
); );
lines.push('{"op":"remove","path":"/elements/key"}');
lines.push(""); lines.push("");
// Rules // Rules
@@ -509,6 +510,7 @@ export function generateSystemPrompt<
const baseRules = [ const baseRules = [
"First line sets /root to root element key", "First line sets /root to root element key",
"Add elements with /elements/{key}", "Add elements with /elements/{key}",
"Remove elements with op:remove - also update the parent's children array to exclude the removed key",
"Children array contains string keys, not objects", "Children array contains string keys, not objects",
"Parent first, then children", "Parent first, then children",
"Each element needs: key, type, props", "Each element needs: key, type, props",