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

#1790)

Co-authored-by: Lars Grammel <lars.grammel@gmail.com>

content/docs/02-getting-started/02-nextjs-app-router.mdx

@@ -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>

content/docs/02-getting-started/03-nextjs-pages-router.mdx

@@ -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>

content/docs/02-getting-started/04-svelte.mdx

@@ -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>

content/docs/02-getting-started/05-nuxt.mdx

@@ -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>

content/docs/03-ai-sdk-core/01-overview.mdx

@@ -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)).

content/docs/04-ai-sdk-rsc/01-overview.mdx

@@ -85,9 +85,9 @@ return (
         return (
           <WeatherCard
             weather={{
-              temperature: 47,
-              unit: 'F',
-              description: 'sunny'
+              temperature,
+              unit,
+              description
               forecast,
             }}
           />
@@ -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();
@@ -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} />
         )
       }
     }

content/docs/04-ai-sdk-rsc/02-streaming-user-interfaces.mdx

@@ -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>

content/examples/01-next-app/03-tools/03-render-interface-during-tool-call.mdx

@@ -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';
@@ -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'),
@@ -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}!`;
         },
       },
     },
@@ -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,
       },
     ],
   };