Apr 27 • AI Agent SaaS Challenge
Need help !!. Stuck very badly at Open AI API integration in Day 4 of youtube saas AI agent.
Hi, I am stuck very badly at Open AI API integration in Day 4 of youtube saas AI agent video. Can anyone help me out please.
My files are as below. Any mistakes I have done. ?
AiAgentChat.tsx
'use client'
import React from 'react'
import { useChat } from '@ai-sdk/react'
import { Button } from '../../components/ui/button';
function AiAgentChat({ videoId }: { videoId: string }) {
const { messages, input, handleInputChange, handleSubmit } = useChat({
maxSteps: 5,
body: {
videoId,
}
})
return (
<div className='flex flex-col h-full'>
<div className='hidden lg:block px-4 pb-3 border-b border-gray-100'>
<h2 className='text-lg font-semibold text-gray-800'>AI Agent</h2>
</div>
{/* Messages */}
<div className='flex-1 overflow-y-auto px-4 py-4'>
<div className='space-y-6'>
{messages.length === 0 && (
<div className='flex items-center justify-center h-full min-h-[200px]'>
<div className='text-center text-gray-500 space-y-2'>
<h3 className='text-lg font-medium text-gray-700'>Welcome to AI Agent Chat</h3>
<p className='text-sm'>Ask me anything about the video!</p>
</div>
</div>
)}
{messages.map((message) => (
<div key={message.id} >
<p>{message.content}</p>
</div>
))}
</div>
</div>
{/* Input */}
<div className='border-t border-gray-100 p-4 bg-white' >
<div className='space-y-3'>
<form onSubmit={handleSubmit} className='flex gap-2'>
<input
className='flex-1 px-4 py-2 text-sm border border-gray-200
rounded-full focus:outline-none focus:ring-2
focus:ring-blue-500 focus:border-transparent'
type='text'
placeholder='Enter a question ...'
onChange={handleInputChange}
value={input}
/>
<Button type='submit' className='px-4 py-2 bg-blue-500 text-white text-sm rounded-full hover:bg-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed'> Send</Button>
</form>
</div>
</div>
</div>
)
}
export default AiAgentChat
route.ts
import { createOpenAI } from "@ai-sdk/openai";
import { streamText } from "ai"
const openai = createOpenAI({
apiKey: process.env.OPENAI_API_KEY
});
const model = openai("gpt-3.5-turbo");
export async function POST(req: Request) {
const { messages, videoId } = await req.json();
const result = streamText({
model,
messages,
});
return result.toDataStreamResponse();
}
And I have the OPEN AI API KEY in my env.local file
Am I missing anything ?
0
9 comments
Need help !!. Stuck very badly at Open AI API integration in Day 4 of youtube saas AI agent.
skool.com/universityofcode
You'll get Exclusive Lessons & Content, Badass Community Support & More here to elevate as a Dev!
Leaderboard (30-day)
1
+6
2
+4
3
+4
4
+2
5
+2
Powered by