How to build AI-powered suggestions in Bubble

Go to Plugins → API Connector → Add another API. Name it 'OpenAI'. Set Authentication to Private key in header. Add a shared header: Authorization = Bearer [your_api_key] (check Private). Add another shared header: Content-Type = application/json. Create a call named 'Get Suggestions' with method POST, URL: https://api.openai.com/v1/chat/completions. Set Use as to Action. Add the request body with model, messages array, and temperature parameters. The messages array should include a system message defining the AI's role and a user message containing the context and request.

1{
2  "model": "gpt-4o",
3  "messages": [
4    {
5      "role": "system",
6      "content": "You are a helpful product recommendation assistant. Suggest 3 items based on the user's preferences. Return JSON array with name, reason, and score fields."
7    },
8    {
9      "role": "user",
10      "content": "<user_context_parameter>"
11    }
12  ],
13  "temperature": 0.7,
14  "max_tokens": 500
15}

Create a workflow that assembles user context before calling the API. Gather relevant data: the user's past purchases, viewed items, saved preferences, or browsing history. Construct a context string like: 'User preferences: [category interests]. Recent purchases: [last 5 items]. Looking for: [current search or page context].' Pass this as the user_context_parameter to the API call. The richer the context, the more relevant the suggestions.

When the API responds, parse the AI's response text. If you instructed the AI to return JSON, extract the structured data. Display suggestions in a visually appealing card layout — each card showing the suggestion name, the AI's reasoning, and a relevance score. Add a Refresh Suggestions button that calls the API again with updated context. Show a loading indicator while waiting for the API response using a custom state 'is_loading' on the suggestions group.

Create a Suggestion Data Type with fields: user (User), context_hash (text — a hash of the context string), suggestions_json (text), created_date (date). Before calling the API, search for an existing Suggestion where user = Current User and context_hash matches and created_date is within the last 24 hours. If found, display the cached result. If not, call the API and save the response as a new Suggestion record. This dramatically reduces API costs for users who revisit the same context.

Add thumbs up and thumbs down buttons on each suggestion card. Store feedback in a SuggestionFeedback Data Type with fields: suggestion (Suggestion), user (User), item_index (number), is_positive (yes/no). Include this feedback history in future prompts: 'User previously liked: [positive items]. User previously disliked: [negative items].' This creates a feedback loop that improves suggestion relevance over time.