How to Add AI Features to Your Lovable App with OpenAI

OPENAI_API_KEY=sk-your-key-here

# Supabase Dashboard → Edge Functions → Secrets
# Name: OPENAI_API_KEY
# Value: sk-your-key-here

Create a Supabase Edge Function called 'ai-chat' that:
1. Accepts a 'messages' array in the request body
2. Calls the OpenAI Chat Completions API using fetch
3. Uses gpt-4o-mini model for speed and cost
4. Sets a system prompt: 'You are a helpful assistant for [your app description]'
5. Returns the assistant's response
6. Limits max_tokens to 500 to control costs
7. Has proper CORS headers

Create a chat component that:
1. Shows a message list with user and assistant bubbles
2. Has a text input with a send button at the bottom
3. Sends user messages to the ai-chat Edge Function
4. Shows a typing indicator while waiting for response
5. Scrolls to the latest message automatically
6. Stores conversation history in state
7. Has a 'Clear conversation' button

Update the ai-chat Edge Function and chat component to support streaming:
1. Set stream: true in the OpenAI API call
2. Return the response as a ReadableStream
3. In the frontend, read the stream chunk by chunk
4. Update the message as each token arrives
5. Show a blinking cursor at the end while streaming

Add rate limiting to the AI chat:
1. Track message count per user in the database
2. Free users: 10 messages per day
3. Pro users: unlimited
4. Show remaining messages count in the chat UI
5. Show an upgrade prompt when the limit is reached