Grok Studio

Live preview companion + IDE shell for Grok Build
Code with Grok · watch localhost update · edit · chat · terminal — one desktop app.

English · 한국어

---

Why Grok Studio?

Grok Build is great at writing code in the terminal.
Grok Studio sits beside it so you can see the site, open files, and keep chat / preview / shell in one place.

┌─────────────────────┐     ┌──────────────────────────────────┐
│  Grok Build (TUI)   │     │  Grok Studio                     │
│  write · refactor  │ ──► │  Companion preview · or full IDE │
└─────────────────────┘     │  Editor · Terminal · Chat · Dev  │
                            └──────────────────────────────────┘

Mode	Best for
Companion	Side-by-side with Build — folder, Start Dev, live preview, pin on top
Studio	Full shell — explorer, Monaco tabs, embedded Build, ACP chat, preview

---

Features

• Companion layouts — Focus / Split / Dashboard · Ctrl+1/2/3 · Auto Start Dev · always-on-top
• Live Preview — localhost-only iframe · health probe · desktop / tablet / mobile · HMR-aware
• Studio IDE chrome — activity bar · multi-file tabs · breadcrumbs · Quick Open (Ctrl+P) · status bar
• Build ↔ Studio — run Grok Build inside the app terminal · or Shift+Build for external · file bridge to Chat
• Grok Chat (ACP) — stream · tools · permissions · model / effort · Stop / Retry / Kill
• Stack detect — Vite · Vue · Svelte · Astro · Next · Nuxt · Remix · Angular · CRA · Flask · Django · FastAPI · static · more
• i18n — English default · Korean optional

---

Quick start

Requirements

Tool	Notes
Node.js 20+	Frontend + tooling
Rust stable	Tauri 2 backend
MSVC Build Tools	Windows link.exe
grok CLI (optional)	Chat + embedded Build
git (optional)	Branch / worktree UI

Develop

git clone https://github.com/blackningtop-ctrl/grok-studio.git
cd grok-studio
npm install
npm run dev:tauri

Installers (Windows)

npm run build:tauri

Artifact	Typical path
Portable exe	src-tauri/target/release/grok-studio.exe
NSIS setup	src-tauri/target/release/bundle/nsis/*-setup.exe
MSI	src-tauri/target/release/bundle/msi/*.msi

Prebuilt binaries: Releases (CI publishes on v* tags).

---

Test fixtures

Open any folder in Companion → Start Dev:

Path	kind	Port
fixtures/playground	vite (React)	5173
fixtures/vue-app	vue	5174
fixtures/svelte-app	svelte	5175
fixtures/astro-app	astro	4321
fixtures/flask-app	flask	5000
fixtures/static-site	static	4173

cd fixtures/playground ; npm install
# flask:  python -m pip install -r fixtures/flask-app/requirements.txt

Manual checklist → TEST_GUIDE.md

---

Verify

npm run verify      # detect · FS · dev server · grok · cargo
npm run test:dev    # Start Dev smoke
npm run check       # frontend build + verify

---

Architecture

┌────────────────────────────────────────────────────────────┐
│  React 19 + Vite + Monaco + xterm + Zustand                │
│  Companion shell  ·  Studio IDE shell  ·  i18n en/ko       │
└───────────────────────────┬────────────────────────────────┘
                            │  Tauri IPC (invoke / events)
┌───────────────────────────▼────────────────────────────────┐
│  Rust / Tauri 2                                            │
│  project detect · dev server · PTY (shell|build) · ACP     │
│  prefs · git · dialog · always-on-top                      │
└────────────────────────────────────────────────────────────┘

---

Keyboard

Shortcut	Action
Ctrl+P	Quick Open (Studio)
Ctrl+S	Save editor
Ctrl+Enter	Send chat
`Ctrl+``	Toggle terminal
Ctrl+B	Toggle explorer
Ctrl+/	Shortcuts help
Ctrl+1/2/3	Companion layout Focus / Split / Dashboard
Build / Shift+Build	Embedded Grok · external terminal

---

Docs

Doc
ROADMAP.md · 한국어	Product direction & multi-horizon roadmap
docs/DEPLOY.md	Release & CI
CONTRIBUTING.md	How to contribute
TEST_GUIDE.md	Manual QA
AGENTS.md	Agent / repo notes

---

Contributing

PRs welcome. See CONTRIBUTING.md.
Please run npm run check before opening a PR.

---

Code signing & auto-update

Feature	Status
Unsigned Windows installers	✅ CI Release on v* tags (NSIS / MSI / exe)
Code signing	⏳ Needs certificate + secrets (TAURI_* / Windows cert)
Auto-update	⏳ Needs tauri-plugin-updater + public keys + release endpoint

In-app Check updates currently opens the GitHub Releases page. Details: docs/DEPLOY.md.

---

License

MIT © Grok Studio contributors

---

_{Built for people who live in the terminal with Grok — and still want to see the browser.}