Dashboards

Plug Debugger

Lightweight Postman for your plugs. Endpoint sidebar with click-to-load, path param interpolation, Zod schema display, git-diff style response validation, request history, copy-to-clipboard, and auto-format. Fires through the real plug code path (auth, retry, hooks). Gated behind `KHOTAN_DEBUG` — zero production footprint.

dev-only

DebugDEV

GET

/products

200 OK

142ms

Install

$ npx khotan add plug-debugger

Modes

Standalone panel

Drop the debugger on any page — scoped to a single plug. Self-hides when the debug route is disabled.

import { PlugDebugger } from '@/components/khotan/plug-debugger'
 
// Renders only when KHOTAN_DEBUG is set
<PlugDebugger plugName="pollinate" />

Defining endpoints

Endpoints live on the plug config with optional Zod schemas for request/response validation.

import { z } from "zod"
import { plug } from "./plug"
 
export const pollinatePlug = plug({
  name: "pollinate",
  baseUrl: "https://api.pollinate.tech",
  endpoints: {
    listProducts: {
      method: "GET",
      path: "/products",
      query: z.object({ page: z.number().optional() }),
      responses: {
        200: z.object({
          data: z.array(z.object({ id: z.string(), name: z.string() })),
          total: z.number(),
        }),
      },
    },
    getOrder: {
      method: "GET",
      path: "/orders/:id",
      responses: { 200: z.object({ id: z.string(), status: z.string() }) },
    },
  },
  vars: [...]
})

Hub integration

The Hub shows a Debug button on each plug card when KHOTAN_DEBUG is set. Links to /debug/[plugName].

// Hub automatically detects debug mode and shows buttons.
// Add the block for a ready-made page:
// $ npx khotan add debug-page-1
 
// Creates: app/debug/page.tsx (index listing all plugs)
// Creates: app/debug/[plugName]/page.tsx (per-plug debugger)
// Navigate: /debug/pollinate

Documentation

See the full integration guide — schema, generated files, helper API, and configuration — in the Plug Debugger docs.