opcode

A powerful GUI app and Toolkit for Claude Code

Create custom agents, manage interactive Claude Code sessions, run secure background agents, and more.

English | 简体中文

opcode-demo.mp4

🎬 Key Features in Action

💻 Modern Code Editor

• Multi-tab editing with syntax highlighting
• File tree with context menu operations
• Global search and replace across all files
• Auto-save and file history restoration

🔍 Powerful Search

• Regular expression support
• Case-sensitive and whole-word matching
• File inclusion/exclusion patterns
• Batch replace functionality

Tip

⭐ Star the repo and follow @getAsterisk on X for early access to asteria-swe-v0.

Note

This project is not affiliated with, endorsed by, or sponsored by Anthropic. Claude is a trademark of Anthropic, PBC. This is an independent developer project using Claude.

🌟 Overview

opcode is a powerful desktop application that transforms how you interact with Claude Code. Built with Tauri 2, it provides a beautiful GUI for managing your Claude Code sessions, creating custom agents, tracking usage, and much more.

Think of opcode as your command center for Claude Code - bridging the gap between the command-line tool and a visual experience that makes AI-assisted development more intuitive and productive.

📋 Table of Contents

• 🌟 Overview
• ✨ Features
  • 🗂️ Project & Session Management
  • 🤖 CC Agents
  • 💻 Modern Code Editor
  • 📊 Usage Analytics Dashboard
  • 🔌 MCP Server Management
  • ⏰ Timeline & Checkpoints
  • 📝 CLAUDE.md Management
• � Roadmap - Coming Soon
  • 🎯 Phase 1: Smart Editing Features
  • 🧠 Phase 2: Intelligent Code Assistance
  • 🤖 Phase 3: Deep Claude Integration
  • 🔄 Phase 4: Collaboration & Version Control
  • ⚡ Phase 5: Advanced Features
• �📖 Usage
  • Getting Started
  • Managing Projects
  • Using the Code Editor
  • Creating Agents
  • Tracking Usage
  • Working with MCP Servers
• 🚀 Installation
• 🔨 Build from Source
• 🛠️ Development
• 🔒 Security
• 🤝 Contributing
• 📄 License
• 🙏 Acknowledgments

✨ Features

🗂️ Project & Session Management

• Visual Project Browser: Navigate through all your Claude Code projects in ~/.claude/projects/
• Session History: View and resume past coding sessions with full context
• Smart Search: Find projects and sessions quickly with built-in search
• Session Insights: See first messages, timestamps, and session metadata at a glance
• Auto-scroll: Automatically scroll to the latest messages during conversations
• File History: Automatically restore previously opened files when reopening projects

🤖 CC Agents

• Custom AI Agents: Create specialized agents with custom system prompts and behaviors
• Agent Library: Build a collection of purpose-built agents for different tasks
• Background Execution: Run agents in separate processes for non-blocking operations
• Execution History: Track all agent runs with detailed logs and performance metrics

💻 Modern Code Editor ✨ NEW

• Monaco Editor Integration: Full-featured code editor with syntax highlighting for 100+ languages
• Multi-tab Editing: Work on multiple files simultaneously with tab management
• File Tree Browser: Navigate your project structure with an intuitive file tree
• Context Menu Operations: Right-click to create, rename, delete files and folders
• Global Search & Replace:
  • Search across all files in your project
  • Support for regular expressions, case-sensitive, and whole-word matching
  • File inclusion/exclusion patterns (e.g., *.ts, exclude node_modules)
  • Batch replace functionality
  • Highlight matches with line numbers
• Smart File Operations:
  • Create new files and folders
  • Rename with validation
  • Delete with confirmation
  • Copy file paths (absolute and relative)
  • Reveal in system file explorer
• Auto-save: Automatically save changes as you type
• Unsaved Changes Indicator: Visual feedback for modified files

📊 Usage Analytics Dashboard

• Cost Tracking: Monitor your Claude API usage and costs in real-time
• Token Analytics: Detailed breakdown by model, project, and time period
• Visual Charts: Beautiful charts showing usage trends and patterns
• Export Data: Export usage data for accounting and analysis

🔌 MCP Server Management

• Server Registry: Manage Model Context Protocol servers from a central UI
• Easy Configuration: Add servers via UI or import from existing configs
• Connection Testing: Verify server connectivity before use
• Claude Desktop Import: Import server configurations from Claude Desktop

⏰ Timeline & Checkpoints

• Session Versioning: Create checkpoints at any point in your coding session
• Visual Timeline: Navigate through your session history with a branching timeline
• Instant Restore: Jump back to any checkpoint with one click
• Fork Sessions: Create new branches from existing checkpoints
• Diff Viewer: See exactly what changed between checkpoints

📝 CLAUDE.md Management

• Built-in Editor: Edit CLAUDE.md files directly within the app
• Live Preview: See your markdown rendered in real-time
• Project Scanner: Find all CLAUDE.md files in your projects
• Syntax Highlighting: Full markdown support with syntax highlighting

� Roadmap - Coming Soon

🎯 Phase 1: Smart Editing Features (In Progress)

• Code Formatting: Prettier integration for automatic code formatting
• Code Snippets: Built-in and custom code snippet system
• Multi-cursor Editing: Alt+Click for multiple cursors, Ctrl+D to select next occurrence
• Code Folding: Collapse/expand functions, classes, and regions
• Minimap: Visual overview of your code structure

🧠 Phase 2: Intelligent Code Assistance (Next)

• LSP Integration: Language Server Protocol support for intelligent code completion
• AI-Powered Completion: Claude-assisted code suggestions
• Real-time Diagnostics: Syntax errors, type checking, and linting
• Quick Fixes: One-click fixes for common issues
• Code Navigation: Go to definition, find references, symbol search
• Smart Refactoring: Rename symbols, extract functions, inline variables

🤖 Phase 3: Deep Claude Integration (Planned)

• Inline AI Assistant: Ask Claude about selected code directly in the editor
• Code Explanation: Automatic code documentation and comments
• Code Generation: Generate code from natural language descriptions
• Intelligent Code Review: AI-powered code quality and security analysis
• Context-Aware Chat: Reference files and symbols with @mentions
• Project-Level Understanding: Automatic codebase indexing and dependency analysis

🔄 Phase 4: Collaboration & Version Control (Future)

• Git Integration: Visual diff, commit, push, pull, branch management
• AI Commit Messages: Automatically generate meaningful commit messages
• Merge Conflict Resolution: AI-assisted conflict resolution
• Real-time Collaboration: Multi-user editing with cursor synchronization
• Code Review Tools: Inline comments and suggestions

⚡ Phase 5: Advanced Features (Future)

• Integrated Terminal: Run commands without leaving the editor
• Extension System: Plugin architecture for custom functionality
• Performance Optimization: Virtual scrolling, lazy loading, web workers
• Debugging Support: Breakpoints, step-through debugging
• Testing Integration: Run and view test results inline
• Docker Integration: Manage containers from the editor

�📖 Usage

Getting Started

1. Launch opcode: Open the application after installation
2. Welcome Screen: Choose between CC Agents or Projects
3. First Time Setup: opcode will automatically detect your ~/.claude directory

Managing Projects

Projects → Select Project → View Sessions → Resume or Start New

• Click on any project to view its sessions
• Each session shows the first message and timestamp
• Resume sessions directly or start new ones
• Previously opened files are automatically restored

Using the Code Editor

Projects → Select Project → Code Editor → Edit Files

File Operations:

• Right-click on files/folders for context menu
• Create new files and folders
• Rename, delete, copy paths
• Reveal in system file explorer

Search & Replace:

1. Click the search icon in the file tree toolbar
2. Enter search query
3. Toggle options: Case-sensitive (Aa), Whole word (Ab), Regex (.*)
4. Use advanced options to filter files
5. Click results to jump to location
6. Use "Replace All" for batch replacements

Keyboard Shortcuts:

• Ctrl+S - Save current file
• Ctrl+Shift+F - Open search panel
• F2 - Rename file
• Del - Delete file
• Esc - Close search panel

Creating Agents

CC Agents → Create Agent → Configure → Execute

1. Design Your Agent: Set name, icon, and system prompt
2. Configure Model: Choose between available Claude models
3. Set Permissions: Configure file read/write and network access
4. Execute Tasks: Run your agent on any project

Tracking Usage

Menu → Usage Dashboard → View Analytics

• Monitor costs by model, project, and date
• Export data for reports
• Set up usage alerts (coming soon)

Working with MCP Servers

Menu → MCP Manager → Add Server → Configure

• Add servers manually or via JSON
• Import from Claude Desktop configuration
• Test connections before using

🚀 Installation

Prerequisites

• Claude Code CLI: Install from Claude's official site

Release Executables Will Be Published Soon

🔨 Build from Source

Prerequisites

Before building opcode from source, ensure you have the following installed:

System Requirements

• Operating System: Windows 10/11, macOS 11+, or Linux (Ubuntu 20.04+)
• RAM: Minimum 4GB (8GB recommended)
• Storage: At least 1GB free space

Required Tools

1. Rust (1.70.0 or later)

   # Install via rustup
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

2. Bun (latest version)

   # Install bun
   curl -fsSL https://bun.sh/install | bash

3. Git

   # Usually pre-installed, but if not:
   # Ubuntu/Debian: sudo apt install git
   # macOS: brew install git
   # Windows: Download from https://git-scm.com

4. Claude Code CLI

   • Download and install from Claude's official site
   • Ensure claude is available in your PATH

Platform-Specific Dependencies

Linux (Ubuntu/Debian)

# Install system dependencies
sudo apt update
sudo apt install -y \
  libwebkit2gtk-4.1-dev \
  libgtk-3-dev \
  libayatana-appindicator3-dev \
  librsvg2-dev \
  patchelf \
  build-essential \
  curl \
  wget \
  file \
  libssl-dev \
  libxdo-dev \
  libsoup-3.0-dev \
  libjavascriptcoregtk-4.1-dev

macOS

# Install Xcode Command Line Tools
xcode-select --install

# Install additional dependencies via Homebrew (optional)
brew install pkg-config

Windows

• Install Microsoft C++ Build Tools
• Install WebView2 (usually pre-installed on Windows 11)

Build Steps

1. Clone the Repository

   git clone https://github.com/getAsterisk/opcode.git
   cd opcode

2. Install Frontend Dependencies

   bun install

3. Build the Application

   For Development (with hot reload)

   bun run tauri dev

   For Production Build

   # Build the application
   bun run tauri build
   
   # The built executable will be in:
   # - Linux: src-tauri/target/release/
   # - macOS: src-tauri/target/release/
   # - Windows: src-tauri/target/release/

4. Platform-Specific Build Options

   Debug Build (faster compilation, larger binary)

   bun run tauri build --debug

   Universal Binary for macOS (Intel + Apple Silicon)

   bun run tauri build --target universal-apple-darwin

Troubleshooting

Common Issues

1. "cargo not found" error

   • Ensure Rust is installed and ~/.cargo/bin is in your PATH
   • Run source ~/.cargo/env or restart your terminal

2. Linux: "webkit2gtk not found" error

   • Install the webkit2gtk development packages listed above
   • On newer Ubuntu versions, you might need libwebkit2gtk-4.0-dev

3. Windows: "MSVC not found" error

   • Install Visual Studio Build Tools with C++ support
   • Restart your terminal after installation

4. "claude command not found" error

   • Ensure Claude Code CLI is installed and in your PATH
   • Test with claude --version

5. Build fails with "out of memory"

   • Try building with fewer parallel jobs: cargo build -j 2
   • Close other applications to free up RAM

Verify Your Build

After building, you can verify the application works:

# Run the built executable directly
# Linux/macOS
./src-tauri/target/release/opcode

# Windows
./src-tauri/target/release/opcode.exe

Build Artifacts

The build process creates several artifacts:

• Executable: The main opcode application
• Installers (when using tauri build):
  • .deb package (Linux)
  • .AppImage (Linux)
  • .dmg installer (macOS)
  • .msi installer (Windows)
  • .exe installer (Windows)

All artifacts are located in src-tauri/target/release/.

🛠️ Development

Tech Stack

• Frontend: React 18 + TypeScript + Vite 6
• Backend: Rust with Tauri 2
• UI Framework: Tailwind CSS v4 + shadcn/ui
• Database: SQLite (via rusqlite)
• Package Manager: Bun

Project Structure

opcode/
├── src/                   # React frontend
│   ├── components/        # UI components
│   ├── lib/               # API client & utilities
│   └── assets/            # Static assets
├── src-tauri/             # Rust backend
│   ├── src/
│   │   ├── commands/      # Tauri command handlers
│   │   ├── checkpoint/    # Timeline management
│   │   └── process/       # Process management
│   └── tests/             # Rust test suite
└── public/                # Public assets

Development Commands

# Start development server
bun run tauri dev

# Run frontend only
bun run dev

# Type checking
bunx tsc --noEmit

# Run Rust tests
cd src-tauri && cargo test

# Format code
cd src-tauri && cargo fmt

🔒 Security

opcode prioritizes your privacy and security:

1. Process Isolation: Agents run in separate processes
2. Permission Control: Configure file and network access per agent
3. Local Storage: All data stays on your machine
4. No Telemetry: No data collection or tracking
5. Open Source: Full transparency through open source code

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Areas for Contribution

• 🐛 Bug fixes and improvements
• ✨ New features and enhancements
• 📚 Documentation improvements
• 🎨 UI/UX enhancements
• 🧪 Test coverage
• 🌐 Internationalization

📄 License

This project is licensed under the AGPL License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Tauri - The secure framework for building desktop apps
• Claude by Anthropic

---

Made with ❤️ by the Asterisk

Report Bug · Request Feature

Star History