New experimental_streamUI() API (#1379)

.changeset/wise-cycles-mix.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+ai/rsc: add experimental_streamUI()

packages/core/rsc/index.ts

@@ -3,6 +3,7 @@ export type {
   getMutableAIState,
   createStreamableUI,
   createStreamableValue,
+  experimental_streamUI,
   render,
   createAI,
 } from './rsc-server';

packages/core/rsc/rsc-server.ts

@@ -4,4 +4,5 @@ export {
   createStreamableValue,
   render,
 } from './streamable';
+export { experimental_streamUI } from './stream-ui';
 export { createAI } from './provider';

packages/core/rsc/stream-ui/__snapshots__/stream-ui.ui.test.tsx.snap

@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`result.value > should render text 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": false,
+            "next": {
+              "done": false,
+              "next": {
+                "done": false,
+                "next": {
+                  "done": false,
+                  "next": {
+                    "done": true,
+                    "value": "{ \\"content\\": \\"Hello, world!\\" }",
+                  },
+                  "value": "{ \\"content\\": \\"Hello, world!\\" }",
+                },
+                "value": "{ \\"content\\": \\"Hello, world!\\"",
+              },
+              "value": "{ \\"content\\": \\"Hello, world",
+            },
+            "value": "{ \\"content\\": \\"Hello, ",
+          },
+          "value": "{ \\"content\\": ",
+        },
+        "value": "{ ",
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render text function returned ui 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": false,
+            "next": {
+              "done": false,
+              "next": {
+                "done": false,
+                "next": {
+                  "done": false,
+                  "next": {
+                    "done": false,
+                    "next": {
+                      "done": true,
+                      "value": <h1>
+                        { "content": "Hello, world!" }
+                      </h1>,
+                    },
+                    "value": <h1>
+                      { "content": "Hello, world!" }
+                    </h1>,
+                  },
+                  "value": <h1>
+                    { "content": "Hello, world!" }
+                  </h1>,
+                },
+                "value": <h1>
+                  { "content": "Hello, world!"
+                </h1>,
+              },
+              "value": <h1>
+                { "content": "Hello, world
+              </h1>,
+            },
+            "value": <h1>
+              { "content": "Hello, 
+            </h1>,
+          },
+          "value": <h1>
+            { "content": 
+          </h1>,
+        },
+        "value": <h1>
+          { 
+        </h1>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render tool call results 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": true,
+            "value": <div>
+              tool1: 
+              value
+            </div>,
+          },
+          "value": <div>
+            tool1: 
+            value
+          </div>,
+        },
+        "value": "",
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render tool call results with generator render function 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": false,
+            "next": {
+              "done": true,
+              "value": <div>
+                tool: 
+                value
+              </div>,
+            },
+            "value": <div>
+              tool: 
+              value
+            </div>,
+          },
+          "value": "",
+        },
+        "value": <div>
+          Loading...
+        </div>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should show better error messages if legacy options are passed 1`] = `[Error: Tool definition in \`experimental_streamUI\` should not have \`render\` property. Use \`generate\` instead. Found in tool: tool1]`;

packages/core/rsc/stream-ui/index.tsx

@@ -0,0 +1 @@
+export { experimental_streamUI } from './stream-ui';