khotan-dataalpha
View as Markdown
Blocks

Blocks

Ready-made routes built from khotan components. One command installs a working page with all the wiring done for you.

What is a block?

A block is a ready-made route composed from one or more khotan components. Where a component gives you a reusable primitive (a table, a panel, a client), a block wires those primitives into an actual app route you can visit immediately.

Every block installs files into two locations: page routes go into your app/ directory, and supporting UI components go into components/khotan/. If a block depends on a component you haven't installed yet, the CLI will offer to add it first.

config-page-1

terminal
$ npx khotan add config-page-1

Creates a /config page with a Hub-based operational view for plugs and flows. Use when you want a quick operator page with toggles and manual triggers.

What gets installed

files
app/config/page.tsx              ← the route

# Required component: hub
components/khotan/hub.tsx        ← dashboard UI
components/khotan/wire.tsx       ← wire panel
components/khotan/var-panel.tsx  ← variable management panel

Dependencies

  • Requires the hub component
  • shadcn: card, badge, table, switch, button, input, label
  • npm: drizzle-orm

mappings-page-1

terminal
$ npx khotan add mappings-page-1

Creates a /mappings page for browsing resources, searching canonical identities, and editing per-plug refs. Use when you want a dedicated mappings operator surface with paginated search, create, edit, and delete flows.

What gets installed

files
app/mappings/page.tsx                    ← the route

# Required component: mapping-browser
components/khotan/mapping-browser.tsx   ← searchable mappings browser

Dependencies

  • Requires the mapping-browser component
  • shadcn: card, table, button, input, label

graph

terminal
$ npx khotan add graph

Creates a /graph page with a topology canvas that visualizes plugs, flows, webhook handlers, and the shared app database. Use when you want a visual architecture and runtime-state overview.

What gets installed

files
app/graph/page.tsx                       ← the route
components/khotan/topology-canvas.tsx   ← React Flow canvas

Dependencies

  • npm: @xyflow/react
  • shadcn: card, badge

logs-page-1

terminal
$ npx khotan add logs-page-1

Creates a /logs page that combines run history and webhook event history into one operational log surface. Use when you want a dedicated page for execution history.

What gets installed

files
app/logs/page.tsx                            ← the route

# Required component: logs
components/khotan/logs.tsx                  ← composed log view
components/khotan/runs-table.tsx            ← paginated runs table
components/khotan/webhook-events-table.tsx  ← paginated webhook events table

Dependencies

  • Requires the logs component
  • shadcn: card, table, badge, button

debug-page-1

terminal
$ npx khotan add debug-page-1

Creates a /debug index page listing all plugs and a /debug/[plugName] detail page with the interactive plug debugger. Use when you want developers and agents to debug plug requests from the app UI.

What gets installed

files
app/debug/page.tsx              ← plug list index route
app/debug/[plugName]/page.tsx   ← per-plug debugger route

# Required component: plug-debugger
components/khotan/plug-debugger.tsx  ← interactive debug panel

Dependencies

  • Requires the plug-debugger component (which requires plug)
  • shadcn: card, badge, button, input, label

How dependencies work

Blocks can depend on components. When you run npx khotan add <block>, the CLI checks whether the required components are already installed. If they're missing, it will prompt you to install them first. Component files go into your khotan output directory (default src/lib/khotan/) and components/khotan/, while block route files go into your app/ directory.

Next steps