# Connect services to your app

> Add accounts, saved data, AI responses, generated images and voice. Choose a service, connect it to your app and verify the feature in a native preview.

Canonical: https://www.rnblocks.dev/docs/connectors
Updated: 2026-10-01

Connect the service your feature needs, then test what your users will actually do. A saved connection is the starting point; a working sign-in, answer, illustration or voice is the result.

You can ask for a feature in Studio and use the connection request in the conversation, or open the connection controls yourself.

## Before you start

- An app open in your RNBlocks account.
- An account with the service you want to use, with permission to connect it.

## Choose by what your app needs

Section: https://www.rnblocks.dev/docs/connectors#choose

| Service | Start with | How you connect |
| --- | --- | --- |
| [Supabase](https://www.rnblocks.dev/docs/connectors/supabase) | User accounts and shared, saved app data | Authorize your Supabase account, select a project and review database setup |
| [OpenAI](https://www.rnblocks.dev/docs/connectors/openai) | A conversational assistant or text generation | OpenAI API key |
| [Anthropic / Claude](https://www.rnblocks.dev/docs/connectors/anthropic) | Writing, explanations and reasoning with Claude | Claude API key |
| [Groq](https://www.rnblocks.dev/docs/connectors/groq) | AI chat using a model available in your Groq account | Groq API key |
| [Replicate](https://www.rnblocks.dev/docs/connectors/replicate) | An image generated from a prompt | Replicate API token |
| [ElevenLabs](https://www.rnblocks.dev/docs/connectors/elevenlabs) | Spoken narration from text | ElevenLabs API key |

> **App services and publishing accounts are different**
> These connections power features inside your app. Expo, Apple and Google accounts belong to the [publishing setup](https://www.rnblocks.dev/docs/publishing).


## Describe the feature first

Section: https://www.rnblocks.dev/docs/connectors#request

For example: “Generate a cover illustration for each bedtime story using Replicate.” Include where the result should appear and whether people should be able to save it.

When Studio requests a connection, use its **Connect** button. You can also use **App options (+) → Connectors** for AI and voice providers. Supabase has its own **App options (+) → Supabase** entry.

### Figure: Connect the service your feature needs

Studio shows a request to add product photography, followed by Checked integrations and a Replicate card with its own logo and Connect Replicate button. The composer remains below the conversation; the desktop preview shows the phone loading state.

1. Describe the feature you want to add.
2. Read the service request, then choose Connect Replicate.
3. Complete the connection form and return to the same conversation.

Example: adding product photography to Bazario. Illustrated walkthrough.


## Check the feature, not just the badge

Section: https://www.rnblocks.dev/docs/connectors#verify

1. **Finish the requested change** — Return to the conversation after connecting. Let Studio add the feature, then read its result or any remaining setup request.

2. **Try it in the native preview** — Use the iOS or Android preview. Submit a short prompt, generate one image, play one narration, or save one record—whichever proves your feature works.

3. **Reopen and try a failure** — If your feature promises saved results, close and reopen the app to check them. Also test an empty input, a slow request and a recoverable failure. A successful first request does not prove persistence.

- [Preview and test your app](https://www.rnblocks.dev/docs/previewing-screens)

## Follow the connection screens

Section: https://www.rnblocks.dev/docs/connectors#setup-screens

Open App options (+), choose Connectors, then select a provider. This Replicate example shows the private token form and the saved connection. Each provider has its own logo and credential hint.

### Figure: Connect Replicate, step by step

App options (+) opens Connectors. Choose Replicate, enter its API Token privately and select Save. The saved view masks the value and shows Connected.

1. **App options** — The actual App options menu above the + button. It contains separate Supabase, Connectors and App memory actions.

2. **Choose a service** — The Connectors catalogue contains OpenAI, Anthropic, Groq, ElevenLabs and Replicate cards with their own logos.

3. **Add your key** — Replicate connector detail with its original logo, use cases, documentation link, private API Token field and Save button. The field is empty.

4. **Saved connection** — Illustrative saved Replicate connection. Connected appears beside its name, the saved value is masked, and Update and Disconnect controls are available. No credential is shown.

1. Open App options (+) → Connectors in the app you want to connect.
2. Choose Replicate in the catalogue, then enter your API Token in its private form and select Save.
3. Return to the conversation and test the feature. Connected means a credential is saved, not that a provider request has succeeded.

The actual connection screens. Empty form and illustrative saved state; no credential is shown.


## Costs and the information your app sends

Section: https://www.rnblocks.dev/docs/connectors#costs-and-data

Your connected provider handles its own API usage and billing. Those charges are separate from RNBlocks credits used while building your app. Review the provider’s quota and billing before testing with a large audience.

An AI feature sends the information needed for that request to its provider. Decide what your app should send, explain that clearly to your users, and test any permission and decline choices before release. Connecting a service does not automatically add a saved history, private file library or every feature in that provider’s API.

- [Understand credits and usage](https://www.rnblocks.dev/docs/credits-and-usage)

## When a connection does not work

Section: https://www.rnblocks.dev/docs/connectors#troubleshooting

When asking Studio for help, include the action, the visible error and whether it happened on iOS or Android. Keep credentials out of the message.

| What you see | What to check |
| --- | --- |
| Connected, but the feature fails | Confirm the key is active at the provider and that its account has access to the requested model or feature. Saving a key does not validate a provider request. |
| A quota or billing error | Check the connected provider’s usage and billing. Adding RNBlocks credits does not refill a separate provider account. |
| A connection works in another app | Open this app’s own Connectors panel. Each app has its own saved connection. |
| A file or model is unsupported | Ask Studio to inspect the exact request. A provider offering a feature does not mean every endpoint, attachment format or stored resource is supported by the connector. |
| A result disappears after reopening | Ask how the result is stored. A completed request and a saved connection do not automatically create persistent app data. |


## Continue

- [Build your first app](https://www.rnblocks.dev/docs/first-app)
- [Connect Supabase](https://www.rnblocks.dev/docs/connectors/supabase)
- [Prepare a release](https://www.rnblocks.dev/docs/publishing)