Grok Build for VS Code (Community)
Use Grok Build inside a VS Code panel, drop your open files in as You install the Install free from the VS Code Marketplace or Open VSX Registry
Why use this?If you live in your editor, this puts Grok Build right next to your code — a graphical workflow on top of the CLI: VS Code's native diff editor on a proposed edit before you approve it, permission cards (Allow always / once / Reject), your active editor and selection as first-class A short tour of how the extension is wired (and the one place it's deliberately not thin — Plan Mode) lives in docs/architecture.md. Requirements
Install1. Install the CLI and sign in. macOS / Linux / WSL:
Windows (PowerShell):
2. Install the extension. From the Marketplace — search Grok Build by PawelHuryn, or:
Or build from source:
Reload VS Code (Ctrl+Shift+P → Developer: Reload Window) and click the Grok icon in the activity bar.
Uninstall: Quick start
Features & capabilitiesClick any feature to expand. Permission cards with diff preview — see every edit in VS Code's native diff before you approveWhen Grok proposes an edit, hit open diff → to review it in VS Code's native diff editor, then Allow once / always or Reject. The file is written only after you approve — no surprise changes to your files.
Modes — Agent, Plan & Auto accept
Image & video generation —
|
| Dot | Meaning |
|---|---|
| 🔵 Blue | Working — a turn is in flight |
| 🟡 Yellow | Needs you — a permission, question, or plan is waiting |
| 🟢 Green | Finished, with output you haven't opened yet |
| 🔴 Red | Finished with an error you haven't opened |
| ⚪ Gray | At rest — idle, already read, or not loaded |
The green/red dot is an unread badge: it appears when a session finishes while you're looking at another one, and clears the moment you open it. It's persisted, so it survives idle cleanup and a VS Code restart — fire off a few agents, walk away, and the green dots are exactly the sessions with results waiting.
To keep a pile of background sessions from each pinning a live process, a session left untouched for an hour (or beyond ~8 live) is quietly shut down — never one that's working or waiting on you — and reloads from history on click, losing nothing.

Session history — resume, rename, delete, or clear past sessions
The clock icon lists this project's sessions, newest first. Click a row to resume — Grok replays the conversation, with inline images, plans, and reasoning intact — or hover to rename or delete it. The list loads the most recent 100 and pulls in older ones as you scroll; the search box filters by name across your whole history, so it stays fast even with thousands of sessions. Clear all history (bottom of the dropdown) removes every session for this project except the current one, after a confirm. Renames are stored by the extension and never touch Grok's own files.

Tool calls — every read, edit & command, inline
Every action Grok takes appears in chat as a category-iconed row — a single line, or a batch summarized by what it did ("Explored 5 items", "Edited 2 files") that expands to the full list on click. A tool that fails turns red with the reason inline.

Math & LaTeX rendering — equations render as math, not raw TeX
When Grok answers with LaTeX — inline \(…\), display \[…\], and environments like matrices, cases, integrals, sums, and Greek — the chat renders it as real typeset math via MathJax, bundled so it works offline. Hover a display equation to copy its LaTeX source or export it as a PNG or transparent SVG. Bare $…$ is intentionally not a delimiter — it would mangle prose like "it costs $5 and then $10".

Mermaid diagrams — flowcharts and sequence diagrams render as diagrams
When Grok answers with a ```mermaid block — flowcharts, sequence and state diagrams, git graphs, class and ER diagrams — the chat renders it as a real diagram via Mermaid, bundled so it works offline, themed to your light/dark mode. Hover a diagram to copy its source or export it as a PNG or transparent SVG. While it's still streaming or if it's malformed, the readable source is shown instead — you never lose the content.

Model picker — switch models live, no restart
Click the model name in the gear popover. The model list comes from your CLI; switching is live with no restart in most cases. (A few models belong to a different agent and need a quick session restart — the extension detects that and handles it for you, carrying your context forward.)
Reasoning effort — trade tokens for depth
Gear icon → effort dots pick a level (none → xhigh), forwarded to the CLI as --reasoning-effort. Changing it restarts the session, with an optional Summarize & Restart to carry context forward. (Some subscription tiers may reject effort at the backend.)
Cost control — token donut, /compact & effort
Stay on top of spend without leaving the sidebar: the bottom-toolbar context donut shows usedK/maxK tokens after each prompt; /compact (gear → Compact) compresses the conversation when it fills, or + starts fresh. Reasoning effort trades tokens for depth, and voice STT cost is called out above.
MCP servers — whatever the CLI loads
MCP servers are configured in the CLI (~/.grok/config.toml global, .grok/config.toml project) — the extension picks up whatever the CLI loads:
grok mcp add playwright --command npx --args @playwright/mcp@latest
Or edit the config via gear → Open global / project config, then click + to reload.
Configuration
All grok.* settings (VS Code Settings → search "grok")
| Setting | Default | Notes |
|---|---|---|
grok.cliPath |
"" |
Path to the grok binary. Empty = auto-discover (~/.grok/bin/grok → PATH). |
grok.defaultModel |
"" |
Model ID for new sessions. Empty = CLI default. |
grok.defaultEffort |
"" |
Reasoning effort forwarded as --reasoning-effort (none / minimal / low / medium / high / xhigh). Empty = CLI default. Changing it restarts the session. |
grok.defaultMode |
"" |
Mode for new sessions, remembered automatically from your last Agent / Auto accept switch (Plan is never remembered). Empty = Agent. |
grok.includeActiveFileByDefault |
true |
Auto-add the active editor as a context chip. |
grok.useCtrlEnterToSend |
false |
When true, Enter inserts a newline and Ctrl/Cmd+Enter sends. |
grok.showThinking |
false |
Show Grok's reasoning (thinking) traces in chat. Off shows a Thinking… stand-in. Also toggleable live from gear → Config & debug. |
grok.telemetry.enabled |
true |
Send anonymous, privacy-first usage telemetry (see Privacy). Also honors VS Code's global telemetry.telemetryLevel. |
grok.chatFontScale |
100 |
Zoom for the chat panel only, as a percent (150, 200, …). Scales the whole chat UI without rescaling the rest of VS Code (unlike Ctrl/Cmd+Shift+=). Applies live; supports User (global) and Workspace (local) scope. |
grok.voiceApiKey |
"" |
xAI API key for voice Speech-to-Text — a separate console.x.ai developer key, not the CLI login. Empty = fall back to GROK_VOICE_API_KEY / XAI_API_KEY in the workspace .env. |
grok.ffmpegPath |
"" |
Path to ffmpeg for microphone recording. Empty = use ffmpeg from PATH. |
grok.voiceInputDevice |
"" |
Microphone device override. Empty = system default (Windows auto-detects the first DirectShow audio device). |
grok.voiceSendPhrase |
"grok send" |
Spoken phrase that auto-submits when it ends a transcription. Empty = disable hands-free sending. |
grok.voiceStreaming |
true |
Stream transcription live as you speak. false = one-shot batch mode. Streaming costs $0.20/hr vs $0.10/hr batch. |
Commands & keybindings
VS Code commands & keys (Ctrl/Cmd+Shift+P → "Grok")
VS Code commands (not Grok slash commands):
| Command | What it does |
|---|---|
Grok: Open |
Open the Grok sidebar |
Grok: New Session |
Start a fresh session |
Grok: Pick Model |
Open the model picker |
Grok: Toggle Plan / Agent Mode |
Open the mode picker (Agent / Plan / Auto accept) |
Grok: Send File |
Add the selected file to context |
Grok: Send Selection |
Send the current text selection to Grok |
Grok: Insert @-Mention |
Insert an @-mention for the active file into the composer |
Grok: Show Logs |
Open the Grok output channel (ACP messages, errors) |
Grok: Log Out |
Sign out of the Grok CLI (grok logout) and return to the sign-in screen |
| Key | Action |
|---|---|
Ctrl+; / Cmd+; |
Open Grok sidebar |
Alt+G |
Insert @-mention for the active file (when the editor is focused) |
Grok's own slash commands (/imagine, /compact, …) autocomplete in the composer when you type /, sourced live from your installed CLI version. Reference snapshot: docs/SLASH-COMMANDS.md.
How it works
The extension is intentionally thin: it speaks JSON-RPC over grok agent stdio and renders the results. Grok owns sessions, memory, MCP, models, and tool execution; the extension mediates file reads/writes, terminal requests, diff previews, the webview UI — and Plan Mode.
Plan Mode is the one place the extension is not thin. The CLI's exit_plan_mode is unreliable (it reports "approved" to any reply), so the extension enforces planning itself: a gate blocks workspace writes and non-read-only commands until you approve, and a hidden primer message teaches Grok to read your real verdict ([Plan approved] / [Plan rejected] / [Plan cancelled]) from your next message. The primer is fired eagerly and silently the instant a session goes live (not in front of your first prompt), and is kept lean so it doesn't add a startup pause — your first real message simply waits, in code, for the silent primer turn to finish (Grok runs one turn at a time) and is released the moment it does.
Full diagram, message flow, module map, and design notes: docs/architecture.md.
Development
Build, test & repo conventions
npm install
npm test # grok-free unit/DOM/integration suite — exactly what CI runs
npm run package # → grok-vscode-phuryn-<version>.vsix
npm test is grok-free, so local ≡ CI — it never spawns the real binary. A separate, on-demand npm run test:live drives the actual grok end-to-end (handshake, restore, plan-mode, image/video gen) and is run before a release, not on every commit. Full test taxonomy and what's deferred to a future @vscode/test-electron suite: TESTS.md. Architecture and module map: docs/architecture.md.
Repo conventions: direct-to-main, no feature branches; commits explain the why; no speculative abstractions; the grok-free suite is the floor — every change keeps it green.
Known limits
- Diff preview semantics. The diff editor compares the proposed old vs. new text against each other, not against the file on disk at preview time. The write happens via
fs/write_text_fileafter approval. This is an ACP constraint —tool_call_updatecarries the diff before the file is touched. - No worktree UI.
Grok: New Worktree Sessionis planned but not yet implemented. - View placement. The view defaults to the left activity bar; drag it to the secondary side bar manually if you want it on the right.
Privacy
Privacy by design — no message content, no code, no file paths, and no account/email/login identity ever leave your machine. The only thing sent is an anonymous, opt-out usage count. Turn it off anytime with grok.telemetry.enabled: false or VS Code's global telemetry.telemetryLevel.
More: docs/privacy.md.
License & attribution
Licensed under the MIT License — see LICENSE. MIT is permissive (use, modify, sell, even in closed-source products) but not obligation-free: the copyright notice and license text must travel with all copies, including compiled builds. If you're reusing this project, see docs/attribution.md for what that means and how to credit it properly.




