GitHub - longtail-labs/slide.code: A cross-platform Graphical Vibe Coding Environment (VCE) for Claude Code

7 min read Original article ↗

Slide Code

A Graphical Vibe Coding Environment (VCE) for Claude Code

Join our Discord • View All Releases • 📥 Download

📥 Downloads

macOS Apple Silicon macOS Intel Windows

⚠️ Note: This project is forked from another codebase and is under rapid development. You may encounter remnants from the original project that need improvement, and things may break as we iterate quickly. We appreciate your patience and welcome contributions to help improve the codebase!

📸 Screenshots

🎯 Main Interface

Action Bar

Action Bar - Command Center

Home Light Mode

Home - Light Mode

🎨 Features & Modes

Home Dark Mode

Home - Dark Mode

 Claude Code Working

Claude Code Working
Diff Watching

Watching TBPN while coding

 Reading Mode

Reading Mode
Settings

Settings and Usage

 Playtime

Playtime
Game Integration

Game Mode

 MCP Integration

MCP Integration

Slide Code is a intuitive desktop application that ideally makes it a bit easier to run multiple Claude Code agents at once

🏗️ Tech Stack

Desktop Application

Game (/game)

  • Go: High-performance backend language
  • Templ: Type-safe HTML templating
  • Datastar: Reactive frontend framework
  • NATS.io: Cloud-native messaging system

✨ Features

🎯 Effortless Project Management

  • One-Click Project Creation: Create new projects instantly or select existing ones, no Github integration required
  • Vibe Directory: New projects get placed into a specified directory
  • Multi-Task Execution: Run multiple Claude Code tasks simultaneously
  • Session Persistence: Resume your coding sessions anytime, anywhere

🎵 Vibe While You Code

  • Integrated Music Player: Stream from SomaFM while coding
  • TBPN Channel: Keep up to date with the latest tech news directly in the VCE
  • Hacker News Reader: Keep up to date with the latest tech news without leaving your flow
  • Play a massive multiplayer game: Play a Splatoon inspired multiplayer game where you compete automatically to take over the grid

🔧 Powerful Development Tools

  • Real-time Diff Viewer: See exactly what changes Claude Code is making
  • Git Integration: Quickly commit your (AI generated) changes
  • Task Tracking: Monitor multiple concurrent tasks
  • Notifications: Get native OS alerts when tasks complete, fail, or are cancelled
  • Comment System: Add notes and feedback directly to your diffs
  • Usage Analytics: Track your Claude Code usage, costs, and token consumption at a glance
  • Attachments Support: Easily attach images, documents, and other files for the agent to work with
  • Task Control: Stop and cancel running Claude Code agents with a single click

🎨 Beautiful UI/UX

  • Modern Design: Clean, intuitive interface built with shadcn/ui
  • Dark/Light Mode: Switch themes to match your preference

🚀 Quick Start

Prerequisites

Getting Started

  1. Launch Slide Code: Open the application after installation
  2. Create or Select a Project:
    • Click "Create New Project" for a fresh start
    • Or "Select Existing Project" to work with existing code
  3. Give it a Prompt: Describe what you want to build
  4. Watch the Magic: Claude Code starts working while you vibe to your favorite tunes

🔄 Roadmap

Coming Soon

  • Git Worktrees: Isolated development branches
  • Plugin System: Extend functionality with custom plugins
  • Team Collaboration: Share projects and sessions
  • MCP Powered Game: Write code and control bots that play the game while coding

🛠️ Development

Quick Start

# Clone the repository
git clone https://github.com/longtail-labs/slide.code
cd slide-code

# Install dependencies
npm install

# Start the Electron app
npm run start:app

Architecture Overview

slide-code/
├── apps/                 # Electron main & preload processes
├── packages/
│   ├── clients/         # API clients & React hooks
│   ├── core/            # Core business logic with Effect-TS
│   ├── db/              # Database layer with Drizzle ORM
│   └── schema/          # Type definitions & schemas
├── widgets/app/         # React frontend (main UI)
├── game/               # Go game server (BitSplat)
└── bundled_modules/    # Native dependencies (LibSQL)

🏗️ Architecture Benefits

This Electron app setup provides several developer experience advantages:

⚡ Instant Hot Reload

🔒 Type-Safe IPC Boundary

Built with Effect.ts for robust cross-process communication:

🎯 Additional Notable Features

Development Commands

Electron App

npm install              # Install all dependencies
npm run start:app       # Start Electron app in development
npm run build           # Build for production

Game Server

cd game
make setup              # Install Go tools and dependencies
make dev                # Start development server with hot reload
make build              # Build production binary
make clean              # Clean build artifacts

Database

npm run db:migrate:generate  # Generate new migration
npm run db:migrate:apply     # Apply migrations
npm run studio              # Open Drizzle Studio

Development Workflow

  1. Start the Electron app: npm run start:app
  2. Start the game server (optional): cd game && make dev
  3. Make changes: Edit files in widgets/app/src/ for UI, packages/core/src/ for logic
  4. Hot reload: Changes automatically reload in development

🔨 Building Locally

Prerequisites

  • Node.js 22+ (required)
  • macOS, Windows, or Linux
  • Hydraulic Conveyor (for distribution builds)

Local Build Instructions

  1. Install Dependencies

  2. Build the Application

    # For production build
npm run build:prod

# For beta build
npm run build:beta

  3. Process the build

# For production build
npm run make:prod

# For beta build
npm run make:beta

  1. Build with Conveyor

    # Build for local testing (uses conveyor.local.conf)
npm run compile:local

# The built application will be in /output. Move the app to your Applications folder to test

Nightly Beta Releases

The project supports automated nightly beta releases via GitHub Actions:

  • Beta builds use conveyor.beta.conf for configuration
  • Automatically published to the beta release channel
  • Separate app ID and branding from production releases

🤝 Contributing

Contributing to Slide Code is straightforward thanks to our strongly-typed architecture:

Type-Safe Development

The entire codebase is strongly typed across all boundaries, making it hard to introduce runtime errors:

  • TypeScript everywhere: From main process to renderer, all code is type-checked
  • Drizzle ORM: Type-safe database schemas and queries with compile-time validation
  • Effect.ts schemas: Ensure data integrity across process boundaries
  • Build-time validation: Running npm run build will catch most issues before runtime

Quick Contribution Guide

  1. Fork the repository and clone your fork
  2. Install dependencies: npm install
  3. Make your changes (You can even have Slide Code open and making changes on itself while running 😅. Sometimes causes issues, but sometimes works great!)
  4. Test your changes: npm run start:app
  5. Run the build: npm run build to make sure things look good
  6. Submit a pull request

The strong typing means if your code compiles, it's likely to work correctly!

📄 License

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

🌟 Support

  • ⭐ Star this repo if you find it useful
  • 🐛 Report bugs via GitHub Issues
  • 💬 Chat with us & Request features on Discord
  • 🐦 Follow me on Twitter @jonovono