Show HN: Graphical Vibe Coding Environment (VCE) for Claude Code

3 months ago 2

A Graphical Vibe Coding Environment (VCE) for Claude Code

Join our Discord • View All Releases • 📥 Download

⚠️ 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!

Action Bar - Command Center

Home - Light Mode

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

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

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

🎯 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

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

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

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

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

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

# 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

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)

This Electron app setup provides several developer experience advantages:

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)

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

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

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

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

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

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

Install Dependencies
Build the Application

# For production build npm run build:prod # For beta build npm run build:beta
Process the build

# For production build npm run make:prod # For beta build npm run make:beta

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

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 to Slide Code is straightforward thanks to our strongly-typed architecture:

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

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

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

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