# pi-vscode-integration

> Integrate Pi coding agent and VS Code workflows into NanoClaw. Use when user wants to connect their VS Code environment, sync projects, or enable IDE-based Claude interactions. Supports remote development, code streaming, and collaborative editing.

- Author: tommyent
- Repository: tommyent/nanoclaw
- Version: 20260209114708
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/tommyent/nanoclaw
- Web: https://mule.run/skillshub/@@tommyent/nanoclaw~pi-vscode-integration:20260209114708

---

---
name: pi-vscode-integration
description: Integrate Pi coding agent and VS Code workflows into NanoClaw. Use when user wants to connect their VS Code environment, sync projects, or enable IDE-based Claude interactions. Supports remote development, code streaming, and collaborative editing.
---

# Pi & VS Code Integration

Integrate [Pi coding agent](https://github.com/badlogic/pi-mono) and VS Code workflows into your NanoClaw system for seamless IDE-WhatsApp-Claude collaboration.

## Overview

This skill enables:
- **VS Code to WhatsApp**: Send code snippets and get Claude feedback
- **Remote development**: Access your IDE from anywhere via WhatsApp
- **Project synchronization**: Keep NanoClaw and VS Code projects in sync
- **Collaborative editing**: Share code sessions with team members
- **Live code streaming**: Get real-time assistance while coding
- **Automated workflows**: Trigger IDE actions from WhatsApp

## Installation

### 1. Install Pi Coding Agent

```bash
# Install Pi globally
npm install -g @mariozechner/pi-coding-agent

# Verify installation
pi --version
```

### 2. Install VS Code Extensions

```bash
# Install VS Code CLI if not available
code --version || {
  echo "Installing VS Code CLI..."
  # macOS
  sudo ln -sf "/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code" /usr/local/bin/code
}

# Install required VS Code extensions
code --install-extension ms-vscode-remote.remote-ssh
code --install-extension ms-vscode.remote-repositories
code --install-extension GitHub.copilot
code --install-extension ms-vscode.live-server
```

### 3. Configure Pi in Container

Update `container/Dockerfile`:

```dockerfile
# Install Pi coding agent
RUN npm install -g @mariozechner/pi-coding-agent

# Install VS Code server
RUN curl -fsSL https://code-server.dev/install.sh | sh

# Install additional development tools
RUN apt-get update && apt-get install -y \
    git-lfs \
    tmux \
    tree \
    jq \
    ripgrep \
    fd-find

# Configure code-server
RUN mkdir -p ~/.config/code-server
RUN echo "bind-addr: 127.0.0.1:8080" > ~/.config/code-server/config.yaml
RUN echo "auth: password" >> ~/.config/code-server/config.yaml
RUN echo "password: nanoclaw" >> ~/.config/code-server/config.yaml
```

### 4. Add Pi MCP Server

Create `data/mcp-servers/pi.json`:
```json
{
  "name": "pi",
  "command": "pi",
  "args": ["--mcp-server"],
  "env": {
    "PI_WORKSPACE": "/workspace/group",
    "PI_THEME": "dark",
    "PI_AUTO_SAVE": "true"
  }
}
```

## Core Integration Features

### VS Code to WhatsApp Bridge

**Trigger:** "open VS Code session" or "start coding session"

```bash
# Start code-server in container for remote access
start_vscode_session() {
  local group_folder="$1"
  local port="8080"
  
  # Start code-server in background
  code-server --bind-addr 0.0.0.0:$port \
    --auth password \
    --password "nanoclaw-$(date +%s)" \
    "/workspace/group" &
  
  local server_pid=$!
  local password="nanoclaw-$(date +%s)"
  
  # Create session info
  cat > "/workspace/ipc/vscode_session.json" << EOF
{
  "session_id": "vscode-$(date +%s)",
  "port": $port,
  "password": "$password",
  "pid": $server_pid,
  "workspace": "/workspace/group",
  "started_at": "$(date -Iseconds)"
}
EOF
  
  echo "VS Code server started on port $port"
  echo "Password: $password"
  echo "Access URL: http://localhost:$port"
}
```

### Project Synchronization

**Automatic sync between NanoClaw groups and VS Code workspaces:**

```bash
# Sync NanoClaw project with VS Code workspace
sync_vscode_workspace() {
  local group_folder="$1"
  local workspace_dir="/workspace/group"
  
  # Create VS Code workspace configuration
  cat > "$workspace_dir/.vscode/settings.json" << EOF
{
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "terminal.integrated.defaultProfile.linux": "bash",
  "claude.enabled": true,
  "claude.apiKey": "\${env:CLAUDE_CODE_OAUTH_TOKEN}",
  "git.enableSmartCommit": true,
  "extensions.autoUpdate": false
}
EOF
  
  # Create tasks configuration for NanoClaw integration
  cat > "$workspace_dir/.vscode/tasks.json" << EOF
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Send to WhatsApp",
      "type": "shell",
      "command": "echo",
      "args": [
        "\${input:message}",
        ">",
        "/workspace/ipc/messages/vscode-\$(date +%s).json"
      ],
      "group": "build"
    },
    {
      "label": "Claude Review",
      "type": "shell", 
      "command": "pi",
      "args": [
        "review",
        "\${file}"
      ],
      "group": "test"
    }
  ],
  "inputs": [
    {
      "id": "message",
      "description": "Message to send to WhatsApp",
      "default": "",
      "type": "promptString"
    }
  ]
}
EOF
}
```

### Code Streaming and Live Assistance

**Real-time code analysis and suggestions:**

```bash
# Monitor file changes and provide live assistance
setup_live_assistance() {
  local workspace_dir="/workspace/group"
  
  # Watch for file changes
  inotifywait -m -r -e modify,create "$workspace_dir" \
    --exclude '\.git|node_modules|\.vscode' \
    --format '%w%f %e' | while read file event; do
    
    # Skip non-code files
    if [[ ! "$file" =~ \.(js|ts|py|go|rs|java|cpp|c|h)$ ]]; then
      continue
    fi
    
    # Analyze changed file
    analyze_code_change "$file"
  done &
}

analyze_code_change() {
  local file="$1"
  local analysis_id="$(date +%s)-$(basename "$file")"
  
  # Run Pi analysis on the changed file
  pi analyze "$file" --format json > "/tmp/analysis-$analysis_id.json"
  
  # Extract key insights
  python3 << EOF
import json
import os

try:
    with open('/tmp/analysis-$analysis_id.json', 'r') as f:
        analysis = json.load(f)
    
    # Filter for important issues
    important_issues = [
        issue for issue in analysis.get('issues', [])
        if issue.get('severity', '') in ['error', 'warning']
    ]
    
    if important_issues:
        message = {
            'type': 'code_analysis',
            'file': '$file',
            'issues': important_issues[:3],  # Top 3 issues
            'timestamp': '$(date -Iseconds)'
        }
        
        with open('/workspace/ipc/messages/code-analysis-$analysis_id.json', 'w') as f:
            json.dump(message, f, indent=2)
            
except Exception as e:
    print(f"Analysis error: {e}")
EOF
}
```

### Collaborative Development

**Share code sessions with team members:**

```bash
# Create shareable code session
create_shared_session() {
  local session_name="$1"
  local collaborators="$2"
  
  # Start tmux session for collaborative terminal
  tmux new-session -d -s "$session_name"
  tmux send-keys -t "$session_name" "cd /workspace/group" Enter
  tmux send-keys -t "$session_name" "code ." Enter
  
  # Create session access info
  cat > "/workspace/ipc/shared_session.json" << EOF
{
  "session_name": "$session_name",
  "tmux_session": "$session_name",
  "collaborators": "$collaborators",
  "workspace": "/workspace/group",
  "created_at": "$(date -Iseconds)",
  "access_commands": [
    "tmux attach-session -t $session_name",
    "code --remote ssh-remote+container /workspace/group"
  ]
}
EOF
  
  echo "Shared session '$session_name' created"
  echo "Collaborators can join using: tmux attach-session -t $session_name"
}
```

## Advanced Features

### AI-Powered Code Completion Bridge

**Connect Claude Code to VS Code via WhatsApp:**

```bash
# Set up AI completion bridge
setup_ai_completion_bridge() {
  # Create VS Code extension configuration
  cat > "/workspace/group/.vscode/ai-bridge.json" << EOF
{
  "claude": {
    "enabled": true,
    "endpoint": "whatsapp://nanoclaw/claude",
    "contextLines": 50,
    "autoComplete": true,
    "reviewOnSave": false
  },
  "shortcuts": {
    "askClaude": "Ctrl+Shift+C",
    "reviewCode": "Ctrl+Shift+R",
    "explainCode": "Ctrl+Shift+E"
  }
}
EOF
  
  # Install custom VS Code extension for NanoClaw integration
  create_nanoclaw_vscode_extension
}

create_nanoclaw_vscode_extension() {
  local ext_dir="/workspace/group/.vscode/extensions/nanoclaw"
  mkdir -p "$ext_dir"
  
  # Create minimal VS Code extension
  cat > "$ext_dir/package.json" << EOF
{
  "name": "nanoclaw-integration",
  "displayName": "NanoClaw Integration",
  "description": "Claude AI integration via WhatsApp",
  "version": "1.0.0",
  "engines": {
    "vscode": "^1.60.0"
  },
  "activationEvents": [
    "onStartupFinished"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "nanoclaw.askClaude",
        "title": "Ask Claude"
      },
      {
        "command": "nanoclaw.reviewCode",
        "title": "Review Code with Claude"
      }
    ],
    "keybindings": [
      {
        "command": "nanoclaw.askClaude",
        "key": "ctrl+shift+c"
      }
    ]
  }
}
EOF
  
  # Create extension implementation
  cat > "$ext_dir/extension.js" << 'EOF'
const vscode = require('vscode');
const fs = require('fs');
const path = require('path');

function activate(context) {
    let askClaude = vscode.commands.registerCommand('nanoclaw.askClaude', () => {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const selection = editor.selection;
            const text = editor.document.getText(selection);
            
            // Send to NanoClaw via IPC
            const message = {
                type: 'vscode_query',
                text: text,
                file: editor.document.fileName,
                language: editor.document.languageId,
                timestamp: new Date().toISOString()
            };
            
            const ipcPath = '/workspace/ipc/messages/vscode-' + Date.now() + '.json';
            fs.writeFileSync(ipcPath, JSON.stringify(message, null, 2));
            
            vscode.window.showInformationMessage('Sent to Claude via WhatsApp!');
        }
    });
    
    context.subscriptions.push(askClaude);
}

module.exports = { activate };
EOF
}
```

### Git Integration with Pi

**Enhanced Git workflows using Pi:**

```bash
# Pi-powered Git operations
setup_pi_git_integration() {
  # Create Git hooks that use Pi for commit message generation
  cat > "/workspace/group/.git/hooks/prepare-commit-msg" << 'EOF'
#!/bin/bash
commit_msg_file="$1"
commit_source="$2"

# Only generate message for new commits (not amends, merges, etc.)
if [ -z "$commit_source" ]; then
    # Use Pi to generate commit message
    pi commit-message --staged > "$commit_msg_file.pi"
    
    # If Pi generated a message, use it
    if [ -s "$commit_msg_file.pi" ]; then
        cat "$commit_msg_file.pi" > "$commit_msg_file"
    fi
    
    rm -f "$commit_msg_file.pi"
fi
EOF
  
  chmod +x "/workspace/group/.git/hooks/prepare-commit-msg"
  
  # Create pre-commit hook for code review
  cat > "/workspace/group/.git/hooks/pre-commit" << 'EOF'
#!/bin/bash
# Pi-powered pre-commit review
echo "Running Pi code review..."

# Get staged files
staged_files=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|ts|py|go|rs|java|cpp|c|h)$')

if [ -n "$staged_files" ]; then
    pi review $staged_files --exit-code
    review_status=$?
    
    if [ $review_status -ne 0 ]; then
        echo "❌ Pi found issues in staged files"
        echo "Run 'pi review $staged_files' for details"
        echo "Use 'git commit --no-verify' to bypass"
        exit 1
    else
        echo "✅ Pi review passed"
    fi
fi
EOF
  
  chmod +x "/workspace/group/.git/hooks/pre-commit"
}
```

### Project Templates and Scaffolding

**Generate project templates using Pi:**

```bash
# Create project templates
create_project_template() {
  local template_type="$1"
  local project_name="$2"
  
  case "$template_type" in
    "typescript-api")
      pi create typescript-api "$project_name" \
        --auth jwt \
        --database postgresql \
        --testing jest \
        --linting eslint \
        --vscode-config
      ;;
    "react-app")
      pi create react-app "$project_name" \
        --typescript \
        --testing rtl \
        --styling tailwind \
        --vscode-config
      ;;
    "python-api")
      pi create python-api "$project_name" \
        --framework fastapi \
        --database sqlalchemy \
        --testing pytest \
        --linting black \
        --vscode-config
      ;;
  esac
  
  # Add NanoClaw integration to new project
  setup_nanoclaw_integration "$project_name"
}

setup_nanoclaw_integration() {
  local project_dir="$1"
  
  # Add NanoClaw configuration to project
  cat > "$project_dir/.nanoclaw.json" << EOF
{
  "project_type": "development",
  "auto_review": true,
  "commit_assistance": true,
  "test_integration": true,
  "deploy_notifications": true
}
EOF
  
  # Add VS Code tasks for NanoClaw
  mkdir -p "$project_dir/.vscode"
  cat > "$project_dir/.vscode/tasks.json" << EOF
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Ask Claude",
      "type": "shell",
      "command": "pi",
      "args": ["ask", "\${input:question}"],
      "group": "build"
    },
    {
      "label": "Code Review",
      "type": "shell",
      "command": "pi",
      "args": ["review", "\${file}"],
      "group": "test"
    }
  ]
}
EOF
}
```

## WhatsApp Integration Patterns

### Code Snippets and Questions

**Share code for review:**
```
@Andy review this TypeScript function:
\`\`\`typescript
const processUser = async (id: string) => {
  // implementation
}
\`\`\`
```

**Get coding assistance:**
```
@Andy help me optimize this React component for performance
```

**Project questions:**
```
@Andy what's the best way to structure a microservices project in Node.js?
```

### VS Code Remote Control

**Open files remotely:**
```
@Andy open src/api/users.ts in VS Code
```

**Run project commands:**
```
@Andy run npm test in the current project
```

**Git operations:**
```
@Andy commit my changes with a good message
```

### Collaborative Features

**Start pair programming session:**
```
@Andy start shared coding session with @john @sarah
```

**Share screen/code:**
```
@Andy share my current VS Code session for review
```

## Configuration

### Per-Group Pi Settings

In `groups/{name}/CLAUDE.md`:

```markdown
## Pi Integration Configuration

- **Auto code review**: enabled | disabled
- **VS Code server**: auto-start | manual | disabled
- **Live assistance**: enabled | disabled
- **Git integration**: full | basic | disabled
- **Shared sessions**: allowed | team-only | disabled
- **Template access**: full | curated | disabled
```

### Environment Variables

```bash
# Pi configuration
PI_THEME=dark
PI_AUTO_SAVE=true
PI_WORKSPACE=/workspace/group
PI_EXTENSIONS=typescript,python,rust

# VS Code server settings
CODE_SERVER_PASSWORD=auto-generated
CODE_SERVER_PORT=8080
CODE_SERVER_AUTH=password

# Integration settings
VSCODE_SYNC_SETTINGS=true
VSCODE_EXTENSIONS_AUTO_INSTALL=true
```

## Security Considerations

### Access Control

- VS Code sessions are password-protected
- Shared sessions require explicit permission
- File system access is limited to group workspace
- Network access is restricted to necessary services

### Data Protection

- Code is never sent outside the container environment
- All communications use secure channels
- Session passwords are auto-generated and time-limited
- Shared sessions can be monitored and logged

## Examples

### Daily Development Workflow

**Morning setup:**
```
@Andy start my development environment and open the user-service project
```

**Code assistance:**
```
@Andy I'm stuck on this async function, can you help optimize it?
```

**Pre-commit review:**
```
@Andy review my changes before I commit them
```

**End of day:**
```
@Andy clean up my VS Code session and save my progress
```

### Team Collaboration

**Code review:**
```
@Andy start a shared review session for the authentication module
```

**Pair programming:**
```
@Andy John and I need to work together on the API redesign
```

**Project planning:**
```
@Andy analyze our codebase structure and suggest improvements
```

This skill transforms your development workflow by seamlessly connecting your IDE, AI assistant, and team communication through WhatsApp, making coding more collaborative and efficient.