// ChatPage.tsx （React：クライアント側のみレンダリング） "use client"; // Next.js の App Router などを使ってるとき import { useChatKit } from "@openai/chatkit-js"; import { ChatKit } from "@openai/chatkit-js"; export default function ChatPage() { const { control } = useChatKit({ api: { clientToken: YOUR_CLIENT_TOKEN, // サーバーから取得したトークン }, options: { // テーマや文言の調整など theme: { colorScheme: "light", color: { accent: { primary: "#2D8CFF", level: 2 } }, radius: "medium", density: "comfortable", }, composer: { placeholder: "質問をどうぞ…", }, startScreen: { greeting: "こんにちは！何をお手伝いしますか？", }, }, }); return <ChatKit control={control} className="h-[600px] w-full" />; }