Skip to main content
Connect your app to real data and services.Import API definitions from Postman, cURL, Swagger, or OpenAPI specs. Rocket generates all the connection code, error handling, and data mapping - you just pick the endpoint and the UI element.You need an existing Rocket project. Do not have one yet? Create one to get started.
API imports are only available on the web browser. They are not supported in the Rocket mobile app.

Payment processors

Stripe, PayPal, or any payment API with checkout flows, subscriptions, and invoicing.

Databases and backends

Supabase, Firebase, your own REST API, or any backend that exposes endpoints.

Third-party services

Weather APIs, maps, social media, shipping, SMS, email - any service with a REST API.

Your own APIs

Internal microservices, staging environments, or any custom backend you have built.

​
What you need

Before importing, make sure you have:
  • An API source in one of these formats:
    • Postman workspace and an API key
    • A working cURL command
    • A Postman collection export file (postman.json)
    • A Swagger or OpenAPI spec (JSON or YAML)
  • Any environment variables your API definitions reference (e.g. inventory_api_base_url, accessToken)
If your imported request includes placeholders like {{base_url}} or {{accessToken}}, the integration step may require you to map them to real values or stored variables.

Learn how to manage secret keys in your environment file.

​
Import APIs into your project

​
Open the Add APIs dialog

  1. Open the APIs section.
  2. Open the Select an API dropdown.
  3. If no APIs exist yet, click Add APIs.
APIs section showing no APIs available with Add APIs button.APIs section showing no APIs available with Add APIs button.
Success check: The Add APIs dialog opens with import method options.

​
Choose an import method

Pick one method. You only need to do this once per set of APIs.

Postman key (workspace import)

Use this when your APIs already live in a Postman workspace.Get your Postman API key:

Visit Postman’s documentation to learn how to generate your API key.
  1. Click your avatar in the Postman header, then click Settings.
  2. In the account settings page, click API keys.
  3. If you do not have a key, click Generate API Key.
  4. Enter a name for your key and click Generate API Key.
  5. Copy your key.
Your Postman API key provides access to any Postman data you have permissions for. Keep it private and rotate it if you believe it has been exposed.
Import into Rocket:
  1. In Add APIs, choose the Postman tab.
  2. Paste your Postman Key.
  3. Select the workspace.
  4. Click Submit.
  5. Select the collections or folders you want to add.
  6. Click Add APIs.
Postman import tab showing key input and workspace selection.Postman import tab showing key input and workspace selection.
Success check: Your Postman collections appear in the API picker.
Use this when you have a working request you can paste.
  1. In Add APIs, choose the cURL tab.
  2. Paste the full cURL command.
  3. Click Add API.
cURL import tab with command input field.cURL import tab with command input field.
Make sure the cURL includes the correct URL, headers, and auth format. If it uses environment variables, convert them to your project’s variable format after import.
Success check: The API endpoint appears in your API picker.
Use this when you have a Postman export file.
  1. In Add APIs, choose Upload JSON.
  2. Upload your postman.json.
  3. Click Submit.
Upload JSON tab with file upload option.Upload JSON tab with file upload option.
Same benefit as Postman key import, without requiring workspace access.
Success check: Your Postman collection endpoints appear in the API picker.
Use this when your backend provides an OpenAPI spec.
  1. In Add APIs, choose Swagger.
  2. Upload the Swagger or OpenAPI JSON or YAML.
  3. Click Submit.
Swagger import tab with file upload option.Swagger import tab with file upload option.
If your spec defines multiple servers, confirm the base URL matches your environment. Confirm auth is described in the spec if you want it preconfigured.
Success check: All endpoints from your OpenAPI spec appear in the API picker.

​
Verify the API is available

After import:
  1. Open the Select an API dropdown again.
  2. Search for the endpoint you want.
  3. Confirm the method and path look correct.
API picker dropdown showing list of imported APIs.API picker dropdown showing list of imported APIs.
Good checks:
  • The HTTP method matches what you expect (GET vs POST).
  • The URL points to the correct base, often a variable like {{...base_url...}}.
  • Any required headers and auth placeholders are present.
Success check: Your imported API appears in the dropdown and is searchable.

​
Integrate an API into a UI element

This connects an endpoint to your screen so Rocket can generate code tied to a real component.

​
Start integration

  1. Pick the route where this should run (e.g. /).
  2. Select the API from the API picker.
  3. Click Integrate API.
Route selection, API dropdown, and Integrate API button.Route selection, API dropdown, and Integrate API button.

​
Attach to an element

  1. When prompted, click Ok.
  2. Click the UI element where you want to integrate the API.
Attach to a stable container element that is always present on the screen. Avoid attaching to conditional elements that might not exist on initial render.
Prompt asking user to select a UI element for API integration.Prompt asking user to select a UI element for API integration.
Success check: The element is selected and the integration modal opens.

​
Configure the integration

After selecting the element, you will see the configuration screen with route, element, API details, and trigger options.
Integration configuration showing route, element, API details, and trigger options.Integration configuration showing route, element, API details, and trigger options.
You will configure:
  • When the API should run (trigger)
  • What happens before the API call (pre-call instructions)
  • What happens after the API call (post-call instructions)
  • Any required placeholders that need to be resolved

​
Resolve required placeholders

If your imported API includes placeholders for required fields, you may see a “Missing Attributes” prompt. This means the request depends on a value like accessToken and Rocket needs to know where it comes from. Set the placeholder to reference your stored token value, and verify the request uses the correct auth scheme (commonly Authorization: Bearer <token>).
Modal showing missing attributes prompt for accessToken.Modal showing missing attributes prompt for accessToken.
If you do not yet have a token flow set up, decide where the token will be stored first. Rocket can generate the code, but it needs a consistent source of truth for the token.

​
Configure when the API runs

​
Set the trigger

Choose when the API should run (e.g. on page load).
Modal showing trigger options for API calls.Modal showing trigger options for API calls.
Common triggers:
  • On page load for initial data hydration
  • On pull to refresh for manual refresh
  • On button click for user-initiated actions like “Track”, “Untrack”, “Save”, “Checkout”

​
Pre-call instructions

Use this to ensure the call will succeed before it runs:
  • Validate required variables exist (base URLs, IDs, query params)
  • Validate auth state (token exists, not expired)
  • If token can be refreshed, refresh it here
Example: “Validate inputs and required variables. Ensure access token exists and is valid. If missing, refresh or redirect to login.”
Clear pre-call instructions help Rocket generate robust error handling code.

​
Post-call instructions

Define what happens after the call:
  • Store response data into a named state variable your UI can bind to
  • Cache successful responses to improve performance
  • Handle error states with clear user feedback
  • Navigate when needed (e.g. redirect to login on 401)
Example: “On success, store response to state and cache it. On 401, clear token, notify, navigate to Login. On other errors, show notification and keep cached data.”
Detailed post-call instructions ensure your UI updates correctly and handles edge cases.

​
Code generation

After you complete the configuration, Rocket automatically generates the implementation. What it typically produces:
  • API call wired to the chosen trigger
  • Variable resolution (base URL, auth variables)
  • State updates (storing response data for UI rendering)
  • Optional caching for resilience during temporary failures
  • User feedback (notifications on success or failure)
  • Navigation flows (e.g. redirect to Login on auth failure)
Confirmation screen showing successfully integrated API.Confirmation screen showing successfully integrated API.
Success check: The API integration appears under the route and element you intended, and code is generated.

​
Validation checklist

After integration and code generation, confirm:
  • The API appears under the correct route and element
  • Trigger fires when expected (page load, click, or refresh)
  • Required variables resolve correctly (base URL, IDs, headers)
  • Auth is applied correctly, especially token prefix rules like Bearer
  • Response is stored to a named state variable your UI binds to
  • Error handling matches your UX (notification, fallback state, navigation)

​
Troubleshooting

Import did not complete, or you imported into a different project. Reopen Add APIs and verify your source.
Fix: Re-import your APIs and confirm they appear in the dropdown.
The imported definition includes placeholders. Map them to known state variables or environment variables.
Fix: Review your API definition and ensure all placeholders are mapped to actual values.
Most often, response data is not stored to the variable your UI is bound to. Update the Post API call instructions to store the response, then bind your UI list or widget to that stored variable.
Fix: Check your Post API call instructions and ensure response data is stored to a state variable your UI references.
Token is missing, expired, or not attached properly. Fix in Pre API call instructions and ensure auth header formatting is correct.
Fix: Verify token exists, is valid, and is formatted correctly in the Authorization header (e.g. Bearer <token>).

​
What’s next?

Chat interface

Build and iterate on your app through natural conversation.

Inject custom code

Add scripts, embeds, and UI components from external sources.

Integrations

Some services have dedicated integrations that are simpler than raw API imports.

Code view

Browse files and manage environment variables for your API keys.