Call Claude models from your WeWeb apps
WeWeb has a native Anthropic integration through its AI Gateway. Backend workflows in any WeWeb app can call Claude models directly, without installing a separate plugin or standing up your own AI backend.
- Call Claude models from a backend workflow API endpoint
- Generate text and structured data with the Text Generation action
- Stream Claude's reply to the interface for real-time, chat-style UIs
- Keep your Anthropic API key and prompts on the server, out of the browser
- Store a different Anthropic key per environment (Editor, Staging, Production)
- Track every Claude call, its model, and its workflow in AI Usage
- Feed WeWeb Tables, Supabase, Xano, Airtable, or any REST API into a Claude prompt
- Bind Claude's response to variables, text elements, or conditional logic
What WeWeb supports natively
WeWeb's AI Gateway plugs Anthropic's Claude models into backend workflows, covering provider setup, secured API keys, per-environment credentials, text generation, streaming, structured output, and usage tracking, all without a separate integration to install.
| Category |
Feature |
What it does |
| Plugin setup |
AI Gateway |
Adds Anthropic as a selectable provider for backend AI actions from Data & API → AI, no separate plugin install required. |
| Provider setup |
Anthropic provider |
Selects Anthropic in the Provider field of any AI action inside a backend workflow. |
| Security |
Per-environment API keys |
Stores your Anthropic API key under Data & API → AI → AI Providers, set separately for the Editor, Staging, and Production environments. |
| Security |
Server-side key storage |
Keeps the Anthropic API key and your prompts on WeWeb's backend, so neither reaches the browser or shows up in frontend network calls. |
| Model selection |
Model dropdown |
Lists the Claude models available once an Anthropic key is saved; the field shows "API key required" and stays empty until then. |
| Workflows |
Text Generation action |
Sends a prompt to a Claude model from a backend workflow and returns the reply to use elsewhere in the workflow or send to the interface. |
| Workflows |
Structured output |
Asks Claude to return an object, a list, or a choice from fixed options instead of plain text, so the next workflow action can use it directly. |
| Workflows |
Streaming responses |
Streams a Claude reply token by token to the interface, for chat UIs that display the answer as it's written. |
| Usage & cost |
AI Requests log |
Lists recent Claude calls with the model used and the workflow that triggered them, under Data & API → AI → AI Usage. |
| Usage & cost |
Cost handling |
Anthropic always runs on your own API key, so WeWeb does not bill these calls. Anthropic bills your account directly. |
| Frontend |
Response binding |
Stores a Claude response in a variable and binds it to text elements, collections, or conditional visibility in the WeWeb Editor. |
Why add Claude to your WeWeb app
Anthropic provides the model. WeWeb provides the backend workflow, UI, and control that turn a Claude response into a product feature inside the app you're building.
WeWeb generates a standard Vue.js application that you can export and self-host at any time, so a Claude-powered feature never becomes locked to a single platform. Because WeWeb's backend is modular, a Claude prompt in the same workflow can read from WeWeb Tables, Supabase, Xano, Airtable, or a REST API and write the result back to any of them, with no data replication or custom glue code. Visual backend workflows keep the prompt, the API key, and the branching logic server-side, while the WeWeb Editor handles how the response looks and behaves on screen.
Perfect for:
- Long-document summarization and analysis tools built on Claude's context window
- Internal tools that draft, review, or classify reports, tickets, and contracts
- Customer-facing chat assistants grounded in your own product data
- Content review and moderation workflows that run before data is saved
- Coding and research copilots embedded inside an internal admin panel
Integrating Anthropic with WeWeb
- Get an Anthropic API key from the Anthropic Console
- Enable the WeWeb backend if it isn't already active. Data & API → AI only appears once the backend is set up
- Add your key: go to Data & API → AI → AI Providers, select an environment (Editor, Staging, or Production), and paste and save the Anthropic API key
- Add an AI action: open a backend workflow's API Endpoints, add an action from the AI category, set Provider to Anthropic, and pick a Claude model
- Call the endpoint from an interface workflow and bind the response to a variable, a text element, or the next step in your logic
Learn more about WeWeb's AI Gateway
Best practices
- Use a separate Anthropic key per environment, so staging traffic doesn't consume your production rate limit or budget
- Check AI Usage regularly. Since Anthropic calls bill straight to your Anthropic account, WeWeb's usage log is your only in-app view of that spend
- Keep prompts and system instructions inside backend workflows, not frontend workflows, so they never reach the browser
- Use structured output when a workflow needs to write Claude's reply straight into a table or a conditional, instead of parsing plain text
FAQs
1. Does WeWeb integrate with Anthropic's Claude models?
Yes. WeWeb's AI Gateway lists Anthropic alongside Google Gemini and OpenAI as a provider for backend AI actions. No separate plugin install is needed, you add an Anthropic API key and start calling Claude models from backend workflows.
2. Is this the same as using Claude Code or WeWeb MCP to build my WeWeb app?
No. This page covers the opposite direction: an app you already build visually in WeWeb calling Claude's API from a backend workflow, for example to summarize a ticket or draft a reply. WeWeb MCP is a separate feature that connects an external coding agent (Claude Code, Cursor, ChatGPT, and others) to build the WeWeb app itself, inside the editor. You can use WeWeb MCP to build the app and this Anthropic integration to power a feature inside it, but neither requires the other.
3. How do I connect Claude to a WeWeb app?
Add your Anthropic API key under Data & API → AI → AI Providers, then add a Text Generation, Image Generation, or Embed Text action to a backend workflow and set its Provider to Anthropic. See the setup steps above.
4. Does WeWeb support streaming Claude responses?
Yes. The Text Generation action can stream a Claude reply to the interface token by token, which is what makes chat-style UIs feel responsive instead of waiting for the full response.
5. Is my Anthropic API key exposed to the browser?
No. AI actions run on WeWeb's backend, so the Anthropic API key and the prompt text stay server-side. Nothing appears in the frontend's network requests.
6. Can I use Claude alongside OpenAI or Gemini in the same app?
Yes. The Provider field is set per action, not per project, so one backend workflow can call Claude while another calls GPT or Gemini. This is useful for routing simple tasks to a cheaper model and harder ones to Claude.
7. Does WeWeb charge for Claude usage?
No. Anthropic always runs on your own API key rather than WeWeb Cloud, so Anthropic calls are not billed by WeWeb. Anthropic bills your account directly, and WeWeb's AI Requests log still shows which workflows made the calls.
8. What are the limits of WeWeb's native Anthropic integration?
The AI Gateway's Text Generation action covers Claude chat and text completions, including structured output and streaming. Anthropic does not publish an image-generation or embeddings API, so the Image Generation and Embed Text actions work with Google Gemini or OpenAI, not Claude. The Data & API → AI tab also requires the WeWeb backend to be enabled first.
9. Can I export my WeWeb app and keep using Claude?
Yes. WeWeb exports a standard Vue.js application, and the backend workflows that call Anthropic export and self-host with it, so a Claude-powered feature isn't tied to staying on WeWeb's platform.
Add Claude to your next WeWeb app
Add your Anthropic API key, wire a Text Generation action into a backend workflow in the app you're building, and Claude is ready to power your next feature. Get started with WeWeb for free.
