Codex Context Picker
Pick files, code, and web page elements — then send them straight into Codex chat.
Stop describing UI bugs in words. Browse your app inside VS Code, click what you mean, and let Codex see the exact element, file, or line of code.
Why use this?
Working with Codex on real projects means sharing context — a button that looks wrong, a file that matters, or the three lines you just changed. This extension makes that fast:
- Browse and click local apps, staging sites, or the public web in VS Code to capture any element for Codex.
- Right-click files, folders, selections, lines, or terminal logs to add them to chat.
Everything is attached to the current Codex thread, ready to use in your next prompt.
Features
Browse & select elements
Open any http or https URL in a built-in browser panel — local apps, staging sites, or the public web. Use the toolbar to navigate, then capture what you need:
- Click to select — turn on Select Element and click anything on the page
- Right-click — Add to context tray or Send to Codex chat without picker mode
- Context tray — selections appear as labelled pills; send one, send all, or clear the tray
- Colored overlays — each pick gets a border on the page; hover a pill to highlight its element (and vice versa)
With Auto Send to Chat on, picks go straight to Codex. Turn it off to queue elements in the tray first.
Add files & folders from the Explorer
Right-click a file or folder in the Explorer (or an editor tab) and choose Add to Codex Chat. Codex gets an @mention for that resource in one step.
Add code selections & lines
- A single line — right-click in the editor or on a line number and choose Add Line to Codex Chat.
Add terminal output
Select text in the integrated terminal, right-click, and choose Add Terminal Selection to Codex Chat.
Open local HTML files in the browser
Working on a static page in your project? Right-click a local .html, .htm, or .xhtml file and choose Open in Codex Context Picker to preview and pick elements from it.
Stays out of your way
- Selections remembered — your picked elements are restored the next time you open the panel.
- Clear context cache — delete all captured context from the Command Palette.
- Keep Git clean — optionally add captured context to your global Git ignore so it never gets committed.
Requirements
|
|
| VS Code |
Version 1.80 or newer |
| Codex |
Install the official extension — required for chat integration |
| Workspace folder |
Needed to use the Context Picker Browser (to open the browser panel and save selections). Editor chat commands work without a folder |
Installation
- Open Extensions (
Ctrl+Shift+X / Cmd+Shift+X).
- Search for Codex Context Picker.
- Click Install.
Quick start
- Install Codex and open a project folder.
- Press
Ctrl+Shift+Alt+X (Cmd+Shift+Alt+X on macOS), or run Open Codex Context Picker from the Command Palette.
- Enter a URL (e.g.
http://localhost:3000) and press Go.
- Click Select Element, then click something on the page — it is sent to Codex chat (when Auto Send to Chat is on).
Tips
| What you want to do |
How |
| Open the browser |
Ctrl+Shift+Alt+X / Cmd+Shift+Alt+X, or Command Palette → Open Codex Context Picker |
| Pick an element |
Select Element → click, or right-click → Send to Codex chat |
| Queue elements first |
Turn off Auto Send to Chat in settings; use the tray Send to Codex button when ready |
| Change highlight color |
Settings → Accent Palette (blue, orange, green, purple, red, cyan) |
| Open settings |
Click ⚙ in the browser toolbar |
| Rebind the shortcut |
Preferences: Open Keyboard Shortcuts — default avoids Ctrl/Cmd+Shift+B (Run Build Task) |
Settings
Search @ext:ShadiAbuHilal.codex-context-picker in VS Code Settings.
| Setting |
What it does |
| Default URL |
Page to load automatically when you open the browser |
| Auto Send to Chat |
Send picked elements to Codex immediately (on by default). When off, they go to the context tray first |
| Accent Palette |
Color for overlays and tray pills |
Commands & shortcuts
| Command |
Shortcut (Windows / Linux) |
Shortcut (macOS) |
| Open Codex Context Picker |
Ctrl+Shift+Alt+X |
Cmd+Shift+Alt+X |
All commands are under Codex Context Picker in the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
- Open Codex Context Picker — open the browser panel
- Open in Codex Context Picker — preview the active HTML file
- Add to Codex Chat — mention a file, folder, or tab
- Add Line to Codex Chat — mention the line under the cursor
- Add Terminal Selection to Codex Chat — mention selected terminal output
- Clear Context Cache — delete all captured context
- Add .codex-ctx to Global Gitignore — keep captured context out of Git
Languages
The extension follows your VS Code display language. Translations are included for English, Chinese (Simplified & Traditional), French, Spanish, Japanese, Korean, Russian, and Turkish.
Things to know
- Codex is required to attach context to the current thread.
- Some sites may not load fully — pages with strict login or security flows can be harder to preview in an embedded browser.
- HTML preview — Open in Codex Context Picker works for
.html, .htm, and .xhtml files.
- Large folders — adding a folder to chat includes up to 8 files at a time.
Known issues
- Editor tab flicker on send — Sending a pick to Codex Chat can cause a brief flicker in the editor tabs. We're still investigating a fix.
- Removed picks aren't removed from Codex chat — Deleting an element from the context tray doesn't remove the file Codex already attached to the thread. This is a limitation of the current integration between the two extensions, not something Codex Context Picker can control.
Privacy
- Captured context is stored only in your workspace on your machine.
- Browsing contacts the sites you open and their resource servers through a local proxy.
- Captured context is attached to Codex chat when you send it, or automatically when Auto Send to Chat is enabled (the default).
- This extension does not collect telemetry or analytics.
This is an unofficial extension, not affiliated with OpenAI. Codex is a trademark of OpenAI.
