TorkTORK
Docs/Admin Console
React Component

Tork Admin Console

Embeddable React UI for managing AI governance. Configure tools, agents, policies, PII rules, and handle human-in-the-loop approvals.

Dashboard

Stats and activity overview

HITL Config

Human-in-the-loop settings

Tool Management

Configure allowed tools

PII Rules

Data protection settings

Console Tabs

Dashboard
Overview stats & metrics
HITL Config
Approval rate limits
Tools
Tool access control
Agents
Agent registration
Policies
YAML policy editor
PII Rules
Data redaction rules
Approvals
Pending HITL requests
Audit Logs
Activity history

Installation

Install the Admin Console package from npm.

bash
# npm
npm install @torknetwork/admin-console

# yarn
yarn add @torknetwork/admin-console

# pnpm
pnpm add @torknetwork/admin-console
Package: @torknetwork/admin-console@1.0.0

Environment Setup

Configure your API key as an environment variable.

bash.env
# .env.local (Next.js)
NEXT_PUBLIC_TORK_API_KEY=tork_live_xxxxxxxxxxxxx

# .env (Vite)
VITE_TORK_API_KEY=tork_live_xxxxxxxxxxxxx

# .env (Create React App)
REACT_APP_TORK_API_KEY=tork_live_xxxxxxxxxxxxx

Security Note

Never commit API keys to version control. Use environment variables and add .env* to your .gitignore.

Basic Usage

Drop in the TorkAdminConsole component.

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

function App() {
  return (
    <TorkAdminConsole
      apiKey="your_tork_api_key"
      theme="dark"
    />
  );
}

export default App;

Props Reference

Available configuration options.

typescript
interface TorkAdminConsoleProps {
  // Required: Your Tork API key
  apiKey: string;

  // Optional: API base URL (default: https://api.tork.network)
  baseUrl?: string;

  // Optional: Reviewer ID for HITL approvals (default: "admin")
  reviewerId?: string;

  // Optional: Theme (default: "dark")
  theme?: 'dark' | 'light';

  // Optional: Additional CSS class
  className?: string;
}
PropTypeDefault
apiKeystringrequired
baseUrlstring"https://api.tork.network"
reviewerIdstring"admin"
theme'dark' | 'light'"dark"
classNamestring""

Framework Integration

Examples for popular React frameworks

tsxapp/admin/page.tsx
// app/admin/page.tsx (Next.js App Router)
'use client';

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

export default function AdminPage() {
  return (
    <div className="min-h-screen">
      <TorkAdminConsole
        apiKey={process.env.NEXT_PUBLIC_TORK_API_KEY!}
        baseUrl="https://api.tork.network"
        reviewerId="admin@company.com"
        theme="dark"
      />
    </div>
  );
}

Individual Tab Components

Build custom layouts with individual tab exports.

Import individual tabs for custom layouts. Create your own sidebar, header, or embed specific tabs in different parts of your application.

tsxCustomAdmin.tsx
import {
  DashboardTab,
  HITLConfigTab,
  ToolsTab,
  AgentsTab,
  PoliciesTab,
  PIIRulesTab,
  ApprovalsTab,
  AuditLogsTab,
  createTorkAPI,
} from '@torknetwork/admin-console';

function CustomAdminLayout() {
  const api = createTorkAPI('https://api.tork.network', 'your_api_key');

  return (
    <div className="custom-layout">
      <aside className="sidebar">
        {/* Your custom sidebar */}
      </aside>

      <main className="content">
        {/* Use individual tabs in your own layout */}
        <DashboardTab api={api} />

        {/* Or render specific tabs based on route */}
        {/* <ToolsTab api={api} /> */}
        {/* <AgentsTab api={api} /> */}
        {/* <PoliciesTab api={api} /> */}
      </main>
    </div>
  );
}

API Hooks

Access Tork API directly with React Query hooks.

Use createTorkAPI() to get hooks for fetching data, creating resources, and managing approvals. All hooks are powered by React Query.

tsxCustomDashboard.tsx
import { createTorkAPI } from '@torknetwork/admin-console';
import type { Tool, Agent, Policy } from '@torknetwork/admin-console';

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

  // Use individual hooks
  const { data: stats } = api.useDashboardStats();
  const { data: tools } = api.useTools();
  const { data: agents } = api.useAgents();
  const { data: policies } = api.usePolicies();
  const { data: approvals } = api.useApprovals('pending');

  // Mutations
  const createTool = api.useCreateTool();
  const updateAgent = api.useUpdateAgent();
  const approveAction = api.useApproveAction();

  const handleCreateTool = async () => {
    await createTool.mutateAsync({
      tool_name: 'new-tool',
      description: 'My new tool',
      allowed_agents: ['agent-1'],
      allowed_targets: ['*'],
      blocked_flags: [],
      max_calls_per_minute: 60,
      requires_hitl: false,
      is_active: true,
    });
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Total Tools: {stats?.total_tools}</p>
      <p>Pending Approvals: {stats?.pending_approvals}</p>
      <button onClick={handleCreateTool}>Create Tool</button>
    </div>
  );
}

Theming

Customize colors and styling.

tsx
// Custom theming with CSS variables
<TorkAdminConsole
  apiKey="your_api_key"
  theme="dark"
  className="custom-admin"
/>

// In your CSS:
.custom-admin {
  /* Override default colors */
  --tork-primary: #CD7F32;
  --tork-bg: #0a0a0a;
  --tork-border: rgba(255, 255, 255, 0.1);
}

// Or use light theme
<TorkAdminConsole
  apiKey="your_api_key"
  theme="light"
/>

Protecting Admin Routes

Secure your admin console with authentication.

Wrap the Admin Console with your authentication provider. Pass the authenticated user's email as reviewerId to track who approves actions.

tsxProtectedAdmin.tsx
// Protect your admin route with authentication
import { useSession } from 'next-auth/react';
import { TorkAdminConsole } from '@torknetwork/admin-console';

function ProtectedAdmin() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (!session) {
    return <div>Access Denied. Please sign in.</div>;
  }

  // Only render for authenticated users
  return (
    <TorkAdminConsole
      apiKey={process.env.NEXT_PUBLIC_TORK_API_KEY!}
      reviewerId={session.user?.email || 'admin'}
      theme="dark"
    />
  );
}

TypeScript Types

Available type definitions.

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

// HITLConfig - Human-in-the-loop configuration
interface HITLConfig {
  max_approvals_per_minute: number;
  cooldown_minutes: number;
  velocity_window_minutes: number;
  velocity_threshold_count: number;
  velocity_threshold_amount: number;
  approval_expiry_minutes: number;
}

// Tool - Governed tool definition
interface Tool {
  id: string;
  tool_name: string;
  description?: string;
  allowed_agents: string[];
  allowed_targets: string[];
  blocked_flags: string[];
  max_calls_per_minute: number;
  requires_hitl: boolean;
  is_active: boolean;
}

// Agent - Registered AI agent
interface Agent {
  id: string;
  agent_id: string;
  name?: string;
  framework?: string;
  permissions: string[];
  is_active: boolean;
}

// Policy - Governance policy
interface Policy {
  id: string;
  name: string;
  description?: string;
  yaml_content: string;
  is_active: boolean;
  priority: number;
}

Available API Hooks

useDashboardStatsuseHITLConfiguseUpdateHITLConfiguseToolsuseCreateTooluseUpdateTooluseDeleteTooluseAgentsuseCreateAgentuseUpdateAgentuseDeleteAgentusePoliciesuseCreatePolicyuseUpdatePolicyuseDeletePolicyusePIIRulesuseUpdatePIIRulesuseApprovalsuseApproveActionuseRejectActionuseAuditLogs

Best Practices

Protect the admin route

Always require authentication before rendering the Admin Console.

Use environment variables

Never hardcode API keys. Use NEXT_PUBLIC_, VITE_, or REACT_APP_ prefixes.

Set meaningful reviewerId

Pass the authenticated user's email for audit trail tracking.

Use dynamic imports for SSR

In Next.js Pages Router, use dynamic() with ssr: false to avoid hydration issues.

Match theme to your app

Use the theme prop to match your application's color scheme.

Next Steps

Connect your agents to Tork and explore the SDK integrations.

Documentation

Learn to integrate TORK

Upgrade Plan

Current: free

Support

Get help from our team