# Nextjs Chatkit

> Integrate OpenAI ChatKit in Next.js 15 App Router with domain allowlist, authentication, and API connections. Use when building chat interfaces or ChatKit integration.

- Skill: `majiayu000/nextjs-chatkit` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/nextjs-chatkit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/nextjs-chatkit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/nextjs-chatkit

---


# Next.js ChatKit Integration

## Environment Setup
```env
NEXT_PUBLIC_OPENAI_DOMAIN_KEY=your_domain_key
NEXT_PUBLIC_API_URL=http://localhost:8000
```

## Chat Page (app/chat/page.tsx)
```typescript
'use client';

import { ChatKit } from '@openai/chatkit';
import { useAuth } from '@/lib/auth';

export default function ChatPage() {
  const { user, token } = useAuth();

  const handleMessage = async (message: string, conversationId?: number) => {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/api/${user.id}/chat`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify({ conversation_id: conversationId, message }),
      }
    );
    const data = await response.json();
    return data.response;
  };

  return (
    <ChatKit
      domainKey={process.env.NEXT_PUBLIC_OPENAI_DOMAIN_KEY!}
      onMessage={handleMessage}
      placeholder="Ask me to manage your tasks..."
    />
  );
}
```

## Domain Allowlist Setup
1. Deploy frontend to get URL (e.g., https://app.vercel.app)
2. Add domain at: https://platform.openai.com/settings/organization/security/domain-allowlist
3. Copy generated domain key
4. Set NEXT_PUBLIC_OPENAI_DOMAIN_KEY in Vercel env vars