Jules Studio is a modern, unified web dashboard for managing AI-driven coding sessions via the Jules REST API. Built with React 18, Vite, and Tailwind CSS, it provides a visual interface for delegating tasks, reviewing generated plans, monitoring real-time agent activity, and inspecting code artifacts.
Jules Studio acts as a full-featured dashboard for managing your AI coding workspace independently of your IDE.
- Session Control Center: Create and manage AI coding tasks with granular control over prompt, source repository, branch, and
automationMode(AUTO_CREATE_PRvsMANUAL). - Real-time Activity Timeline: Monitor progress events as they happen, from plan generation to completion.
- Interactive Review UI: Human-in-the-loop workflows for approving agent plans and communicating with Jules through in-session messaging.
- Power-User Features:
- Bulk Operations: Multi-select sessions with "Select All" and bulk-delete with a single confirmation.
- AIP-160 Search: Server-side filtering on session lists (press Enter to trigger) using standard Google API query syntax.
- Load More Pagination: Efficient infinite-scroll style navigation for large session lists via
nextPageToken. - Local Notes: Persistent, per-session sticky notes saved securely to your browser's
localStorage.
- Artifact Inspector: View rendered code diffs (unified patch), terminal logs (bash output), and generated media.
- Desktop Notifications: Browser Notification API alerts when sessions reach
AWAITING_PLAN_APPROVALorCOMPLETED. - API Resilience: Global error handling and exponential backoff for
429 Too Many Requests(5s → 60s).
Bridge your web dashboard with your local terminal environment.
- CLI Setup Guide: Interactive step-by-step instructions for installing and authenticating the
@google/julesCLI. - TUI Dashboard Preview: Preview the Terminal User Interface (TUI) for console-based management.
- Automation Recipes: Pre-configured bash snippets for batch issue delegation, GitHub CLI triage, and Gemini-powered tasking.
- Session Pulling: Dynamic per-session
jules remote pullsnippets for immediate local application of patches.
- Node.js: Version 18 or higher.
- Jules API Key: Obtain your key from jules.google.com/settings.
- Clone & Install:
git clone https://github.com/tazztone/jules-studio.git cd jules-studio npm install - Start Dev Server:
The app will be available at
npm run dev
http://localhost:5173. - Configure Authentication: Navigate to the Settings tab and enter your API Key. The app will transition from Demo Mode (mock data) to Live Mode.
Jules Studio uses React Router v6 for client-side navigation:
| Route | View | Purpose |
|---|---|---|
/sessions |
SessionsList |
Dashboard overview, search, and bulk operations. |
/sessions/:id |
SessionDetailView |
Timeline, Artifacts, Diff Viewer, and Chat. |
/sources |
SourcesView |
Repository and branch management. |
/cli |
CliRecipesView |
CLI installation guides and automation snippets. |
/settings |
SettingsView |
API Key management and Persistance. |
- XSS Prevention: Strict HTML escaping and Content Security Policy (CSP).
- Resource Management: Resolved memory leaks in background state polling.
- Vite Proxy: API requests (
/v1alpha) are proxied tojules.googleapis.comto avoid CORS issues.
- Continuous Integration: GitHub Actions runs Vitest suites on every push (86.78% coverage).
- Automated Tags: Creating a version tag (e.g.,
v0.2.0) triggers an automated build and publish to the Open VSX Registry for the sibling extension.
Modernized in Phase 1 from a monolithic React prototype into a modular Vite architecture, Jules Studio now serves as the foundational core for both this web dashboard and the native VS Code extension located in vscode-extension/.
npm run buildOutput is in dist/, ready for Vercel, Netlify, or any static host. Ensure your host redirects all paths to index.html to support client-side routing.
CORS Errors ("Failed to fetch")
Ensure you are accessing the app via localhost so the Vite proxy is active. Direct file access (file://) will not proxy requests.
API Key not saving
localStorage must be enabled. Avoid Private/Incognito mode, or use a standard browser window.
Search/Filter not working The search bar uses AIP-160 syntax. Press Enter to trigger — blurring the field will not fire a search to avoid unnecessary API calls.
Desktop notifications not appearing
Ensure browser notifications are allowed for localhost in your browser settings.
- Fork the repository.
- Create a feature branch:
git checkout -b feat/your-feature - Commit your changes:
git commit -m 'feat: add amazing feature' - Push to the branch:
git push origin feat/your-feature - Open a Pull Request.
Created with ❤️ by the Antigravity team at Google DeepMind.