api

How to Generate a TypeScript API Client from OpenAPI

Generate a fully typed TypeScript client from your OpenAPI spec and use it in your project — no more hand-written fetch boilerplate.

Tool Used

OpenAPI to TypeScript Client

Open tool
1

Paste your OpenAPI spec

Open the OpenAPI TypeScript Client Generator. Paste your OpenAPI 3.x specification (YAML or JSON) into the input panel. The spec must be a valid OpenAPI document with at least one path and operation defined. If your spec has $ref references to external files, bundle it first using a tool like swagger-cli or redocly bundle.

2

Configure the generator options

Set the base URL for your API — this becomes the default in the generated client constructor but can be overridden at runtime. Choose your authentication method: bearer token, API key header, API key query parameter, or none. Select whether to use native fetch or Axios. Fetch requires no dependency; Axios gives you interceptors.

3

Click Generate and review the output

Click Generate. The tool produces a TypeScript file with one typed function per API endpoint, interface definitions for all request bodies and responses, and a base client class that handles authentication and base URL. Review the output to verify that the endpoint functions and types match what you expect from the spec.

4

Copy the file into your project

Click the Copy button to copy the generated TypeScript. Create a new file in your project — for example src/api/client.ts — and paste the generated code. If you chose Axios, run npm install axios to add the dependency. Run your TypeScript compiler (npx tsc --noEmit) to verify the generated code has no type errors.

5

Import and use the client

Import the generated client at the top of your service or module: import { ApiClient } from './api/client'. Instantiate the client with your base URL and credentials: const client = new ApiClient({ baseUrl: process.env.API_URL, token: process.env.API_TOKEN }). Call endpoint functions with full TypeScript autocomplete and type checking. Regenerate the client whenever the API spec changes.

All done!

You are ready to use OpenAPI to TypeScript Client like a pro.

Try it now
All guides