Slide Code

A Graphical Vibe Coding Environment (VCE) for Claude Code

Join our Discord • View All Releases • 📥 Download

📥 Downloads

---

⚠️ 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 - Command Center

Home - Light Mode

🎨 Features & Modes

Home - Dark Mode	Claude Code Working
Watching TBPN while coding	Reading Mode
Settings and Usage	Playtime
Game Mode	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

• Electron: Cross-platform desktop framework
• React: Modern UI library with hooks
• TypeScript: Type-safe JavaScript
• Effect-TS: Functional programming for robust async operations
• Drizzle ORM: Type-safe database operations
• SQLite/Turso: Local and cloud database support
• shadcn/ui: Beautiful, accessible UI components
• Tailwind CSS: Utility-first CSS framework
• ccusage: Claude Code usage tracking
• Hydraulic Conveyor: Desktop app distribution, simplified
• Claude Code SDK: Official SDK for Claude Code integration

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

• Claude Code CLI: Follow the setup guide at docs.anthropic.com/en/docs/claude-code/setup

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

• Uses Vite dev server for instant React/UI changes without restart
• Frontend code in widgets/app/ refreshes immediately
• Electron app loads from Vite in development mode (packages/core/src/flows/app.flow.ts:93-102)

🔒 Type-Safe IPC Boundary

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

• PubSub Pattern (packages/clients/src/pubsub/): Event-based messaging for notifications and updates across main/renderer boundary
• RPC Pattern (packages/core/src/rpc/): Type-safe remote procedure calls similar to tRPC, enabling request-response patterns between processes
• IPCRef Pattern (packages/core/src/services/ipc-ref.service.ts): Shared state management like Zustand but works across process boundaries with automatic synchronization

🎯 Additional Notable Features

• Effect.ts Integration: Functional programming patterns for better error handling and composability
• Dependency Injection: Effect.ts makes DI trivial - services are automatically provided through layers, making testing and modularity seamless
• Cross-IPC Database Access: Direct Drizzle queries from renderer (packages/clients/src/drizzle/, packages/core/src/rpc/handlers.ts:828-840) using Drizzle HTTP Proxy
• Smart Data Syncing: TanStack Query can be invalidated from main process (packages/schema/src/queryKeys.ts, packages/clients/src/tanstack/index.ts:71-78, packages/core/src/services/pubsub.service.ts:153-205), enabling automatic UI updates when backend data changes
• Secure Context Bridge: Preload scripts carefully expose only safe APIs to renderer
• Automatic State Persistence: IPCRef supports optional persistence to disk with rehydration on app start

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

   npm install

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

4. 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