React UI SDK

The @tenzro/platform-ui package provides React hooks and pre-built components for building applications on Tenzro Platform. It wraps the @tenzro/platform TypeScript SDK with React-specific state management, loading states, and UI components.

Installation

npm install @tenzro/platform-ui @tenzro/platform
# or
yarn add @tenzro/platform-ui @tenzro/platform
# or
pnpm add @tenzro/platform-ui @tenzro/platform

Requirements

React 18 or React 19
Node.js 18 or later
TypeScript 5.0 or later (recommended)

Quick Start

import { TenzroProvider, useInfer, useWallets } from '@tenzro/platform-ui';

function App() {
  return (
    // API keys should be passed from server-side.
    // Never expose API keys in NEXT_PUBLIC_ env vars.
    <TenzroProvider apiKey={apiKey}>
      <MyComponent />
    </TenzroProvider>
  );
}

function MyComponent() {
  const { wallets, loading, refresh } = useWallets();
  const { infer, loading: inferring, result } = useInfer();

  const handleAnalyze = async () => {
    await infer({
      modelId: 'llama-3.1-70b',
      prompt: 'Analyze portfolio risk',
      maxTokens: 1024,
    });
  };

  return (
    <div>
      <h2>Wallets ({wallets.length})</h2>
      <button onClick={refresh}>Refresh</button>
      <button onClick={handleAnalyze} disabled={inferring}>
        {inferring ? 'Analyzing...' : 'Analyze Risk'}
      </button>
      {result && <pre>{result.content}</pre>}
    </div>
  );
}

Provider

Wrap your application with TenzroProvider to make the SDK available to all child components. The provider accepts the same configuration as TenzroClientConfig from the TypeScript SDK:

import { TenzroProvider } from '@tenzro/platform-ui';

<TenzroProvider
  apiKey="tnz_tenant123_sk_..."   // Required - API key (tnz_ prefix)
  tenantId="tenant123"             // Optional - extracted from apiKey automatically
  timeout={30000}                  // Optional - request timeout in ms (default: 30000)
>
  {children}
</TenzroProvider>

Access the platform instance directly via hooks:

import { useTenzro, usePlatform } from '@tenzro/platform-ui';

// Get full context (platform instance + config)
const { platform, apiKey, tenantId } = useTenzro();

// Get just the TenzroPlatform instance
const platform = usePlatform();

Package Exports

The SDK supports tree-shaking and provides submodule exports for optimized bundle sizes:

// Import everything from main entry
import { TenzroProvider, useInfer, useBridgeQuote } from '@tenzro/platform-ui';

// Or import from specific submodules for smaller bundles
import { useAIModels, useInfer } from '@tenzro/platform-ui/ai';
import { useBridgeRoutes, useBridgeQuote } from '@tenzro/platform-ui/bridge';
import { useParties, useLedgerTransfer } from '@tenzro/platform-ui/ledger';
import { useCustodyKeys, useSign } from '@tenzro/platform-ui/custody';
import { useWallets, usePolicies } from '@tenzro/platform-ui/wallet';
import { useCollections, useMint } from '@tenzro/platform-ui/token';
import { useAllocations } from '@tenzro/platform-ui/provision';
import { useAnchors, useSubmitAnchor } from '@tenzro/platform-ui/anchor';
import { useApiKeys } from '@tenzro/platform-ui/apikeys';
import { useEvents } from '@tenzro/platform-ui/events';

Available Modules

Module	Import Path	Description
Provider	`@tenzro/platform-ui`	TenzroProvider context, useTenzro, and usePlatform hooks
AI	`@tenzro/platform-ui/ai`	Inference, streaming, multi-party sessions, TEE, RAG, model deployment, verifiable AI
Ledger	`@tenzro/platform-ui/ledger`	Canton Network parties, contracts, transfers, domains, identity
Wallet	`@tenzro/platform-ui/wallet`	Wallet CRUD, balances, policies, approvals, whitelist management
Token	`@tenzro/platform-ui/token`	Token collections, minting, transfers, balances
Bridge	`@tenzro/platform-ui/bridge`	Cross-chain bridging with routes, quotes, and operations
Custody	`@tenzro/platform-ui/custody`	MPC key management, signing, verification
Anchor	`@tenzro/platform-ui/anchor`	State root anchoring and proof verification
Provision	`@tenzro/platform-ui/provision`	Canton party allocation, network access, apps, quotas
API Keys	`@tenzro/platform-ui/apikeys`	API key lifecycle management
Events	`@tenzro/platform-ui/events`	Real-time WebSocket event subscriptions
Auth	`@tenzro/platform-ui/auth`	Auth types (TenzroAuthConfig, AuthUser, AuthSession, PasskeyCredential)

Hooks and Components by Module

AI Hooks

Hook	Description
`useAIModels()`	List available AI models
`useAIModel(modelId)`	Get a specific model
`useInfer()`	Run inference (returns `infer` function + `result`)
`useInferStream()`	Streaming inference with token-by-token updates
`useEmbed()`	Generate text embeddings
`useChat()`	Multi-turn chat conversations
`useSuggestions()`	Get AI suggestions
`useTransactionRisk()`	Analyze transaction risk scores
`useAnalyzeBridge()`	AI-powered bridge route analysis
`useCheckAddress()`	Check address validity/risk
`useGasPrice()`	Get gas price estimates
`useGPUStatus()`	Get GPU cluster status
`useAIStats()`	Get AI service statistics
`useFewShotInfer()`	Few-shot inference with examples
`useMultiPartySessions()`	List multi-party inference sessions
`useMultiPartySession(id)`	Get a specific session
`useCreateMultiPartySession()`	Create a new multi-party session
`useTEEAttestation()`	Get TEE attestation reports
`useVerifyTEEAttestation()`	Verify TEE attestation
`useRAGQuery()`	Query with retrieval-augmented generation
`useRAGDataSources()`	Manage RAG data sources
`useDeployedModels()`	List deployed custom models
`usePrivateEnvironments()`	Manage private AI environments
`useRecordInference()`	Record inference result on Canton Ledger
`useVerifyInference()`	Verify ledger-recorded inference
`useInferenceHistory()`	Get inference audit trail from ledger

AI Components

Component	Description
`ModelSelector`	Dropdown to select AI models
`InferenceRunner`	Run inference with built-in UI
`MultiPartySessionList`	List multi-party sessions
`MultiPartySessionDetail`	Session detail view
`CreateMultiPartySession`	Form to create a session
`MultiPartySessionManager`	Full session management UI
`TEEAttestationViewer`	View TEE attestation details
`TEEAttestationBadge`	Trust badge for TEE verification
`RAGQueryRunner`	RAG query interface
`RAGDataSourceList`	List and manage RAG data sources
`DeployedModelList`	List deployed models
`DeployedModelDetail`	Model deployment details
`DeployModelForm`	Form to deploy a model
`InferenceHistory`	Verifiable AI audit trail viewer
`VerifyInference`	Verify a recorded inference
`RecordInferenceButton`	Button to record inference on ledger
`VerifiableAIDashboard`	Full verifiable AI dashboard

Example

Using AI hooks and components

import {
  useInfer,
  useInferStream,
  ModelSelector,
  InferenceRunner,
} from '@tenzro/platform-ui';

function AIDemo() {
  const { infer, result, loading, error } = useInfer();
  const { stream, chunks, streaming } = useInferStream();

  return (
    <>
      <ModelSelector onSelect={(model) => console.log(model)} />
      <InferenceRunner onResult={(result) => console.log(result)} />
    </>
  );
}

Server Components

The SDK is designed for client-side React. For Next.js App Router, mark components using hooks with 'use client':

Next.js App Router

Any component that uses React hooks from this SDK must be a Client Component. Add the 'use client' directive at the top of the file.

'use client';

import { useWallets } from '@tenzro/platform-ui';

export function WalletList() {
  const { wallets, loading } = useWallets();
  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {wallets.map(w => <li key={w.id}>{w.name}</li>)}
    </ul>
  );
}

TypeScript Support

Full TypeScript support with exported prop types for all components:

import type {
  // Provider
  TenzroProviderProps,
  // AI component props
  ModelSelectorProps,
  InferenceRunnerProps,
  MultiPartySessionListProps,
  MultiPartySessionDetailProps,
  CreateMultiPartySessionProps,
  MultiPartySessionManagerProps,
  TEEAttestationViewerProps,
  TEEAttestationBadgeProps,
  RAGQueryRunnerProps,
  RAGDataSourceListProps,
  DeployedModelListProps,
  DeployedModelDetailProps,
  DeployModelFormProps,
  InferenceHistoryProps,
  VerifyInferenceProps,
  RecordInferenceButtonProps,
  VerifiableAIDashboardProps,
  // Ledger component props
  PartySelectorProps,
  TransferFormProps,
  // Bridge component props
  BridgeQuoteProps,
  // Token component props
  CollectionCreatorProps,
  // Custody component props
  KeySelectorProps,
  SignFormProps,
  // Anchor component props
  AnchorSubmitProps,
  ProofVerifierProps,
  // API Keys component props
  ApiKeyCreatorProps,
} from '@tenzro/platform-ui';

Wallet and Auth types are re-exported from the TypeScript SDK:

// Wallet types (re-exported from @tenzro/platform/wallet)
import type {
  Wallet,
  WalletBalance,
  WalletTransaction,
  SpendingPolicy,
  ApprovalRequest,
  WhitelistAddress,
} from '@tenzro/platform-ui';

// Auth types (re-exported from @tenzro/platform/auth)
import type {
  TenzroAuthConfig,
  AuthUser,
  AuthSession,
  PasskeyCredential,
  AuthEvent,
} from '@tenzro/platform-ui';

Error Handling

All hooks return an error field when requests fail. Errors are instances of TenzroApiError from the TypeScript SDK:

import { useInfer } from '@tenzro/platform-ui';

function MyComponent() {
  const { infer, result, loading, error } = useInfer();

  if (error) {
    return (
      <div>
        <p>Error {error.status}: {error.message}</p>
        <p>Code: {error.code}</p>
      </div>
    );
  }
  // ...
}