Now available in public beta

Your AI coding agent,
living in your browser.

Flycli understands your codebase and edits your local files directly from your browser. No more context switching.

Get StartedView on GitHub
localhost:3000

Hello World

Click the headline to edit

h3.font-boldsrc/app/page.tsx:42
Reading page.tsx...
Generating changes...
Updating file...

Prerequisites

Node.js

Version 18 or higher required for running the runtime environment.

Bun

Version 1.2.22+ required. Fast all-in-one JavaScript runtime.

AI Gateway

API Key required for enabling AI agent capabilities.

Local Setup

1

Clone the Repository

git clone https://github.com/shujanshaikh/flycli.git
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

Using flycli

1

Link flycli Locally

Link the package globally so it can be used in other projects.

cd apps/cli
bun link

# In your target project
bun link flycli
2

Configure Environment

Add your AI Gateway API key to your project's .env.local file.

AI_GATEWAY_API_KEY=your_key_here
3

Start Developing

Run your app and flycli in separate terminals.

Terminal 1
bun run dev
Terminal 2
bunx flycli

Visit http://localhost:3100 to see the 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

Element Selection

If you want to implement element selection functionality in your project, use React Grab by Aiden Bai. React Grab provides powerful element selection capabilities for React applications.

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