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.

Which Angular versions does the output target?

The default output uses inject() (Angular 14+). Enable httpResource methods and the floor moves to Angular 19.2, where the API landed. The @Service() decorator option targets Angular 22. You choose per generation — the converter never emits an API your Angular version doesn't have unless you asked for it.

How do the httpResource methods work?

Each GET operation emits a getXResource(...) method that takes Signal inputs and returns HttpResourceRef<T | undefined>. The resource recomputes its URL when an input signal changes and stays idle while a required input is undefined. An optional trigger variant adds a signal that defers the first fetch until you flip it — lazy loading without wrapper code.

What is the @Service() decorator option?

Angular 22 introduces @Service(): a root-provided singleton decorator with inject() DI enabled. The generator emits it in place of @Injectable when you opt in — auto-provided by default, or @Service({ autoProvided: false }) for component/route-scoped services. It's mutually exclusive with the providedIn option; the last one set wins.

How are oneOf / anyOf unions handled?

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

Where do auth, retries and error handling live?

In interceptors, if you want them to. The interceptors option emits functional HttpInterceptorFn implementations — bearer token via an API_TOKEN injection token, retries with exponential backoff on 429/503, and HTTP-status error routing — plus a provideApiInterceptors() factory for bootstrapApplication. Services stay free of cross-cutting noise.

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·Angular·Free

OpenAPI to
Angular.

Turn an OpenAPI 3.0 or 3.1 spec into typed Angular services. httpResource() with Signals for reactive reads, Observable methods for everything else, inject() DI, and functional interceptors for auth and retries. Discriminated unions from oneOf. One file per model. No signup, no install.

Open the converter Or run it from Claude

OpenAPI 3.0 / 3.1·Angular 19.2+·httpResource·Signals·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'
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
    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/services/default.service.ts tsc cleanOutput

// src/api/services/default.service.ts
import { Injectable, Signal } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpResourceRef } from '@angular/common/http';
import { BaseApiService } from './base-api.service';
import { Payment } from '../models/payment';

@Injectable()
export class DefaultService extends BaseApiService {

  public getPayment(id: string, expand?: string): Observable<Payment> {
    const paramObj: Record<string, unknown> = {};
    if (typeof expand !== 'undefined') paramObj['expand'] = expand;
    return this.execute<Payment>(`/payments/${id}`, undefined,
      { method: 'get', params: this.createParams(paramObj) });
  }

  public getPaymentResource(
    id: Signal<string | undefined>,
    expand?: Signal<string | undefined>,
  ): HttpResourceRef<Payment | undefined> {
    return this.buildResource<Payment>(() => {
      const idValue = id();
      const expandValue = expand?.();
      if (typeof idValue === 'undefined') {
        return undefined;
      }
      const paramObj: Record<string, unknown> = {};
      if (typeof expandValue !== 'undefined') paramObj['expand'] = expandValue;
      const _queryString = this.createParams(paramObj).toString();
      return this.buildUrl(`/payments/${idValue}${_queryString ? '?' + _queryString : ''}`);
    });
  }
}

What gets generated

Idiomatic Angular. Idiomatic TypeScript.

Below: models emitted from a small payments spec with a oneOf discriminator. Each model lands in its own file, the union is a real TypeScript type, and the base URL arrives through an injection token — DI from the first line.

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

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

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

export type MethodUnion = CardPayment | BankPayment;

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

// src/api/injection-token.ts
import { InjectionToken } from '@angular/core';

export const BASE_URL = new InjectionToken<string>('BASE_URL');

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.

01ProofReads are Signals, not subscriptions.Spec · In

Code · Out

spec.yaml fragment

paths:
  /payments/{id}:
    get:
      operationId: getPayment
      parameters:
        - name: id
          in: path
          required: true
          schema: { type: string }

emitted .ts

public getPaymentResource(
  id: Signal<string | undefined>,
): HttpResourceRef<Payment | undefined> {
  return this.buildResource<Payment>(() => {
    const idValue = id();
    if (typeof idValue === 'undefined') {
      return undefined;
    }
    return this.buildUrl(`/payments/${idValue}`);
  });
}

// In a component: pass a Signal, read a Signal.
// The resource re-fetches when the input changes
// and stays idle while the id is undefined.

Angular · httpResource

Resources, not just types.

GET operations emit httpResource() methods: pass Signals, get an HttpResourceRef with value, status and error as Signals. The resource tracks its inputs, re-fetches on change, and an optional trigger signal defers loading until you ask.

src/api/services/default.service.ts generated

// src/api/services/default.service.ts
import { Injectable, Signal } from '@angular/core';
import { HttpResourceRef } from '@angular/common/http';
import { BaseApiService } from './base-api.service';
import { Payment } from '../models/payment';

@Injectable()
export class DefaultService extends BaseApiService {

  public getPaymentResource(
    id: Signal<string | undefined>,
    expand?: Signal<string | undefined>,
  ): HttpResourceRef<Payment | undefined> {
    return this.buildResource<Payment>(() => {
      const idValue = id();
      const expandValue = expand?.();
      if (typeof idValue === 'undefined') {
        return undefined;
      }
      const paramObj: Record<string, unknown> = {};
      if (typeof expandValue !== 'undefined') paramObj['expand'] = expandValue;
      const _queryString = this.createParams(paramObj).toString();
      return this.buildUrl(`/payments/${idValue}${_queryString ? '?' + _queryString : ''}`);
    });
  }
}

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 Angular 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 an Angular
//  client with httpResource into ./src/api."

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 Angular client generator@metaengine/openapi-angularnpm 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 injectable service per tag extending a small generated BaseApiService, one interface per schema, a union-types.ts for oneOf unions, and a BASE_URL injection token. GET operations additionally emit httpResource() methods when enabled. No runtime dependency beyond Angular itself.

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 toAngular.

Idiomatic Angular. Idiomatic TypeScript.

Grounded in how the spec reads.

Reads are Signals, not subscriptions.

Real discriminated unions.

DI the way Angular 22 writes it.