# React (Frontend)
npm install @openai/chatkit-react

# Python (Backend avanzado)
pip install openai-chatkit

from openai import OpenAI

client = OpenAI()

def create_chat_session(user_id: str):
    """Genera un client_secret para iniciar una sesión de chat."""
    response = client.beta.realtime.sessions.create(
        model="gpt-4o-realtime-preview",
        voice="verse",
        modalities=["text"]
    )
    return response.client_secret

import { ChatKit, useChatKit } from "@openai/chatkit-react";

interface ChatContainerProps {
  clientSecret: string;
}

function ChatContainer({ clientSecret }: ChatContainerProps) {
  const { config, events } = useChatKit({
    clientSecret,
    onMessage: (message) => {
      console.log("New message:", message);
    },
    onError: (error) => {
      console.error("Chat error:", error);
    },
  });

  return <ChatKit config={config} events={events} className="h-full w-full" />;
}

export default ChatContainer;

import { ChatKit } from "@openai/chatkit-react";

function StreamingChat({ clientSecret }: { clientSecret: string }) {
  return (
    <ChatKit
      clientSecret={clientSecret}
      streamingEnabled={true}
      onStreamStart={() => console.log("Streaming started")}
      onStreamEnd={() => console.log("Streaming ended")}
    />
  );
}

// app/chat/page.tsx (Next.js App Router)
"use client";

import { useEffect, useState } from "react";
import { ChatKit } from "@openai/chatkit-react";

export default function ChatPage() {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function initChat() {
      try {
        // Obtener client_secret desde tu backend
        const response = await fetch("/api/chat/init", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        });
        const { client_secret } = await response.json();
        setClientSecret(client_secret);
      } catch (error) {
        console.error("Failed to init chat:", error);
      } finally {
        setLoading(false);
      }
    }
    initChat();
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        Loading...
      </div>
    );
  }

  if (!clientSecret) {
    return <div className="text-red-500">Failed to initialize chat</div>;
  }

  return (
    <div className="h-screen w-full">
      <ChatKit
        clientSecret={clientSecret}
        theme="dark"
        placeholder="Ask me anything..."
      />
    </div>
  );
}