Ai Marketplace

AI Agent Marketplace - Frontend

React frontend for the AI Agent Marketplace. A dark-themed, responsive web application for deploying and managing AI agents on isolated cloud environments.

Features

• Dashboard - View and manage your boxes (VPS instances)
• Agent Marketplace - Browse and install AI agents into your boxes
• Web Terminal - Interact with agents directly from the browser via xterm.js
• Box Creation - Select tier, region, and provision with Stripe checkout
• Settings - Profile, SSH key management, and billing portal
• Auth0 Login - Secure authentication with social providers

Tech Stack

• React 18 + Vite
• Tailwind CSS (dark theme with purple accents)
• React Router v6
• Auth0 React SDK
• Axios (HTTP client)
• xterm.js (terminal emulator)
• Cloudflare Pages (deployment)

Project Structure

frontend/
├── public/
│   └── agents/              # Agent icons (SVG)
├── src/
│   ├── components/
│   │   ├── boxes/           # TierSelector, RegionSelector
│   │   ├── layout/          # Sidebar, Layout
│   │   ├── modals/          # SettingsModal
│   │   ├── terminal/        # Terminal component (xterm.js)
│   │   └── ui/              # Button, Card, Input, Modal, etc.
│   ├── hooks/               # useApi, useWebSocket
│   ├── pages/
│   │   ├── Dashboard.jsx    # Box list
│   │   ├── BoxDetail.jsx    # Box info + agents + terminal
│   │   ├── BoxCreate.jsx    # Create box with Stripe checkout
│   │   ├── Marketplace.jsx  # Agent catalog
│   │   └── BillingSuccess.jsx
│   ├── services/
│   │   └── api.js           # Axios instance + API helpers
│   ├── utils/               # Region utils, helpers
│   ├── App.jsx              # Routing
│   └── main.jsx             # Entry point
├── package.json
├── tailwind.config.js
├── vite.config.js
└── .env.example

Getting Started

Prerequisites

• Node.js 18+
• An Auth0 SPA application
• Backend API running

Installation

# Clone