React UI SDK

The @tenzro/platform-ui package provides React hooks and components for building applications on Tenzro Platform. It wraps the TypeScript SDK with React-specific state management 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, useWallet } from '@tenzro/platform-ui';

function App() {
  return (
    <TenzroProvider
      apiKey={process.env.NEXT_PUBLIC_TENZRO_API_KEY!}
      tenantId={process.env.NEXT_PUBLIC_TENZRO_TENANT_ID!}
    >
      <MyComponent />
    </TenzroProvider>
  );
}

function MyComponent() {
  const { wallets, loading, refresh } = useWallet();
  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>
  );
}

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 { useAllocations } from '@tenzro/platform-ui/provision';
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 and useTenzro hook
AI	`@tenzro/platform-ui/ai`	AI inference, multi-party sessions, TEE attestation, RAG
Bridge	`@tenzro/platform-ui/bridge`	Cross-chain bridging with quotes and operations
Ledger	`@tenzro/platform-ui/ledger`	Canton Network parties, contracts, and transfers
Custody	`@tenzro/platform-ui/custody`	MPC key management and signing
Token	`@tenzro/platform-ui/token`	Token collections, minting, and transfers
Wallet	`@tenzro/platform-ui/wallet`	Wallet management and balances
Anchor	`@tenzro/platform-ui/anchor`	State root anchoring and proof verification
API Keys	`@tenzro/platform-ui/apikeys`	API key management
Events	`@tenzro/platform-ui/events`	Real-time event subscriptions
Provision	`@tenzro/platform-ui/provision`	Canton Network allocations and quotas

Server Components

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

'use client';

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

export function WalletList() {
  const { wallets, loading } = useWallet();
  // ...
}

TypeScript Support

Full TypeScript support with exported types:

import type {
  TenzroProviderProps,
  ModelSelectorProps,
  InferenceRunnerProps,
  BridgeQuoteProps,
  KeySelectorProps,
  PartySelectorProps,
} from '@tenzro/platform-ui';