Configuration

AgentFlow stores settings in a JSON file and automatically detects your Claude CLI installation. Here's how to configure every aspect of the app.

App Settings

Settings are persisted to {APP_DATA_DIR}/settings.json and loaded on startup.

{
  "claude_cli_path": null,
  "theme": "dark",
  "experience_mode": "simple",
  "notifications": true
}

Setup Wizard

When you launch AgentFlow for the first time (or when no project is configured), a setup wizard guides you through initial configuration:

1. Select your project directory (git repository)
2. Auto-detect and verify the Claude CLI installation
3. Choose your experience mode (Simple or Advanced)
4. Create the .claude/ directory structure if it doesn't exist

Experience Modes

AgentFlow offers two experience modes to match your comfort level:

Claude CLI Auto-Detection

When claude_cli_path is null, AgentFlow searches the following locations in order, returning the first match:

Tauri Configuration

The desktop app is configured via tauri.conf.json in the project root.

{
  "productName": "AgentFlow",
  "identifier": "com.agentflow.app",
  "build": {
    "devUrl": "http://localhost:1420",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "AgentFlow",
        "width": 1280,
        "height": 800,
        "minWidth": 900,
        "minHeight": 600,
        "resizable": true
      }
    ]
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Vite Configuration

Frontend build is managed by Vite 7 with React and Tailwind plugins.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
  plugins: [react(), tailwindcss()],
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? { protocol: "ws", host, port: 1421 }
      : undefined,
  },
});

Project Setup

AgentFlow works with any git repository. It looks for a .claude/ directory containing agents and pipelines.

# AgentFlow creates .claude/ if it doesn't exist when you
# initialize a project from the app, or you can do it manually:

mkdir -p .claude/agents .claude/pipelines

Project Detection

When launched, AgentFlow attempts to auto-detect your project by walking parent directories from the current working directory looking for a .claude/ directory. You can also select a project manually or choose from recent projects.

Project Scanning

When a project is selected, AgentFlow scans it and reports:

• Whether .claude/ exists
• Number of agent files found
• Number of pipeline files found
• Whether .mcp.json exists (for MCP tool validation)

File Watching

AgentFlow watches the .claude/agents/ and .claude/pipelines/ directories for filesystem changes using the notify crate.

• Changes are debounced at 500ms to prevent rapid reloads
• A file-changed event is emitted to the frontend with the change kind and affected paths
• Agent and pipeline lists auto-refresh when teammates push changes via git

Environment Variables