Extend your setup · 3:23 · English

Build a custom tuning widget with the API

Follow a remap database API workflow: server credentials, vehicle lookup, engine JSON, and a custom website interface.

Before you start

API or Max access and development experience. Keep credentials on your server; your application owns the customer workflow.

Recorded in the Remapdb demonstration environment with example data. Use your own account details and review the saved result.

Explore the feature

Put it into practice

Keep API credentials in the server environment.
Resolve vehicle identifiers and inspect engine data.
Handle missing data, rate limits, and deployment before launch.

Read the API documentation Read the guide

Follow at your own pace

Video transcript

Jump to a chapter or read the walkthrough step by step.

0:00 A real engineering workflow

We will build a custom performance interface in VS Code, use its terminal to call the API, and run the result in a browser. Remapdb supplies the data; the engineer owns the experience.

0:18 API access and server credentials

API settings provides the key. An active API entitlement is required. Version two uses Bearer authentication for these read requests; the separate secret is not needed. The key belongs on your server, never in public browser code.

0:35 Configure and verify access

In the project, the key goes into a private environment file, excluded from Git. This is our local API; the production base URL is shown above it. A terminal request checks the access scope, allowance and active subscription before development continues.

0:52 Resolve the vehicle through API calls

This small script follows the catalogue: type, manufacturer, model, generation and engine. Each request uses IDs returned by the previous one, and follows manufacturer pagination. Running it resolves an M3 Competition and saves its full engine response for inspection.

1:10 Inspect the engine JSON

The response includes engine specifications, ECU information, reading tools, factory figures and three tuning stages. Power is metric horsepower; torque is in Newton metres. Stage IDs identify the choices, and the dyno arrays provide points for our charts.

1:28 Connect the backend and browser

Our server client adds the Bearer header, checks errors and sets a timeout. The browser calls our own restricted backend route. That keeps credentials private and lets us cache responses and control public request traffic.

1:43 Build the custom interface

In the renderer, the engineer maps those fields into engine facts, performance cards and stage buttons. Stage changes recalculate the gains and redraw the curves from the selected response data. The animation helpers smooth the numbers and chart transitions, while respecting reduced- motion preferences.

2:02 Save and start the application

Save the implementation, then start the local server from the integrated terminal. Opening the generated preview URL runs the same project we have just edited, with real API responses behind the interface.

2:16 Engine details and animated tuning stages

Here is the custom experience: engine specifications, factory comparisons and selectable tuning stages. Switching stage updates the power, torque and gains together, and redraws the chart. The hardware guidance changes with the stage too; it comes from the API, not a generic promise.

2:35 Explore the data in your own design

The chart can switch between power and torque. Below it, the same response supplies the ECU, reading methods and listed tools. Layout, animation and interaction are entirely ours. These figures are indicative tuning data, not a dyno measurement of this individual vehicle.

2:54 Ship a reliable integration

For launch, keep secrets server-side, use HTTPS, respect the account limits and handle failed or incomplete responses. The example includes timeouts, caching and basic rate limiting; production still needs appropriate monitoring and protection. Your team controls the interface and enquiry flow, powered by Remapdb data.

Your next step

Put the walkthrough into practice

Start with the free widget, or compare plans for your website and application.

Start free See pricing