Agents React (@veridex/agents-react)

npm install @veridex/agents-react @veridex/agents react

import { AgentProvider } from '@veridex/agents-react';
import { createAgent } from '@veridex/agents';
 
const agent = createAgent({ /* ... */ }, { modelProviders: { /* ... */ } });
 
function App() {
  return (
    <AgentProvider runtime={agent}>
      <AgentUI />
    </AgentProvider>
  );
}

import { ControlPlaneProvider } from '@veridex/agents-react';
import { RemoteControlPlaneClient } from '@veridex/agents-control-plane';
 
const controlPlane = new RemoteControlPlaneClient({
  baseUrl: 'https://cp.example.com',
  token: process.env.CP_TOKEN,
  tenantId: 'tenant-acme',
});
 
function OperatorDashboard() {
  return (
    <ControlPlaneProvider client={controlPlane}>
      <FleetDashboard />
    </ControlPlaneProvider>
  );
}

const { definition, state } = useAgent();
// definition — AgentDefinition (name, description, tools, etc.)
// state — current agent state

const { run, result, state, isLoading, error } = useRun();
 
// Start a run
await run('What is the current BTC price?');
 
// state: 'idle' | 'running' | 'suspended' | 'completed' | 'failed'

const { stream, cancel } = useTurnStream();
 
// Stream individual turns for real-time UI updates
for await (const turn of stream) {
  console.log(turn.content);
}

const { pending, resolve } = useApprovals();
 
// pending — ApprovalRequest[] awaiting decision
// resolve(id, approved) — approve or deny

const { events, latest } = useTrace();
// events — all TraceEvent[] for the current run
// latest — most recent event

const { tools, register, remove } = useToolRegistry();
// tools — registered ToolContract[]
// register(tool) / remove(toolName)

const { entries, write, search, clear } = useMemory();
 
await write({ tier: 'episodic', content: 'User prefers email' });
const results = await search({ query: 'preferences', limit: 5 });

const { snapshot, estimateSpend } = useBudget();
 
// snapshot.spent, snapshot.budget, snapshot.percentUtilized
const estimate = estimateSpend('gpt-4o', 5000); // tokens

const { plan, recompile } = useContextPlan();
// plan — compiled context sections with token counts

const { balance, send, history } = usePayments();
 
await send({ token: 'USDC', amount: '1000000', recipient: '0x...' });

const { identity, isVerified } = useAgentIdentity();
// identity — ERC-8004 on-chain identity (agentId, name, services)

const { score, history } = useAgentReputation();
// score — current reputation score
// history — feedback entries

const { importSkills, translateSession } = useOpenClawBridge();
 
const tools = await importSkills(manifest);
const translated = translateSession(openClawSession);

const { agents, activeRuns, healthSummary } = useFleetStatus();

const { tasks, assign, complete, cancel } = useOperatorTasks();

const { deployments, deploy, rollback, scale } = useDeployments();

const { incidents, acknowledge, resolve, escalate } = useIncidents();

const { workspaces, create, archive } = useWorkspaceResources();

const { suites, run, results } = useEvals();

const { bindings, bind, unbind, update } = usePolicyBindings();

import {
  useAgent, useRun, useApprovals, useBudget, useTrace,
} from '@veridex/agents-react';
 
function ChatPanel() {
  const { definition } = useAgent();
  const { run, result, state, isLoading, error } = useRun();
  const [input, setInput] = React.useState('');
 
  return (
    <div>
      <h2>{definition.name}</h2>
      <form onSubmit={(e) => { e.preventDefault(); run(input); }}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
      {isLoading && <p>Thinking...</p>}
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
      {result && <p>{result.output}</p>}
    </div>
  );
}
 
function ApprovalInbox() {
  const { pending, resolve } = useApprovals();
  if (!pending.length) return <p>No pending approvals.</p>;
 
  return (
    <ul>
      {pending.map((req) => (
        <li key={req.id}>
          <strong>{req.proposal.toolName}</strong>
          <pre>{JSON.stringify(req.proposal.arguments, null, 2)}</pre>
          <button onClick={() => resolve(req.id, true)}>Approve</button>
          <button onClick={() => resolve(req.id, false)}>Deny</button>
        </li>
      ))}
    </ul>
  );
}
 
function BudgetDisplay() {
  const { snapshot } = useBudget();
  return (
    <div>
      <p>Spent: ${snapshot.spent.toFixed(2)} / ${snapshot.budget.toFixed(2)}</p>
      <progress value={snapshot.percentUtilized} max={100} />
    </div>
  );
}