Entegral Claude Code and Codex Helper For VS Code

A VS Code extension that makes it easy to insert file paths and code selection references into Claude Code or Codex's chat input. Claude Code uses the @mention format while Codex uses structured file attachments.

Features

1. Add File Reference to Claude Code

Right-click a file in the Explorer or use the editor toolbar button to instantly insert a file reference into Claude Code's chat input.

• Explorer Context Menu: Right-click any file → "Add File to Claude Code"
• Editor Toolbar Button: "Add File to Claude Code" button in the editor title bar submenu
• Supports multi-file selection (Ctrl+Click multiple files)
• Folders are referenced with trailing slash (@src/components/)
• References use relative paths: @src/utils/helper.ts

2. Add Selection Reference to Claude Code

Select lines in the editor and insert them as a code reference into Claude Code's chat.

• Editor Context Menu: Select text → Right-click → "Add Selection to Claude Code"
• Editor Toolbar Button: "Add Selection to Claude Code" button in the submenu (appears when text is selected)
• References include line numbers: @src/app.ts#5-10
• Direct insertion into Claude Code (when installed) — no paste needed
• Fallback to clipboard if Claude Code extension is not available

3. Add File Reference to Codex

Right-click a file in the Explorer to add it as a structured attachment to Codex's chat.

• Explorer Context Menu: Right-click any file → "Add File to Codex"
• Editor Toolbar Button: "Add File to Codex" button in the editor title bar submenu
• Supports multi-file selection (Ctrl+Click multiple files)
• Files are added directly as attachments (no @mention format needed)
• Fallback to @mention format clipboard if Codex extension is not available

4. Add Selection Reference to Codex

Select lines in the editor and add them as context to Codex's chat.

• Editor Context Menu: Select text → Right-click → "Add Selection to Codex"
• Editor Toolbar Button: "Add Selection to Codex" button in the submenu (appears when text is selected)
• Selection is added directly to Codex's chat context
• Fallback to @file#line-range clipboard format if Codex extension is not available

Installation

Step 1: Build the Extension

cd ClaudeCodeExtensionExtension
npm install
npm run compile
npx @vscode/vsce package

This creates a claude-code-helper-for-vscode-0.0.1.vsix file.

Step 2: Install in VS Code

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Click the three dots menu (top-right)
4. Select Install from VSIX...
5. Navigate to and select the .vsix file from your project folder

The extension will now be installed and available every time you start VS Code.

Requirements

• VS Code 1.85.0 or later
• Claude Code extension (optional, for seamless Claude Code insertion)
• Codex extension by OpenAI (optional, for Codex file attachment support)

Usage

Claude Code: Adding a File Reference

1. Explorer: Right-click a file → "Add File to Claude Code"
   • Or: Click the @mention icon in the editor toolbar → "Add File to Claude Code"
2. If Claude Code is installed, the reference is inserted directly into the chat input
3. Otherwise, reference is copied to clipboard — press Ctrl+V in Claude Code to paste

Claude Code: Adding a Selection Reference

1. Editor: Select lines of code
2. Right-click → "Add Selection to Claude Code"
   • Or: Click the @mention icon in the editor toolbar → "Add Selection to Claude Code"
3. Reference is inserted directly into Claude Code's chat input if available
4. If Claude Code not installed: reference copied to clipboard — press Ctrl+V to paste

Codex: Adding a File Reference

1. Explorer: Right-click a file → "Add File to Codex"
   • Or: Click the @mention icon in the editor toolbar → "Add File to Codex"
2. If Codex is installed, the file is added directly as a chat attachment and the sidebar opens
3. Otherwise, reference is copied to clipboard (@mention format) — press Ctrl+V in Codex to paste

Codex: Adding a Selection Reference

1. Editor: Select lines of code
2. Right-click → "Add Selection to Codex"
   • Or: Click the @mention icon in the editor toolbar → "Add Selection to Codex"
3. If Codex is installed, the selection is added to the chat context
4. If Codex not installed: reference copied to clipboard — press Ctrl+V to paste

Reference Format

Claude Code: @mention Format

The extension generates references in Claude Code's native @mention format:

Reference	Example
Whole file	@src/utils/helper.ts
Single line	@src/app.ts#42
Line range	@src/app.ts#5-10
Folder	@src/components/

Codex: Structured Attachments

Codex uses structured file attachments (when extension is installed):

• Files are added as chat attachments, not as text references
• Selections are added as chat context
• Fallback to @mention format (same as Claude Code) if Codex extension not available

Edge Cases Handled

• ✅ Files outside workspace (skipped with warning)
• ✅ Multi-root workspaces (each file resolved to its workspace root)
• ✅ Multiple file selection (joined with spaces for Claude Code, individual calls for Codex)
• ✅ No workspace folder (error message)
• ✅ Windows path separators (automatically converted to forward slashes)
• ✅ Virtual filesystems (skipped gracefully)
• ✅ Readonly files (toolbar button hidden)
• ✅ Claude Code not installed (falls back to clipboard)
• ✅ Codex not installed (falls back to clipboard)

Settings

Configure the extension via settings.json:

"claudeCodeHelper.showStatusBarMessage": true

• true (default): Show status bar message after copying references
• false: Silent operation (no status bar feedback)

Development

Prerequisites

• Node.js 18+
• npm

Setup

cd ClaudeCodeExtensionExtension
npm install
npm run compile

Running in Development

Press F5 to launch the Extension Development Host. This opens a new VS Code window with the extension loaded.

Build & Package

npm run compile       # Compile TypeScript
npm run watch        # Watch for changes (auto-compile)
npm run vscode:prepublish  # Prepare for publishing

To create a .vsix package for distribution:

npx @vscode/vsce package

Testing

In the Extension Development Host:

Claude Code Tests

1. Test Explorer File Reference:

   • Right-click a file in Explorer
   • Verify "Add File to Claude Code" appears
   • Click it and (if Claude Code open) verify input gets focus
   • Otherwise check clipboard contains @relative/path

2. Test Multiple Files:

   • Ctrl+Click multiple files in Explorer
   • Right-click and select command
   • If Claude Code open: verify files inserted
   • Otherwise: verify clipboard contains @file1 @file2

3. Test Selection Reference:

   • Select lines in editor
   • Right-click → "Add Selection to Claude Code"
   • If Claude Code open: reference appears in chat input
   • Otherwise: check clipboard for @file#start-end

Codex Tests

4. Test Codex File Reference:

   • Right-click a file in Explorer
   • Verify "Add File to Codex" appears
   • If Codex installed: Codex sidebar should open with file attached
   • Otherwise: clipboard contains @relative/path

5. Test Codex Multiple Files:

   • Ctrl+Click multiple files in Explorer
   • Right-click → "Add File to Codex"
   • If Codex installed: verify all files are attached to chat
   • Otherwise: verify clipboard contains @file1 @file2

6. Test Codex Selection Reference:

   • Select lines in editor
   • Right-click → "Add Selection to Codex"
   • If Codex installed: Codex sidebar opens with selection added
   • Otherwise: check clipboard for @file#start-end

General Tests

7. Test Toolbar Buttons:

   • Click @mention dropdown in editor toolbar
   • Verify all 4 commands appear (Claude file, Claude selection, Codex file, Codex selection)
   • Verify Claude items grouped separately from Codex items

8. Test Edge Cases:

   • Right-click folder → reference ends with /
   • Right-click file outside workspace → warning shown
   • Use commands with no workspace → error shown

Troubleshooting

Claude Code: References not appearing

• Ensure Claude Code extension is installed
• Claude Code's input panel must be open/focused
• Try pressing Ctrl+V to paste if using clipboard mode

Codex: References not appearing

• Ensure Codex extension by OpenAI is installed
• Codex's sidebar must be visible (or will open automatically)
• Try pressing Ctrl+V to paste if using clipboard mode
• Check that Codex extension is enabled (not disabled)

Button/Menu items not appearing

• Commands appear in context menus when conditions are met (selection required for selection commands)
• Toolbar @mention dropdown only shows for file documents (not settings/output panels)
• Selection commands hidden when no text is selected
• Try reloading the window (Cmd+Shift+P → "Developer: Reload Window")

Path resolution issues

• Make sure you have a workspace folder open (not single file)
• Files must be within an open workspace folder
• Check the error message for details

Extension ID/Installation Issues

• Claude Code extension ID: github.copilot-chat
• Codex extension ID: openai.chatgpt
• Verify both are installed via Extensions panel (Ctrl+Shift+X)

Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

License

MIT