@torknetwork/admin-console

@torknetwork/admin-console

Embeddable React admin console for the Tork AI Agent Governance Platform. Provides a complete UI for managing HITL configurations, tool registries, agent permissions, governance policies, PII detection rules, approval workflows, and audit logs.

Installation

npm install @torknetwork/admin-console
# or
yarn add @torknetwork/admin-console
# or
pnpm add @torknetwork/admin-console

Quick Start

import { TorkAdminConsole } from '@torknetwork/admin-console';

function App() {
  return (
    <TorkAdminConsole
      apiKey="your-tork-api-key"
      baseUrl="https://api.tork.network"
      reviewerId="[e-mail]"
      theme="dark"
    />
  );
}

Props

Prop	Type	Default	Description
apiKey	string	required	Your Tork API key
baseUrl	string	https://api.tork.network	Tork Admin API base URL
reviewerId	string	admin	ID used when approving/rejecting requests
theme	'dark' | 'light'	dark	UI theme
className	string	''	Additional CSS classes

Features

Dashboard

• Real-time governance metrics and statistics
• Activity trends visualization with charts
• Quick overview of pending approvals and blocked actions

HITL Configuration

• Configure Human-in-the-Loop settings
• Set approval timeouts and escalation rules
• Configure fatigue detection parameters
• Manage velocity thresholds for slicing attack detection

Tool Registry

• Register and manage AI agent tools
• Configure rate limits per tool
• Block sensitive tools from agent access
• Define tool allowlists

Agent Registry

• Register AI agents with unique identifiers
• Assign permissions and frameworks
• Enable/disable agents

Governance Policies

• Create YAML-based governance policies
• Set policy priorities for conflict resolution
• Enable/disable policies without deletion

PII Detection Rules

• Configure PII type detection (email, phone, SSN, credit cards, etc.)
• Set actions per PII type (redact, block, warn, log)
• Enable/disable detection rules

Approval Queue

• View pending Human-in-the-Loop approvals
• Approve or reject with required reasoning
• Filter by status (pending, approved, rejected)
• Expiration tracking

Audit Logs

• Searchable audit trail of all governance actions
• Filter by agent, action type, and date
• Export logs to CSV
• Expandable details view

Advanced Usage

Custom Layouts

Import individual tab components for custom layouts:

import {
  DashboardTab,
  HITLConfigTab,
  ToolsTab,
  AgentsTab,
  PoliciesTab,
  PIIRulesTab,
  ApprovalsTab,
  AuditLogsTab,
  createTorkAPI,
} from '@torknetwork/admin-console';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function CustomDashboard() {
  const api = createTorkAPI('https://api.tork.network', 'your-api-key');

  return (
    <QueryClientProvider client={queryClient}>
      <div className="grid grid-cols-2 gap-4">
        <DashboardTab api={api} />
        <ApprovalsTab api={api} reviewerId="admin" />
      </div>
    </QueryClientProvider>
  );
}

Direct API Access

Use the API hook directly for custom integrations:

import { createTorkAPI } from '@torknetwork/admin-console';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function CustomComponent() {
  const api = createTorkAPI('https://api.tork.network', 'your-api-key');
  const { data: stats, isLoading } = api.useDashboardStats();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <p>Total Tools: {stats?.total_tools}</p>
      <p>Pending Approvals: {stats?.pending_approvals}</p>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CustomComponent />
    </QueryClientProvider>
  );
}

Styling

The console uses Tailwind CSS classes. For the styles to work correctly, ensure your project includes Tailwind CSS or the necessary styles.

With Tailwind CSS

Add the admin-console to your Tailwind content paths:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@torknetwork/admin-console/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
};

Without Tailwind CSS

Import the pre-built CSS file:

import '@torknetwork/admin-console/dist/styles.css';
import { TorkAdminConsole } from '@torknetwork/admin-console';

TypeScript

Full TypeScript support is included. Import types as needed:

import type {
  TorkAdminConsoleProps,
  UseTorkAPI,
  HITLConfig,
  Tool,
  Agent,
  Policy,
  PIIRule,
  Approval,
  AuditLog,
  DashboardStats,
} from '@torknetwork/admin-console';

Requirements

• React 18+
• @tanstack/react-query 5+
• Tailwind CSS (recommended) or import pre-built styles

Related Packages

• tork - Python SDK for Tork governance
• @torknetwork/mcp-server - MCP server for Claude Desktop integration

Links

• Tork Documentation
• GitHub Repository
• Admin API Reference
• The Agent Crisis Book

License

MIT License - Copyright (c) 2025 Tork Network