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

@@ -333,7 +333,8 @@ export default function Chat() {
       ))}
 
       <form
-        action={async () => {
+        onSubmit={async e => {
+          e.preventDefault();
           const newMessages: CoreMessage[] = [
             ...messages,
             { content: input, role: 'user' },
@@ -433,7 +434,8 @@ export default function Chat() {
       ))}
 
       <form
-        action={async () => {
+        onSubmit={async e => {
+          e.preventDefault();
           const newMessages: CoreMessage[] = [
             ...messages,
             { content: input, role: 'user' },

content/docs/04-ai-sdk-rsc/05-streaming-values.mdx

@@ -21,7 +21,7 @@ The RSC API provides several utility functions to allow you to stream values fro
 
 There are two functions provided by the RSC API that allow you to create streamable values:
 
-- [`createStreamableValue`](/docs/reference/ai-sdk-rsc/stream-ui) - creates a streamable (serializable) value, with full control over how you create, update, and close the stream.
+- [`createStreamableValue`](/docs/reference/ai-sdk-rsc/create-streamable-value) - creates a streamable (serializable) value, with full control over how you create, update, and close the stream.
 - [`createStreamableUI`](/docs/reference/ai-sdk-rsc/create-streamable-ui) - creates a streamable React component, with full control over how you create, update, and close the stream.
 
 ## `createStreamableValue`

content/docs/05-ai-sdk-ui/01-overview.mdx

@@ -24,7 +24,7 @@ Here is a comparison of the supported functions across these frameworks:
 | Function                                                   | React               | Svelte              | Vue.js              | SolidJS             |
 | ---------------------------------------------------------- | ------------------- | ------------------- | ------------------- | ------------------- |
 | [useChat](/docs/reference/ai-sdk-ui/use-chat)              | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
-| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
+| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Check size={18} /> |
 | [useCompletion](/docs/reference/ai-sdk-ui/use-completion)  | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
 | [useObject](/docs/reference/ai-sdk-ui/use-object)          | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
 | [useAssistant](/docs/reference/ai-sdk-ui/use-assistant)    | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |

content/docs/05-ai-sdk-ui/03-chatbot-with-tool-calling.mdx

@@ -7,7 +7,7 @@ description: Learn how to use tools with the useChat hook.
 
 <Note type="warning">
   The tool calling functionality described here is currently only available for
-  **React**.
+  **React** and **SolidJS**.
 </Note>
 
 With `useChat` and `streamText`, you can use tools in your chatbot application.

content/docs/07-reference/ai-sdk-ui/01-use-chat.mdx

@@ -118,7 +118,7 @@ Allows you to easily create a conversational user interface for your chatbot app
       name: 'maxToolRoundtrips',
       type: 'number',
       description:
-        'React only. Maximal number of automatic roundtrips for tool calls. An automatic tool call roundtrip is a call to the server with the  tool call results when all tool calls in the last assistant  message have results. A maximum number is required to prevent infinite loops in the case of misconfigured tools. By default, it is set to 0, which will disable the feature.',
+        'React and SolidJS only. Maximal number of automatic roundtrips for tool calls. An automatic tool call roundtrip is a call to the server with the  tool call results when all tool calls in the last assistant  message have results. A maximum number is required to prevent infinite loops in the case of misconfigured tools. By default, it is set to 0, which will disable the feature.',
     },
     {
       name: 'streamMode',
@@ -247,7 +247,7 @@ Allows you to easily create a conversational user interface for your chatbot app
       name: 'addToolResult',
       type: '({toolCallId: string; result: any;}) => void',
       description:
-        'React only. Function to add a tool result to the chat. This will update the chat messages with the tool result and call the API route if all tool results for the last message are available.',
+        'React and SolidJS only. Function to add a tool result to the chat. This will update the chat messages with the tool result and call the API route if all tool results for the last message are available.',
     },
   ]}
 />

content/docs/07-reference/ai-sdk-ui/index.mdx

@@ -57,7 +57,7 @@ Here is a comparison of the supported functions across these frameworks:
 | Function                                                   | React               | Svelte              | Vue.js              | SolidJS             |
 | ---------------------------------------------------------- | ------------------- | ------------------- | ------------------- | ------------------- |
 | [useChat](/docs/reference/ai-sdk-ui/use-chat)              | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
-| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
+| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Check size={18} /> |
 | [useCompletion](/docs/reference/ai-sdk-ui/use-completion)  | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
 | [useObject](/docs/reference/ai-sdk-ui/use-object)          | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
 | [useAssistant](/docs/reference/ai-sdk-ui/use-assistant)    | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |

content/examples/01-next-app/06-assistants/02-stream-assistant-responses-with-tools.mdx

@@ -91,18 +91,6 @@ export function Message({ textStream }: { textStream: StreamableValue }) {
 }
 ```
 
-```tsx filename='app/message.tsx'
-'use client';
-
-import { StreamableValue, useStreamableValue } from 'ai/rsc';
-
-export function Message({ textStream }: { textStream: StreamableValue }) {
-  const [text] = useStreamableValue(textStream);
-
-  return <div>{text}</div>;
-}
-```
-
 ## Server
 
 In your server action, you will create a function called `submitMessage` that adds the user's message to the thread. The function will create a new thread if one does not exist and add the user's message to the thread. If a thread already exists, the function will add the user's message to the existing thread. The function will then create a run and stream the assistant's response to the client. Furthermore, the run queue is used to manage multiple runs in the same thread during the lifetime of the server action.

examples/solidstart-openai/.gitignore

@@ -4,7 +4,11 @@ dist
 .output
 .vercel
 .netlify
-netlify
+.vinxi
+
+# Environment
+.env
+.env*.local
 
 # dependencies
 /node_modules
@@ -22,6 +26,3 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
-
-# Local env files
-.env

examples/solidstart-openai/app.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@solidjs/start/config';
+
+export default defineConfig({});

examples/solidstart-openai/package.json

@@ -1,33 +1,30 @@
 {
   "name": "solidstart-openai",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "solid-start dev",
-    "build": "solid-start build",
-    "start": "solid-start start"
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start"
   },
-  "type": "module",
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "solid-start-node": "0.3.10",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.4",
-    "vite": "^4.1.4"
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "vinxi": "^0.3.12"
   },
   "dependencies": {
     "@ai-sdk/openai": "latest",
     "@ai-sdk/solid": "latest",
-    "@solidjs/meta": "0.29.3",
-    "@solidjs/router": "0.8.2",
+    "@solidjs/meta": "0.29.4",
+    "@solidjs/router": "^0.13.6",
+    "@solidjs/start": "^1.0.2",
     "ai": "latest",
-    "openai": "4.47.1",
-    "solid-js": "1.8.7",
-    "solid-start": "0.3.10",
-    "undici": "^5.15.1"
+    "solid-js": "^1.8.17",
+    "zod": "^3.23.8"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "version": "0.0.0"
 }

examples/solidstart-openai/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }

examples/solidstart-openai/src/root.css → examples/solidstart-openai/src/app.css

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

examples/solidstart-openai/src/app.tsx

@@ -0,0 +1,19 @@
+import { Router } from '@solidjs/router';
+import { FileRoutes } from '@solidjs/start/router';
+import { Suspense } from 'solid-js';
+
+import './app.css';
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <>
+          <Suspense>{props.children}</Suspense>
+        </>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

examples/solidstart-openai/src/entry-client.tsx

@@ -1,3 +1,4 @@
-import { mount, StartClient } from 'solid-start/entry-client';
+// @refresh reload
+import { mount, StartClient } from '@solidjs/start/client';
 
-mount(() => <StartClient />, document);
+mount(() => <StartClient />, document.getElementById('app')!);

examples/solidstart-openai/src/entry-server.tsx

@@ -1,9 +1,21 @@
-import {
-  StartServer,
-  createHandler,
-  renderAsync,
-} from 'solid-start/entry-server';
+// @refresh reload
+import { createHandler, StartServer } from '@solidjs/start/server';
 
-export default createHandler(
-  renderAsync(event => <StartServer event={event} />),
-);
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));

examples/solidstart-openai/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />