Embeddable AI Chat Component

1. Install Dependencies

npm install ai @ai-sdk/react @ai-sdk/openai

2. Set Up API Route

Create an API route at app/api/chat/route.ts:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages, systemPrompt } = await req.json();
  
  const result = streamText({
    model: openai('gpt-4o'),
    system: systemPrompt || 'You are a helpful assistant.',
    messages,
  });
  
  return result.toDataStreamResponse();
}

3. Add Your OpenAI API Key

Add your OpenAI API key to your environment variables:

OPENAI_API_KEY=your_api_key_here

4. Import and Use the Component

Import the EmbeddableChat component and use it in your application:

import { EmbeddableChat } from '@/components/embeddable-chat';

export default function MyPage() {
  return (
    <div>
      <h1>My Website</h1>
      <p>Content goes here...</p>
      
      <EmbeddableChat
        systemPrompt="You are a helpful customer service agent."
        welcomeMessage="Hello! How can I help you today?"
        themeColor="#0070f3"
      />
    </div>
  );
}