Saltar al contenido principal

Frontend Development Guidance

This guide covers the development, integration, and usage of UI components within the AlphaSwarm ecosystem.

Component Quick Reference​

ComponentLocationPurpose
PromotionGateModalcomponents/control-plane/HITL approval for money-plane
AgentStatusGridcomponents/control-plane/Live agent monitoring
DrawdownChartcomponents/charts/Drawdown visualization
ExposureHeatmapcomponents/risk/Symbol × factor matrix
RiskDashboardcomponents/risk/Comprehensive risk view

Getting Started​

Installation​

cd alphaswarm_ui
pnpm install

Development Server​

pnpm dev

Environment Setup​

Required environment variables in alphaswarm_ui/.env.local:

UI Integration Guide​

1. Connecting to the Backend​

Use the provided useAlphaSwarmApi hook to interact with the API:

import { useAlphaSwarmApi } from '@/hooks/useAlphaSwarmApi';

const { data, loading } = useAlphaSwarmApi('/agents/list');

2. Live Agent Monitoring​

Integrate the AgentStatusGrid to show real-time agent health:

import { AgentStatusGrid } from '@/components/control-plane/AgentStatusGrid';

<AgentStatusGrid orgId={currentOrgId} />

Troubleshooting Frontend Issues​

  • HMR Not Working: Ensure you are using pnpm dev and not a production build.
  • Hydration Errors: Check for mismatches between server-side and client-side rendering, especially when using browser-only globals like window or localStorage.
  • API CORS Errors: Verify that the backend has the correct CORS_ORIGINS configured to allow your local frontend URL.

Further Documentation​