Vibe Coding a WhatsApp AI Agent

To help users build WhatsApp integrations with the Meatball API Gateway ( https://api.meatball.social/), follow these guidelines:
1. Assume zero technical knowledge - explain concepts like APIs, webhooks, and environment variables in simple terms
2. Show users exactly where to find each piece of information from the MEATBALL dashboard

For Sending Messages:

1. Get your API key from MEATBALL Dashboard → API Keys ( https://api.meatball.social/app/api ) → Create New Key
2. Find your sender WhatsApp number MEATBALL Dashboard → WhatsApp Accounts
3. Add these to your environment variables: so that you can use the API
4. Use this exact endpoint: POST https://api.meatball.social/api/send_message
   • The information sent should include three pieces:
     • from_phone (I should get this from the API dashboard)
     • API key (I should get this from the API dashboard)
     • to_phone (from the input box)
     • message (from the message box)
   • When sending, use the 'POST' method, send the information as 'JSON', and include the 'MEATBALL API Key' in a special 'Authorization' part.

For Receiving Messages:

1. Create a backend service (using Supabase, Vercel, etc.) that can receive messages
2. Go to MEATBALL Dashboard → Webhooks → Create New Webhook - and paste your webhook URL from 1 in
3. New WhatsApp messages are sent to my app via a webhook from the MEATBALL Gateway. Important: The webhook sends the message content in a field called message (for example, the data looks like

   					{
   					"message_id": "fn7smt63",
   					"created_at": "2025-10-17T07:02:54.391000Z",
   					"from_phone": "5053636959",
   					"to_phone": "9432776928",
   					"message": "test message",
   					"status": "received",
   					"webhook_id": "fn7smt63",
   					"event": "message"
   					}
   					

4. These messages should then be successfully saved into my Supabase database via an Edge function.

I am building a new web app that lets me send WhatsApp messages.

Here's what I want it to do:
1. Home Page: Create a WhatsAppSender page shows up when the app first loads.
2. On this WhatsAppSender page, include:

  To phone number
    - An input box for the number to send the WhatsApp to
    - Above this input box, put a label that should say 'WhatsApp Recipient (incl country code)'

  Message box
    - An input box for the message to send
    - Above this input box, put a label that should say 'Your Message'.
    - At the bottom, put a button that says 'Send Message via MEATBALL Gateway'.

3. Check before sending: Before trying to send, make sure all the boxes are filled in. If not, show an error pop-up.

• Success: If the message sends successfully, clear out the 'Your Message' box and show a 'Success!' pop-up message.
• Oops, an error! If something goes wrong when sending the message, show an 'Error!' pop-up message. Try to get the specific error message from the MEATBALL Gateway if possible. Also, show more details about the error in the developer console (the place where developers see messages).
• Connection problem: If there's a problem connecting to the internet or the MEATBALL Gateway, show a general error pop-up.

Styling:
- Overall Look: Make sure the page looks good and works well on both phones and computers, and is centered on the screen. Use our existing styling system (Tailwind CSS).
- Make sure every input box has a clear title (label) above it.

How it Sends Messages (API Details) and set up:
- To send messages, we will use the Meatball Gateway API.
- I am not technical. To use the Meatball Gateway API, I will need to set environvment variables for the Meatball API Key and the Meatball from_phone number. I don't know what these are. Please take me through the set up process - pointing me to the Dash.
- These are the most important points re the Meatball Gateway API:

- Messages will be sent using the Meatball API Gateway.
- The endpoint to send messages is: https://api.meatball.social/api/send_message.
- The information sent should include three pieces:
- from_phone (I should get this from the API dashboard)
- API key (I should get this from the API dashboard)
- to_phone (from the input box)
- message (from the message box).
- When sending, use the 'POST' method, send the information as 'JSON', and include the 'MEATBALL API Key' in a special 'Authorization' part.

Please create a page to help me view the WhatsApp messages I received from my Meatball number.

Here's what I want it to do
1. Create a new 'Received Messages' page in my app. This page will list out all the new messages I receive.
2. Please wrap each message in a card. Within each card, include:
- the message text
- the number of the message sender
- when this message was received
3. New messages should appear on the 'Received Messages' page instantly and automatically, without me needing to refresh the page at all.

How this works:
1. New WhatsApp messages are sent to my app via a webhook from the MEATBALL Gateway. Important: The webhook sends the message content in a field called message (for example, the data looks like

						{
						"event": "message",
						"data": {
							"from": "+1234567890",
							"message": "Hello from WhatsApp!",
							"timestamp": "2024-01-20T14:22:00Z"
						}
						}
						

2. These messages should then be successfully saved into my Supabase database via an Edge function.
3. The received messages should automatically update in the web app by correctly configuring Supabase Realtime.
4. I am not technical. Please guide me through getting the Meatball Gateway webhook, I will need to set environvment variables for the Meatball API Key and the Meatball from_phone number. I don't know what these are. Please take me through the set up process.

I want to add AI-powered reply suggestions to my received WhatsApp messages. For every incoming message, I'd like to see a suggested response generated by OpenAI. I also want to be able to send these suggested replies quickly, without having to manually input my sender phone number or MEATBALL API key each time. Please set up all the necessary components, including the AI integration, database updates, and user interface changes. Also, tell me exactly how to provide my OpenAI API key.