Lý thuyết
35 phút
Bài 5/15

OpenAI API in No-Code

Kết nối OpenAI API với no-code platforms - Bubble, Glide, FlutterFlow

🤖 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 method
44. API endpoint knowledge

API Endpoint

Text
1URL: https://api.openai.com/v1/chat/completions
2
3Method: POST
4
5Headers:
6- Authorization: Bearer sk-your-api-key
7- Content-Type: application/json
8
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": 500
17}

Bubble + OpenAI

Method 1: API Connector

Text
11. Plugins → API Connector
22. Add new API:
3 - Name: OpenAI
4 - Authentication: Private key in header
5 - Key name: Authorization
6 - Key value: Bearer sk-...
7
83. Add API Call:
9 - Name: Chat Completion
10 - Method: POST
11 - URL: https://api.openai.com/v1/chat/completions

Body 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 values
33. Bubble detects response structure
44. Save API

Use in Workflow

Text
1Workflow:
2When: Button clicked
3Action: OpenAI - Chat Completion
4 - system_prompt: "You are a helpful assistant"
5 - user_message: Input's value
6 - max_tokens: 500
7
8Then: Display result in Text element
9 - Text: Result of step 1's choices:first item's message content

Method 2: Plugins

Text
1Pre-built plugins (easier):
2- "OpenAI GPT" plugin
3- "AI Text Generator"
4
5Install → Configure API key → Use actions

Glide + OpenAI

Via Make/Zapier

Text
1Glide cannot call APIs directly.
2Use Make (Integromat) as middleware:
3
4Glide → Make Webhook → OpenAI → Return to Glide

Make Setup

Text
11. Create Make scenario
22. Webhook trigger (Custom webhook)
33. Copy webhook URL
44. Add OpenAI module:
5 - Create a Completion
6 - Model: gpt-4o-mini
7 - Prompt: {{data from webhook}}
85. Webhook Response module
96. Return AI response

Glide Action

Text
11. Button action → Call API
22. URL: Make webhook URL
33. Method: POST
44. Body: {"prompt": column value}
55. Save response to column

Via Glide AI Column

Text
1Glide has built-in AI column:
21. Add column → AI
32. Configure:
4 - Input: Product Description
5 - Task: "Summarize this product in 1 sentence"
63. AI auto-generates for each row

FlutterFlow + OpenAI

API Call Setup

Text
11. API Calls tab
22. Add API Call:
3 - Name: OpenAI Chat
4 - Method: POST
5 - URL: https://api.openai.com/v1/chat/completions
6
73. Headers:
8 - Authorization: Bearer [API_KEY]
9 - Content-Type: application/json
10
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 call
22. Define response schema:
3 - choices[0].message.content
4
53. Use in widget:
6 - Text widget
7 - Value: API response → content

Action Flow

Text
1Button pressed:
21. Set loading state = true
32. Call OpenAI API
4 - user_input: TextField value
53. Store response in Page State
64. Set loading state = false
75. Display response

Best 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 limit
22. Use gpt-4o-mini (cheaper)
33. Cache responses when possible
44. Rate limit user requests
55. Monitor usage dashboard

Error Handling

Text
1Handle cases:
2- API timeout
3- Invalid response
4- Rate limit exceeded
5- Insufficient credits
6
7UI feedback:
8- Loading states
9- Error messages
10- Retry options

Example: 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 indicator
7
8Workflow:
91. Button clicked
102. Show loading
113. Call OpenAI API:
12 - system: "Write in {tone} tone"
13 - user: "Write about {topic}"
144. Hide loading
155. Display result

Prompt 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

PlatformAPI MethodDifficultyBest For
BubbleDirect APIMediumFull control
GlideVia MakeEasySimple apps
FlutterFlowDirect APIMediumMobile apps

Bài Tập

Practice
  1. Get OpenAI API key
  2. Choose your platform
  3. Build simple AI text generator:
    • Input field
    • Generate button
    • Display result
  4. Handle loading states

Tiếp theo: Bài 6 - Building AI Features