Requirements

React 18+
TypeScript
CSS Modules support (standard in Vite, Next.js, CRA)

Depute is agent-agnostic — it works with any AI backend (OpenAI, Anthropic, LangChain, AutoGen, or custom).

Install a component

npx ax-depute@latest add approval-gate

pnpm dlx ax-depute@latest add approval-gate

yarn dlx ax-depute@latest add approval-gate

bunx ax-depute@latest add approval-gate

This copies the component source files directly into src/components/ApprovalGate/. You own the code.

Each fetched file is checked against the release checksum before anything is written. If one does not match, or the command is interrupted, that attempt removes only the files and directories it created and restores any stylesheet it edited. Files and directories that were already in the project are left as they were, including empty directories.

On first install, shared files are also added once, next to the component directory:

src/types/ax-common.ts — shared TypeScript types (PlanStep, ToolCall, Artifact)
src/types/ax-core.ts — handoff and presented-payload types (HandoffContext, PresentedPayload)
src/utils/ax-receipt.ts — canonical approval receipt, hash, and verify
src/utils/ax-a11y.tsx — accessibility utilities used across components
src/styles/depute.css — design tokens and motion. This is the one stylesheet import.

Styles

Component CSS reads --ax-* tokens. Without the stylesheet, an installed component renders unstyled. The CLI copies depute.css, tokens.css, and animations.css into src/styles/ and, when it finds a global stylesheet such as src/index.css, inserts:

@import "./styles/depute.css";

Pass --css src/index.css to choose the file, or --no-css to skip the edit and add the import yourself. That single import is the only manual step when the CLI cannot find a stylesheet.

--dir moves the shared files with the components. add run-controls --dir components/ax writes the component to components/ax/RunControls/ and the shared files to components/types, components/utils, and components/styles, then rewrites the imports so they resolve.

Initialize the AI Skill Layer

Depute ships with a native Skill Layer that teaches your AI agent (Claude Code, Cursor, Copilot) how to use the components you just installed.

npx ax-depute@latest init

pnpm dlx ax-depute@latest init

yarn dlx ax-depute@latest init

bunx ax-depute@latest init

This command writes skills/depute/SKILL.md (and its reference files) into your repository, plus skills/depute/depute.skill.json with the CLI version. It also installs the design tokens when src/styles/depute.css is not already there, and writes src/types/ax-common.ts and src/utils/ax-a11y.tsx when those files are missing. A second run skips files that already exist and does not duplicate the CSS import. The skill tells an agent how to compose the primitives. It is not a runtime dependency.

List all components

npx ax-depute list

pnpm dlx ax-depute list

yarn dlx ax-depute list

bunx ax-depute list

Install multiple components

npx ax-depute@latest add plan-card
npx ax-depute@latest add tool-trace
npx ax-depute@latest add run-controls

pnpm dlx ax-depute@latest add plan-card
pnpm dlx ax-depute@latest add tool-trace
pnpm dlx ax-depute@latest add run-controls

yarn dlx ax-depute@latest add plan-card
yarn dlx ax-depute@latest add tool-trace
yarn dlx ax-depute@latest add run-controls

bunx ax-depute@latest add plan-card
bunx ax-depute@latest add tool-trace
bunx ax-depute@latest add run-controls

Shared types

All components use these core types from src/types/ax-common.ts:

interface PlanStep {
  id: string;
  label: string;
  status: 'pending' | 'active' | 'completed' | 'failed';
  confidence?: number;
}

interface ToolCall {
  id: string;
  name: string;
  input?: Record<string, unknown>;
  output?: Record<string, unknown>;
  status: 'pending' | 'running' | 'completed' | 'failed';
  timestamp: string;
  policyFlags?: {
    requiresApproval?: boolean;
    writesState?: boolean;
    externalAction?: boolean;
  };
}

interface Artifact {
  id: string;
  content: string;
  format: 'markdown' | 'json' | 'csv' | 'code';
  sourceStepId?: string;
  toolCallIds?: string[];
}

No backend required

Optional prototyping generators are a separate install. They are not copied with a component:

npx ax-depute add mock-data

import { generateMockPlan, generateMockToolCalls } from '../utils/mockData';

const plan = generateMockPlan(4);       // 4-step agent plan
const trace = generateMockToolCalls(3); // 3 tool call entries

mock-data type-imports the components it describes. Add those components before typechecking. With --dir, the file is written under that directory's parent utils/ folder and its imports point at the components you installed there.

Installation