Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore (docs): improve example content, highlighting & install snippets #1790

Merged
merged 7 commits into from
Jun 3, 2024
Merged

chore (docs): improve example content, highlighting & install snippets #1790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d28b268
Update 01-overview.mdx
agusmoles Jun 2, 2024
8c973a5
Merge branch 'main' into patch-1
lgrammel Jun 2, 2024
43899cd
fix: highlighting
agusmoles Jun 2, 2024
d9adb7f
fix: remove unused import and type `weather` state variable
agusmoles Jun 2, 2024
49d164f
feat: uses tabs to install dependencies
agusmoles Jun 2, 2024
bdcc5ae
fix: broken link
agusmoles Jun 2, 2024
5b825b2
fix: code highlighting in example
agusmoles Jun 2, 2024
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
12 changes: 11 additions & 1 deletion content/docs/02-getting-started/02-nextjs-app-router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,17 @@ Install `ai` and `@ai-sdk/openai`, the Vercel AI package and Vercel AI SDK's [ O
in the [providers](/providers) section.
</Note>
<div className="my-4">
<Snippet text="pnpm install ai @ai-sdk/openai zod" />
<Tabs items={['pnpm', 'npm', 'yarn']}>
<Tab>
<Snippet text="pnpm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="npm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="yarn add ai @ai-sdk/openai zod" dark />
</Tab>
</Tabs>
</div>

<Note type="secondary" fill>
Expand Down
12 changes: 11 additions & 1 deletion content/docs/02-getting-started/03-nextjs-pages-router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,17 @@ Install `ai` and `@ai-sdk/openai`, Vercel AI SDK's OpenAI provider.
in the [providers](/providers) section.
</Note>
<div className="my-4">
<Snippet text="pnpm install ai @ai-sdk/openai zod" />
<Tabs items={['pnpm', 'npm', 'yarn']}>
<Tab>
<Snippet text="pnpm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="npm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="yarn add ai @ai-sdk/openai zod" dark />
</Tab>
</Tabs>
</div>

<Note type="secondary" fill>
Expand Down
12 changes: 11 additions & 1 deletion content/docs/02-getting-started/04-svelte.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,17 @@ Install `ai` and `@ai-sdk/openai`, Vercel AI SDK's OpenAI provider.
in the [providers](/providers) section.
</Note>
<div className="my-4">
<Snippet text="pnpm install ai @ai-sdk/openai zod" />
<Tabs items={['pnpm', 'npm', 'yarn']}>
<Tab>
<Snippet text="pnpm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="npm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="yarn add ai @ai-sdk/openai zod" dark />
</Tab>
</Tabs>
</div>

<Note type="secondary" fill>
Expand Down
12 changes: 11 additions & 1 deletion content/docs/02-getting-started/05-nuxt.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,17 @@ Install `ai` and `@ai-sdk/openai`, Vercel AI SDK's OpenAI provider.
in the [providers](/providers) section.
</Note>
<div className="my-4">
<Snippet text="pnpm install ai @ai-sdk/openai zod" />
<Tabs items={['pnpm', 'npm', 'yarn']}>
<Tab>
<Snippet text="pnpm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="npm install ai @ai-sdk/openai zod" dark />
</Tab>
<Tab>
<Snippet text="yarn add ai @ai-sdk/openai zod" dark />
</Tab>
</Tabs>
</div>

<Note type="secondary" fill>
Expand Down
4 changes: 2 additions & 2 deletions content/docs/03-ai-sdk-core/01-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ These functions take a standardized approach to setting up [prompts](./ai-sdk-co
- [`generateText`](/docs/reference/ai-sdk-core/generate-text): Generates text and [tool calls](./ai-sdk-core/tools-and-tool-calling).
This function is ideal for non-interactive use cases such as automation tasks where you need to write text (e.g. drafting email or summarizing web pages) and for agents that use tools.
- [`streamText`](/docs/reference/ai-sdk-core/stream-text): Stream text and tool calls.
You can use the `streamText` function for interactive use cases such as chat bots and content streaming. You can also generate UI components with tools (see [Generative UI](./ai-sdk-rsc)).
You can use the `streamText` function for interactive use cases such as chat bots and content streaming. You can also generate UI components with tools (see [Generative UI](../ai-sdk-rsc)).

- [`generateObject`](/docs/reference/ai-sdk-core/generate-object): Generates a typed, structured object that matches a [Zod](https://zod.dev/) schema.
You can use this function to force the language model to return structured data, e.g. for information extraction, synthetic data generation, or classification tasks.

- [`streamObject`](/docs/reference/ai-sdk-core/stream-object): Stream a structured object that matches a Zod schema.
You can use this function to stream generated UIs in combination with React Server Components (see [Generative UI](./ai-sdk-rsc)).
You can use this function to stream generated UIs in combination with React Server Components (see [Generative UI](../ai-sdk-rsc)).
18 changes: 5 additions & 13 deletions content/docs/04-ai-sdk-rsc/01-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@ return (
return (
<WeatherCard
weather={{
temperature: 47,
unit: 'F',
description: 'sunny'
temperature,
unit,
description
forecast,
}}
/>
Expand Down Expand Up @@ -155,7 +155,7 @@ The **AI SDK RSC (`ai/rsc`)** takes advantage of RSCs to solve the problem of ma

Rather than conditionally rendering user interfaces on the client based on the data returned by the language model, you can directly stream them from the server during a model generation.

```tsx highlight="3,22-31,38" filename="app/action.ts"
```tsx highlight="3,21-23,30" filename="app/action.ts"
import { createStreamableUI } from 'ai/rsc'

const uiStream = createStreamableUI();
Expand All @@ -175,17 +175,9 @@ const text = generateText({
}),
execute: async ({ city, unit }) => {
const weather = getWeather({ city, unit })
const { temperature, unit, description, forecast } = weather

uiStream.done(
<WeatherCard
weather={{
temperature: 47,
unit: 'F',
description: 'sunny'
forecast,
}}
/>
<WeatherCard weather={weather} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

this will affect the highlighting (line 158) which needs to be updated

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oh you are right, fixed

)
}
}
Expand Down
5 changes: 2 additions & 3 deletions content/docs/04-ai-sdk-rsc/02-streaming-user-interfaces.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,11 @@ In the example above, `'use server'` is used to indicate that the exported funct
On the client side, you can call the `getWeather` Server Action and render the returned UI like any other React component.

```tsx file='app/page.tsx'
import { useState } from 'react';
import { readStreamableValue } from 'ai/rsc';
import { type ReactNode, useState } from 'react';
import { getWeather } from '@/actions';

export default function Page() {
const [weather, setWeather] = useState(null);
const [weather, setWeather] = useState<ReactNode | null>(null);

return (
<div>
Expand Down
12 changes: 6 additions & 6 deletions content/examples/01-next-app/03-tools/03-render-interface-during-tool-call.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export async function Weather({ city, unit }) {

## Server

```tsx filename='app/actions.tsx'
```tsx highlight="13,17,33-34,47" filename='app/actions.tsx'
'use server';

import { Weather } from '@/components/weather';
Expand All @@ -123,11 +123,11 @@ import { z } from 'zod';
export interface Message {
role: 'user' | 'assistant';
content: string;
display?: ReactNode; // [!code highlight]
display?: ReactNode;
}

export async function continueConversation(history: Message[]) {
const stream = createStreamableUI(); // [!code highlight]
const stream = createStreamableUI();

const { text, toolResults } = await generateText({
model: openai('gpt-3.5-turbo'),
Expand All @@ -143,8 +143,8 @@ export async function continueConversation(history: Message[]) {
.describe('The unit to display the temperature in'),
}),
execute: async ({ city, unit }) => {
stream.done(<Weather city={city} unit={unit} />); // [!code highlight]
return `Here's the weather for ${city}!`; // [!code highlight]
stream.done(<Weather city={city} unit={unit} />);
return `Here's the weather for ${city}!`;
},
},
},
Expand All @@ -157,7 +157,7 @@ export async function continueConversation(history: Message[]) {
role: 'assistant' as const,
content:
text || toolResults.map(toolResult => toolResult.result).join(),
display: stream.value, // [!code highlight]
display: stream.value,
},
],
};
Expand Down
Loading