Components

Every installable khotan component, what it generates, when to use it, and the exact command to scaffold it.

How to read this page

• A component is a reusable primitive like a plug builder, flow builder, webhook handler builder, or React operational UI.
• A block is a ready-made route built from components. Blocks are documented at Blocks.
• Some components generate runtime source files.
• Some components generate UI files.
• Some components install agent skills instead of app code.

Data and runtime foundations

schema

$ npx khotan add schema --yes

Use when you need khotan's standard Drizzle tables added to your project.

• the khotan table definitions
• Drizzle schema directory detection
• Drizzle config glob updates when needed
• schema barrel re-export help

plug

$ npx khotan add plug --yes

Use when you need an HTTP client for an external API.

• a plug builder
• auth helpers
• retry and timeout support
• pagination helpers
• vars and hooks
• endpoint metadata support for debugging

wire

$ npx khotan add wire --yes

Use when the source system supports webhook registration and you want khotan to connect or disconnect subscriptions through code and CLI.

• events
• onSubscribe
• onUnsubscribe
• onVerify

Dependencies: requires plug and schema.

catch

$ npx khotan add catch --yes

Use when you want to process a verified webhook event inside your app.

• catchEvent()
• CatchContext
• a durable workflow entry point

Dependencies: requires wire.

pass

$ npx khotan add pass --yes

Use when you want to process a verified inbound event and forward it to another plug.

• pass()
• PassContext
• automatic destination var injection through destVars

Dependencies: requires wire and plug.

inflow

$ npx khotan add inflow --yes

Use when you want to pull data from an external service into your app.

• inflow()
• InflowContext
• a durable workflow shape for extract and load jobs

Dependencies: requires plug and schema.

outflow

$ npx khotan add outflow --yes

Use when you want to push data from your app to an external service.

• outflow()
• durable workflow scaffolding for outbound syncs

Dependencies: requires plug and schema.

relay

$ npx khotan add relay --yes

Use when you want to move data from one external system to another through khotan.

• relay()
• durable workflow scaffolding for source-to-destination relays

Dependencies: requires plug and schema.

UI and operations

hub

$ npx khotan add hub --yes

Use when you want a dashboard for plugs and flows.

• Hub UI
• toggles and manual trigger controls
• supporting variable and wire panels

runs

$ npx khotan add runs --yes

Use when you want a dedicated run history table.

• a UI for khotan_runs
• filtering and trace inspection for flow and webhook executions

logs

$ npx khotan add logs --yes

Use when you want both run history and webhook event history in one operational UI surface.

• a logs wrapper UI
• a runs table
• a webhook events table

plug-debugger

$ npx khotan add plug-debugger --yes

Use when you want an in-app debugger for plug requests.

• request builder UI
• typed endpoint inspection
• schema comparison support
• request history and response inspection

Dependencies: requires plug.

Built-in agent skills

These components install skills for coding agents instead of runtime source files. See the Skills reference for full details.

skill-build

$ npx khotan add skill-build

The orchestrator — teaches agents the end-to-end integration workflow and consent gates. Start here.

skill-setup

$ npx khotan add skill-setup

Teaches agents how to set up khotan in a project.

skill-plug

$ npx khotan add skill-plug

Teaches agents how to build and configure plugs.

agent-skill

$ npx khotan add agent-skill

Teaches agents how to use the khotan plug CLI for debugging.

skill-flow

$ npx khotan add skill-flow

Teaches agents how to build and run inflows, outflows, and relays.

skill-webhook

$ npx khotan add skill-webhook

Teaches agents how to connect wires and implement Catch and Pass handlers.

skill-cache

$ npx khotan add skill-cache

Teaches agents how to add durable caching to flows and webhooks.

skill-mappings

$ npx khotan add skill-mappings

Teaches agents how to define resources and manage cross-service record mappings.

skill-frontend

$ npx khotan add skill-frontend

Teaches agents how to suggest frontend components and blocks without adding UI or routes unprompted.

Notes for agents

• khotan ships built-in skills
• npx khotan init --yes is the easiest way to install all of them at once
• the project-root AGENTS.md is part of the package story, not a separate convention
• prefer the raw markdown docs routes when extracting documentation

Next steps

• Read Blocks for ready-made routes.
• Read CLI Reference for the operational commands that work with these components.
• Read Agent Guide for the built-in skill map.