Comments (1)
I've tried this on the latest version of the AI SDK and it works as expected.
// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { convertToCoreMessages, streamObject } from 'ai';
import { z } from 'zod';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
export async function POST(req: Request) {
// Extract the `messages` from the body of the request
const { messages } = await req.json();
console.log(messages);
// Call the language model
const result = await streamObject({
model: openai('gpt-4o'),
schema: z.object({
characters: z.array(
z.object({
name: z.string(),
class: z
.string()
.describe('Character class, e.g. warrior, mage, or thief.'),
description: z.string(),
}),
),
}),
messages: convertToCoreMessages(messages),
});
// Respond with the stream
return result.toTextStreamResponse();
}
// app/page.tsx
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
const {
error,
input,
isLoading,
handleInputChange,
handleSubmit,
messages,
reload,
stop,
} = useChat({
streamProtocol: 'text',
keepLastMessageOnError: true,
onFinish(message, { usage, finishReason }) {
console.log('Usage', usage);
console.log('FinishReason', finishReason);
},
});
return (
<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
{messages.map(m => (
<div key={m.id} className="whitespace-pre-wrap">
{m.role === 'user' ? 'User: ' : 'AI: '}
{m.content}
</div>
))}
{isLoading && (
<div className="mt-4 text-gray-500">
<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={() => reload()}
>
Retry
</button>
</div>
)}
<form onSubmit={handleSubmit}>
<input
className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
value={input}
placeholder="Say something..."
onChange={handleInputChange}
disabled={isLoading || error != null}
/>
</form>
</div>
);
}
That being said, you need to parse the json in the assistant messages yourself.
from ai.
Related Issues (20)
- Text response is lost when `streamUI` calls a tool HOT 1
- Build error with v3.3.1 HOT 14
- Add Structured Outputs (OpenAI) HOT 18
- Support toDataStreamResponse from streamObject HOT 1
- Add toolCallId and toolName to stream part of type "error" HOT 1
- Make VercelAI SDK tracing fully compatible with OTEL GenAI semantic conventions
- structuredOutput fails if schemas use `.optional()` or `.nullish()`, should be `.nullable()`. HOT 2
- Zod schema for CoreMessage
- Overloading error from Antrophic API doesn't seem to be handled HOT 4
- Edge Runtime: convertToCoreMessages() fails to process base64 image data, unlike in local development HOT 22
- Google Gemini AI: toolChoice doesn't work HOT 2
- AI State History Not Updating HOT 1
- feat: ability to define fallback model / provider
- feat: add exponential backoff to avoid rate limits HOT 1
- Add `onGeneration` hook and refactor `onFinish` in `useChat`
- AI_TypeValidationError error with streamText().toAIStream() HOT 5
- generateObject in Vercel SDK AI does not properly catch JSONParseError in Next.js HOT 3
- Errors when transpiling HOT 3
- Tool-use is incorrect when using Vercel AI SDK (OpenAI Provider) HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ai.