Backport: chore(examples/next-openai): ai-elements, update web search example (#9425)

This is an automated backport of #9423 to the release-v5.0 branch. --------- Co-authored-by: Lars Grammel <lars.grammel@gmail.com>

Author: vercel-ai-sdk[bot]

examples/next-openai/agent/openai-web-search-agent.ts

@@ -1,8 +1,8 @@
-import { openai } from '@ai-sdk/openai';
 import {
  Experimental_Agent as Agent,
  Experimental_InferAgentUIMessage as InferAgentUIMessage,
 } from 'ai';
+import { openai } from '@ai-sdk/openai';
 
 export const openaiWebSearchAgent = new Agent({
  model: openai('gpt-5-mini'),

examples/next-openai/app/anthropic-web-fetch/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import AnthropicWebFetchView from '@/component/anthropic-web-fetch-view';
-import ChatInput from '@/component/chat-input';
+import ChatInput from '@/components/chat-input';
+import AnthropicWebFetchView from '@/components/tool/anthropic-web-fetch-view';
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
 import { AnthropicWebFetchMessage } from '../api/anthropic-web-fetch/route';

examples/next-openai/app/anthropic-web-search/page.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import { AnthropicWebSearchMessage } from '@/app/api/anthropic-web-search/route';
+import ChatInput from '@/components/chat-input';
+import AnthropicWebSearchView from '@/components/tool/anthropic-web-search-view';
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
-import ChatInput from '@/component/chat-input';
-import { AnthropicWebSearchMessage } from '@/app/api/anthropic-web-search/route';
-import AnthropicWebSearchView from '@/component/anthropic-web-search-view';
 
 export default function TestAnthropicWebSearch() {
  const { status, sendMessage, messages } = useChat<AnthropicWebSearchMessage>({

examples/next-openai/app/bedrock/page.tsx

@@ -1,16 +1,16 @@
 'use client';
 
+import ChatInput from '@/components/chat-input';
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
-import ChatInput from '@/component/chat-input';
 
 export default function Chat() {
  const { error, status, sendMessage, messages, regenerate, stop } = useChat({
  transport: new DefaultChatTransport({ api: '/api/bedrock' }),
  });
 
  return (
- <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+ <div className="flex flex-col py-24 mx-auto w-full max-w-md stretch">
  {messages.map(m => (
  <div key={m.id} className="whitespace-pre-wrap">
  {m.role === 'user' ? 'User: ' : 'AI: '}
@@ -27,7 +27,7 @@ export default function Chat() {
  {status === 'submitted' && <div>Loading...</div>}
  <button
  type="button"
- className="px-4 py-2 mt-4 text-blue-500 border border-blue-500 rounded-md"
+ className="px-4 py-2 mt-4 text-blue-500 rounded-md border border-blue-500"
  onClick={stop}
  >
  Stop
@@ -40,7 +40,7 @@ export default function Chat() {
  <div className="text-red-500">An error occurred.</div>
  <button
  type="button"
- className="px-4 py-2 mt-4 text-blue-500 border border-blue-500 rounded-md"
+ className="px-4 py-2 mt-4 text-blue-500 rounded-md border border-blue-500"
  onClick={() => regenerate()}
  >
  Retry

examples/next-openai/app/chat-openai-web-search/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { OpenAIWebSearchMessage } from '@/agent/openai-web-search-agent';
+import { Response } from '@/components/ai-elements/response';
+import ChatInput from '@/components/chat-input';
+import { ReasoningView } from '@/components/reasoning-view';
+import SourcesView from '@/components/sources-view';
+import OpenAIWebSearchView from '@/components/tool/openai-web-search-view';
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+
+export default function TestOpenAIWebSearch() {
+ const { error, status, sendMessage, messages, regenerate } =
+ useChat<OpenAIWebSearchMessage>({
+ transport: new DefaultChatTransport({
+ api: '/api/chat-openai-web-search',
+ }),
+ });
+
+ return (
+ <div className="flex flex-col py-24 mx-auto w-full max-w-md stretch">
+ <h1 className="mb-4 text-xl font-bold">OpenAI Web Search Test</h1>
+
+ {messages.map(message => (
+ <div key={message.id} className="whitespace-pre-wrap">
+ {message.role === 'user' ? 'User: ' : 'AI: '}
+ {message.parts.map((part, index) => {
+ switch (part.type) {
+ case 'text': {
+ return <Response key={index}>{part.text}</Response>;
+ }
+ case 'reasoning': {
+ return <ReasoningView part={part} key={index} />;
+ }
+ case 'tool-web_search': {
+ return <OpenAIWebSearchView invocation={part} key={index} />;
+ }
+ }
+ })}
+
+ <SourcesView
+ sources={message.parts.filter(part => part.type === 'source-url')}
+ />
+ </div>
+ ))}
+
+ {error && (
+ <div className="mt-4">
+ <div className="text-red-500">An error occurred.</div>
+ <button
+ type="button"
+ className="px-4 py-2 mt-4 text-blue-500 rounded-md border border-blue-500"
+ onClick={() => regenerate()}
+ >
+ Retry
+ </button>
+ </div>
+ )}
+
+ <ChatInput status={status} onSubmit={text => sendMessage({ text })} />
+ </div>
+ );
+}

examples/next-openai/app/dynamic-tools/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import ChatInput from '@/component/chat-input';
+import ChatInput from '@/components/chat-input';
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
 import { ToolsMessage } from '../api/dynamic-tools/route';

examples/next-openai/app/globals.css

@@ -1,3 +1,70 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@source "../node_modules/streamdown/dist/index.js";
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+ --ring: 0 0% 3.9%;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ --radius: 0.5rem;
+ }
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+ --ring: 0 0% 83.1%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}

examples/next-openai/app/mcp/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import ChatInput from '@/component/chat-input';
+import ChatInput from '@/components/chat-input';
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
 

examples/next-openai/app/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useChat } from '@ai-sdk/react';
-import ChatInput from '@/component/chat-input';
+import ChatInput from '@/components/chat-input';
 
 export default function Chat() {
  const { error, status, sendMessage, messages, regenerate, stop } = useChat();

examples/next-openai/app/test-cohere/page.tsx

@@ -2,15 +2,15 @@
 
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
-import ChatInput from '@/component/chat-input';
+import ChatInput from '@/components/chat-input';
 
 export default function TestCohere() {
  const { error, status, sendMessage, messages, regenerate, stop } = useChat({
  transport: new DefaultChatTransport({ api: '/api/chat-cohere' }),
  });
 
  return (
- <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+ <div className="flex flex-col py-24 mx-auto w-full max-w-md stretch">
  <h1 className="mb-4 text-xl font-bold">
  Cohere Block-Based Streaming Test
  </h1>
@@ -31,7 +31,7 @@ export default function TestCohere() {
  {status === 'submitted' && <div>Loading...</div>}
  <button
  type="button"
- className="px-4 py-2 mt-4 text-blue-500 border border-blue-500 rounded-md"
+ className="px-4 py-2 mt-4 text-blue-500 rounded-md border border-blue-500"
  onClick={stop}
  >
  Stop
@@ -44,7 +44,7 @@ export default function TestCohere() {
  <div className="text-red-500">An error occurred.</div>
  <button
  type="button"
- className="px-4 py-2 mt-4 text-blue-500 border border-blue-500 rounded-md"
+ className="px-4 py-2 mt-4 text-blue-500 rounded-md border border-blue-500"
  onClick={() => regenerate()}
  >
  Retry