Use streamUI example from AI SDK repo

package.json

@@ -26,24 +26,26 @@
     "watch:dev": "webpack --mode development --watch"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.9",
-    "@mfng/core": "^4.1.2",
+    "@ai-sdk/openai": "^0.0.40",
+    "@ai-sdk/react": "^0.0.36",
+    "@ai-sdk/ui-utils": "^0.0.24",
+    "@mfng/core": "^4.1.4",
     "@upstash/ratelimit": "^1.0.1",
     "@upstash/redis": "^1.28.4",
-    "ai": "^3.1.1",
+    "ai": "^3.2.45",
     "clsx": "^1.2.1",
-    "openai": "^4.40.1",
-    "react": "0.0.0-experimental-73bcdfbae5-20240502",
-    "react-dom": "0.0.0-experimental-73bcdfbae5-20240502",
+    "openai": "4.52.6",
+    "react": "19.0.0-rc-06d0b89e-20240801",
+    "react-dom": "19.0.0-rc-06d0b89e-20240801",
     "react-markdown": "^9.0.1",
-    "react-server-dom-webpack": "0.0.0-experimental-73bcdfbae5-20240502",
+    "react-server-dom-webpack": "19.0.0-rc-06d0b89e-20240801",
     "react-textarea-autosize": "^8.5.3",
     "server-only": "^0.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@hono/node-server": "^1.8.2",
-    "@mfng/webpack-rsc": "^4.0.1",
+    "@mfng/webpack-rsc": "^4.2.1",
     "@swc/core": "^1.3.22",
     "@types/aws-lambda": "^8.10.136",
     "@types/node": "^20.11.26",

src/app/actions.tsx

@@ -0,0 +1,124 @@
+import {openai} from '@ai-sdk/openai';
+import type {CoreMessage} from 'ai';
+import {generateId} from 'ai';
+import {
+  getMutableAIState as $getMutableAIState,
+  createAI,
+  createStreamableValue,
+  streamUI,
+} from 'ai/rsc';
+import * as React from 'react';
+import {z} from 'zod';
+import {BotMessage, Message} from './message.js';
+
+type AIProviderNoActions = ReturnType<typeof createAI<AIState, UIState>>;
+// typed wrapper *without* actions defined to avoid circular dependencies
+const getMutableAIState = $getMutableAIState<AIProviderNoActions>;
+
+// mock function to fetch weather data
+const fetchWeatherData = async (_location: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return {temperature: `72°F`};
+};
+
+export async function submitUserMessage(userInput: string): Promise<{
+  id: string;
+  display: React.ReactNode;
+}> {
+  'use server';
+
+  const aiState = getMutableAIState();
+
+  aiState.update({
+    ...aiState.get(),
+    messages: [
+      ...aiState.get().messages,
+      {id: generateId(), role: `user`, content: userInput},
+    ],
+  });
+
+  let textStream: undefined | ReturnType<typeof createStreamableValue<string>>;
+  let textNode: React.ReactNode;
+
+  const result = await streamUI({
+    model: openai(`gpt-4-turbo`),
+    initial: <Message role="assistant">Working on that...</Message>,
+    system: `You are a weather assistant.`,
+    messages: aiState
+      .get()
+      .messages.map(({role, content}) => ({role, content} as CoreMessage)),
+
+    text: async ({content, done, delta}) => {
+      if (!textStream) {
+        textStream = createStreamableValue(``);
+        textNode = <BotMessage textStream={textStream.value} />;
+      }
+
+      if (done) {
+        textStream.done();
+        aiState.update({
+          ...aiState.get(),
+          messages: [
+            ...aiState.get().messages,
+            {id: generateId(), role: `assistant`, content},
+          ],
+        });
+      } else {
+        textStream.append(delta);
+      }
+
+      return textNode;
+    },
+    tools: {
+      get_current_weather: {
+        description: `Get the current weather`,
+        parameters: z.object({
+          location: z.string(),
+        }),
+        async *generate({location}) {
+          yield (
+            <Message role="assistant">Loading weather for {location}</Message>
+          );
+          const {temperature} = await fetchWeatherData(location);
+          return (
+            <Message role="assistant">
+              <span>
+                The temperature in {location} is{` `}
+                <span className="font-semibold">{temperature}</span>
+              </span>
+            </Message>
+          );
+        },
+      },
+    },
+    onFinish: (event) => {
+      // your own logic, e.g. for saving the chat history or recording usage
+      console.log(`[onFinish]: ${JSON.stringify(event, null, 2)}`);
+    },
+  });
+
+  return {
+    id: generateId(),
+    display: result.value,
+  };
+}
+
+export type ClientMessage = CoreMessage & {
+  id: string;
+};
+
+export type AIState = {
+  chatId: string;
+  messages: ClientMessage[];
+};
+
+export type UIState = {
+  id: string;
+  display: React.ReactNode;
+}[];
+
+export const AI = createAI({
+  actions: {submitUserMessage},
+  initialUIState: [] as UIState,
+  initialAIState: {chatId: generateId(), messages: []} as AIState,
+});

src/app/app.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {AI} from './ai.js';
-import {Chat} from './chat.js';
-import {Header} from './header.js';
-import {Welcome} from './welcome.js';
+import {AI} from './actions.js';
+import Page from './page.js';
 
 export function App(): JSX.Element {
   return (
@@ -14,19 +12,14 @@ export function App(): JSX.Element {
         <meta
           name="description"
           content="A demo showcasing a chat assistant capable of displaying images of various
-kinds, using the Vercel AI SDK 3.0 with Generative UI, powered by React Server Components."
+kinds, using the Vercel AI SDK 3.2 with Generative UI, powered by React Server Components."
         />
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
       </head>
       <body className="bg-zinc-100">
-        <Header />
-        <main className="p-4">
-          <AI>
-            <Chat>
-              <Welcome />
-            </Chat>
-          </AI>
-        </main>
+        <AI>
+          <Page />
+        </AI>
       </body>
     </html>
   );