Skip to content

README.md

Latest commit

 

History

History
133 lines (101 loc) · 3.88 KB

README.md

File metadata and controls

133 lines (101 loc) · 3.88 KB

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 the repository
git clone https://github.com/helmcode/ai-marketplace.git
cd ai-marketplace

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Edit .env with your Auth0 and API values

Development

npm run dev

Open http://localhost:5173.

Build

npm run build
npm run preview  # Preview production build locally

Environment Variables

Copy .env.example and fill in your values:

Variable Description
VITE_AUTH0_DOMAIN Auth0 tenant domain (e.g. your-tenant.auth0.com)
VITE_AUTH0_CLIENT_ID Auth0 SPA application client ID
VITE_AUTH0_AUDIENCE Auth0 API audience identifier
VITE_API_URL Backend API URL (e.g. http://localhost:8000)

Deployment

The frontend deploys to Cloudflare Pages:

# Requires CLOUDFLARE_API_KEY and CLOUDFLARE_EMAIL env vars
npm run deploy

Auth0 Setup

  1. Create a Single Page Application in Auth0
  2. Configure the following URLs in the Auth0 Dashboard:
    • Allowed Callback URLs: http://localhost:5173/callback, https://yourdomain.com/callback
    • Allowed Logout URLs: http://localhost:5173, https://yourdomain.com
    • Allowed Web Origins: http://localhost:5173, https://yourdomain.com
  3. Create an API in Auth0 with your audience identifier

Design System

Dark futuristic theme with purple accents:

  • Background: Deep dark (#0a0a0f, #12121a)
  • Accent: Purple gradient (#8b5cf6 to #a78bfa)
  • Cards: Rounded corners, subtle borders, glass-morphism
  • Terminal: JetBrains Mono font, purple cursor

License

This project is licensed under the GNU Affero General Public License v3.0.