# Vscode AI Extensions Customization

> Customize VS Code AI extensions (Claude Code, OpenAI Codex) by replacing bundled binaries with custom versions, configuring executable paths, and enabling multi-instance panels. Use when patching extensions after updates, switching to custom-built binaries, or enabling multiple Codex editor tabs.

- Skill: `tankygranny05/vscode-ai-extensions-customization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tankygranny05/vscode-ai-extensions-customization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tankygranny05/vscode-ai-extensions-customization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tankygranny05 (https://skillmd.com/u/tankygranny05)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/tankygranny05/vscode-ai-extensions-customization

---


# VS Code AI Extensions Customization
*[Created by Codex: 019bcfbd-5d1a-7220-a4d4-c0fd7c2a30e3]*
*[Ported from `~/.claude/skills/vscode-ai-extensions-customization/SKILL.md`]*

## What This Solves

VS Code bundles AI extensions (Claude Code, Codex) with their own binaries. This skill documents how to replace those binaries with custom versions (for observability hooks, custom builds) and how to enable multiple Codex instances in editor tabs instead of the singleton sidebar.

## Extension File Structure

### Naming Convention
```
~/.vscode/extensions/{publisher}.{extension}-{version}-{platform}-{arch}/
```

**Examples:**
- `anthropic.claude-code-2.1.11-darwin-arm64`
- `openai.chatgpt-0.4.60-darwin-arm64`

**Predicting new versions:** Increment version number, keep platform/arch suffix.

### Claude Code Extension
```
anthropic.claude-code-{VERSION}-darwin-arm64/
├── extension.js                    # JS wrapper (minified)
├── extension.js.backup             # Your backup (if created)
├── webview/index.js
└── resources/native-binary/
    ├── claude                      # Executable (or symlink)
    └── claude.binary               # Original backup (170MB Mach-O)
```

### OpenAI Codex Extension
```
openai.chatgpt-{VERSION}-darwin-arm64/
├── out/
│   ├── extension.js                # JS wrapper (909KB minified)
│   └── extension.js.original       # Your backup
├── bin/macos-aarch64/
│   ├── codex                       # Executable (or symlink)
│   ├── codex.original              # Original backup (43MB Mach-O)
│   └── rg                          # Bundled ripgrep
└── package.json                    # Commands, views, settings
```

## Architecture

```
┌─────────────────────────────────────────────────────────────┐
│                    VS Code Extension Host                   │
├─────────────────────────────────────────────────────────────┤
│  extension.js                                               │
│  ├── Activates on VS Code startup                           │
│  ├── Registers views (sidebar) and commands                 │
│  ├── Spawns binary via child_process.spawn()                │
│  └── Communicates via stdin/stdout/SSE                      │
└─────────────────────────────────────────────────────────────┘
                              │
                              │ spawn()
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  Native Binary (claude / codex)                             │
│  ├── Handles API calls to Claude/OpenAI                     │
│  ├── Executes tools (file ops, bash, etc.)                  │
│  └── Streams SSE events back to extension                   │
└─────────────────────────────────────────────────────────────┘
```

## Customization Operations

### Operation 1: Replace Binary with Symlink

**Claude Code:**
```bash
cd ~/.vscode/extensions/anthropic.claude-code-*-darwin-arm64/resources/native-binary

# Backup original
mv claude claude.binary

# Symlink to custom version
ln -s /path/to/your/custom/claude claude
```

**Codex:**
```bash
cd ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/bin/macos-aarch64

# Backup original
mv codex codex.original

# Symlink to custom version
ln -s /path/to/your/custom/codex codex
```

### Operation 2: Configure Executable via Settings (Codex only)

Codex checks `chatgpt.cliExecutable` setting before using bundled binary.

**Add to VS Code settings.json:**
```json
{
  "chatgpt.cliExecutable": "/Users/sotola/swe/codex.0.77.0/codex-rs/target/release/codex"
}
```

**Location:** `~/Library/Application Support/Code/User/settings.json`

**Code path (extension.js:31486):**
```javascript
function Si(t, e) {
  let r = tr(bt.CLI_EXECUTABLE);
  if (r && r.trim().length > 0) return r;  // Use setting if set
  // Otherwise use bundled binary
  return xi.Uri.joinPath(t, `${o}/${n}`).fsPath;
}
```

### Operation 3: Enable Multiple Codex Instances

**Problem:** Codex sidebar is singleton. Only one instance allowed.

**Solution:** Use hidden `chatgpt.newCodexPanel` command which opens Codex in editor tab.

**How to access:**
1. `Cmd+Shift+P` → "Codex: New Panel"
2. Or bind keyboard shortcut to `chatgpt.newCodexPanel`

**Code path (extension.js:37496):**
```javascript
async createNewPanel() {
  // Creates new conversation
  // Opens via vscode.openWith using customEditorViewType
  await me.commands.executeCommand("vscode.openWith", n, t.customEditorViewType, {...});
}
```

**Note:** Editor tabs use same executable config as sidebar.

### Operation 4: Beautify extension.js for Editing

```bash
# Backup first
cp ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/out/extension.js \
   ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/out/extension.js.original

# Beautify (909KB → 1.3MB)
npx prettier --write ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/out/extension.js
```

## Version Update Detection & Re-patching

### Check for Updates Script
```bash
#!/bin/bash
# check-vscode-ai-extensions.sh

CLAUDE_EXPECTED="anthropic.claude-code-2.1.11-darwin-arm64"
CODEX_EXPECTED="openai.chatgpt-0.4.60-darwin-arm64"
EXT_DIR="$HOME/.vscode/extensions"

echo "=== VS Code AI Extension Version Check ==="

# Claude
CLAUDE_CURRENT=$(ls -d "$EXT_DIR"/anthropic.claude-code-*-darwin-arm64 2>/dev/null | tail -1 | xargs basename)
if [ "$CLAUDE_CURRENT" != "$CLAUDE_EXPECTED" ]; then
  echo "⚠️  Claude updated: $CLAUDE_EXPECTED → $CLAUDE_CURRENT"
  echo "   Needs re-patching!"
else
  echo "✓ Claude: $CLAUDE_CURRENT (up to date)"
fi

# Codex
CODEX_CURRENT=$(ls -d "$EXT_DIR"/openai.chatgpt-*-darwin-arm64 2>/dev/null | tail -1 | xargs basename)
if [ "$CODEX_CURRENT" != "$CODEX_EXPECTED" ]; then
  echo "⚠️  Codex updated: $CODEX_EXPECTED → $CODEX_CURRENT"
  echo "   Needs re-patching!"
else
  echo "✓ Codex: $CODEX_CURRENT (up to date)"
fi

# Check if symlinks are intact
echo ""
echo "=== Symlink Status ==="
ls -la "$EXT_DIR"/anthropic.claude-code-*-darwin-arm64/resources/native-binary/claude 2>/dev/null
ls -la "$EXT_DIR"/openai.chatgpt-*-darwin-arm64/bin/macos-aarch64/codex 2>/dev/null
```

### Re-patch After Update Script
```bash
#!/bin/bash
# patch-vscode-ai-extensions.sh

CUSTOM_CLAUDE="/Users/sotola/swe/claude-code-2.1.12/cli.js"
CUSTOM_CODEX="/Users/sotola/swe/codex.0.77.0/codex-rs/target/release/codex"
EXT_DIR="$HOME/.vscode/extensions"

# Find latest versions
CLAUDE_DIR=$(ls -d "$EXT_DIR"/anthropic.claude-code-*-darwin-arm64 2>/dev/null | tail -1)
CODEX_DIR=$(ls -d "$EXT_DIR"/openai.chatgpt-*-darwin-arm64 2>/dev/null | tail -1)

echo "Patching Claude: $CLAUDE_DIR"
cd "$CLAUDE_DIR/resources/native-binary"
[ -f claude ] && [ ! -L claude ] && mv claude claude.binary
[ ! -L claude ] && ln -s "$CUSTOM_CLAUDE" claude
ls -la claude

echo ""
echo "Patching Codex: $CODEX_DIR"
cd "$CODEX_DIR/bin/macos-aarch64"
[ -f codex ] && [ ! -L codex ] && mv codex codex.original
[ ! -L codex ] && ln -s "$CUSTOM_CODEX" codex
ls -la codex

echo ""
echo "Done. Reload VS Code window to apply."
```

## Failed Attempts

⚠️ **Read this first** - These approaches don't work:

| Attempt | Why It Failed | Notes |
|---------|---------------|-------|
| `code --add-setting` flag | Not a valid VS Code CLI option | Edit settings.json directly instead |
| Claude `cliExecutable` setting | Doesn't exist for Claude extension | Must use symlink approach |
| Multiple sidebar instances | VS Code sidebar is singleton by design | Use editor tabs via `newCodexPanel` |

## Environment & Dependencies

- **OS**: macOS (darwin-arm64)
- **VS Code extensions path**: `~/.vscode/extensions/`
- **Settings path**: `~/Library/Application Support/Code/User/settings.json`
- **Binary type**: Mach-O 64-bit ARM64

## Key Files Reference

| Purpose | Claude Code | OpenAI Codex |
|---------|-------------|--------------|
| Extension wrapper | `extension.js` | `out/extension.js` |
| Native binary | `resources/native-binary/claude` | `bin/macos-aarch64/codex` |
| Original backup | `claude.binary` | `codex.original` |
| JS backup | `extension.js.backup` | `extension.js.original` |
| Settings key | N/A | `chatgpt.cliExecutable` |

## Current Versions (as of session)

| Extension | Version | Custom Binary |
|-----------|---------|---------------|
| Claude Code | 2.1.11 | `/Users/sotola/swe/claude-code-2.1.12/cli.js` |
| OpenAI Codex | 0.4.60 | `/Users/sotola/swe/codex.0.77.0/codex-rs/target/release/codex` |

## Session Reference

- **Date**: 2026-01-18
- **Agent**: Opus: 8603c876-f9fb-4b24-a8e5-955cfca2f430
- **Original task**: Find VS Code extension files, replace binaries with custom versions, enable multiple Codex instances