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>
  );
}

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 } from '@tenzro/platform-ui';

function Component() {
  const { models, isLoading } = useAIModels();
  const { result, infer } = useInfer();

  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, useMint, useTransfer } from '@tenzro/platform-ui';

const { collections } = useCollections();
const { tokens } = useTokens(collectionId);
const { mint } = useMint();
const { transfer } = useTransfer();

Platform Hook

Access the SDK directly:

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

function Component() {
  const platform = usePlatform();
  const { apiKey, tenantId, baseUrl } = useTenzro();

  const handleAction = async () => {
    const result = await platform.ledger.getBalance('party::myapp::alice');
  };
}

Submodule Imports

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

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
• Website

License

Apache-2.0 - Tenzro, Inc.