Skip to content

Instantly share code, notes, and snippets.

@rupesh-panwar

rupesh-panwar/Ruv-code.md

Forked from ruvnet/Ruv-code.md
Created May 7, 2025 15:03
Show Gist options
  • Save rupesh-panwar/32de7704067dc548cabc88b14dfdec87 to your computer and use it in GitHub Desktop.
Save rupesh-panwar/32de7704067dc548cabc88b14dfdec87 to your computer and use it in GitHub Desktop.
Download ZIP
rUv code IDE: Creating a Custom VSCode Distribution
Raw
Ruv-code.md

Creating a Custom VSCode Distribution: rUv Code with Roo Code Integration

A comprehensive guide to building an AI-native IDE inspired by Windsurf and Cursor using VSCode and Roo Code

Introduction

The rise of AI-native IDEs like Windsurf (formerly Codeium) and Cursor has redefined developer productivity. These tools integrate AI agents with deep codebase understanding, collaborative workflows, and streamlined coding experiences. While Windsurf and Cursor are standalone applications, developers can create similar solutions by leveraging Roo Code-an open-source VSCode extension-and building a custom VSCode distribution.

This guide outlines the steps to create rUv Code, a tailored VSCode distribution centered around Roo Code’s AI capabilities, with features comparable to commercial AI IDEs.

Core Requirements for rUv Code

Before proceeding, ensure the following:

  1. VSCode Fork: Use VSCodium (a telemetry-free, MIT-licensed VSCode fork) as the base.
  2. Roo Code Integration: Pre-install and configure Roo Code as the primary AI assistant.
  3. Custom UI/UX: Tailor the interface to prioritize AI workflows.
  4. Build and Packaging: Compile the distribution for cross-platform use.

Step 1: Set Up the Base IDE (VSCodium)

Objective: Create a clean, telemetry-free VSCode foundation.

1.1 Clone and Build VSCodium

VSCodium is a community-maintained fork of VSCode that strips Microsoft-specific telemetry and branding.

# Clone the repository  
git clone https://github.com/VSCodium/vscodium.git  

# Navigate to the repository  
cd vscodium  

# Build VSCodium (requires Node.js, Python, and build tools)  
yarn && yarn gulp vscode-linux-x64  # Linux

Note: For Windows/Mac builds, refer to the VSCodium documentation.

1.2 Configure product.json

The product.json file governs VSCode’s behavior, including extensions and branding.

  1. Locate the file:

    # For Linux:  
find . -name 'product.json'  # Typically in src/vscode/resources/app/product.json

  2. Modify product.json:

    "nameShort": "rUv Code",  
"nameLong": "rUv Code: AI-Powered Development Environment",  
"extensionsGallery": {  
  "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",  
  "cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",  
  "itemUrl": "https://marketplace.visualstudio.com/items"  
}

Purpose:

  • Replace default branding with rUv Code identifiers.
  • Enable extensions gallery access for Roo Code and dependencies[14].

Step 2: Integrate Roo Code as the Core AI

Objective: Pre-install and configure Roo Code for seamless AI integration.

2.1 Pre-Install Roo Code

Roo Code is available via the VSCode Marketplace. To bundle it into the distribution:

  1. Download Roo Code’s VSIX package:

    mkdir -p extensions  
curl -L https://marketplace.visualstudio.com/_apis/public/gallery/publishers/RooVeterinaryInc/vsextensions/roo-cline/3.2.0/vspackage > extensions/roo-code.vsix

  2. Modify extensions gallery in product.json:
    Ensure the extensions gallery URLs align with the marketplace to enable Roo Code installation[14].

2.2 Configure Roo Code Defaults

Roo Code supports multi-model integration via OpenRouter. Configure defaults in settings.json:

"roo-code.apiKey": "YOUR_OPENROUTER_KEY",  
"roo-code.defaultModel": "sonnet",  
"roo-code.customModes": {  
  "QA Engineer": {  
    "prompt": "You are a QA engineer... detect edge cases and write tests",  
    "tools": ["readFile", "writeFile", "runCommand"]  
  }  
}

Options:

  • Models: Claude-3, Gemini, GPT-4, etc.
  • Modes: Predefined roles (e.g., Architect, QA Engineer) for specialized workflows[9][13].

Step 3: Customize UI/UX for AI Workflows

Objective: Optimize the interface for AI-assisted development.

3.1 Theme and Keybindings

  1. Install Themes:

    • Dracula Pro: Dark theme with high contrast for long coding sessions.
    • Material Theme: Modern, material-design-inspired UI.

  2. Keybindings:

    {  
  "key": "ctrl+shift+a",  
  "command": "roo-code.chat",  
  "when": "editorTextFocus"  
}

3.2 AI-Centric Layout

  1. Panel Configuration:

    • Left Panel: File Explorer + Roo Code’s AI chat interface.
    • Bottom Panel: Terminal + Roo Code’s action log.
    • Right Panel: Extensions (e.g., GitLens, Prettier).

  2. Custom Views:
    Create a rUv Code category in the sidebar to group AI-related tools.

Step 4: Build and Package the Distribution

Objective: Create cross-platform installers for rUv Code.

4.1 Build Commands

# Linux:  
yarn gulp vscode-linux-x64  

# Windows:  
yarn gulp vscode-win32-x64  

# Mac:  
yarn gulp vscode-darwin-x64

Output: Binaries will be in out/ (e.g., vscode-linux-x64).

4.2 Packaging

  1. Linux:

    sudo yarn run gulp vscode-linux-x64-build-deb  # Creates .deb package

  2. Windows:
    Use tools like NSIS or Wix Toolset to create installers.

  3. Mac:
    Package as .dmg with branding (e.g., rUv Code icon).

Step 5: Test and Iterate

Critical Testing Areas:

  1. Roo Code Functionality:
    • Verify multi-model support (Sonnet, Claude, etc.).
    • Test custom modes (e.g., QA Engineer generating test cases).
  2. Performance:
    • Monitor memory/CPU usage with complex projects.
  3. Extensions:
    • Ensure compatibility with popular tools (GitLens, ESLint).

Troubleshooting:

  • Extensions Not Installing: Recheck product.json for marketplace URLs[14].
  • Build Failures: Clean the repo (git clean -xfd) and reinstall dependencies[8].

Step 6: Publish and Maintain

Objective: Share rUv Code with the developer community.

6.1 GitHub Repository

  1. Create a fork of VSCodium and include your modifications.
  2. Document steps for building, configuring, and contributing.

6.2 CI/CD Pipeline

Use GitHub Actions to automate builds for each commit:

name: Build rUv Code  
on: [push]  
jobs:  
  build:  
    runs-on: ubuntu-latest  
    steps:  
      - uses: actions/checkout@v4  
      - name: Install dependencies  
        run: yarn install  
      - name: Build Linux  
        run: yarn gulp vscode-linux-x64  
      - name: Upload artifacts  
        uses: actions/upload-artifact@v3  
        with:  
          name: rUv-Code-linux  
          path: out/vscode-linux-x64

Advanced Customization Options

For power users, consider these enhancements:

5.1 Multi-Agent Workflows

Integrate additional AI agents (e.g., GitHub Copilot, Codeium) alongside Roo Code.

5.2 Custom LLMs

Host your own LLM via OpenRouter or Hugging Face Inference Endpoints.

5.3 Browser Automation

Leverage Roo Code’s browser integration for end-to-end testing[13].

Conclusion

Creating rUv Code transforms VSCode into an AI-native IDE rivaling Windsurf and Cursor. By combining VSCodium’s clean foundation with Roo Code’s autonomous capabilities, developers gain a lightweight, extensible platform for modern software development.

Next Steps:

  1. Iterate on UI/UX: Add AI-specific widgets (e.g., code suggestions inline).
  2. Document Use Cases: Publish tutorials for Roo Code’s custom modes.
  3. Community Engagement: Open-source the project to attract contributors.

With these steps, rUv Code becomes a viable alternative for developers seeking AI-driven workflows without proprietary constraints.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment