add web search to anthropic and google; upgrade ai dependencies and next

Author: alexylon

next.config.js

@@ -7,8 +7,8 @@ const withPWA = require('next-pwa')({
 const nextConfig = {
 	reactStrictMode: true,
 	trailingSlash: true,
-	// distDir: 'out',
-	// output: 'export',
+	turbopack: {},
 };
 
-module.exports = withPWA(nextConfig);
+module.exports =
+	process.env.NODE_ENV === 'production' ? withPWA(nextConfig) : nextConfig;

package-lock.json

@@ -14,10 +14,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^2.0.45",
-    "@ai-sdk/google": "^2.0.43",
-    "@ai-sdk/openai": "^2.0.69",
-    "@ai-sdk/react": "^2.0.97",
+    "@ai-sdk/anthropic": "^3.0.45",
+    "@ai-sdk/google": "^3.0.29",
+    "@ai-sdk/openai": "^3.0.29",
+    "@ai-sdk/react": "^3.0.92",
     "@ai-sdk/ui-utils": "^2.0.0-canary.3",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
@@ -26,9 +26,9 @@
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@vercel/blob": "^0.23.4",
-    "ai": "^5.0.97",
+    "ai": "^6.0.90",
     "copy-to-clipboard": "^3.3.3",
-    "next": "15.4.8",
+    "next": "^16.1.5",
     "next-auth": "^4.24.13",
     "next-pwa": "^5.6.0",
     "react": "^18.2.0",

package.json

@@ -11,7 +11,7 @@ export async function POST(req: Request) {
 	try {
 		const result: GenerateTextResult<any, any> = await generateText({
 			model: openai(model.value),
-			messages: convertToModelMessages(messages),
+			messages: await convertToModelMessages(messages),
 			topP: 0.8,
 		});
 

src/app/api/use-generate-text/route.ts

@@ -20,6 +20,10 @@ export async function POST(req: Request) {
 	if (model.provider === 'anthropic') {
 		modelName = anthropic(model.value);
 
+		tools = {
+			web_search: anthropic.tools.webSearch_20250305({}),
+		};
+
 		if (reasoningEffort === 'none') {
 			providerOptions = {
 				anthropic: {
@@ -50,6 +54,10 @@ export async function POST(req: Request) {
 	} else if (model.provider === 'google') {
 		modelName = google(model.value);
 
+		tools = {
+			google_search: google.tools.googleSearch({}),
+		};
+
 		providerOptions = {
 			google: {
 				thinkingConfig: {
@@ -63,8 +71,7 @@ export async function POST(req: Request) {
 
 		if (!(reasoningEffort === 'none' && model.value === 'gpt-5-mini')) {
 			tools = {
-				web_search_preview: openai.tools.webSearchPreview({
-					// optional configuration:
+				web_search: openai.tools.webSearch({
 					searchContextSize: 'high',
 					userLocation: {
 						type: 'approximate',
@@ -89,7 +96,7 @@ export async function POST(req: Request) {
 	try {
 		const result: StreamTextResult<any, any> = streamText({
 			model: modelName,
-			messages: convertToModelMessages(messages),
+			messages: await convertToModelMessages(messages),
 			system: `When presenting any code examples or data tables, always use Markdown code fences.
 - Code: wrap with triple backticks and specify the language (e.g., \`\`\`python, \`\`\`rust). Never show code outside fences.
 - Tables: wrap GitHub-flavored Markdown tables inside \`\`\`markdown fences.

src/app/api/use-stream-text/route.ts

@@ -61,7 +61,10 @@ export default function Completion({
 		<div style={{ minHeight: '100%', paddingBottom: '70vh' }}>
 			{messages?.map((message: UIMessage, index: number) => {
 				const isUserMessage = message.role === 'user';
-				const messageTextPart = message.parts.find((part) => part.type === 'text');
+				const messageTextParts = message.parts.filter((part) => part.type === 'text');
+			const messageTextPart = messageTextParts.length > 0
+				? { type: 'text' as const, text: messageTextParts.map((p) => p.text).join('') }
+				: undefined;
 				const messageReasoningPart = [...message.parts].reverse().find((part) =>
 					part.type === 'reasoning' && part.text && getMessageReasoningPartTextTitle(part.text)
 				);

src/components/Completion.tsx

@@ -14,6 +14,7 @@ const MessagesContainer = () => {
 		hasFiles,
 		hasImages,
 	} = useChatContext();
+	console.log('messages', messages);
 
 	const hasAttachments = hasFiles || hasImages;
 

src/components/MessagesContainer.tsx

@@ -16,7 +16,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -35,7 +35,8 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "out/types/**/*.ts",
-    "export/types/**/*.ts"
+    "export/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"