2.7 KiB

Raw Blame History

Trading Agents Frontend - Quick Start

Quick Start

1. Install Dependencies (First Time Only)

cd frontend
npm install

2. Start Development Server

npm run dev

The frontend will be available at: http://localhost:5173

3. Configure API Connection

Navigate to http://localhost:5173/settings
Enter your API key from the backend
Verify the API URL is correct (default: http://localhost:8002)

Note: Make sure the Trading Agents API is running on port 8002 before using the frontend!

First Time Setup

When you first open the application:

You'll be automatically redirected to the Settings page
Enter the API key you received when starting the API server
The API key is stored securely in your browser's local storage
Once configured, you can start creating analyses!

Available Commands

# Development server (with hot reload)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run type-check

Troubleshooting

"Invalid or inactive API key"

Go to Settings and verify your API key
Make sure you copied the entire key from the API startup logs
Check that the API server is running

"Cannot connect to API"

Verify the API URL in Settings (default: http://localhost:8002)
Make sure the API server is running
Check for port conflicts

Frontend not loading

Check that port 5173 is not in use
Try stopping the dev server and starting again
Clear browser cache and reload

Development Tips

The frontend uses hot module replacement (HMR) for instant updates
Changes to TypeScript files will cause a rebuild
Changes to CSS will update instantly
Browser DevTools are your friend for debugging

Project Structure

frontend/
├── src/
│   ├── components/     # React components
│   ├── pages/          # Page components
│   ├── hooks/          # Custom hooks
│   ├── services/       # API & WebSocket
│   ├── stores/         # State management
│   ├── types/          # TypeScript types
│   ├── utils/          # Utilities
│   └── styles/         # Global styles
├── public/             # Static assets
└── index.html          # Entry HTML

Features

Dashboard: Overview of all analyses and system metrics
Analyses: List and manage all trading analyses
Create Analysis: Form to start new analysis
Analysis Detail: Real-time view of analysis progress
Settings: Configure API key and URL

Next Steps

Start the API server (see api/START_API.md)
Start the frontend (npm run dev)
Configure your API key in Settings
Create your first analysis!

Enjoy using Trading Agents! 🚀

2.7 KiB Raw Blame History