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.

On first install, shared files are also added once:

src/types/ax-common.ts — shared TypeScript types (PlanStep, ToolCall, Artifact)
src/utils/ax-a11y.tsx — accessibility utilities used across components

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 creates a skills/depute/SKILL.md entry in your repository. It instructs your agent on the exact composition flows and design rationale of all Depute primitives, ensuring your agent builds reliable oversight UI on the first try.

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: unknown;
  output?: unknown;
  status: 'running' | 'completed' | 'failed';
  policyFlags?: ('requiresApproval' | 'writesState' | 'externalAction')[];
}

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

No backend required

Use the built-in mock data generators for prototyping:

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

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

The mock generators show the exact shape each component expects.

Installation