Your ai coding agent, that lives in your browser

Flycli is your in-browser AI coding agent that understands your codebase, and edits your local files directly.

No more switching between tools, copying code snippets, or context switching.

Prerequisites

  • Node.js: >= 18
  • Bun: >= 1.2.22 (package manager)
  • AI Gateway API Key: Required for AI agent functionality

Local Setup

1. Clone the Repository

git clone <repository-url>
cd flycli

2. Install Dependencies

bun install

3. Build the Project

# Build everything
bun run build

# Or build specific packages
turbo build --filter=cli
turbo build --filter=toolbar
turbo build --filter=agent

4. Run Development Mode

# Start all apps
bun run dev

# Or run specific apps
turbo dev --filter=cli
turbo dev --filter=toolbar

Using flycli in Your Project

Step 1: Link flycli Locally

Link the package globally (from the flycli repository):

cd apps/cli
bun link

This registers the flycli package globally so it can be used in other projects.

In your project (where you want to use flycli), link the package:

# From your project directory
bun link flycli

Note: You need to link the package in each project where you want to use it. This only needs to be done once per project.

Step 2: Configure Your Project

Set up environment variables in your project. Create a .env file in your project root:

AI_GATEWAY_API_KEY=your_ai_gateway_api_key_here

Note: The AI Gateway API key should be set in the project where you want to use flycli, not in the flycli repository itself.

Step 3: Start Your Application

Start your Next.js app in one terminal:

bun run dev
# or
next dev

Start flycli in another terminal:

bunx flycli

Access the toolbar: Open your browser and navigate to http://localhost:3100. flycli will proxy your Next.js app (running on port 3000) and overlay the AI toolbar.

Project Structure

flycli/
├── apps/
│   ├── agent/          # AI agent package
│   ├── cli/            # CLI tool
│   ├── toolbar/        # React toolbar UI
│   └── web/            # Example Next.js app
├── packages/
│   ├── eslint-config/  # Shared ESLint config
│   ├── typescript-config/ # Shared TS config
└── package.json        # Root package.json

Available Scripts

  • bun run build - Build all packages
  • bun run dev - Start all apps in development mode
  • bun run lint - Lint all packages
  • bun run format - Format code with Prettier
  • bun run check-types - Type check all packages

Building Specific Packages

# Build CLI
turbo build --filter=cli

# Build toolbar
turbo build --filter=toolbar

# Build agent
turbo build --filter=agent

How It Works

  1. flycli starts a server on the specified port (default: 3100)
  2. It proxies requests to your Next.js app running on another port (default: 3000)
  3. The toolbar UI is served at the flycli port and overlays your app
  4. WebSocket connection enables real-time communication between the toolbar and the AI agent
  5. The AI agent can read files, edit code, search, and execute terminal commands in your workspace