Skip to main content
In this guide, you’ll learn how to:
  • Import API definitions into your project using one of four sources: Postman key, cURL, Postman JSON, or Swagger.
  • Select an API from the list and integrate it into a specific UI element.
  • Configure when the API runs and what happens before and after the call.
  • Let Rocket generate the code that wires everything together.
Why use APIs?Connect your app to payment processors, data services, or your own backend without writing integration code. If you already have API definitions in Postman, Swagger, or cURL commands, import them directly. Rocket generates all the connection code, error handling, and data mapping automatically, so you can focus on building features instead of writing boilerplate.

​
Before you begin

You’ll need:
  • An existing Rocket project.
  • An API source you can access in one of these formats:
    • Postman workspace and an API key, or
    • A working cURL command, or
    • A Postman collection export file (postman.json), or
    • A Swagger or OpenAPI spec (JSON or YAML)
  • Any environment variables your API definitions reference, for example:
    • inventory_api_base_url
    • accessToken (or your token variable name)
Tip: 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.

Need to set up environment 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.

Option A: 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.
To generate a Postman 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 don’t 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.
  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.
What this gives you:
  • A searchable list of endpoints in your project’s API picker.
  • Method, URL, headers, and variables carried over from Postman.
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.
What to watch for:
  • Make sure the cURL includes the correct URL, headers, and auth format.
  • If cURL 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.
What this gives you:
  • The 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.
What to watch for:
  • 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 in the picker

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 is the step that connects an endpoint to your screen so Rocket.new can generate code tied to a real component.

​
Start integration

  1. Pick the route where this should run, for example /.
  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 it to the correct element

  1. When prompted, click Ok.
  2. Click the UI element where you want to integrate the API.
Best practice: 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.

​
Integration configuration

After selecting the element, you’ll see the integration configuration screen showing the 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.
In this screen, you’ll 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 like accessToken

If your imported API includes placeholders for required fields, you may see a “Missing Attributes” prompt during configuration.What this means:
  • The request depends on a value like accessToken, and the system needs to know where that value comes from.
What to do:
  • Provide a binding to your stored token value, not the literal word accessToken.
  • Ensure 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.
Important: If you do not yet have a token flow set up, decide where the token will be stored first. Rocket.new can generate the code, but it needs a consistent source of truth for the token.

​
Configure when the API runs and what it does

​
Set the trigger

Choose when the API should run, for example on page load.
Modal showing trigger options for API calls.Modal showing trigger options for API calls.
Common triggers you’ll use:
  • 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”

​
Add Pre API call instructions

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

​
Add Post API call instructions

Use this area to define what happens after the call.Recommended actions to encode as instructions:
  • Store response data into a named state variable your UI can bind to.
  • Cache successful responses to improve perceived performance and resilience.
  • Handle error states with clear user feedback.
  • Navigate when the result requires it, for example redirect to login on 401.
Example language you can adapt:
  • “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.”
Tip: Detailed post-call instructions ensure your UI updates correctly and handles edge cases.

​
Generate code with Rocket.new

After you complete the configuration, Rocket.new automatically generates the implementation for you. No additional action is required.What Rocket.new typically generates from this configuration:
  • The API call wired to the chosen trigger, for example on page load.
  • Variable resolution, base URL variables, auth variables.
  • State updates, storing response data into a variable the UI can render.
  • Optional caching, so the UI can show last-known data during temporary failures.
  • User feedback, notifications on success or failure, where configured.
  • Navigation flows, for example redirecting to Login on authentication 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 these items:
  • The API appears under the route and element you intended.
  • 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 if your backend requires it.
  • 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>).

You did it!

You’ve imported APIs and integrated them into your UI elements. Rocket generates the code that wires everything together automatically.