Installation

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

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.