@agentdao/react

React hooks and components for AgentDAO.

Installation

npm install @agentdao/react
# or
yarn add @agentdao/react
# or
pnpm add @agentdao/react

Usage

import { useAgent } from '@developersagentdao/react';

function MyComponent() {
  const { agent, loading, error } = useAgent('my-agent-id');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!agent) return <div>No agent found</div>;

  return <div>Agent: {agent.name}</div>;
}

Components

AgentProvider

import { AgentProvider } from '@developersagentdao/react';

function App() {
  return (
    <AgentProvider>
      <MyComponent />
    </AgentProvider>
  );
}

API Reference

useAgent

A React hook for fetching and managing agent data.

const { agent, loading, error } = useAgent(agentId: string)

Returns

• agent: The agent data
• loading: Boolean indicating if the data is being fetched
• error: Any error that occurred during fetching

AgentProvider

A React context provider for agent configuration.

<AgentProvider config?: AgentProviderConfig>
  {children}
</AgentProvider>

Config Options

• apiUrl: The base URL for the AgentDAO API
• defaultHeaders: Default headers to include in requests

Error Handling

The hooks automatically handle loading and error states:

function MyComponent() {
  const { agent, loading, error } = useAgent('my-agent-id');

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return <AgentDisplay agent={agent} />;
}

Usage Example: AgentBridge

import { AgentBridgeClient } from '@agentdao/core';
import { useAgentBridge } from '@agentdao/react';

const client = new AgentBridgeClient(
  process.env.NEXT_PUBLIC_API_URL!,
  process.env.AGENTDAO_API_KEY // Your AgentDAO API key
);

function AgentInfo({ agentId }: { agentId: string }) {
  const { agent, loading, error } = useAgentBridge(agentId, client);
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <pre>{JSON.stringify(agent, null, 2)}</pre>;
}

• Set NEXT_PUBLIC_API_URL and AGENTDAO_API_KEY in your environment variables or .env file.

API Key Requirement

All API usage requires your AgentDAO API key. Pass it to the AgentBridgeClient and use it with hooks like useAgentBridge.

Example Usage

import { AgentBridgeClient } from '@agentdao/core';
import { useAgentBridge } from '@agentdao/react';

const client = new AgentBridgeClient(
  process.env.NEXT_PUBLIC_API_URL!,
  process.env.AGENTDAO_API_KEY // Your AgentDAO API key
);

function AgentInfo({ agentId }: { agentId: string }) {
  const { agent, loading, error } = useAgentBridge(agentId, client);
  // ...
}

• Set NEXT_PUBLIC_API_URL and AGENTDAO_API_KEY in your environment variables or .env file.

License

MIT