How to Use Claude API in Bubble.io
Anthropic’s Claude is a powerful alternative to GPT — particularly strong at following complex instructions, analysing long documents, and producing nuanced writing. This guide covers the exact Bubble.io setup.
When to Choose Claude Over GPT
Both Claude and GPT are excellent. The choice depends on your specific use case.
| Use Case | Claude | GPT-4o |
|---|---|---|
| Long document analysis (50k+ words) | ✔ Excellent — 200k context | Good — 128k context |
| Following complex multi-step instructions | ✔ Very strong | Strong |
| Creative, nuanced writing | ✔ Very strong | Strong |
| Structured JSON output | Good | ✔ json_object mode |
| Image analysis (vision) | Good (Claude 3 models) | ✔ GPT-4o native |
| Cost per token at scale | Competitive | Competitive |
| Ecosystem integrations | Growing | ✔ More plugins |
Configuring Claude in Bubble’s API Connector
Anthropic uses a different authentication header format than OpenAI. Follow these steps carefully.
In Plugins → API Connector → Add another API:
- API Name: Anthropic
- Authentication: Private key in header
- Key name: x-api-key
- Key value: YOUR_ANTHROPIC_API_KEY (mark as Private)
Add these shared headers for all calls:
Content-Type: application/json
anthropic-version: 2023-06-01📌 The anthropic-version header is required by all Claude API calls. Without it, requests return a 400 error. Always set it to 2023-06-01 unless Anthropic releases a new version you specifically want to target.
The Claude Message Format
Claude’s request structure differs from OpenAI in one important way: the system prompt is a top-level field, not part of the messages array.
{
"model": "claude-sonnet-4-5",
"max_tokens": 1024,
"system": "",
"messages": [
{ "role": "user", "content": "" }
]
} For multi-turn conversations, pass the full history in the messages array — alternating user and assistant turns:
"messages": [
{ "role": "user", "content": "What is your name?" },
{ "role": "assistant", "content": "I am Claude, an AI assistant." },
{ "role": "user", "content": "" }
] 📌 Claude does not accept a system role inside the messages array. If you pass one, the API returns an error. The system prompt must always be the top-level ‘system’ field.
Extracting the Reply from Claude’s Response
Claude’s response structure is slightly different from OpenAI’s.
After initialising the call, Bubble maps the response fields. The key field you need is:
content[0].textThis is equivalent to OpenAI choices[0].message.content. In your Bubble workflow, when storing Claude reply:
Result of API Call: content[0].text
// Also useful for tracking:
usage.input_tokens // Tokens in your prompt
usage.output_tokens // Tokens in Claude's response
model // Confirms the model version used
Where Claude Shines in Bubble.io Apps
Document Analysis
Upload a PDF or long text, pass it to Claude with analysis instructions. Claude’s 200k context window handles documents that would overflow GPT. Ideal for contract review, report summarisation, or research assistant features.
Long-Form Writing
Content generation features that produce articles, reports, or detailed proposals benefit from Claude’s strong instruction-following. Pass a detailed brief and Claude produces structured, well-organised output consistently.
Complex Reasoning
Multi-step problem solving, logical analysis, or tasks requiring the AI to hold many constraints simultaneously. Claude tends to follow complex rule sets more reliably than other models.
Building Something With Claude?
SA Solutions integrates both Claude and GPT into Bubble.io applications — choosing the right model for each specific use case in your product.
