fix (ai): add tests and examples for openai responses (#6825)

## background

frontend testing was needed to reasoning for openai response model

## summary

- add frontend test pages for openai response reasoning
- added reasoning start delta end to ui-message-stream-parts

## tasks

- [x] test pages with useChat and DefaultChatTransport
- [x] raw streaming verification tests

## future work

* add any other providers if needed

Author: dancer

.changeset/four-gorillas-sell.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+fix (ai): add tests and examples for openai responses

examples/ai-core/src/stream-text/openai-responses-raw-chunks.ts

@@ -0,0 +1,74 @@
+import { openai } from '@ai-sdk/openai';
+import 'dotenv/config';
+
+async function main() {
+  const model = openai.responses('o3-mini');
+
+  console.log('=== OPENAI RESPONSES RAW STREAMING CHUNKS ===');
+
+  const { stream } = await model.doStream({
+    prompt: [
+      {
+        role: 'user',
+        content: [
+          { type: 'text', text: 'How many "r"s are in the word "strawberry"?' },
+        ],
+      },
+    ],
+    providerOptions: {
+      openai: {
+        reasoningEffort: 'low',
+        reasoningSummary: 'auto',
+      },
+    },
+    includeRawChunks: true,
+  });
+
+  let textChunkCount = 0;
+  let reasoningChunkCount = 0;
+  let rawChunkCount = 0;
+  let fullText = '';
+  let fullReasoning = '';
+
+  const reader = stream.getReader();
+
+  try {
+    while (true) {
+      const { done, value: chunk } = await reader.read();
+      if (done) break;
+
+      if (chunk.type === 'raw') {
+        rawChunkCount++;
+        console.log(
+          'Raw chunk',
+          rawChunkCount,
+          ':',
+          JSON.stringify(chunk.rawValue),
+        );
+      } else {
+        console.log('Processed chunk:', chunk.type, JSON.stringify(chunk));
+      }
+
+      if (chunk.type === 'text-delta') {
+        textChunkCount++;
+        fullText += chunk.delta;
+      }
+
+      if (chunk.type === 'reasoning-delta') {
+        reasoningChunkCount++;
+        fullReasoning += chunk.delta;
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+
+  console.log();
+  console.log('Text chunks:', textChunkCount);
+  console.log('Reasoning chunks:', reasoningChunkCount);
+  console.log('Raw chunks:', rawChunkCount);
+  console.log('Final text:', fullText);
+  console.log('Final reasoning:', fullReasoning);
+}
+
+main().catch(console.error);

examples/next-openai/app/api/chat-openai-responses/route.ts

@@ -0,0 +1,23 @@
+import { openai } from '@ai-sdk/openai';
+import { convertToModelMessages, streamText, UIMessage } from 'ai';
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const prompt = convertToModelMessages(messages);
+
+  const result = streamText({
+    model: openai.responses('o3-mini'),
+    prompt,
+    providerOptions: {
+      openai: {
+        reasoningEffort: 'low',
+        reasoningSummary: 'auto',
+      },
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import ChatInput from '@/component/chat-input';
+
+export default function TestOpenAIResponses() {
+  const { error, status, sendMessage, messages, regenerate, stop } = useChat({
+    transport: new DefaultChatTransport({ api: '/api/chat-openai-responses' }),
+  });
+
+  return (
+    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+      <h1 className="mb-4 text-xl font-bold">
+        OpenAI Responses Block-Based Streaming Test
+      </h1>
+
+      {messages.map(m => (
+        <div key={m.id} className="whitespace-pre-wrap mb-4">
+          <div className="font-semibold mb-1">
+            {m.role === 'user' ? 'User:' : 'AI:'}
+          </div>
+          {m.parts.map((part, index) => {
+            if (part.type === 'text') {
+              return <div key={index}>{part.text}</div>;
+            } else if (part.type === 'reasoning') {
+              return (
+                <div
+                  key={index}
+                  className="mt-2 p-2 bg-blue-50 border-l-2 border-blue-300 text-blue-800 text-sm"
+                >
+                  <strong>Reasoning:</strong> {part.text}
+                </div>
+              );
+            }
+          })}
+        </div>
+      ))}
+
+      {(status === 'submitted' || status === 'streaming') && (
+        <div className="mt-4 text-gray-500">
+          {status === 'submitted' && <div>Loading...</div>}
+          <button
+            type="button"
+            className="px-4 py-2 mt-4 text-blue-500 border border-blue-500 rounded-md"
+            onClick={stop}
+          >
+            Stop
+          </button>
+        </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 border border-blue-500 rounded-md"
+            onClick={() => regenerate()}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      <ChatInput status={status} onSubmit={text => sendMessage({ text })} />
+    </div>
+  );
+}

packages/ai/src/ui-message-stream/ui-message-stream-parts.ts

@@ -57,6 +57,22 @@ export const uiMessageStreamPartSchema = z.union([
     text: z.string(),
     providerMetadata: z.record(z.any()).optional(),
   }),
+  z.strictObject({
+    type: z.literal('reasoning-start'),
+    id: z.string(),
+    providerMetadata: z.record(z.any()).optional(),
+  }),
+  z.strictObject({
+    type: z.literal('reasoning-delta'),
+    id: z.string(),
+    delta: z.string(),
+    providerMetadata: z.record(z.any()).optional(),
+  }),
+  z.strictObject({
+    type: z.literal('reasoning-end'),
+    id: z.string(),
+    providerMetadata: z.record(z.any()).optional(),
+  }),
   z.strictObject({
     type: z.literal('reasoning-part-finish'),
   }),