React hooks and components for AgentDAO
npm install @agentdao/reactReact hooks and components for AgentDAO.
``bash`
npm install @agentdao/reactor
yarn add @agentdao/reactor
pnpm add @agentdao/react
`tsx
import { useAgent } from '@developersagentdao/react';
function MyComponent() {
const { agent, loading, error } = useAgent('my-agent-id');
if (loading) return
return
Components
$3
`tsx
import { AgentProvider } from '@developersagentdao/react';function App() {
return (
);
}
`API Reference
$3
A React hook for fetching and managing agent data.
`typescript
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$3
A React context provider for agent configuration.
`tsx
{children}
`#### Config Options
-
apiUrl: The base URL for the AgentDAO API
- defaultHeaders: Default headers to include in requestsError Handling
The hooks automatically handle loading and error states:
`tsx
function MyComponent() {
const { agent, loading, error } = useAgent('my-agent-id'); if (loading) return ;
if (error) return ;
return ;
}
`Usage Example: AgentBridge
`ts
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
Loading...;
if (error) return Error: {error.message};
return {JSON.stringify(agent, null, 2)};
}
`- 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.
$3
`ts
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.MIT