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