Tenzro Platform React UI Library

React components and hooks for Tenzro Platform.

Installation

npm install @tenzro/platform-ui @tenzro/platform

Quick Start

Wrap your app with TenzroProvider:

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

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

Configuration

<TenzroProvider
  apiKey={string}       // Required - your API key
  tenantId={string}     // Required - your tenant ID
  baseUrl={string}      // Optional - defaults to https://api.platform.tenzro.com
  timeout={number}      // Optional - request timeout in ms
>

Components

AI Components

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

// Full inference UI
<InferenceRunner
  modelId="llama-3.1-70b"
  onResult={(result) => console.log(result.content)}
  onError={(error) => console.error(error)}
/>

// Model selection dropdown
<ModelSelector
  value={modelId}
  onChange={(id, model) => setModelId(id)}
  modelType="text"
/>

Anchor Components

import { AnchorSubmit, ProofVerifier } from '@tenzro/platform-ui';

// Submit state roots
<AnchorSubmit
  onSuccess={(anchor) => console.log(anchor.txHash)}
  onError={(error) => console.error(error)}
/>

// Verify Merkle proofs
<ProofVerifier
  onResult={(result) => console.log(result.valid)}
  onError={(error) => console.error(error)}
/>

Bridge Components

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

// Cross-chain bridge quote
<BridgeQuote
  onQuote={(quote) => console.log(quote.outputAmount)}
  onError={(error) => console.error(error)}
/>

Token Components

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

// Create token collections
<CollectionCreator
  onSuccess={(collection) => console.log(collection.id)}
  onError={(error) => console.error(error)}
/>

Hooks

AI Hooks

import { useAIModels, useInfer, useEmbed, useTransactionRisk } from '@tenzro/platform-ui';

function Component() {
  const { models, isLoading } = useAIModels();
  const { result, infer } = useInfer();
  const { embeddings, embed } = useEmbed();
  const { riskScore, analyzeRisk } = useTransactionRisk();

  const handleInfer = async () => {
    await infer({
      modelId: 'llama-3.1-70b',
      prompt: 'Hello...',
    });
  };

  return (
    <button onClick={handleInfer} disabled={isLoading}>
      Run Inference
    </button>
  );
}

Anchor Hooks

import { useAnchors, useSubmitAnchor, useVerifyProof } from '@tenzro/platform-ui';

const { anchors, refresh } = useAnchors({ namespace: 'myapp' });
const { submit } = useSubmitAnchor();
const { verify } = useVerifyProof();

Bridge Hooks

import { useBridgeRoutes, useBridgeQuote, useBridgeOperation } from '@tenzro/platform-ui';

const { routes } = useBridgeRoutes('base', 'canton');
const { quote, getQuote } = useBridgeQuote();
const { operation } = useBridgeOperation(operationId);

Token Hooks

import {
  useCollections,
  useTokens,
  useCreateCollection,
  useMint,
  useTransfer,
  useTokenBalances,
} from '@tenzro/platform-ui';

const { collections } = useCollections();
const { tokens } = useTokens(collectionId);
const { createCollection } = useCreateCollection();
const { mint } = useMint();
const { transfer } = useTransfer();
const { balances } = useTokenBalances(walletId);

Platform Hooks

Access the SDK and context directly:

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

function Component() {
  // Get the TenzroPlatform instance
  const platform = usePlatform();

  // Get context values
  const { platform, apiKey, tenantId, baseUrl } = useTenzro();

  // Access any SDK service
  const handleAction = async () => {
    // AI Service
    const models = await platform.ai.listModels();
    const result = await platform.ai.infer({ modelId: 'llama-3.1-70b', prompt: '...' });

    // Ledger Service (Canton Network)
    const party = await platform.ledger.allocateParty({ displayName: 'Alice', namespace: 'myapp' });
    const balance = await platform.ledger.getBalance(party.identifier);

    // Bridge Service (Chainlink CCIP)
    const routes = await platform.bridge.getRoutes('base', 'canton');
    const quote = await platform.bridge.getQuote({ sourceChain: 'base', destinationChain: 'canton', asset: 'USDC', amount: '1000000000' });

    // Wallet Service
    const settings = await platform.wallet.getSettings();

    // Anchor Service
    const anchor = await platform.anchor.submit({ stateRoot: '0x...', namespace: 'myapp' });
  };
}

Submodule Imports

Import from specific submodules for smaller bundle sizes:

import { useAIModels, useInfer, ModelSelector, InferenceRunner } from '@tenzro/platform-ui/ai';
import { useAnchors, useSubmitAnchor, AnchorSubmit, ProofVerifier } from '@tenzro/platform-ui/anchor';
import { useBridgeQuote, useBridgeRoutes, BridgeQuote } from '@tenzro/platform-ui/bridge';
import { useCollections, useMint, CollectionCreator } from '@tenzro/platform-ui/token';

// Types only (no components or hooks)
import type { Session, User } from '@tenzro/platform-ui/auth';
import type { WalletSettings, SpendingPolicy } from '@tenzro/platform-ui/wallet';

Styling

Components use minimal markup with semantic class names:

<InferenceRunner className="p-4 border rounded-lg" />
<BridgeQuote className="max-w-md mx-auto" />

CSS variables for theming:

• bg-primary, text-primary-foreground - Primary colors
• bg-muted, text-muted-foreground - Secondary colors
• bg-background, text-foreground - Base colors

Requirements

• React 18+ or React 19
• @tenzro/platform (peer dependency)

Links

• Platform Console
• Documentation
• GitHub

License

Apache-2.0 - Tenzro Network