Provider Setup
The TenzroProvider component initializes the platform client and makes it available to all child components via React context.
Basic Setup
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>
);
}Provider Props
interface TenzroProviderProps {
// Required
apiKey: string; // Your Tenzro API key
tenantId: string; // Your tenant ID
// Optional
baseUrl?: string; // API base URL (default: https://api.platform.tenzro.com)
timeout?: number; // Request timeout in ms (default: 30000)
retries?: number; // Max retry attempts (default: 3)
retryDelay?: number; // Base delay between retries in ms (default: 1000)
// Children
children: React.ReactNode;
}Environment Variables
For Next.js applications, use NEXT_PUBLIC_ prefix for client-side access:
# .env.local
NEXT_PUBLIC_TENZRO_API_KEY=tnz_your_api_key_here
NEXT_PUBLIC_TENZRO_TENANT_ID=your-tenant-idUsing the Context
Access the platform client directly with useTenzro or usePlatform:
import { useTenzro, usePlatform } from '@tenzro/platform-ui';
function MyComponent() {
// Get the full context with config
const { platform, config } = useTenzro();
// Or just get the platform client directly
const platform = usePlatform();
// Access any service
const fetchData = async () => {
const wallets = await platform.wallet.list();
const models = await platform.ai.listModels();
const parties = await platform.ledger.listParties();
};
return <div>...</div>;
}Custom Configuration
<TenzroProvider
apiKey={process.env.NEXT_PUBLIC_TENZRO_API_KEY!}
tenantId={process.env.NEXT_PUBLIC_TENZRO_TENANT_ID!}
baseUrl="https://api.staging.platform.tenzro.com"
timeout={60000}
retries={5}
retryDelay={2000}
>
<YourApp />
</TenzroProvider>Next.js App Router
In Next.js App Router, create a client-side wrapper component:
// app/providers.tsx
'use client';
import { TenzroProvider } from '@tenzro/platform-ui';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<TenzroProvider
apiKey={process.env.NEXT_PUBLIC_TENZRO_API_KEY!}
tenantId={process.env.NEXT_PUBLIC_TENZRO_TENANT_ID!}
>
{children}
</TenzroProvider>
);
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Error Handling
Wrap the provider in an error boundary to handle initialization errors:
'use client';
import { TenzroProvider } from '@tenzro/platform-ui';
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error }: { error: Error }) {
return (
<div role="alert">
<h2>Platform Error</h2>
<pre>{error.message}</pre>
</div>
);
}
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<TenzroProvider
apiKey={process.env.NEXT_PUBLIC_TENZRO_API_KEY!}
tenantId={process.env.NEXT_PUBLIC_TENZRO_TENANT_ID!}
>
{children}
</TenzroProvider>
</ErrorBoundary>
);
}Multiple Tenants
For applications that need to switch between tenants:
'use client';
import { useState } from 'react';
import { TenzroProvider } from '@tenzro/platform-ui';
export function MultiTenantProvider({ children }: { children: React.ReactNode }) {
const [tenantId, setTenantId] = useState(process.env.NEXT_PUBLIC_DEFAULT_TENANT!);
return (
<TenantContext.Provider value={{ tenantId, setTenantId }}>
<TenzroProvider
key={tenantId} // Force re-initialization on tenant change
apiKey={process.env.NEXT_PUBLIC_TENZRO_API_KEY!}
tenantId={tenantId}
>
{children}
</TenzroProvider>
</TenantContext.Provider>
);
}