--- title: Components description: Every installable khotan component, what it generates, when to use it, and the exact command to scaffold it. section: Reference url: /docs/components --- # Components This page lists every installable khotan component. Use it when you want the exact scaffold command, a short explanation of what each component is for, and a quick sense of what gets added to your project. ## 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 separately at [Blocks](/docs/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` Install command: ```terminal $ npx khotan add schema --yes ``` Use when you need khotan's standard Drizzle tables added to your project. What it gives you: - the khotan table definitions - Drizzle schema directory detection - Drizzle config glob updates when needed - schema barrel re-export help ### `plug` Install command: ```terminal $ npx khotan add plug --yes ``` Use when you need an HTTP client for an external API. What it gives you: - a plug builder - auth helpers - retry and timeout support - pagination helpers - vars and hooks - endpoint metadata support for debugging ### `wire` Install command: ```terminal $ 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. What it gives you: - `events` - `onSubscribe` - `onUnsubscribe` - `onVerify` Dependencies: - requires `plug` - requires `schema` ### `catch` Install command: ```terminal $ npx khotan add catch --yes ``` Use when you want to process a verified webhook event inside your app. What it gives you: - `catchEvent()` - `CatchContext` - a durable workflow entry point Dependencies: - requires `wire` ### `pass` Install command: ```terminal $ npx khotan add pass --yes ``` Use when you want to process a verified inbound event and forward it to another plug. What it gives you: - `pass()` - `PassContext` - automatic destination var injection through `destVars` Dependencies: - requires `wire` - requires `plug` ### `inflow` Install command: ```terminal $ npx khotan add inflow --yes ``` Use when you want to pull data from an external service into your app. What it gives you: - `inflow()` - `InflowContext` - a durable workflow shape for extract and load jobs Dependencies: - requires `plug` - requires `schema` ### `outflow` Install command: ```terminal $ npx khotan add outflow --yes ``` Use when you want to push data from your app to an external service. What it gives you: - `outflow()` - durable workflow scaffolding for outbound syncs Dependencies: - requires `plug` - requires `schema` ### `relay` Install command: ```terminal $ npx khotan add relay --yes ``` Use when you want to move data from one external system to another through khotan. What it gives you: - `relay()` - durable workflow scaffolding for source-to-destination relays Dependencies: - requires `plug` - requires `schema` ## UI and operations ### `hub` Install command: ```terminal $ npx khotan add hub --yes ``` Use when you want a dashboard for plugs and flows. What it gives you: - Hub UI - toggles and manual trigger controls - supporting variable and wire panels ### `runs` Install command: ```terminal $ npx khotan add runs --yes ``` Use when you want a dedicated run history table. What it gives you: - a UI for `khotan_runs` - filtering and trace inspection for flow and webhook executions ### `logs` Install command: ```terminal $ npx khotan add logs --yes ``` Use when you want both run history and webhook event history in one operational UI surface. What it gives you: - a logs wrapper UI - a runs table - a webhook events table ### `plug-debugger` Install command: ```terminal $ npx khotan add plug-debugger --yes ``` Use when you want an in-app debugger for plug requests. What it gives you: - 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](/docs/skills) for full details. ### `skill-build` ```terminal $ npx khotan add skill-build ``` The orchestrator — teaches agents the end-to-end integration workflow and consent gates. Start here. ### `skill-setup` ```terminal $ npx khotan add skill-setup ``` Teaches agents how to set up khotan in a project. ### `skill-plug` ```terminal $ npx khotan add skill-plug ``` Teaches agents how to build and configure plugs. ### `agent-skill` ```terminal $ npx khotan add agent-skill ``` Teaches agents how to use the `khotan plug` CLI for debugging. ### `skill-flow` ```terminal $ npx khotan add skill-flow ``` Teaches agents how to build and run inflows, outflows, and relays. ### `skill-webhook` ```terminal $ npx khotan add skill-webhook ``` Teaches agents how to connect wires and implement Catch and Pass handlers. ### `skill-cache` ```terminal $ npx khotan add skill-cache ``` Teaches agents how to add durable caching to flows and webhooks. ### `skill-mappings` ```terminal $ npx khotan add skill-mappings ``` Teaches agents how to define resources and manage cross-service record mappings. ### `skill-frontend` ```terminal $ npx khotan add skill-frontend ``` Teaches agents how to suggest frontend components and blocks without adding UI or routes unprompted. ## Notes for agents If you are an agent reading this page: - 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 for later use ## Next steps - Read [Blocks](/docs/blocks) for ready-made routes. - Read [CLI Reference](/docs/cli) for the operational commands that work with these components. - Read [Agent Guide](/docs/agents) for the built-in skill map.