🤖 OpenAI API in No-Code
Integrate AI capabilities vào no-code apps của bạn.
OpenAI API Basics
What You Need
Text
11. OpenAI account (platform.openai.com)22. API Key (Settings → API Keys)33. Credits/payment method44. API endpoint knowledgeAPI Endpoint
Text
1URL: https://api.openai.com/v1/chat/completions2 3Method: POST4 5Headers:6- Authorization: Bearer sk-your-api-key7- Content-Type: application/json8 9Body:10{11 "model": "gpt-4o-mini",12 "messages": [13 {"role": "system", "content": "You are helpful"},14 {"role": "user", "content": "Hello!"}15 ],16 "max_tokens": 50017}Bubble + OpenAI
Method 1: API Connector
Text
11. Plugins → API Connector22. Add new API:3 - Name: OpenAI4 - Authentication: Private key in header5 - Key name: Authorization6 - Key value: Bearer sk-...7 83. Add API Call:9 - Name: Chat Completion10 - Method: POST11 - URL: https://api.openai.com/v1/chat/completionsBody Setup
JSON
1{2 "model": "gpt-4o-mini",3 "messages": [4 {5 "role": "system", 6 "content": "<system_prompt>"7 },8 {9 "role": "user",10 "content": "<user_message>"11 }12 ],13 "max_tokens": <max_tokens>14}Dynamic values: Use <parameter_name> syntax
Initialize Call
Text
11. Click "Initialize call"22. Enter test values33. Bubble detects response structure44. Save APIUse in Workflow
Text
1Workflow:2When: Button clicked3Action: OpenAI - Chat Completion4 - system_prompt: "You are a helpful assistant"5 - user_message: Input's value6 - max_tokens: 5007 8Then: Display result in Text element9 - Text: Result of step 1's choices:first item's message contentMethod 2: Plugins
Text
1Pre-built plugins (easier):2- "OpenAI GPT" plugin3- "AI Text Generator"4 5Install → Configure API key → Use actionsGlide + OpenAI
Via Make/Zapier
Text
1Glide cannot call APIs directly.2Use Make (Integromat) as middleware:3 4Glide → Make Webhook → OpenAI → Return to GlideMake Setup
Text
11. Create Make scenario22. Webhook trigger (Custom webhook)33. Copy webhook URL44. Add OpenAI module:5 - Create a Completion6 - Model: gpt-4o-mini7 - Prompt: {{data from webhook}}85. Webhook Response module96. Return AI responseGlide Action
Text
11. Button action → Call API22. URL: Make webhook URL33. Method: POST44. Body: {"prompt": column value}55. Save response to columnVia Glide AI Column
Text
1Glide has built-in AI column:21. Add column → AI32. Configure:4 - Input: Product Description5 - Task: "Summarize this product in 1 sentence"63. AI auto-generates for each rowFlutterFlow + OpenAI
API Call Setup
Text
11. API Calls tab22. Add API Call:3 - Name: OpenAI Chat4 - Method: POST5 - URL: https://api.openai.com/v1/chat/completions6 73. Headers:8 - Authorization: Bearer [API_KEY]9 - Content-Type: application/json10 114. Body (JSON):12 {13 "model": "gpt-4o-mini",14 "messages": [15 {"role": "user", "content": "[user_input]"}16 ]17 }18 195. Variables:20 - user_input (String)Response Handling
Text
11. Test API call22. Define response schema:3 - choices[0].message.content4 53. Use in widget:6 - Text widget7 - Value: API response → contentAction Flow
Text
1Button pressed:21. Set loading state = true32. Call OpenAI API4 - user_input: TextField value53. Store response in Page State64. Set loading state = false75. Display responseBest Practices
Security
API Key Security
NEVER expose API key in frontend!
Safe methods:
- Bubble: Private key in header (server-side)
- Glide: Use Make webhook (key in Make)
- FlutterFlow: Use Firebase Functions
Unsafe:
- Hardcoded in client code
- Visible in browser network tab
Cost Control
Text
11. Set max_tokens limit22. Use gpt-4o-mini (cheaper)33. Cache responses when possible44. Rate limit user requests55. Monitor usage dashboardError Handling
Text
1Handle cases:2- API timeout3- Invalid response4- Rate limit exceeded5- Insufficient credits6 7UI feedback:8- Loading states9- Error messages10- Retry optionsExample: AI Writer in Bubble
Build Flow
Text
1Page elements:2- Input (topic)3- Dropdown (tone: formal/casual)4- Button (Generate)5- Text (result)6- Loading indicator7 8Workflow:91. Button clicked102. Show loading113. Call OpenAI API:12 - system: "Write in {tone} tone"13 - user: "Write about {topic}"144. Hide loading155. Display resultPrompt Template
Text
1System: "You are a professional content writer. 2Write in {tone} tone. Be concise and engaging."3 4User: "Write a short paragraph about: {topic}"Comparison
| Platform | API Method | Difficulty | Best For |
|---|---|---|---|
| Bubble | Direct API | Medium | Full control |
| Glide | Via Make | Easy | Simple apps |
| FlutterFlow | Direct API | Medium | Mobile apps |
Bài Tập
Practice
- Get OpenAI API key
- Choose your platform
- Build simple AI text generator:
- Input field
- Generate button
- Display result
- Handle loading states
Tiếp theo: Bài 6 - Building AI Features
