Recipes

Ready-made kubb.config.ts snippets for the setups people use most. Copy one in, install the matching packages, and run kubb generate.

TypeScript only

The minimum setup. Generates TypeScript types and interfaces from your OpenAPI spec.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [()],
})

TypeScript + React Query

Generates TypeScript types and TanStack Query hooks for React.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-client'
import {  } from '@kubb/plugin-react-query'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [(), (), ()],
})

TypeScript + Vue Query

Generates TypeScript types and TanStack Query hooks for Vue.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-vue-query'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [(), ()],
})

Zod schemas + MSW handlers

Runtime validation with Zod and ready-to-import MSW request handlers backed by Faker.js mock data.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-zod'
import {  } from '@kubb/plugin-faker'
import {  } from '@kubb/plugin-msw'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [(), (), (), ()],
})

Faker + Zod for testing

Generate Faker.js data factories alongside Zod schemas for use in unit and integration tests.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-zod'
import {  } from '@kubb/plugin-faker'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [(), (), ()],
})

Custom HTTP client

Pass a custom client implementation via importPath instead of using the built-in Fetch or Axios presets.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-client'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [
    (),
    ({
      : './my-client.ts',
    }),
  ],
})

Multiple specifications

Generate from several specs in a single run. Pass an array to defineConfig. Each entry runs independently with its own plugins and output directory.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'

export default ([
  {
    : 'petStore',
    : { : './petStore.yaml' },
    : { : './src/gen/petStore', : true },
    : [()],
  },
  {
    : 'userApi',
    : { : './userApi.yaml' },
    : { : './src/gen/userApi', : true },
    : [()],
  },
])

Conditional config (watch-aware)

Pass a function to defineConfig to access CLI context. Use it to disable clean in watch mode so incremental runs are faster.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'

export default (({  }) => ({
  : { : './petStore.yaml' },
  : {
    : './src/gen',
    : !,
  },
  : [()],
}))

Run with kubb generate --watch to enable incremental regeneration on spec changes.

Format with Biome, lint with Oxlint

Run Biome formatting and Oxlint linting on generated files as part of each build.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'

export default ({
  : { : './petStore.yaml' },
  : {
    : './src/gen',
    : true,
    : 'biome',
    : 'oxlint',
  },
  : [()],
})

Run a hook after generation

Use hooks.done to run shell commands after generation completes, for example to format or validate the output.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen' },
  : [()],
  : {
    : ['biome check --write ./src/gen'],
  },
})

Monorepo with multiple outputs

Generate different client libraries for separate packages or teams from a single config file.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-client'
import {  } from '@kubb/plugin-react-query'

export default ([
  {
    : 'public-api',
    : { : './specs/public.yaml' },
    : { : './packages/public-api/src/gen' },
    : [(), (), ()],
  },
  {
    : 'admin-api',
    : { : './specs/admin.yaml' },
    : { : './packages/admin-api/src/gen' },
    : [(), ()],
  },
])

Environment-aware configuration

Select input and output based on NODE_ENV so the same config works across development, staging, and production.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-client'

const  = .['NODE_ENV'] ?? 'development'

const  = {
  : {
    : { : 'http://localhost:3000/openapi.json' },
    : { : './src/gen', : true },
  },
  : {
    : { : 'https://staging-api.example.com/openapi.json' },
    : { : './src/gen', : true },
  },
  : {
    : { : './specs/production.json' },
    : { : './src/gen', : true },
  },
} as 

export default ({
  ...[ as keyof typeof ],
  : [(), ()],
})

Programmatic build

Drive Kubb from a script using createKubb from @kubb/core. Useful for monorepo orchestration or custom build pipelines.

Unlike defineConfig, createKubb does not inject defaults. You must provide adapter, parsers, and any middleware explicitly.

generate.ts

import { createKubb } from '@kubb/core'
import { adapterOas } from '@kubb/adapter-oas'
import { parserTs, parserTsx } from '@kubb/parser-ts'
import { pluginTs } from '@kubb/plugin-ts'

const kubb = createKubb({
  adapter: adapterOas(),
  parsers: [parserTs, parserTsx],
  input: { path: './petStore.yaml' },
  output: { path: './gen' },
  plugins: [pluginTs()],
})

kubb.hooks.on('kubb:plugin:end', ({ plugin, duration }) => {
  console.log(`${plugin.name} completed in ${duration}ms`)
})

const { files, error } = await kubb.safeBuild()

if (error) {
  console.error('Generation failed:', error)
  process.exit(1)
}

console.log(`Generated ${files.length} files`)

Use .build() instead of .safeBuild() if you prefer exceptions over checking error in the result. See the Core API for the full Kubb instance API.

CI validation

Validate the OpenAPI spec and fail the build on errors. Use hooks.done to run the kubb validate command after generation.

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen', : true },
  : [()],
  : {
    : ['kubb validate -i ./petStore.yaml'],
  },
})