# OpenAI ChatKit Integration Skill ## Description Integrate OpenAI ChatKit with your Todo application for conversational AI interface. Creates a seamless chat experience that connects to your AI backend and MCP tools for natural language todo management. ## When to Use This Skill - Creating conversational interface for todo management - Integrating with existing authentication system - Connecting frontend to AI backend services - Implementing real-time chat functionality - Building user-friendly AI interaction ## Prerequisites - OpenAI ChatKit domain allowlisted - Backend chat API endpoint available - Authentication system with JWT tokens - Proper CORS configuration for chat requests - MCP server and AI agent services running ## Implementation Steps ### 1. Install ChatKit Dependencies ```bash npm install @openai\/chat-components @openai\/chatkit-react # Or yarn equivalent ``` ### 2. Configure Domain Allowlist ```javascript \/\/ First, add your domain to OpenAI's allowlist: \/\/ Navigate to: https:\/\/platform.openai.com\/settings\/organization\/security\/domain-allowlist \/\/ Click "Add domain" and enter your frontend URL (e.g., https:\/\/your-app.vercel.app) \/\/ After adding the domain, OpenAI will provide a domain key ``` ### 3. Create Chat Component with Authentication ```typescript \/\/ frontend\/src\/components\/todo-chat.tsx 'use client'; import { Chat, type Message } from '@openai\/chat-components'; import { useAuth } from '..\/lib\/context\/auth'; \/\/ Your existing auth context import { useEffect, useState } from 'react'; interface TodoChatProps { userId: string; } export default function TodoChat({ userId }: TodoChatProps) { const { token } = useAuth(); \/\/ Get JWT token from existing auth const [isLoading, setIsLoading] = useState(true); useEffect(() => { setIsLoading(false); }, []); if (isLoading) { return

Loading chat...<\/div>; } const handleCreateMessage = async (input: string) => { \/\/ Include authentication token in the request const response = await fetch(`\/api\/${userId}\/chat`, { method: 'POST', headers: { 'Content-Type': 'application\/json', 'Authorization': `Bearer ${token}`, \/\/ Include JWT token }, body: JSON.stringify({ message: input, conversation_id: localStorage.getItem(`chat_conversation_${userId}`) || null }), }); if (!response.ok) { throw new Error('Failed to send message'); } return response.json(); }; return (

(

{name}<\/div>

              {JSON.stringify(args, null, 2)}
            <\/pre>
          <\/div>
        )}
      \/>
    <\/div>
  );
}
```

### 4. Create Chat Page with Authentication Protection
```typescript
\/\/ frontend\/src\/app\/chat\/page.tsx
'use client';

import { useAuth } from '..\/..\/lib\/context\/auth';
import { useRouter } from 'next\/navigation';
import { useEffect, useState } from 'react';
import TodoChat from '..\/..\/components\/todo-chat';
import { Spinner } from '..\/..\/components\/ui\/spinner';

export default function ChatPage() {
  const { user, isLoading: authLoading } = useAuth();
  const router = useRouter();
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    if (!authLoading && !user) {
      router.push('\/login');
    } else if (user) {
      setUserId(user.id.toString());
    }
  }, [user, authLoading, router]);

  if (authLoading) {
    return (
      
        
      <\/div>
    );
  }

  if (!user) {
    return null; \/\/ Redirect handled by useEffect
  }

  if (!userId) {
    return Error: User ID not available<\/div>;
  }

  return (
    
      Todo Chat Assistant<\/h1>
      
        Chat with your AI assistant to manage your todos naturally.
      <\/p>

      

      

        You can say things like:<\/p>
        

          "Add a task to buy groceries"<\/li>
          
"Show me all my pending tasks"<\/li>
          
"Mark task 3 as complete"<\/li>
          
"Delete the meeting task"<\/li>
        <\/ul>
      <\/div>
    <\/div>
  );
}
```

### 5. Update Environment Variables
```bash
# Add to frontend\/.env.local
NEXT_PUBLIC_OPENAI_DOMAIN_KEY=your_domain_key_from_openai
NEXT_PUBLIC_API_URL=http:\/\/localhost:8000  # Your backend URL
```

### 6. Create Chat API Client
```typescript
\/\/ frontend\/src\/lib\/api\/chat.ts
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http:\/\/localhost:8000';

interface ChatMessage {
  message: string;
  conversation_id?: number | null;
}

interface ChatResponse {
  conversation_id: number;
  response: string;
  tool_calls?: Array<{
    name: string;
    arguments: Record;
  }>;
}

class ChatAPI {
  async sendMessage(userId: string, messageData: ChatMessage, token: string): Promise {
    const response = await fetch(`${API_BASE_URL}\/api\/${userId}\/chat`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application\/json',
        'Authorization': `Bearer ${token}`,
      },
      body: JSON.stringify(messageData),
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.detail || 'Failed to send message');
    }

    return response.json();
  }
}

export const chatAPI = new ChatAPI();
```

### 7. Update Authentication Context to Support Chat
```typescript
\/\/ Update frontend\/src\/lib\/context\/auth.tsx to ensure token is available
\/\/ The existing auth context should already provide the token needed for the chat
```

## Key Implementation Notes

### Authentication Integration
- Pass JWT token from existing auth system to chat API calls
- Ensure user ID matches between authentication and chat requests
- Handle token expiration and refresh if needed

### Error Handling
- Display user-friendly error messages for chat failures
- Handle network errors gracefully
- Provide fallback messaging when AI is unavailable

### User Experience
- Show loading states during AI processing
- Display tool calls to help users understand AI actions
- Provide usage examples and tips

### Security
- Ensure all chat requests include proper authentication
- Validate user ID matches authenticated user
- Prevent unauthorized access to other users' conversations

## Testing Strategy
```javascript
\/\/ frontend\/src\/__tests__\/TodoChat.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library\/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import TodoChat from '..\/components\/todo-chat';

\/\/ Mock the Chat component and auth context
vi.mock('@openai\/chat-components', () => ({
  Chat: ({ onCreateMessage, initialMessages }: any) => (
    
      Chat Component<\/div>

chatkit_integration