YzPzCode

Your AI Coding Squad, One Window Away.

Stop juggling 5 different terminals.
YzPzCode brings Claude, Gemini, Codex, Opencode, Cursor, Kilo, and Hermes together in one clean interface —
plus 10 SaaS tool CLIs, an in-app browser with visual design inspector, and an AI-powered designer.

   

---

Note: This app is under development, and maybe some features do not work probably. We are keeping updating the app more and more. In the future everything will be work Fully

• The Problem

[!] The Old Way	[+] The YzPzCode Way
Three terminal windows	One app
Three different CLIs	All 7 AI agents inside
Alt-tabbing like a maniac	Side-by-side grid
Separate browser for devtools	In-app browser with inspector
Copy-pasting between them	Compare instantly
Losing your mind	Stay in flow

---

- See It In Action

Clean. Fast. Powerful.

Watch YzPzCode in action - Video demo

---

Core Capabilities

Multi-Agent Grid Run Claude, Gemini, Codex, Kilo, and more in synchronized, side-by-side views.	Automated Initialization Instantly detect and configure locally installed CLIs.	Workspace Presets Save and restore optimal agent combinations for specific workflows.	Native Terminals Powered by actual PTY sessions for authentic CLI interaction.
Cross-Platform Support Optimized binaries for Windows, macOS, and Linux.	Resource Efficient Built on Tauri and Rust, utilizing a fraction of the RAM required by Electron.	Integrated Explorer Manage files and directories without leaving the application.	Git Integration Monitor repository status and diff statistics at a glance.
Multi-Tab Editor Built-in CodeMirror 6 with syntax highlighting, minimap, and file previews.	IDE Integration Seamlessly launch into over 10 supported development environments.	Authentication Tracking Monitor credential states across all active CLI tools.	Continuous Delivery Automated update mechanisms ensure access to the latest features.
In-App Browser Webview-based browser with tabs, zoom, device presets, and snapshot export.	Visual Design Inspector Inspect, capture, and apply styles from any webpage.	AI Designer Prompt-based UI design generation with live preview and code export.	Discord Rich Presence Show your workspace and activity on your Discord profile.
Tool CLI Management Detect, install, and auth-check 10 SaaS CLIs (GitHub, Stripe, Supabase, Vercel, and more).	Multi-Workspace Multiple open workspaces with tab switching and per-workspace state.	Managed Commands Run non-interactive commands with status tracking and PID monitoring.	UI Customization 8 accent colors, 3 density levels, custom cursor, and animations toggle.

---

- AI Agent CLIs

Claude claude Deep reasoning, patient explanations

Gemini gemini Fast, multimodal, Google's finest

Codex codex Code generation that works

Opencode opencode Open-source freedom

Cursor cursor IDE-level AI assistance

Kilo kilo Code agent for any task

Hermes hermes Fast, efficient coding agent

---

- SaaS Tool CLIs

YzPzCode also manages and auth-checks these 10 tool CLIs:

GitHub gh	Stripe stripe	Supabase supabase	Valyu valyu-cli	PostHog posthog-cli
ElevenLabs elevenlabs	Ramp ramp	GWS gws	AgentMail agentmail-cli	Vercel vercel

---

- In-App Browser & Visual Design Tools

Built directly into the workspace — no more switching windows for web development:

• Multi-Tab Browser: Navigate and preview your apps in a webview pane
• Device Presets: Responsive, iPhone 14 Pro, iPad — switch orientation
• Zoom Controls: Fine-tune zoom from 50% to 200%
• Snapshot Export: Capture full page HTML
• Pop-Out Mode: Drag the browser to its own window

Visual Design Inspector

• Inspect Mode: Hover over any element to see its HTML structure, selectors, and attributes
• Pick Style Mode: Click to capture computed CSS styles (with pseudo-elements) to a clipboard
• Pick UI Element Mode: Deep-capture an entire UI component — structure tree (up to 8 levels deep), layout grid, spacing, typography, colors, box model, assets, and auto-generated design intent analysis
• Apply Mode: Apply captured styles to target elements with undo support and CSS class generation

---

- AI Designer

Generate complete UI designs from natural language prompts:

• Prompt-Based Generation: Describe what you want, get a full design
• Multiple Themes: Choose from curated design themes
• Page Types: Landing pages, dashboards, and more
• Live Preview: See designs in responsive device frames
• Customization Panel: Tweak colors, fonts, and spacing
• Element Inspector: Inspect generated component properties
• Code Export: Export generated HTML/CSS/JS code
• Design History: Browse and restore previous design iterations
• Skills Management: Manage prompt engineering skills for better results

---

Supported Development Environments

VS Code	Cursor	Zed	Visual Studio	WebStorm
IntelliJ	Sublime Text	Windsurf	Perplexity	Antigravity

---

- Quick Start

You'll need: Node.js 18+ and Rust (latest stable)

# 1. Clone it
git clone https://github.com/wolfenazz/YzPzCode.git
cd YzPzCode/app

# 2. Install dependencies
npm install

# 3. Run it
npm run tauri dev

The app will detect what AI CLIs you have installed and help you set up the rest.

- macOS Users

Install Rust first:

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

Then restart your terminal before running npm run tauri dev.

Installing from .dmg? Since the app isn't code-signed yet:

Option	How
Right-click	Right-click the app → Open → Click Open
System Settings	System Settings → Privacy & Security → Open Anyway
Terminal	xattr -cr /Applications/YzPzCode.app

Note: We're working on getting the app properly code-signed with Apple Developer and Microsoft certificates.

- Build for Production

npm run tauri build

Generates a native installer for your platform. Small, fast, no bloat.

---

- How It's Built

Layer	Stack
Frontend	React 19 + TypeScript · Vite 6 · Tailwind CSS v4 · Zustand 5 · xterm.js 6 · CodeMirror 6 · framer-motion
Backend	Tauri v2 (Rust) · portable-pty · Tokio · discord-rich-presence · anyhow/serde

Architecture

graph TB
    subgraph Frontend["Frontend — React + TypeScript"]
        UI[User Interface]
        Grid[Terminal Grid]
        Browser[Browser Pane]
        Designer[AI Designer]
        Setup[Setup Screen]
        Store[Zustand Store]
        Explorer[File Explorer]
        Editor[File Editor]
        Settings[Settings Screen]
    end

    subgraph Backend["Backend — Rust + Tauri v2"]
        Commands[Tauri Commands]
        PTY[PTY / Terminal Manager]
        Managed[Managed Command Manager]
        Detector[CLI Detector]
        Installer[CLI Installer]
        Auth[Auth Detector]
        Ide[IDE Detector]
        Fs[File System]
        Git[Git Operations]
        Watcher[File Watcher]
        Agent[Agent Executor]
        Discord[Discord Presence]
        BrowserMgr[Browser Manager]
    end

    subgraph CLIs["AI CLI Tools"]
        Claude[Claude CLI]
        Gemini[Gemini CLI]
        Codex[Codex CLI]
        Opencode[Opencode CLI]
        Cursor[Cursor CLI]
        Kilo[Kilo CLI]
        Hermes[Hermes CLI]
    end

    subgraph Tools["Tool CLIs"]
        Gh[GitHub CLI]
        Stripe[Stripe CLI]
        Supabase[Supabase CLI]
        Vercel[Vercel CLI]
    end

    UI --> Grid
    UI --> Browser
    UI --> Designer
    UI --> Setup
    UI --> Explorer
    UI --> Editor
    UI --> Settings
    Grid --> Store
    Setup --> Store
    Explorer --> Store
    Editor --> Store
    Browser --> Store
    Designer --> Store
    Settings --> Store
    
    Store <-->|Tauri IPC| Commands
    Commands --> PTY
    Commands --> Managed
    Commands --> Detector
    Commands --> Installer
    Commands --> Auth
    Commands --> Ide
    Commands --> Fs
    Commands --> Git
    Commands --> Watcher
    Commands --> Agent
    Commands --> Discord
    Commands --> BrowserMgr
    
    PTY -->|Spawns| Claude
    PTY -->|Spawns| Gemini
    PTY -->|Spawns| Codex
    PTY -->|Spawns| Opencode
    PTY -->|Spawns| Cursor
    PTY -->|Spawns| Kilo
    PTY -->|Spawns| Hermes
    Managed -->|Runs| Gh
    Managed -->|Runs| Stripe
    Managed -->|Runs| Supabase
    Managed -->|Runs| Vercel

Loading

---

- Project Structure

app/
├── src-tauri/                      # Rust backend
│   └── src/
│       ├── agent/                  # Agent task execution & orchestration
│       ├── agent_cli/              # CLI detection, installation & launching
│       │   └── providers/          # 17 provider-specific implementations
│       ├── browser/                # In-app web browser + design inspector
│       ├── commands/               # Tauri IPC handlers (100+ commands)
│       ├── terminal/               # PTY sessions + managed command runner
│       ├── filesystem/             # File ops, git, watcher, validation
│       ├── ide/                    # IDE detection & launching (10 IDEs)
│       ├── discord_presence/       # Discord Rich Presence integration
│       └── utils/                  # Env setup, process helpers
├── src/                            # React frontend
│   ├── components/
│   │   ├── setup/                  # Setup & configuration screens
│   │   ├── workspace/              # Terminal grid, browser, sessions
│   │   ├── explorer/               # File explorer & git panels
│   │   ├── editor/                 # Multi-tab code editor + file previews
│   │   ├── designer/               # AI-powered design tools
│   │   ├── settings/               # 11-section settings panel
│   │   ├── common/                 # Shared UI components
│   │   ├── feedback/               # User feedback modal
│   │   └── docs/                   # Built-in documentation viewer
│   ├── hooks/                      # Custom React hooks
│   ├── stores/                     # Zustand state management
│   └── types/                      # TypeScript definitions
└── docs/                           # Documentation

---

- Features Deep Dive

Workspace Views

Switch between three views in any workspace:

1. Terminal View — Multi-pane PTY terminal grid
2. Editor View — CodeMirror 6 with syntax highlighting and file previews
3. Browser View — In-app web browser with dev tools

Multi-Workspace Tabs

Open multiple workspaces and switch between them with dedicated tabs. Each workspace maintains its own terminal sessions, open files, browser state, and active view.

Managed Terminal Commands

Run non-interactive shell commands inside the app with full status tracking (Starting → Running → Completed/Failed), PID/exit-code monitoring, and real-time output streaming.

Agent Task Execution

Describe a task in natural language — the app generates the appropriate shell command using your AI CLI, executes it, and retries up to 3 times on failure.

Discord Rich Presence

Show what you're working on in your Discord profile — workspace name, activity details, and current state with timestamps.

External Terminal Launch

Launch native OS terminals with any AI CLI pre-configured. Windows terminals are automatically tiled in a grid; macOS Terminal windows get positioned with AppleScript.

UI Customization

• 8 Accent Colors: default, blue, purple, green, orange, red, pink, cyan
• 3 Density Levels: compact, comfortable, spacious
• Custom Cursor: Toggle-able animated cursor
• Animation Toggle: Disable animations for accessibility (reduced motion)
• Dark/Light Theme: Full theme support with CSS custom properties

Auto-Updates

• Tauri updater integration with stable, beta, and nightly channels
• Automatic check on launch, configurable auto-download
• Download progress bar and one-click install with relaunch

11 Settings Sections

Appearance, Terminal, Editor, Agents, Workspace, IDE, Updates, Environment, Data, About, Shortcuts

---

- Contributing

# Type checking
npx tsc --noEmit          # Frontend
cargo check               # Backend

# Linting & formatting
cargo clippy              # Catch Rust issues
cargo fmt                 # Make it pretty

# Testing
cd src-tauri && cargo test

Found a bug? Have an idea? Open an issue · Submit a PR

---

- Recommended Setup

---

- License

Fork it. Build on it. Make it yours.

---

- Like What You See?

If YzPzCode saved you from terminal chaos, consider giving it a star it helps others find it too!

---

Built with <3 and late nights by

Naseem Creator & Lead Dev @wolfenazz

Noor Contributor and dev @Noor-Al-Khelaifi

For developers who'd rather code than manage terminals.