@assistant-ui/mcp-docs-server 0.1.11 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1002,13 +1002,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1002
1002
 
1003
1003
  ```
1004
1004
 
1005
- ## eslint.config.ts
1006
-
1007
- ```typescript
1008
- export { default } from "@assistant-ui/x-buildutils/eslint";
1009
-
1010
- ```
1011
-
1012
1005
  ## lib/utils.ts
1013
1006
 
1014
1007
  ```typescript
@@ -1042,34 +1035,32 @@ export default nextConfig;
1042
1035
  "version": "0.0.0",
1043
1036
  "type": "module",
1044
1037
  "dependencies": {
1045
- "@ai-sdk/openai": "^2.0.52",
1046
- "@ai-sdk/react": "^2.0.76",
1038
+ "@ai-sdk/openai": "^2.0.60",
1039
+ "@ai-sdk/react": "^2.0.86",
1047
1040
  "@assistant-ui/react": "workspace:^",
1048
1041
  "@assistant-ui/react-ai-sdk": "workspace:*",
1049
1042
  "@assistant-ui/react-markdown": "workspace:^",
1050
1043
  "@radix-ui/react-slot": "^1.2.3",
1051
1044
  "@radix-ui/react-tooltip": "^1.2.8",
1052
- "@tailwindcss/postcss": "^4.1.14",
1053
- "ai": "^5.0.76",
1045
+ "@tailwindcss/postcss": "^4.1.16",
1046
+ "ai": "^5.0.86",
1054
1047
  "class-variance-authority": "^0.7.1",
1055
1048
  "clsx": "^2.1.1",
1056
- "lucide-react": "^0.546.0",
1057
- "next": "15.5.6",
1049
+ "lucide-react": "^0.552.0",
1050
+ "next": "16.0.1",
1058
1051
  "postcss": "^8.5.6",
1059
1052
  "react": "19.2.0",
1060
1053
  "react-dom": "19.2.0",
1061
1054
  "remark-gfm": "^4.0.1",
1062
1055
  "tailwind-merge": "^3.3.1",
1063
- "tailwindcss": "^4.1.14",
1056
+ "tailwindcss": "^4.1.16",
1064
1057
  "zod": "^4.1.12"
1065
1058
  },
1066
1059
  "devDependencies": {
1067
1060
  "@assistant-ui/x-buildutils": "workspace:*",
1068
- "@types/node": "^24.8.1",
1061
+ "@types/node": "^24.10.0",
1069
1062
  "@types/react": "^19.2.2",
1070
1063
  "@types/react-dom": "^19.2.2",
1071
- "eslint": "^9",
1072
- "eslint-config-next": "15.5.6",
1073
1064
  "tw-animate-css": "^1.4.0",
1074
1065
  "typescript": "^5.9.3"
1075
1066
  },
@@ -1215,13 +1215,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1215
1215
 
1216
1216
  ```
1217
1217
 
1218
- ## eslint.config.ts
1219
-
1220
- ```typescript
1221
- export { default } from "@assistant-ui/x-buildutils/eslint";
1222
-
1223
- ```
1224
-
1225
1218
  ## lib/utils.ts
1226
1219
 
1227
1220
  ```typescript
@@ -1270,29 +1263,27 @@ export default nextConfig;
1270
1263
  "@assistant-ui/react-markdown": "workspace:^",
1271
1264
  "@radix-ui/react-slot": "^1.2.3",
1272
1265
  "@radix-ui/react-tooltip": "^1.2.8",
1273
- "@tailwindcss/postcss": "^4.1.14",
1274
- "assistant-stream": "^0.2.36",
1266
+ "@tailwindcss/postcss": "^4.1.16",
1267
+ "assistant-stream": "^0.2.39",
1275
1268
  "class-variance-authority": "^0.7.1",
1276
1269
  "clsx": "^2.1.1",
1277
1270
  "framer-motion": "^12.23.24",
1278
- "lucide-react": "^0.546.0",
1279
- "next": "15.5.6",
1271
+ "lucide-react": "^0.552.0",
1272
+ "next": "16.0.1",
1280
1273
  "postcss": "^8.5.6",
1281
1274
  "react": "19.2.0",
1282
1275
  "react-dom": "19.2.0",
1283
1276
  "remark-gfm": "^4.0.1",
1284
1277
  "tailwind-merge": "^3.3.1",
1285
- "tailwindcss": "^4.1.14",
1278
+ "tailwindcss": "^4.1.16",
1286
1279
  "tailwindcss-animate": "^1.0.7",
1287
1280
  "zod": "^4.1.12"
1288
1281
  },
1289
1282
  "devDependencies": {
1290
1283
  "@assistant-ui/x-buildutils": "workspace:*",
1291
- "@types/node": "^24.8.1",
1284
+ "@types/node": "^24.10.0",
1292
1285
  "@types/react": "^19.2.2",
1293
1286
  "@types/react-dom": "^19.2.2",
1294
- "eslint": "^9",
1295
- "eslint-config-next": "15.5.6",
1296
1287
  "tw-animate-css": "^1.4.0",
1297
1288
  "typescript": "^5.9.3"
1298
1289
  },
@@ -1044,13 +1044,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1044
1044
 
1045
1045
  ```
1046
1046
 
1047
- ## eslint.config.ts
1048
-
1049
- ```typescript
1050
- export { default } from "@assistant-ui/x-buildutils/eslint";
1051
-
1052
- ```
1053
-
1054
1047
  ## lib/utils.ts
1055
1048
 
1056
1049
  ```typescript
@@ -1090,19 +1083,19 @@ export default nextConfig;
1090
1083
  "lint": "eslint ."
1091
1084
  },
1092
1085
  "dependencies": {
1093
- "@ai-sdk/openai": "^2.0.52",
1086
+ "@ai-sdk/openai": "^2.0.60",
1094
1087
  "@assistant-ui/react": "workspace:*",
1095
1088
  "@assistant-ui/react-ai-sdk": "workspace:*",
1096
1089
  "@assistant-ui/react-markdown": "workspace:*",
1097
1090
  "@radix-ui/react-slot": "^1.2.3",
1098
1091
  "@radix-ui/react-tooltip": "^1.2.8",
1099
- "ai": "^5.0.76",
1092
+ "ai": "^5.0.86",
1100
1093
  "class-variance-authority": "^0.7.1",
1101
1094
  "clsx": "^2.1.1",
1102
1095
  "jsonwebtoken": "^9.0.2",
1103
- "lucide-react": "^0.546.0",
1096
+ "lucide-react": "^0.552.0",
1104
1097
  "nanoid": "5.1.6",
1105
- "next": "15.5.6",
1098
+ "next": "16.0.1",
1106
1099
  "react": "19.2.0",
1107
1100
  "react-dom": "19.2.0",
1108
1101
  "remark-gfm": "^4.0.1",
@@ -1115,10 +1108,8 @@ export default nextConfig;
1115
1108
  "@types/node": "^24",
1116
1109
  "@types/react": "^19",
1117
1110
  "@types/react-dom": "^19",
1118
- "eslint": "^9",
1119
- "eslint-config-next": "15.5.6",
1120
1111
  "postcss": "^8",
1121
- "tailwindcss": "^4.1.14",
1112
+ "tailwindcss": "^4.1.16",
1122
1113
  "typescript": "^5"
1123
1114
  }
1124
1115
  }
@@ -956,13 +956,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
956
956
 
957
957
  ```
958
958
 
959
- ## eslint.config.ts
960
-
961
- ```typescript
962
- export { default } from "@assistant-ui/x-buildutils/eslint";
963
-
964
- ```
965
-
966
959
  ## lib/utils.ts
967
960
 
968
961
  ```typescript
@@ -1002,15 +995,15 @@ export default nextConfig;
1002
995
  "lint": "eslint ."
1003
996
  },
1004
997
  "dependencies": {
1005
- "@ai-sdk/openai": "^2.0.52",
998
+ "@ai-sdk/openai": "^2.0.60",
1006
999
  "@assistant-ui/react": "workspace:*",
1007
1000
  "@assistant-ui/react-markdown": "workspace:*",
1008
1001
  "@radix-ui/react-slot": "^1.2.3",
1009
1002
  "@radix-ui/react-tooltip": "^1.2.8",
1010
1003
  "class-variance-authority": "^0.7.1",
1011
1004
  "clsx": "^2.1.1",
1012
- "lucide-react": "^0.546.0",
1013
- "next": "15.5.6",
1005
+ "lucide-react": "^0.552.0",
1006
+ "next": "16.0.1",
1014
1007
  "react": "19.2.0",
1015
1008
  "react-dom": "19.2.0",
1016
1009
  "remark-gfm": "^4.0.1",
@@ -1022,10 +1015,8 @@ export default nextConfig;
1022
1015
  "@types/node": "^24",
1023
1016
  "@types/react": "^19",
1024
1017
  "@types/react-dom": "^19",
1025
- "eslint": "^9",
1026
- "eslint-config-next": "15.5.6",
1027
1018
  "postcss": "^8",
1028
- "tailwindcss": "^4.1.14",
1019
+ "tailwindcss": "^4.1.16",
1029
1020
  "typescript": "^5"
1030
1021
  }
1031
1022
  }
@@ -268,7 +268,7 @@ export default dynamic(() => Promise.resolve(NoSSRWrapper), {
268
268
  import {
269
269
  useAssistantInstructions,
270
270
  useAssistantTool,
271
- useThreadComposer,
271
+ useAssistantState,
272
272
  } from "@assistant-ui/react";
273
273
  import { z } from "zod";
274
274
  import { FFmpeg } from "@ffmpeg/ffmpeg";
@@ -417,7 +417,9 @@ const FfmpegTool: FC<{ file: File }> = ({ file }) => {
417
417
 
418
418
  export default function Home() {
419
419
  const [lastFile, setLastFile] = useState<File | null>(null);
420
- const attachments = useThreadComposer((c) => c.attachments);
420
+ const attachments = useAssistantState(
421
+ ({ thread }) => thread.composer.attachments,
422
+ );
421
423
  useEffect(() => {
422
424
  const lastAttachment = attachments[attachments.length - 1];
423
425
  if (!lastAttachment) return;
@@ -1167,13 +1169,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1167
1169
 
1168
1170
  ```
1169
1171
 
1170
- ## eslint.config.ts
1171
-
1172
- ```typescript
1173
- export { default } from "@assistant-ui/x-buildutils/eslint";
1174
-
1175
- ```
1176
-
1177
1172
  ## lib/utils.ts
1178
1173
 
1179
1174
  ```typescript
@@ -1191,7 +1186,7 @@ export function cn(...inputs: ClassValue[]) {
1191
1186
  ```typescript
1192
1187
  /// <reference types="next" />
1193
1188
  /// <reference types="next/image-types/global" />
1194
- /// <reference path="./.next/types/routes.d.ts" />
1189
+ import "./.next/types/routes.d.ts";
1195
1190
 
1196
1191
  // NOTE: This file should not be edited
1197
1192
  // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -1225,7 +1220,7 @@ export default nextConfig;
1225
1220
  "lint": "eslint ."
1226
1221
  },
1227
1222
  "dependencies": {
1228
- "@ai-sdk/openai": "^2.0.52",
1223
+ "@ai-sdk/openai": "^2.0.60",
1229
1224
  "@assistant-ui/react": "workspace:*",
1230
1225
  "@assistant-ui/react-ai-sdk": "workspace:*",
1231
1226
  "@assistant-ui/react-hook-form": "workspace:*",
@@ -1240,15 +1235,15 @@ export default nextConfig;
1240
1235
  "@radix-ui/react-tabs": "^1.1.13",
1241
1236
  "@radix-ui/react-tooltip": "^1.2.8",
1242
1237
  "@react-hook/media-query": "^1.1.1",
1243
- "ai": "^5.0.76",
1238
+ "ai": "^5.0.86",
1244
1239
  "class-variance-authority": "^0.7.1",
1245
1240
  "clsx": "^2.1.1",
1246
1241
  "json-schema-to-zod": "^2.6.1",
1247
- "lucide-react": "^0.546.0",
1248
- "next": "15.5.6",
1242
+ "lucide-react": "^0.552.0",
1243
+ "next": "16.0.1",
1249
1244
  "react": "19.2.0",
1250
1245
  "react-dom": "19.2.0",
1251
- "react-hook-form": "^7.65.0",
1246
+ "react-hook-form": "^7.66.0",
1252
1247
  "react-resizable-panels": "^3.0.6",
1253
1248
  "remark-gfm": "^4.0.1",
1254
1249
  "tailwind-merge": "^3.3.1",
@@ -1261,10 +1256,8 @@ export default nextConfig;
1261
1256
  "@types/node": "^24",
1262
1257
  "@types/react": "^19",
1263
1258
  "@types/react-dom": "^19",
1264
- "eslint": "^9",
1265
- "eslint-config-next": "15.5.6",
1266
1259
  "postcss": "^8",
1267
- "tailwindcss": "^4.1.14",
1260
+ "tailwindcss": "^4.1.16",
1268
1261
  "typescript": "^5.9.3"
1269
1262
  }
1270
1263
  }
@@ -1530,13 +1530,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1530
1530
 
1531
1531
  ```
1532
1532
 
1533
- ## eslint.config.ts
1534
-
1535
- ```typescript
1536
- export { default } from "@assistant-ui/x-buildutils/eslint";
1537
-
1538
- ```
1539
-
1540
1533
  ## lib/chatApi.ts
1541
1534
 
1542
1535
  ```typescript
@@ -1631,7 +1624,7 @@ export function cn(...inputs: ClassValue[]) {
1631
1624
  ```typescript
1632
1625
  /// <reference types="next" />
1633
1626
  /// <reference types="next/image-types/global" />
1634
- /// <reference path="./.next/types/routes.d.ts" />
1627
+ import "./.next/types/routes.d.ts";
1635
1628
 
1636
1629
  // NOTE: This file should not be edited
1637
1630
  // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -1682,9 +1675,9 @@ export default nextConfig;
1682
1675
  "clsx": "^2.1.1",
1683
1676
  "js-cookie": "^3.0.5",
1684
1677
  "jsonwebtoken": "^9.0.2",
1685
- "lucide-react": "^0.546.0",
1678
+ "lucide-react": "^0.552.0",
1686
1679
  "nanoid": "5.1.6",
1687
- "next": "15.5.6",
1680
+ "next": "16.0.1",
1688
1681
  "react": "19.2.0",
1689
1682
  "react-dom": "19.2.0",
1690
1683
  "remark-gfm": "^4.0.1",
@@ -1698,10 +1691,8 @@ export default nextConfig;
1698
1691
  "@types/node": "^24",
1699
1692
  "@types/react": "^19",
1700
1693
  "@types/react-dom": "^19",
1701
- "eslint": "^9",
1702
- "eslint-config-next": "15.5.6",
1703
1694
  "postcss": "^8",
1704
- "tailwindcss": "^4.1.14",
1695
+ "tailwindcss": "^4.1.16",
1705
1696
  "typescript": "^5.9.3"
1706
1697
  }
1707
1698
  }
@@ -1202,13 +1202,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1202
1202
 
1203
1203
  ```
1204
1204
 
1205
- ## eslint.config.ts
1206
-
1207
- ```typescript
1208
- export { default } from "@assistant-ui/x-buildutils/eslint";
1209
-
1210
- ```
1211
-
1212
1205
  ## lib/utils.ts
1213
1206
 
1214
1207
  ```typescript
@@ -1248,15 +1241,15 @@ export default nextConfig;
1248
1241
  "lint": "eslint ."
1249
1242
  },
1250
1243
  "dependencies": {
1251
- "@ai-sdk/openai": "^2.0.52",
1244
+ "@ai-sdk/openai": "^2.0.60",
1252
1245
  "@assistant-ui/react": "workspace:*",
1253
1246
  "@assistant-ui/react-markdown": "workspace:*",
1254
1247
  "@radix-ui/react-slot": "^1.2.3",
1255
1248
  "@radix-ui/react-tooltip": "^1.2.8",
1256
1249
  "class-variance-authority": "^0.7.1",
1257
1250
  "clsx": "^2.1.1",
1258
- "lucide-react": "^0.546.0",
1259
- "next": "15.5.6",
1251
+ "lucide-react": "^0.552.0",
1252
+ "next": "16.0.1",
1260
1253
  "react": "19.2.0",
1261
1254
  "react-dom": "19.2.0",
1262
1255
  "remark-gfm": "^4.0.1",
@@ -1268,10 +1261,8 @@ export default nextConfig;
1268
1261
  "@types/node": "^24",
1269
1262
  "@types/react": "^19",
1270
1263
  "@types/react-dom": "^19",
1271
- "eslint": "^9",
1272
- "eslint-config-next": "15.5.6",
1273
1264
  "postcss": "^8",
1274
- "tailwindcss": "^4.1.14",
1265
+ "tailwindcss": "^4.1.16",
1275
1266
  "typescript": "^5"
1276
1267
  }
1277
1268
  }
@@ -1571,13 +1571,6 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
1571
1571
 
1572
1572
  ```
1573
1573
 
1574
- ## eslint.config.ts
1575
-
1576
- ```typescript
1577
- export { default } from "@assistant-ui/x-buildutils/eslint";
1578
-
1579
- ```
1580
-
1581
1574
  ## lib/submitSignup.tsx
1582
1575
 
1583
1576
  ```tsx
@@ -1613,7 +1606,7 @@ export function cn(...inputs: ClassValue[]) {
1613
1606
  ```typescript
1614
1607
  /// <reference types="next" />
1615
1608
  /// <reference types="next/image-types/global" />
1616
- /// <reference path="./.next/types/routes.d.ts" />
1609
+ import "./.next/types/routes.d.ts";
1617
1610
 
1618
1611
  // NOTE: This file should not be edited
1619
1612
  // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -1647,7 +1640,7 @@ export default nextConfig;
1647
1640
  "lint": "eslint ."
1648
1641
  },
1649
1642
  "dependencies": {
1650
- "@ai-sdk/openai": "^2.0.52",
1643
+ "@ai-sdk/openai": "^2.0.60",
1651
1644
  "@assistant-ui/react": "workspace:*",
1652
1645
  "@assistant-ui/react-ai-sdk": "workspace:*",
1653
1646
  "@assistant-ui/react-hook-form": "workspace:*",
@@ -1660,15 +1653,15 @@ export default nextConfig;
1660
1653
  "@radix-ui/react-tabs": "^1.1.13",
1661
1654
  "@radix-ui/react-tooltip": "^1.2.8",
1662
1655
  "@react-hook/media-query": "^1.1.1",
1663
- "ai": "^5.0.76",
1656
+ "ai": "^5.0.86",
1664
1657
  "class-variance-authority": "^0.7.1",
1665
1658
  "clsx": "^2.1.1",
1666
1659
  "json-schema-to-zod": "^2.6.1",
1667
- "lucide-react": "^0.546.0",
1668
- "next": "15.5.6",
1660
+ "lucide-react": "^0.552.0",
1661
+ "next": "16.0.1",
1669
1662
  "react": "19.2.0",
1670
1663
  "react-dom": "19.2.0",
1671
- "react-hook-form": "^7.65.0",
1664
+ "react-hook-form": "^7.66.0",
1672
1665
  "react-resizable-panels": "^3.0.6",
1673
1666
  "remark-gfm": "^4.0.1",
1674
1667
  "tailwind-merge": "^3.3.1",
@@ -1681,10 +1674,8 @@ export default nextConfig;
1681
1674
  "@types/node": "^24",
1682
1675
  "@types/react": "^19",
1683
1676
  "@types/react-dom": "^19",
1684
- "eslint": "^9",
1685
- "eslint-config-next": "15.5.6",
1686
1677
  "postcss": "^8",
1687
- "tailwindcss": "^4.1.14",
1678
+ "tailwindcss": "^4.1.16",
1688
1679
  "typescript": "^5.9.3"
1689
1680
  }
1690
1681
  }
@@ -13,9 +13,14 @@ You must either wrap your app in an `AssistantRuntimeProvider` or pass a `runtim
13
13
 
14
14
  ```tsx {1, 8, 10}
15
15
  import { AssistantRuntimeProvider } from "@assistant-ui/react";
16
+ import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
16
17
 
17
18
  const MyApp = () => {
18
- const runtime = useChatRuntime({ api: "/api/chat" });
19
+ const runtime = useChatRuntime({
20
+ transport: new AssistantChatTransport({
21
+ api: "/api/chat",
22
+ }),
23
+ });
19
24
 
20
25
  return (
21
26
  <AssistantRuntimeProvider runtime={runtime}>
@@ -5,19 +5,29 @@ title: "@assistant-ui/react-ai-sdk"
5
5
  Vercel AI SDK integration for assistant-ui.
6
6
 
7
7
  import { ParametersTable } from "@/components/docs";
8
+ import { Callout } from "fumadocs-ui/components/callout";
9
+
10
+ <Callout type="info">
11
+ This package provides integration with AI SDK v5. For AI SDK v4, see the [AI
12
+ SDK v4 (Legacy)](/docs/runtimes/ai-sdk/v4-legacy) documentation.
13
+ </Callout>
8
14
 
9
15
  ## API Reference
10
16
 
11
- ### `useVercelUseChatRuntime`
17
+ ### `useChatRuntime`
12
18
 
13
- Convert Vercel AI SDK chat helpers into a `AssistantRuntime`.
19
+ Creates a runtime directly with AI SDK v5's `useChat` hook integration. This is the recommended approach for most use cases.
14
20
 
15
21
  ```tsx
16
- import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
22
+ import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
23
+ import { AssistantRuntimeProvider } from "@assistant-ui/react";
17
24
 
18
25
  const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
19
- const chat = useChat();
20
- const runtime = useVercelUseChatRuntime(chat);
26
+ const runtime = useChatRuntime({
27
+ transport: new AssistantChatTransport({
28
+ api: "/api/chat",
29
+ }),
30
+ });
21
31
 
22
32
  return (
23
33
  <AssistantRuntimeProvider runtime={runtime}>
@@ -27,26 +37,86 @@ const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
27
37
  };
28
38
  ```
29
39
 
40
+ To customize the API endpoint, simply change the `api` parameter:
41
+
42
+ ```tsx
43
+ const runtime = useChatRuntime({
44
+ transport: new AssistantChatTransport({
45
+ api: "/my-custom-api/chat",
46
+ }),
47
+ });
48
+ ```
49
+
30
50
  <ParametersTable
31
51
  parameters={[
32
52
  {
33
- name: "chat",
34
- type: "ReturnType<typeof useChat>",
35
- description: "The UseChatHelpers from @ai-sdk/react.",
53
+ name: "options",
54
+ type: "UseChatRuntimeOptions",
55
+ description: "Configuration options for the chat runtime.",
56
+ children: [
57
+ {
58
+ type: "UseChatRuntimeOptions",
59
+ parameters: [
60
+ {
61
+ name: "api",
62
+ type: "string",
63
+ description: "The API endpoint URL. Defaults to '/api/chat'.",
64
+ },
65
+ {
66
+ name: "transport",
67
+ type: "ChatTransport",
68
+ description:
69
+ "Custom transport implementation. Defaults to AssistantChatTransport which forwards system messages and tools.",
70
+ },
71
+ {
72
+ name: "cloud",
73
+ type: "AssistantCloud",
74
+ description:
75
+ "Optional AssistantCloud instance for chat persistence.",
76
+ },
77
+ {
78
+ name: "initialMessages",
79
+ type: "UIMessage[]",
80
+ description: "Initial messages to populate the chat.",
81
+ },
82
+ {
83
+ name: "onFinish",
84
+ type: "(message: UIMessage) => void",
85
+ description: "Callback when a message completes streaming.",
86
+ },
87
+ {
88
+ name: "onError",
89
+ type: "(error: Error) => void",
90
+ description: "Callback for handling errors.",
91
+ },
92
+ ],
93
+ },
94
+ ],
36
95
  },
37
96
  ]}
38
97
  />
39
98
 
40
- ### `useVercelUseAssistantRuntime`
99
+ <Callout type="info">
100
+ By default, `useChatRuntime` uses `AssistantChatTransport` which automatically
101
+ forwards system messages and frontend tools to your backend API. This enables
102
+ your backend to receive the full context from the assistant-ui.
103
+ </Callout>
104
+
105
+ ### `useAISDKRuntime`
41
106
 
42
- Convert Vercel AI SDK assistant helpers into a `AssistantRuntime`.
107
+ For advanced use cases where you need direct access to the `useChat` hook from AI SDK.
43
108
 
44
109
  ```tsx
45
- import { useVercelUseAssistantRuntime } from "@assistant-ui/react-ai-sdk";
110
+ import { useChat } from "@ai-sdk/react";
111
+ import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
112
+ import { AssistantRuntimeProvider } from "@assistant-ui/react";
46
113
 
47
114
  const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
48
- const assistant = useAssistant();
49
- const runtime = useVercelUseAssistantRuntime(assistant);
115
+ const chat = useChat({
116
+ api: "/api/chat",
117
+ });
118
+
119
+ const runtime = useAISDKRuntime(chat);
50
120
 
51
121
  return (
52
122
  <AssistantRuntimeProvider runtime={runtime}>
@@ -59,83 +129,76 @@ const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
59
129
  <ParametersTable
60
130
  parameters={[
61
131
  {
62
- name: "assistant",
63
- type: "ReturnType<typeof useAssistant>",
64
- description: "The UseAssistantHelpers from @ai-sdk/react.",
132
+ name: "chat",
133
+ type: "ReturnType<typeof useChat>",
134
+ description: "The chat helpers from @ai-sdk/react's useChat hook.",
135
+ },
136
+ {
137
+ name: "options",
138
+ type: "AISDKRuntimeOptions",
139
+ description: "Optional configuration options.",
140
+ children: [
141
+ {
142
+ type: "AISDKRuntimeOptions",
143
+ parameters: [
144
+ {
145
+ name: "cloud",
146
+ type: "AssistantCloud",
147
+ description:
148
+ "Optional AssistantCloud instance for chat persistence.",
149
+ },
150
+ {
151
+ name: "adapters",
152
+ type: "RuntimeAdapters",
153
+ description:
154
+ "Optional runtime adapters for attachments, feedback, speech, etc.",
155
+ },
156
+ ],
157
+ },
158
+ ],
65
159
  },
66
160
  ]}
67
161
  />
68
162
 
69
- ### `useVercelRSCRuntime`
163
+ ### `AssistantChatTransport`
70
164
 
71
- Convert Vercel RSC runtime into a `AssistantRuntime`.
165
+ A transport that extends the default AI SDK transport to automatically forward system messages and frontend tools to your backend.
72
166
 
73
167
  ```tsx
74
- import { useVercelRSCRuntime } from "@assistant-ui/react-ai-sdk";
75
-
76
- const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
77
- const [messages, setMessages] = useUIState<typeof AI>();
78
-
79
- const onNew = async (m: AppendMessage) => {
80
- if (m.content[0]?.type !== "text")
81
- throw new Error("Only text messages are supported");
82
-
83
- const input = m.content[0].text;
84
- setMessages((currentConversation) => [
85
- ...currentConversation,
86
- { id: nanoid(), role: "user", display: input },
87
- ]);
88
-
89
- const message = await continueConversation(input);
90
-
91
- setMessages((currentConversation) => [...currentConversation, message]);
92
- };
93
-
94
- const runtime = useVercelRSCRuntime({ messages, onNew });
95
-
96
- return (
97
- <AssistantRuntimeProvider runtime={runtime}>
98
- {children}
99
- </AssistantRuntimeProvider>
100
- );
101
- };
168
+ import { AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
169
+ import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
170
+
171
+ const runtime = useChatRuntime({
172
+ transport: new AssistantChatTransport({
173
+ api: "/my-custom-api/chat",
174
+ }),
175
+ });
102
176
  ```
103
177
 
104
178
  <ParametersTable
105
179
  parameters={[
106
180
  {
107
- name: "adapter",
108
- type: "VercelRSCAdapter<TMessage>",
109
- description: "The Vercel RSC adapter to use.",
181
+ name: "options",
182
+ type: "HttpChatTransportInitOptions",
183
+ description: "Transport configuration options.",
110
184
  children: [
111
185
  {
112
- type: "VercelRSCAdapter<TMessage>",
186
+ type: "HttpChatTransportInitOptions",
113
187
  parameters: [
114
188
  {
115
- name: "messages",
116
- type: "readonly ThreadMessage[]",
117
- description: "The messages in the thread.",
189
+ name: "api",
190
+ type: "string",
191
+ description: "The API endpoint URL.",
118
192
  },
119
193
  {
120
- name: "onNew",
121
- type: "(message: AppendMessage) => Promise<void>",
122
- description: "A function to append a message to the thread.",
194
+ name: "headers",
195
+ type: "Record<string, string> | Headers",
196
+ description: "Optional headers to include in requests.",
123
197
  },
124
198
  {
125
- name: "onEdit",
126
- type: "(message: AppendMessage) => Promise<void>",
127
- description: "A function to edit a message.",
128
- },
129
- {
130
- name: "onReload",
131
- type: "(parentId: string | null) => Promise<void>",
132
- description: "A function to reload a message.",
133
- },
134
- {
135
- name: "convertMessage",
136
- type: "(message: TMessage) => VercelRSCMessage",
137
- description:
138
- "A function to convert messages to the VercelRSCMessage format. Only required if your message objects are not already compatible with Vercel RSC.",
199
+ name: "credentials",
200
+ type: "RequestCredentials",
201
+ description: "Optional credentials mode for fetch requests.",
139
202
  },
140
203
  ],
141
204
  },
@@ -143,3 +206,49 @@ const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
143
206
  },
144
207
  ]}
145
208
  />
209
+
210
+ ### `frontendTools`
211
+
212
+ Helper function to convert frontend tool definitions to AI SDK format for use in your backend.
213
+
214
+ ```tsx
215
+ import { frontendTools } from "@assistant-ui/react-ai-sdk";
216
+ import { streamText, convertToModelMessages } from "ai";
217
+ import { openai } from "@ai-sdk/openai";
218
+
219
+ export async function POST(req: Request) {
220
+ const { messages, system, tools } = await req.json();
221
+
222
+ const result = streamText({
223
+ model: openai("gpt-4o"),
224
+ system,
225
+ messages: convertToModelMessages(messages),
226
+ tools: {
227
+ // Wrap frontend tools with the helper
228
+ ...frontendTools(tools),
229
+ // Your backend tools
230
+ myBackendTool: tool({
231
+ // ...
232
+ }),
233
+ },
234
+ });
235
+
236
+ return result.toUIMessageStreamResponse();
237
+ }
238
+ ```
239
+
240
+ <ParametersTable
241
+ parameters={[
242
+ {
243
+ name: "tools",
244
+ type: "Record<string, unknown>",
245
+ description:
246
+ "Frontend tools object forwarded from AssistantChatTransport.",
247
+ },
248
+ ]}
249
+ />
250
+
251
+ <Callout type="info">
252
+ The `frontendTools` helper converts frontend tool definitions to the AI SDK
253
+ format and ensures they are properly handled by the streaming response.
254
+ </Callout>
@@ -33,7 +33,6 @@ import {
33
33
  makeAssistantVisible,
34
34
  makeAssistantTool,
35
35
  tool,
36
- useAssistantRuntime,
37
36
  } from "@assistant-ui/react";
38
37
  import { z } from "zod";
39
38
 
@@ -75,12 +74,12 @@ function Form() {
75
74
  The context provider system allows components to contribute to the model context. Here's a typical usage pattern:
76
75
 
77
76
  ```tsx
78
- import { useAssistantRuntime, tool } from "@assistant-ui/react";
77
+ import { useAssistantApi, tool } from "@assistant-ui/react";
79
78
  import { useEffect } from "react";
80
79
  import { z } from "zod";
81
80
 
82
81
  function MyComponent() {
83
- const assistantRuntime = useAssistantRuntime();
82
+ const api = useAssistantApi();
84
83
 
85
84
  // Define tool using the tool() helper
86
85
  const myTool = tool({
@@ -95,13 +94,13 @@ function MyComponent() {
95
94
 
96
95
  useEffect(() => {
97
96
  // Register context provider
98
- return assistantRuntime.registerModelContextProvider({
97
+ return api.modelContext().register({
99
98
  getModelContext: () => ({
100
99
  system: "You are a helpful search assistant...",
101
100
  tools: { myTool },
102
101
  }),
103
102
  });
104
- }, [assistantRuntime]); // Re-register if runtime changes
103
+ }, [api]); // Re-register if api changes
105
104
 
106
105
  return <div>{/* component content */}</div>;
107
106
  }
@@ -143,14 +143,14 @@ function SmartTransactionHistory() {
143
143
  Finally, let's add dynamic context based on the user's transaction patterns:
144
144
 
145
145
  ```tsx
146
- import { useAssistantRuntime } from "@assistant-ui/react";
146
+ import { useAssistantApi } from "@assistant-ui/react";
147
147
  import { useEffect } from "react";
148
148
 
149
149
  function SmartTransactionHistory({ userProfile }) {
150
- const assistantRuntime = useAssistantRuntime();
150
+ const api = useAssistantApi();
151
151
 
152
152
  useEffect(() => {
153
- return assistantRuntime.registerModelContextProvider({
153
+ return api.modelContext().register({
154
154
  getModelContext: () => ({
155
155
  system: `
156
156
  User spending patterns:
@@ -160,7 +160,7 @@ function SmartTransactionHistory({ userProfile }) {
160
160
  `,
161
161
  }),
162
162
  });
163
- }, [assistantRuntime, userProfile]);
163
+ }, [api, userProfile]);
164
164
 
165
165
  // Previous components...
166
166
  }
@@ -1147,7 +1147,7 @@ import "@assistant-ui/styles/markdown.css";
1147
1147
 
1148
1148
  Install provider SDK:
1149
1149
 
1150
- <Tabs id="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
1150
+ <Tabs groupId="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
1151
1151
 
1152
1152
  ```sh title="Terminal" tab="OpenAI"
1153
1153
  npm install ai @assistant-ui/react-ai-sdk @ai-sdk/openai
@@ -1197,7 +1197,7 @@ npm install ai @assistant-ui/react-ai-sdk chrome-ai
1197
1197
 
1198
1198
  Add an API endpoint:
1199
1199
 
1200
- <Tabs id="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
1200
+ <Tabs groupId="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
1201
1201
  ```ts title="/app/api/chat/route.ts" tab="OpenAI"
1202
1202
  import { openai } from "@ai-sdk/openai";
1203
1203
  import { convertToModelMessages, streamText } from "ai";
@@ -1388,7 +1388,7 @@ export async function POST(req: Request) {
1388
1388
 
1389
1389
  Define environment variables:
1390
1390
 
1391
- <Tabs id="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
1391
+ <Tabs groupId="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
1392
1392
 
1393
1393
  ```sh title="/.env.local" tab="OpenAI"
1394
1394
  OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
@@ -1453,13 +1453,15 @@ If you aren't using Next.js, you can also deploy this endpoint to Cloudflare Wor
1453
1453
 
1454
1454
  ```tsx title="/app/page.tsx" tab="Thread"
1455
1455
  import { AssistantRuntimeProvider } from "@assistant-ui/react";
1456
- import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
1456
+ import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
1457
1457
  import { ThreadList } from "@/components/assistant-ui/thread-list";
1458
1458
  import { Thread } from "@/components/assistant-ui/thread";
1459
1459
 
1460
1460
  const MyApp = () => {
1461
1461
  const runtime = useChatRuntime({
1462
- api: "/api/chat",
1462
+ transport: new AssistantChatTransport({
1463
+ api: "/api/chat",
1464
+ }),
1463
1465
  });
1464
1466
 
1465
1467
  return (
@@ -1477,12 +1479,14 @@ const MyApp = () => {
1477
1479
  // run `npx shadcn@latest add "https://r.assistant-ui.com/assistant-modal"`
1478
1480
 
1479
1481
  import { AssistantRuntimeProvider } from "@assistant-ui/react";
1480
- import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
1482
+ import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
1481
1483
  import { AssistantModal } from "@/components/assistant-ui/assistant-modal";
1482
1484
 
1483
1485
  const MyApp = () => {
1484
1486
  const runtime = useChatRuntime({
1485
- api: "/api/chat",
1487
+ transport: new AssistantChatTransport({
1488
+ api: "/api/chat",
1489
+ }),
1486
1490
  });
1487
1491
 
1488
1492
  return (
@@ -508,14 +508,14 @@ class ValidatedImageAdapter implements AttachmentAdapter {
508
508
  Enable multi-file selection with custom limits:
509
509
 
510
510
  ```tsx
511
- const composer = useComposer();
511
+ const api = useAssistantApi();
512
512
 
513
513
  const handleMultipleFiles = async (files: FileList) => {
514
514
  const maxFiles = 5;
515
515
  const filesToAdd = Array.from(files).slice(0, maxFiles);
516
516
 
517
517
  for (const file of filesToAdd) {
518
- await composer.addAttachment({ file });
518
+ await api.composer().addAttachment({ file });
519
519
  }
520
520
  };
521
521
  ```
@@ -165,15 +165,15 @@ function App() {
165
165
 
166
166
  ### 4. Advanced: Direct Context Registration
167
167
 
168
- Use `registerModelContextProvider` when you need to configure more than just tools:
168
+ Use `api.modelContext().register()` when you need to configure more than just tools:
169
169
 
170
170
  ```tsx
171
- import { tool, useAssistantRuntime } from "@assistant-ui/react";
171
+ import { tool, useAssistantApi } from "@assistant-ui/react";
172
172
  import { useEffect, useState } from "react";
173
173
  import { z } from "zod";
174
174
 
175
175
  function MyComponent() {
176
- const runtime = useAssistantRuntime();
176
+ const api = useAssistantApi();
177
177
  const [isCreativeMode, setIsCreativeMode] = useState(false);
178
178
 
179
179
  useEffect(() => {
@@ -188,7 +188,7 @@ function MyComponent() {
188
188
  });
189
189
 
190
190
  // Register tools with model configuration
191
- return runtime.registerModelContextProvider({
191
+ return api.modelContext().register({
192
192
  getModelContext: () => ({
193
193
  tools: { calculate: calculateTool },
194
194
  callSettings: {
@@ -198,7 +198,7 @@ function MyComponent() {
198
198
  priority: 10, // Higher priority overrides other providers
199
199
  }),
200
200
  });
201
- }, [runtime, isCreativeMode]);
201
+ }, [api, isCreativeMode]);
202
202
 
203
203
  return <div>{/* Your component */}</div>;
204
204
  }
@@ -94,10 +94,14 @@ export async function POST(req: Request) {
94
94
 
95
95
  import { Thread } from "@/components/assistant-ui/thread";
96
96
  import { AssistantRuntimeProvider } from "@assistant-ui/react";
97
- import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
97
+ import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
98
98
 
99
99
  export default function Home() {
100
- const runtime = useChatRuntime();
100
+ const runtime = useChatRuntime({
101
+ transport: new AssistantChatTransport({
102
+ api: "/api/chat",
103
+ }),
104
+ });
101
105
 
102
106
  return (
103
107
  <AssistantRuntimeProvider runtime={runtime}>
@@ -26,7 +26,7 @@ cd my-app
26
26
  </Step>
27
27
  <Step>
28
28
 
29
- ### Install `@langchain/core`, `ai-sdk` and `@assistant-ui/react`
29
+ ### Install `@langchain/core`, AI SDK and `@assistant-ui/react`
30
30
 
31
31
  ```sh npm2yarn
32
32
  npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/react @langchain/core
@@ -71,19 +71,14 @@ export async function POST(req: Request) {
71
71
 
72
72
  import { useChat } from "@ai-sdk/react";
73
73
  import { AssistantRuntimeProvider } from "@assistant-ui/react";
74
- import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
74
+ import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
75
75
 
76
76
  export function MyRuntimeProvider({
77
77
  children,
78
78
  }: Readonly<{
79
79
  children: React.ReactNode;
80
80
  }>) {
81
- const chat = useChat({
82
- api: "/api/chat",
83
- unstable_AISDKInterop: true,
84
- });
85
-
86
- const runtime = useVercelUseChatRuntime(chat);
81
+ const runtime = useChatRuntime();
87
82
 
88
83
  return (
89
84
  <AssistantRuntimeProvider runtime={runtime}>
@@ -52,7 +52,7 @@ export async function POST(req: Request) {
52
52
  messages,
53
53
  });
54
54
 
55
- return result.toDataStreamResponse();
55
+ return result.toUIMessageStreamResponse();
56
56
  }
57
57
  ```
58
58
 
@@ -184,8 +184,8 @@ export async function POST(req: Request) {
184
184
  // Stream the response using the agent
185
185
  const result = await agent.stream(messages);
186
186
 
187
- // Return the result as a data stream response
188
- return result.toDataStreamResponse();
187
+ // Return the result as a UI message stream response
188
+ return result.toUIMessageStreamResponse();
189
189
  }
190
190
  ```
191
191
 
@@ -194,7 +194,7 @@ Key changes:
194
194
  - We import the `mastra` instance created in `mastra/index.ts`. Make sure the import path (`@/mastra`) is correct for your project setup (you might need `~/mastra`, `../../../mastra`, etc., depending on your path aliases and project structure).
195
195
  - We retrieve the `chefAgent` using `mastra.getAgent("chefAgent")`.
196
196
  - Instead of calling the AI SDK's `streamText` directly, we call `agent.stream(messages)` to process the chat messages using the agent's configuration and model.
197
- - The result is still returned in a format compatible with assistant-ui using `toDataStreamResponse()`.
197
+ - The result is still returned in a format compatible with assistant-ui using `toUIMessageStreamResponse()`.
198
198
 
199
199
  Your API route is now powered by Mastra!
200
200
 
@@ -515,12 +515,12 @@ Adjust group appearance based on content:
515
515
 
516
516
  ```tsx
517
517
  import { FC, PropsWithChildren } from "react";
518
- import { useMessage } from "@assistant-ui/react";
518
+ import { useAssistantState } from "@assistant-ui/react";
519
519
 
520
520
  const DynamicGroup: FC<
521
521
  PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>
522
522
  > = ({ groupKey, indices, children }) => {
523
- const parts = useMessage((m) => m.content);
523
+ const parts = useAssistantState(({ message }) => message.content);
524
524
  const groupParts = indices.map((i) => parts[i]);
525
525
 
526
526
  // Analyze group content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@assistant-ui/mcp-docs-server",
3
- "version": "0.1.11",
3
+ "version": "0.1.13",
4
4
  "description": "MCP server for assistant-ui documentation and examples",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -8,18 +8,17 @@
8
8
  "assistant-ui-mcp": "./dist/stdio.js"
9
9
  },
10
10
  "dependencies": {
11
- "@modelcontextprotocol/sdk": "^1.20.1",
11
+ "@modelcontextprotocol/sdk": "^1.20.2",
12
12
  "zod": "^4.1.12",
13
13
  "gray-matter": "^4.0.3",
14
14
  "cross-env": "^10.1.0"
15
15
  },
16
16
  "devDependencies": {
17
- "@types/node": "^24.8.1",
17
+ "@types/node": "^24.10.0",
18
18
  "tsup": "^8.5.0",
19
19
  "tsx": "^4.20.6",
20
20
  "typescript": "^5.9.3",
21
- "vitest": "^3.2.4",
22
- "eslint": "^9.38.0"
21
+ "vitest": "^4.0.6"
23
22
  },
24
23
  "files": [
25
24
  "dist",