-
+ {generator.preset}
+
+ {generator.blurb}
+
+ ))}
+
+
+ {tokens.map((line, i) => {
+ const {style: _ignoredLineStyle, ...lineProps} = getLineProps({
+ line
+ });
+ return (
+
+ {showLineNumbers && (
+
+ )}
+
+ {line.map((token, key) => {
+ const {style, ...rest} = getTokenProps({token});
+ return ;
+ })}
+
+
+ );
+ })}
+
+
+ )}
+ + Apache-2.0, free forever, and built in the open. Bring an AsyncAPI, + OpenAPI or JSON Schema document and see what falls out. +
++ Need it inside an existing app? There are worked{' '} + + examples + {' '} + for TypeScript libraries, Next.js, and every protocol. +
+Eight presets
++ Presets compose. Take just the models, or wire up the whole client — + the renderer resolves the dependency order for you. +
+{generator.preset}
+ {generator.blurb}
+ + + ))} +
+ AsyncAPI and OpenAPI support all eight. JSON Schema supports{' '}
+ models and custom.{' '}
+ See the full support matrix →
+
+ + AsyncAPI · OpenAPI · JSON Schema → TypeScript +
+ ++ The Codegen Project reads the API document you already maintain and + writes the TypeScript you were going to hand-type: payload and + parameter models, typed publish/subscribe functions for NATS, Kafka, + MQTT, AMQP, WebSocket and SSE, and complete HTTP clients. +
+ +{INSTALL_COMMAND}
+ codegen init walks you through it interactively, or takes
+ flags for CI. It writes the config file — JSON, YAML, TS, ESM or CJS.
+
+ ),
+ language: 'plaintext',
+ code: `codegen init
+
+# or non-interactively
+codegen init --no-tty \\
+ --input-type asyncapi \\
+ --input-file ./asyncapi.yml \\
+ --include-payloads \\
+ --include-channels \\
+ --channels-protocols nats`
+ },
+ {
+ title: 'Generate',
+ blurb: (
+ <>
+ Once, or on every change with --watch. Commit the output or
+ generate it in CI — both work.
+
+ ),
+ language: 'plaintext',
+ code: `codegen generate
+
+# keep it in sync while you edit the spec
+codegen generate --watch`
+ }
+];
+
+export default function HowItWorks(): JSX.Element {
+ return (
+ Three commands
+{step.blurb}
++ Working with an AI assistant?{' '} + + There is an MCP server and a rules file for that + + . +
+One document, every transport
+
+ The channels preset emits idiomatic code per protocol —
+ JetStream for NATS, consumer groups for Kafka, user properties for
+ MQTT v5, exchanges and queues for AMQP.
+
Spec in, code out
++ Pick an input, pick a protocol, and see the code you would write — + plus every generated file standing behind it. Nothing here is mocked + up. +
+{output.path}
+
+ {output.handWritten ? 'you write this' : 'generated'}
+
+ {variant.runtime}
+
+
+ Try your own spec in the playground →
+
+ {description}
-{siteConfig.tagline}
-
+
+ {generator.preset}
+ {generator.blurb}
+