Neon Studio IDE & AI Agents
Neon Studio IDE (neon_studio_ide.dart & neon_studio/web/index.html) is an interactive development workbench that combines the best visual design workflows of Apple Xcode, the deep inspection power tools of Android Studio, and exclusive Neon capabilities including Time-Travel State Debugging, 1-Click Universal Cross-OS Packaging, and the Google Antigravity Multi-Agent Dock.
1. Launching the Neon Studio IDE Live Workbench
Start the Neon Studio IDE server from your terminal or open it directly in your browser:
# Start the Neon Studio IDE Live Workbench on port 9090
neon studio --port 9090
Once started, open the interactive workbench at:
Live Workbench URL: http://localhost:9090
2. What You Can Do Inside Neon Studio IDE (http://localhost:9090)
A. Live .neon → .dart Compilation
- Type or edit declarative UI code in the NeonLang (
.neon) Editor (center pane) or click ⚡ Compile.neon→.dart. - Watch the bottom-right pane automatically generate the live, 100% interoperable Neon Framework Dart (
.dart) code in real time with 1:1 Source Maps.
B. Xcode-Style Dual-OS Live Canvas (iOS 18 UIKit + Android 15 Kotlin)
- Preview and interact with both iOS 18 UIKit and Android 15 Kotlin (Material 3) device shells side by side in real time.
- Click + Add Quick Task inside either the iOS or Android device preview to test live reactive state updates across both platforms simultaneously.
- Switch to the Visual Route Storyboard Graph to inspect all
NeonRouterroutes and deep-link transitions, or open Unified Signing & Capabilities to manageInfo.plistandAndroidManifest.xmlpermissions from a single panel.
C. Android Studio Power Tools: 3D Layer Inspector & RFC-6902 Patch Profiler
- Exploded 3D Widget Layer Hierarchy Inspector: Inspect widget nesting depth, layout bounds, padding, and elevation in 3D space.
- RFC-6902 Patch Profiler: Monitor every incremental JSON patch (
update,replace,insert,remove) sent over the bridge and track real-time bandwidth savings (up to 98% payload reduction vs. full-tree renders).
D. Neon Exclusives: Time-Travel Scrubber & 1-Click Cross-OS Builder
- ⏱️ Interactive Time-Travel State Scrubber: Drag the timeline slider in the bottom-left dock backward and forward to scrub through historical state frames and replay UI mutations without restarting the app.
- 📦 1-Click Universal Cross-OS Mobile Package Builder:
- In the top toolbar, select your Host OS (
Apple macOS,Windows 11, orLinux Ubuntu). - Choose your Target Artifact (
Android .apk,Android .aab / .bundle,iOS .app Bundle, oriOS .ipa Signed Archive). - Click 📦 1-Click Cross-OS Build — it builds and signs the real package into
NeonFramework-2/neon_framework/build/studio_packages/and streams the complete build steps in the console.
- In the top toolbar, select your Host OS (
3. Feature Architecture Matrix
| Capability | Origin / Inspiration | Implementation in NeonStudioIdeWorkbench |
| :--- | :--- | :--- |
| Split-Pane Dual-OS Live Canvas | Apple Xcode | Simultaneous interactive iOS UIKit & Android Kotlin preview canvas |
| Visual Route Storyboard Graph | Apple Xcode | Interactive node graph of NeonRouter routes and modal stacks |
| Unified Signing & Capabilities | Apple Xcode | Single-click sync for Info.plist entitlements & AndroidManifest.xml |
| Exploded 3D Widget Layer Inspector | Android Studio | 3D Z-axis layer inspection for widget bounds and hierarchy depth |
| RFC-6902 Patch Profiler | Android Studio | Live delta stream inspector measuring byte savings per action |
| Time-Travel State Scrubber | Neon Exclusive | Scrub backward and forward across recorded state snapshots |
| 1-Click Cross-OS Package Builder | Neon Exclusive | Build .apk, .aab/.bundle, .app, and .ipa on Windows, macOS, & Ubuntu |
| Google Antigravity Agent Dock | Neon Exclusive | Multi-agent AI assistant powered by Gemini Cloud, Gemma 4, & Ollama |
4. neon-mcp-server & Google Antigravity SDK Multi-Agent Integration
Neon Studio IDE integrates directly with the Model Context Protocol (MCP) and the Google Antigravity SDK (antigravity_agent_hub.dart & antigravity_orchestrator.py).
A. Neon MCP Server (neon_mcp_server.dart)
NeonMcpServer exposes four core tools over JSON-RPC / MCP so AI agents can inspect, compile, migrate, and package Neon apps autonomously:
| MCP Tool Name | Description |
| :--- | :--- |
| neon_compile_file | Compiles a .neon source file into optimized .dart code and returns AST diagnostics and source maps. |
| neon_build_package | Invokes NeonCrossOsBuilder to package and sign .apk, .aab/.bundle, .app, or .ipa archives on Windows, macOS, or Linux Ubuntu. |
| neon_update_feature_options | Dynamically toggles runtime NeonFeatureOptions (diffing, navigation, rendering, diagnostics) on the active server. |
| neon_transpile_flutter_to_neon | Runs the AST converter to migrate Flutter .dart widgets into Neon Framework code. |
B. Multi-Model Backend Support
In the Google Antigravity Multi-Agent Dock (right pane of Neon Studio IDE), you can switch seamlessly between cloud and 100% local offline model backends:
- Gemini Cloud (
LocalAgentConfig): High-reasoning cloud orchestration powered by Gemini models. - On-Device Gemma 4 26B (
LiteRTAgentConfig): Runs locally on-device via LiteRT with zero cloud latency or API cost. - Local Ollama / LM Studio (
LocalOpenAIAgentConfig): Connects to any local OpenAI-compatible inference server.
C. Specialist Subagents
Click 🚀 Dispatch Antigravity Subagent to delegate tasks to any of the four built-in specialist subagents:
neon_ui_architect: Designs and writes declarative.neoncomponents from natural language prompts, validating them against the compiler and previewing them in the Dual-OS Canvas.neon_bridge_doctor: Inspects RFC-6902 patch streams and widget keys to eliminate unnecessary full-tree fallbacks and optimize bridge performance.neon_flutter_migrator: Automates Flutter-to-Neon AST transpilation, resolving imports, widget mappings, and key assignments.neon_release_packager: Orchestrates cross-OS.apk,.aab,.app, and.ipabuilds, verifyingCodeResourcesSHA-256 sealing and signing manifests.
5. Verification & Test Suite
All language, compiler, LSP, MCP, cross-OS builder, and IDE workbench modules are verified by test/neon_language_ide_test.dart — with all 427/427 framework tests passing.