Skip to main content

Initializing DistriProvider in React

The DistriProvider is a React context provider that makes Distri functionality available throughout your React component tree. It manages the connection to the Distri server and provides hooks for interacting with agents.

Basic Setup​

Wrap your application (or the portion that uses Distri) with DistriProvider:

import { DistriProvider } from '@distri/react';

function App() {
  return (
    <DistriProvider>
      <YourComponents />
    </DistriProvider>
  );
}

Configuration​

Pass configuration options to customize the provider:

import { DistriProvider } from '@distri/react';

const config = {
  baseUrl: 'http://localhost:8787/api/v1',
  // Optional: API key for authentication
  apiKey: process.env.DISTRI_API_KEY,
  // Optional: Enable debug logging
  debug: true,
};

function App() {
  return (
    <DistriProvider config={config}>
      <YourComponents />
    </DistriProvider>
  );
}

Configuration Options​

  • baseUrl (required): The base URL of your Distri server API
  • apiKey (optional): API key for authentication
  • debug (optional): Enable debug logging (default: false)

Using Environment Variables​

For different environments, use environment variables:

const config = {
  baseUrl: import.meta.env.VITE_DISTRI_API_URL || 'http://localhost:8787/api/v1',
  apiKey: import.meta.env.VITE_DISTRI_API_KEY,
  debug: import.meta.env.DEV,
};

function App() {
  return (
    <DistriProvider config={config}>
      <YourComponents />
    </DistriProvider>
  );
}

Complete Example​

Here's a complete example showing how to set up DistriProvider with a chat interface:

import { useState } from 'react';
import { DistriProvider, Chat, useAgent } from '@distri/react';

// Main App Component
function App() {
  const config = {
    baseUrl: import.meta.env.VITE_DISTRI_API_URL || 'http://localhost:8787/api/v1',
  };

  return (
    <DistriProvider config={config}>
      <ChatInterface />
    </DistriProvider>
  );
}

// Chat Interface Component
function ChatInterface() {
  const { agent } = useAgent({ agentIdOrDef: 'my_agent' });
  const [threadId] = useState(() => crypto.randomUUID());

  if (!agent) {
    return <div>Loading agent...</div>;
  }

  return (
    <div className="chat-container">
      <Chat agent={agent} threadId={threadId} />
    </div>
  );
}

Using with External Tools​

When using external tools, you can access the provider context:

import { DistriProvider, Chat, useAgent } from '@distri/react';
import { createMapTools } from './tools';

function App() {
  const config = {
    baseUrl: import.meta.env.VITE_DISTRI_API_URL,
  };

  return (
    <DistriProvider config={config}>
      <MapsContent />
    </DistriProvider>
  );
}

function MapsContent() {
  const { agent } = useAgent({ agentIdOrDef: 'maps_agent' });
  const [threadId] = useState(() => crypto.randomUUID());
  const mapRef = useRef<GoogleMapsManagerRef>(null);
  const [tools, setTools] = useState<DistriAnyTool[]>([]);

  useEffect(() => {
    if (mapRef.current) {
      setTools(createMapTools(mapRef.current));
    }
  }, []);

  if (!agent) return null;

  return (
    <div className="maps-layout">
      <GoogleMapsManager ref={mapRef} />
      <Chat 
        agent={agent} 
        threadId={threadId} 
        externalTools={tools} 
      />
    </div>
  );
}

Available Hooks​

Once DistriProvider is set up, you can use these hooks in child components:

  • useAgent() - Get an agent instance
  • useChatMessages() - Access chat message history
  • useDistri() - Access the underlying Distri client

Error Handling​

The provider handles connection errors gracefully. You can add error boundaries:

import { ErrorBoundary } from 'react-error-boundary';

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <DistriProvider config={config}>
        <YourComponents />
      </DistriProvider>
    </ErrorBoundary>
  );
}

Multiple Providers​

You can use multiple DistriProvider instances for different servers or configurations:

function App() {
  return (
    <DistriProvider config={productionConfig}>
      <ProductionFeatures />
      
      <DistriProvider config={stagingConfig}>
        <StagingFeatures />
      </DistriProvider>
    </DistriProvider>
  );
}

References​