Which OpenAPI versions are supported?

OpenAPI 3.0 and 3.1. The 3.1 path covers type: ["string","null"] nullability, const, plural examples, $defs, and recursive $dynamicRef. Discriminated unions via oneOf, enums, recursive $ref, and multi-file specs work in both.

TanStack Query or plain functions?

Both, as a flag. useTanStackQuery: true emits useQuery for every read and useMutation for every write, with query keys derived from the operation and its parameters. false emits the same operations as plain async functions — pair them with SWR, your own cache, or a raw useEffect.

How are query keys generated?

From the operation id plus every parameter: ['getPayment', id, expand]. Two components reading different payments never collide in the cache, and the same payment requested twice resolves from it. Invalidation after a mutation is a prefix match away.

How are oneOf / anyOf unions handled?

oneOf with a discriminator becomes a TypeScript discriminated union — each variant's discriminator field is a string literal, and narrowing works without casts. allOf is flattened into a single interface.

Does the generated code include runtime validation?

No — and that is deliberate. The emitted types are compile-time only. If you need runtime validation at the boundary, pair the output with Zod or Valibot. We keep the type surface thin so it composes with whatever validator you already use.

Do unused types end up in my bundle?

No. Each type is in its own file with explicit imports, so Webpack, Vite and esbuild tree-shake anything a route does not actually touch. The only runtime imports are @tanstack/react-query (if you opted in) and react for the context primitives.

Can I run this from Claude or Cursor?

Yes, via the MCP server. It wraps the same web API the converter uses, so output parity is guaranteed. Free to use, no API token.

Yes, MIT-licensed. The browser converter, the MCP server and the generated code are all free. No paid tier, no hosted-only feature.

OpenAPI·React·Free

OpenAPI to
React.

Turn an OpenAPI 3.0 or 3.1 spec into a typed React client. TanStack Query hooks for every operation — useQuery for reads, useMutation for writes, stable query keys — or plain async functions when you bring your own data layer. Discriminated unions from oneOf. No signup, no install.

Open the converter Or run it from Claude

OpenAPI 3.0 / 3.1·React 18+·TanStack Query·Fetch·MIT

payments.openapi.yamlInput

openapi: 3.0.3
info:
  title: Payments API
  version: 1.2.0
paths:
  /payments/{id}:
    get:
      operationId: getPayment
      parameters:
        - name: id
          in: path
          required: true
          schema: { type: string }
        - name: expand
          in: query
          schema: { type: string }
      responses:
        '200':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Payment'
  /payments:
    post:
      operationId: createPayment
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CreatePaymentRequest'
      responses:
        '200':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Payment'
components:
  schemas:
    Payment:
      type: object
      required: [id, amount, method]
      properties:
        id: { type: string }
        amount: { type: number }
        currency:
          type: string
          nullable: true
        method:
          oneOf:
            - $ref: '#/components/schemas/CardPayment'
            - $ref: '#/components/schemas/BankPayment'
          discriminator:
            propertyName: kind
    CreatePaymentRequest:
      type: object
      required: [amount, methodId]
      properties:
        amount: { type: number }
        methodId: { type: string }
    CardPayment:
      type: object
      required: [kind, last4]
      properties:
        kind: { type: string, enum: [card] }
        last4: { type: string }
    BankPayment:
      type: object
      required: [kind, iban]
      properties:
        kind: { type: string, enum: [bank] }
        iban: { type: string }

compile

src/api/default.api.ts tsc cleanOutput

// src/api/default.api.ts
import { ApiClient, useApiClient } from '../client';
import { useQuery, useMutation } from '@tanstack/react-query';
import { Payment } from '../types/payment';
import { CreatePaymentRequest } from '../types/create-payment-request';

export const defaultApi = {

  getPayment: async (apiClient: ApiClient, id: string, expand?: string): Promise<Payment> => {
    return apiClient.request<Payment>({
      method: 'GET',
      url: `/payments/${id}`,
      query: {
        ...(expand !== undefined && { 'expand': expand })
      }
    });
  },

  createPayment: async (apiClient: ApiClient, body?: CreatePaymentRequest): Promise<Payment> => {
    return apiClient.request<Payment>({
      method: 'POST',
      url: '/payments',
      body: body
    });
  }

};

// TanStack Query Hooks

export function useGetPayment(id: string, expand?: string) {
  const apiClient = useApiClient();
  return useQuery({
    queryKey: ['getPayment', id, expand],
    queryFn: () => defaultApi.getPayment(apiClient, id, expand),
  });
}

export function useCreatePaymentMutation() {
  const apiClient = useApiClient();
  return useMutation({
    mutationFn: (body?: CreatePaymentRequest) => defaultApi.createPayment(apiClient, body),
  });
}

What gets generated

Idiomatic TypeScript. Idiomatic hooks.

Below: types emitted from a small payments spec with a oneOf discriminator. Each type lands in its own file; the union is resolved to a real TypeScript type you can narrow in JSX without casts.

// src/types/payment.ts
import { MethodUnion } from '../union-types';

export interface Payment {
  id: string;
  amount: number;
  method: MethodUnion;
  currency?: string | null;
}

// src/union-types.ts
import { CardPayment } from './types/card-payment';
import { BankPayment } from './types/bank-payment';

export type MethodUnion = CardPayment | BankPayment;

// src/types/card-payment.ts
export interface CardPayment {
  kind: 'card';
  last4: string;
}

// Narrowing (yours to write — the types enable it):
function label(m: MethodUnion): string {
  if (m.kind === 'card') return `card ${m.last4}`;
  return `bank ${m.iban}`;
}

Three things we get right

Grounded in how the spec reads.

Each claim here is something you can verify by running the converter on your own spec. Click a card to see the spec fragment that triggered it and the code that came out.

01ProofHooks you would have written.Spec · In

Code · Out

spec.yaml fragment

paths:
  /payments/{id}:
    get:
      operationId: getPayment
      parameters:
        - name: id
          in: path
          required: true
        - name: expand
          in: query

emitted .ts

export function useGetPayment(id: string, expand?: string) {
  const apiClient = useApiClient();
  return useQuery({
    queryKey: ['getPayment', id, expand],
    queryFn: () => defaultApi.getPayment(apiClient, id, expand),
  });
}

// Query keys include every parameter, so two
// components asking for different payments never
// share a cache entry — and the same payment
// twice never fetches twice.

React · TanStack Query

Hooks, not just types.

Opt into TanStack Query and every read gets useQuery, every write gets useMutation — with query keys that include each parameter, and a client pulled from context via useApiClient(). Nothing you would not ship.

src/api/default.api.ts generated

// src/api/default.api.ts
import { ApiClient, useApiClient } from '../client';
import { useQuery, useMutation } from '@tanstack/react-query';
import { Payment } from '../types/payment';
import { CreatePaymentRequest } from '../types/create-payment-request';

export const defaultApi = {

  getPayment: async (apiClient: ApiClient, id: string, expand?: string): Promise<Payment> => {
    return apiClient.request<Payment>({
      method: 'GET',
      url: `/payments/${id}`,
      query: {
        ...(expand !== undefined && { 'expand': expand })
      }
    });
  },

};

// TanStack Query Hooks

export function useGetPayment(id: string, expand?: string) {
  const apiClient = useApiClient();
  return useQuery({
    queryKey: ['getPayment', id, expand],
    queryFn: () => defaultApi.getPayment(apiClient, id, expand),
  });
}

export function useCreatePaymentMutation() {
  const apiClient = useApiClient();
  return useMutation({
    mutationFn: (body?: CreatePaymentRequest) => defaultApi.createPayment(apiClient, body),
  });
}

Also available via MCP

Or ask Claude to do it.

The same generator ships as a Model Context Protocol server. It calls the same web API this converter uses, so the output is identical. Point Claude Desktop, Cursor, or any MCP-aware agent at a spec and it produces the React client as a diff — free, no token, no leaving the chat.

// claude-desktop config · .mcp.json
{
  "mcpServers": {
    "metaengine": {
      "command": "npx",
      "args": ["-y", "@metaengine/mcp-server"]
    }
  }
}

// Then in Claude:
// "Read payments.openapi.yaml and generate a React
//  client with TanStack Query hooks into ./src."

See the MCP page

Prefer it in your build?

Same generator, as a package.

The converter above is the fastest way to try the output. For CI and repeatable builds, the identical generator ships as a package — pin a version, wire it into your pipeline, and review diffs like any other code.

OpenAPI to React client generator@metaengine/openapi-reactnpm CLI and programmatic API — generate into your repo, pin versions, review diffs in CI.Package docs & options

Questions

Things people ask.

The same questions we keep getting. If yours is not here, run the converter — the answer is usually in the output.

A tree of .ts files: one interface per schema, a union-types.ts for oneOf unions, an API object per tag with either TanStack Query hooks or plain async functions, and a small client.ts with an ApiClient, a context provider, and a useApiClient hook. No runtime generator dependency.

More converters

Same engine, other stacks.

Every converter runs the same spec-to-IR pipeline. Pick another source format or target stack.

OpenAPI

TypeScript

Angular httpResource, React TanStack Query, or framework-agnostic fetch.

OpenAPI toReact.

Idiomatic TypeScript. Idiomatic hooks.

Grounded in how the spec reads.

Hooks you would have written.

Real discriminated unions.

TanStack is a choice, not a tax.