Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/web/app/docs/ai-sdk/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,17 @@ export async function POST(req: Request) {
import { useUIStream } from '@json-render/react';

function GenerativeUI() {
const { tree, isLoading, error, generate } = useUIStream({
endpoint: '/api/generate',
const { tree, isStreaming, error, send } = useUIStream({
api: '/api/generate',
});

return (
<div>
<button
onClick={() => generate('Create a dashboard with metrics')}
disabled={isLoading}
onClick={() => send('Create a dashboard with metrics')}
disabled={isStreaming}
>
{isLoading ? 'Generating...' : 'Generate'}
{isStreaming ? 'Generating...' : 'Generate'}
</button>

{error && <p className="text-red-500">{error.message}</p>}
Expand Down
11 changes: 5 additions & 6 deletions apps/web/app/docs/api/react/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,12 @@ interface ComponentProps {

<h3 className="text-lg font-semibold mt-8 mb-4">useUIStream</h3>
<Code lang="typescript">{`const {
tree, // UITree - current UI state
isLoading, // boolean - true while streaming
error, // Error | null
generate, // (prompt: string) => void
abort, // () => void
tree, // UITree - current UI state
isStreaming, // boolean - true while streaming
error, // Error | null
send, // (prompt: string) => void
} = useUIStream({
endpoint: string,
api: string,
});`}</Code>

<h3 className="text-lg font-semibold mt-8 mb-4">useData</h3>
Expand Down
8 changes: 4 additions & 4 deletions apps/web/app/docs/quick-start/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,14 @@ import { DataProvider, ActionProvider, VisibilityProvider, Renderer, useUIStream
import { registry } from '@/components/registry';

export default function Page() {
const { tree, isLoading, generate } = useUIStream({
endpoint: '/api/generate',
const { tree, isStreaming, send } = useUIStream({
api: '/api/generate',
});

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
generate(formData.get('prompt') as string);
send(formData.get('prompt') as string);
};

return (
Expand All @@ -144,7 +144,7 @@ export default function Page() {
placeholder="Describe what you want..."
className="border p-2 rounded"
/>
<button type="submit" disabled={isLoading}>
<button type="submit" disabled={isStreaming}>
Generate
</button>
</form>
Expand Down
18 changes: 9 additions & 9 deletions apps/web/app/docs/streaming/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ export default function StreamingPage() {
function App() {
const {
tree, // Current UI tree state
isLoading, // True while streaming
isStreaming, // True while streaming
error, // Any error that occurred
generate, // Function to start generation
send, // Function to start generation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The streaming documentation references a non-existent 'abort' method that was removed from the useUIStream hook API

Fix on Vercel

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch, again! however, I'm not sure what should be done here. although the abort method is indeed not returned from the useUIStream hook, in this doc example the abort is being used when the "Cancel" button is clicked (as can be seen in the "Aborting Streams" section):

function App() {
  const { isLoading, generate, abort } = useUIStream({
    endpoint: '/api/generate',
  });

  return (
    <div>
      <button onClick={() => generate('Create dashboard')}>
        Generate
      </button>
      {isLoading && (
        <button onClick={abort}>Cancel</button>
      )}
    </div>
  );
}

abort, // Function to cancel streaming
} = useUIStream({
endpoint: '/api/generate',
api: '/api/generate',
});
}`}</Code>

Expand Down Expand Up @@ -101,28 +101,28 @@ function App() {
The Renderer automatically updates as the tree changes:
</p>
<Code lang="tsx">{`function App() {
const { tree, isLoading } = useUIStream({ endpoint: '/api/generate' });
const { tree, isStreaming } = useUIStream({ api: '/api/generate' });

return (
<div>
{isLoading && <LoadingIndicator />}
{isStreaming && <LoadingIndicator />}
<Renderer tree={tree} registry={registry} />
</div>
);
}`}</Code>

<h2 className="text-xl font-semibold mt-12 mb-4">Aborting Streams</h2>
<Code lang="tsx">{`function App() {
const { isLoading, generate, abort } = useUIStream({
endpoint: '/api/generate',
const { isStreaming, send, abort } = useUIStream({
api: '/api/generate',
});

return (
<div>
<button onClick={() => generate('Create dashboard')}>
<button onClick={() => send('Create dashboard')}>
Generate
</button>
{isLoading && (
{isStreaming && (
<button onClick={abort}>Cancel</button>
)}
</div>
Expand Down