AI Assistant Pro - Instructions
AI Assistant Pro lets you add an AI assistant to Bubble Web and Mobile apps. The plugin can send messages to your AI backend, receive assistant responses, expose conversation states, trigger workflow events, clear conversations, and load saved conversations back into the mobile component.
Important security recommendationDo not place your OpenAI API key directly inside client-side code. For production, use a secure backend/proxy such as Cloudflare Workers. Your Bubble app should call the plugin, the plugin should call your backend/proxy, and your backend/proxy should call OpenAI using a secret API key stored safely on the server side.
Basic Web setup1. Add the AI Assistant Pro element to the page.
2. Set Initial prompt with the assistant instructions.
3. Set Id conversation if you want to separate conversations by user, ticket, order, page, or database thing.
4. Create a workflow that calls Ask to AI.
5. Pass the user message into Content GPT.
6. Use Gpt response and Gpt roles to display or save messages.
7. Use Is generating to show loading UI or disable buttons.
8. Save Gpt response and Gpt roles in Bubble if you want persistence after page reload.
Basic Mobile setup1. Add the AI Assistant Pro mobile element to the screen.
2. Configure Title, Subtitle, Placeholder, Placeholder input, Thinking, Initial prompt and Id conversation.
3. The element renders a floating chat button.
4. When the user taps the button, the chat opens.
5. The user can send messages directly from the built-in mobile chat UI.
6. The plugin updates the same states used by Web: Gpt response, Gpt roles, Last response, Error, Is generating, Conversation ID and Message count.
7. Use Load conversation to restore saved mobile messages from your Bubble database.
FieldsInitial prompt Defines the assistant's starting behavior and instructions. Use it to describe the assistant role, tone, rules, FAQs, business context, formatting preferences and limitations. The Initial prompt is sent internally as a system message. It does not appear inside Gpt response and does not count in Message count.
Id conversation Identifies the current conversation. Use this to separate conversations by user, support ticket, product, order, lesson, page item or any other Bubble thing. This field does not save the conversation by itself, but it tells the plugin which conversation is active.
Conversation ID Alternative conversation identifier supported by the plugin code. Prefer Id conversation when possible, but Conversation ID is also recognized.
Title Mobile field. Controls the title displayed in the mobile chat header. Example: AI Assistant Pro.
Subtitle Mobile field. Controls the subtitle displayed under the title in the mobile chat header. Example: Chat with us.
Placeholder Mobile field. Text shown in the empty chat body before the conversation has messages. Example: Start a conversation with your AI assistant.
Placeholder input Mobile field. Text shown inside the message input. Example: Write something here.
Thinking Mobile field. Text shown while the assistant is generating a response. Example: Thinking...
Action fieldsContent GPT Main message field for Ask to AI. Pass the user's message here.
Message Alternative message field supported by the action. Use Content GPT as the main field when possible.
Prompt Alternative message field supported by the action. Use Content GPT as the main field when possible.
Content Alternative message field supported by the action. Use Content GPT as the main field when possible.
Gpt response Used by Load conversation. Pass a list of saved visible messages. This list should include user and assistant messages in the correct order.
Gpt roles Used by Load conversation. Pass a list of roles matching Gpt response. Each item should be user or assistant.
StatesGpt response List of visible conversation messages. It includes user and assistant messages. It does not include the Initial prompt.
Gpt roles List of roles matching Gpt response. Values are user or assistant. Use this state to know how each message should be displayed.
Last response Latest assistant response. Useful for previews, saving the latest answer, notifications or follow-up workflows.
Error Latest error message. If empty, there is no active error.
Is generating Boolean state. Yes while the assistant is generating a response. Use it to disable buttons, show loaders and avoid duplicate sends.
Conversation ID Current active conversation identifier. Save this value in your Bubble database if you want to restore the same conversation later.
Message count Number of visible messages in the conversation. The Initial prompt does not count.
ActionsAsk to AI Sends a user message to the assistant. The action adds the user message to the conversation, sends the full context to the AI backend, updates loading states, publishes the assistant response and triggers message events.
Recommended fields:
- Content GPT
- Id conversation
- Initial prompt
Triggered events may include:
- A message is sent
- A message is received
- An error occurred
Clear conversation Clears the active conversation. It empties Gpt response and Gpt roles, clears Last response and Error, sets Is generating to no, resets Message count to 0 and triggers Conversation cleared.
Recommended fields:
- Id conversation
- Initial prompt
Load conversation Mobile action. Restores a saved conversation into the mobile component. Use this when a user returns to the app and you want to reload messages saved in your Bubble database. Load conversation does not call the AI. It only rebuilds the conversation UI and internal context.
Recommended fields:
- Id conversation
- Gpt response
- Gpt roles
- Initial prompt
EventsA message is sent Triggered after the user message is added and the AI request starts.
A message is received Triggered when the assistant response arrives successfully.
An error occurred Triggered when the plugin cannot complete an operation or AI request. Read the Error state for details.
Conversation loaded Triggered when a conversation is initialized, selected or loaded into the plugin.
Conversation cleared Triggered after Clear conversation runs successfully.
Saving conversations in BubbleTo keep messages after the user leaves the page or mobile screen, save Gpt response and Gpt roles in your Bubble database. The plugin keeps messages in memory while the element is active, but real persistence should be handled by your Bubble database.
Recommended Bubble data type: AI Conversation
Recommended fields:
- Conversation ID: text
- Gpt response: list of texts
- Gpt roles: list of texts
- Last response: text
- Message count: number
- User: User
- Related thing: optional Bubble thing
When A message is received:
1. Search for the AI Conversation by Conversation ID.
2. Create it if it does not exist.
3. Save Gpt response.
4. Save Gpt roles.
5. Save Last response.
6. Save Message count.
When the user returns:
1. Search for the saved AI Conversation.
2. Call Load conversation.
3. Pass Id conversation.
4. Pass saved Gpt response.
5. Pass saved Gpt roles.
6. Pass Initial prompt if needed.
Recommended test promptYour name is AssistAI. You are an AI assistant in a test environment for the AI Assistant Pro plugin (No Credit Card Required). Respond clearly, helpfully, and in a friendly manner to any questions the user asks. Feel free to use emojis in your messages. Since this is a test environment, help the user freely explore the assistant's capabilities by explaining answers, creating examples, summarizing information, suggesting ideas, writing text, answering questions, and performing any requested conversational tasks. If the user asks where to get, install, or learn more about the plugin, provide this link:
https://bubble.io/plugin/1741523345214x816210466379661300. If the user asks how to add, configure, or use the plugin, explain that the documentation and usage instructions are available on the plugin's Bubble page:
https://bubble.io/plugin/1741523345214x816210466379661300. Maintain a professional, approachable, and helpful tone. Do not say that you are ChatGPT; simply introduce yourself as the plugin's AI assistant in a test environment.
Built on Bubble
