Support multiple tool calls in render function

.changeset/serious-timers-drive.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+feat(ai/rsc): support multiple tool calls in render function

examples/next-ai-rsc-basic/.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY="xxxxxxxxxxxx"

examples/next-ai-rsc-basic/.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+node_modules
+.turbo
+*.log
+.next
+*.local
+.env
+.cache
+.turbo

examples/next-ai-rsc-basic/README.md

@@ -0,0 +1,47 @@
+<a href="https://sdk.vercel.ai/rsc-demo">
+  <img alt="Generative UI Demo" src="https://github.com/vercel/ai/assets/4060187/f21fa839-c710-4f09-9af4-2056f603d98f">
+  <h1 align="center">Basic Generative UI Demo</h1>
+</a>
+
+<p align="center">
+  A very basic, experimental preview of AI SDK 3.0 with Generative UI support, based on the example from the <a href="https://sdk.vercel.ai/docs/concepts/ai-rsc">docs</a>.
+</p>
+
+## Features
+
+- [Next.js](https://nextjs.org) App Router + React Server Components
+- [Vercel AI SDK 3.0](https://sdk.vercel.ai/docs) for Generative UI
+- OpenAI Tools Calling
+
+## Quick Links
+
+- [Read the blog post](https://vercel.com/blog/ai-sdk-3-generative-ui)
+- [See the demo](https://sdk.vercel.ai/demo)
+- [Visit the docs](https://sdk.vercel.ai/docs/concepts/ai-rsc)
+
+## Running locally
+
+You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
+
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
+3. Download your environment variables: `vercel env pull`
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Your app should now be running on [localhost:3000](http://localhost:3000/).
+
+## Authors
+
+This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from:
+
+- Shu Ding ([@shuding\_](https://twitter.com/shuding_)) - [Vercel](https://vercel.com)
+- Max Leiter ([@max_leiter](https://twitter.com/max_leiter)) - [Vercel](https://vercel.com)
+- Jeremy Philemon ([@jeremyphilemon](https://github.com/jeremyphilemon)) - [Vercel](https://vercel.com)
+- shadcn ([@shadcn](https://twitter.com/shadcn)) - [Vercel](https://vercel.com)
+- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - [Vercel](https://vercel.com)

examples/next-ai-rsc-basic/app/action.tsx

@@ -0,0 +1,127 @@
+import { OpenAI } from 'openai';
+import { createAI, getMutableAIState, render } from 'ai/rsc';
+import { z } from 'zod';
+
+interface FlightInfo {
+  readonly flightNumber: string;
+  readonly departure: string;
+  readonly arrival: string;
+}
+
+interface FlightCardProps {
+  readonly flightInfo: FlightInfo;
+}
+
+type AIStateItem =
+  | {
+      readonly role: 'user' | 'assistant' | 'system';
+      readonly content: string;
+    }
+  | {
+      readonly role: 'function';
+      readonly content: string;
+      readonly name: string;
+    };
+
+interface UIStateItem {
+  readonly id: number;
+  readonly display: React.ReactNode;
+}
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY || '',
+});
+
+async function getFlightInfo(flightNumber: string): Promise<FlightInfo> {
+  return {
+    flightNumber,
+    departure: 'New York',
+    arrival: 'San Francisco',
+  };
+}
+
+function Spinner() {
+  return <div>Loading...</div>;
+}
+
+function FlightCard({ flightInfo }: FlightCardProps) {
+  return (
+    <div>
+      <h2>Flight Information</h2>
+      <p>Flight Number: {flightInfo.flightNumber}</p>
+      <p>Departure: {flightInfo.departure}</p>
+      <p>Arrival: {flightInfo.arrival}</p>
+    </div>
+  );
+}
+
+async function submitUserMessage(userInput: string): Promise<UIStateItem> {
+  'use server';
+
+  const aiState = getMutableAIState<typeof AI>();
+
+  aiState.update([...aiState.get(), { role: 'user', content: userInput }]);
+
+  const ui = render({
+    model: 'gpt-4-0125-preview',
+    provider: openai,
+    messages: [
+      { role: 'system', content: 'You are a flight assistant' },
+      { role: 'user', content: userInput },
+      ...aiState.get(),
+    ],
+    compose: ({ text, functionCall, toolCalls }) => (
+      <div className="space-y-4">
+        {text}
+        {functionCall && functionCall.node}
+        {toolCalls.map(({ id, node }) => (
+          <div key={id}>{node}</div>
+        ))}
+      </div>
+    ),
+    text: ({ content, done }) => {
+      if (done) {
+        aiState.done([...aiState.get(), { role: 'assistant', content }]);
+      }
+
+      return <p>{content}</p>;
+    },
+    tools: {
+      get_flight_info: {
+        description: 'Get the information for a flight',
+        parameters: z
+          .object({
+            flightNumber: z.string().describe('the number of the flight'),
+          })
+          .required(),
+        render: async function* ({ flightNumber }) {
+          yield <Spinner />;
+
+          const flightInfo = await getFlightInfo(flightNumber);
+
+          aiState.done([
+            ...aiState.get(),
+            {
+              role: 'function',
+              name: 'get_flight_info',
+              content: JSON.stringify(flightInfo),
+            },
+          ]);
+
+          return <FlightCard flightInfo={flightInfo} />;
+        },
+      },
+    },
+  });
+
+  return { id: Date.now(), display: ui };
+}
+
+const initialAIState: AIStateItem[] = [];
+const initialUIState: UIStateItem[] = [];
+
+export const AI = createAI({
+  actions: { submitUserMessage },
+  initialUIState,
+  initialAIState,
+});

examples/next-ai-rsc-basic/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/next-ai-rsc-basic/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { AI } from './action';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Basic AI RSC Demo',
+  description:
+    'Demo of a flight assistant built using Next.js and Vercel AI SDK.',
+  icons: {
+    icon: '/favicon.ico',
+    shortcut: '/favicon-16x16.png',
+    apple: '/apple-touch-icon.png',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AI>{children}</AI>
+      </body>
+    </html>
+  );
+}

examples/next-ai-rsc-basic/app/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'react';
+import { useUIState, useActions } from 'ai/rsc';
+import type { AI } from './action';
+
+export default function Page() {
+  const [inputValue, setInputValue] = useState('');
+  const [messages, setMessages] = useUIState<typeof AI>();
+  const { submitUserMessage } = useActions<typeof AI>();
+
+  return (
+    <div>
+      {messages.map(message => (
+        <div key={message.id}>{message.display}</div>
+      ))}
+
+      <form
+        onSubmit={async e => {
+          e.preventDefault();
+
+          setMessages(currentMessages => [
+            ...currentMessages,
+            { id: Date.now(), display: <div>{inputValue}</div> },
+          ]);
+
+          const responseMessage = await submitUserMessage(inputValue);
+          setMessages(currentMessages => [...currentMessages, responseMessage]);
+          setInputValue('');
+        }}
+      >
+        <input
+          placeholder="Send a message..."
+          value={inputValue}
+          onChange={event => {
+            setInputValue(event.target.value);
+          }}
+        />
+      </form>
+    </div>
+  );
+}

examples/next-ai-rsc-basic/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next-ai-rsc-basic/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ai-rsc-basic-demo",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx}\" --cache"
+  },
+  "dependencies": {
+    "ai": "latest",
+    "date-fns": "^3.3.1",
+    "geist": "^1.2.2",
+    "next": "14.1.2",
+    "openai": "^4.28.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "zod": "3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8",
+    "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

examples/next-ai-rsc-basic/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

examples/next-ai-rsc-basic/tailwind.config.ts

@@ -0,0 +1,16 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)', ...fontFamily.sans],
+        mono: ['var(--font-geist-mono)', ...fontFamily.mono],
+      },
+    },
+  },
+};
+
+export default config;

examples/next-ai-rsc-basic/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}