AI Chatbot UI A polished floating chat experience for Bubble apps. The element handles the UI while your Bubble workflows, API Connector, or backend handle the AI response.

Quick setup

1. Place AI Chatbot on the page once.
   
2. Set the chat title, assistant name, welcome message, accent colour, launcher label, footer text, and position.
   
3. Create a workflow for the event When AI Chatbot's message_sent is triggered.
   
4. Use AI Chatbot's last_user_message as the message you send to your AI/API.
   
5. When your API returns a response, run Add assistant message and pass in the returned text.
   

How the conversation works

• A visitor sends a message.
  
• The plugin publishes last_user_message, sets Chat is loading to yes, and triggers message_sent.
  
• Your Bubble workflow calls OpenAI, Claude, Gemini, a Supabase Edge Function, or your own backend.
  
• Your workflow runs Add assistant message with the final reply.
  

Available actions

• Add assistant message — adds the AI reply and stops the loading state.
  
• Set loading — manually show or hide the thinking state.
  
• Show error — displays an error message and stops loading.
  
• Open chat / Close chat — control the panel with workflows.
  
• Clear conversation — removes all messages and resets published conversation data.
  

Useful states

• Last user message
  
• Last assistant message
  
• Conversation JSON
  
• Chat is open
  
• Chat is loading
  
• Message count
  
• Error message
  

Tip
Keep AI API keys on the server side. Use Bubble's API Connector, backend workflows, or a secure proxy such as a Supabase Edge Function rather than putting private keys in the page.