1. Add it to your project

• Open the remix link from your purchase, or create a code file named SDKQuickstartBuilder.tsx in Assets → Code and paste in the source.

• Drag the component onto your page. Set width to Fill (or a fixed width) and keep height on Fit, since the component grows with its steps.

• Everything else is set from the property controls on the right.

2. Point it at your API

The generated code follows the common pattern client.resource.method(body). Fill in these controls and every language updates at once:

• Client Name: the class your SDK exports, e.g. Acme.

• npm Package / PyPI Package / Go Module / Ruby Gem: used in install commands and imports.

• Env Var and Key Placeholder: shown in the API key step. Use a test-key placeholder, never a real key.

• SDK Resource and SDK Method: together they make the call, e.g. messages + create. Go uses the capitalized form automatically.

• Request JSON: the request body. It’s converted to each language’s own syntax (Python and Ruby get keyword arguments).

• Output Field: the response field printed in the script examples.

• Base URL and Endpoint Path: used by the cURL example.

3. Example response

Response JSON, Status and Latency fill the sample response under the Run step. Paste a real response from your API so it matches what developers will see.

4. Languages

Turn languages on or off with the Node.js, Python, Go, Ruby and cURL toggles, and pick which tab opens first with Default. Node.js offers Script, Next.js and Express; Python offers Script, FastAPI and Flask. Package managers switch automatically (npm, pnpm, yarn, bun, pip, uv, poetry, gem, bundler).

5. Custom Code

If your SDK doesn’t fit the client.resource.method pattern, add an item under Custom Code, choose its Language and Framework, and paste your snippet. It replaces the generated code for that exact combination only. You can use these placeholders and they’ll be filled from your other controls:

• {{client}} client name, {{package}} package for the current language, {{env}} env var

• {{call}} resource.method, {{body}} request body in the current language, {{output}} output field

• {{json}} request body as JSON, {{baseUrl}} and {{path}} for HTTP examples

• {{goCall}}, {{goOutput}} and {{alias}} for Go

6. Buttons

CTA Label / CTA Link and Docs Label / Docs Link control the two buttons under the steps. Clear a label to hide its button. Always set a link for any button you show; without one it renders but does nothing. CTA Text sets the primary button’s text color.

7. Styling

Theme (Dark or Light), Accent, Radius, Backdrop, Font and Mono Font. Font fields take a CSS font stack, and the font must already be loaded on your site. On the Light theme, pick a darker accent (for example #0E7490 instead of bright cyan) so small labels stay readable.

Troubleshooting

• The request body is empty. Request JSON isn’t valid JSON, so the component falls back to an empty body. Use double quotes around keys and strings and remove trailing commas.

• Copy shows “Selected, press Ctrl+C”. The browser blocked clipboard access (common in insecure previews or embedded frames). The code is already selected, so press Ctrl+C or Cmd+C.

• My custom snippet doesn’t appear. Its Language and Framework must match the tab that’s selected, and the Code field can’t be empty.

• A language tab is missing. Check its toggle. If the Default language is turned off, the first enabled language opens instead.

• Wrong font in code blocks. Mono Font falls back through the stack, so add the font to your site or use a system stack.