Inspiration

VisualPilot started from the desire to make web UI editing instinctive: give a plain-language prompt, and the page updates accordingly. We wanted an editor that lets designers and developers prototype UI changes instantly without context switching between tools.

What it does

• Live Editing: Accepts natural-language prompts to modify DOM, styles, and content in a web page.
• Browser Extension + Local UI: Provides a Chrome extension (content/background scripts) plus a local React-based UI for testing and interaction.
• AI-powered Prompts: Uses Google GenAI to translate user instructions into DOM edits and CSS adjustments.

How we built it

• Tech stack: React + Vite for the UI, TailwindCSS for styling, TypeScript for safety, and a Chrome extension architecture (content script + background script). See package.json for scripts.
• AI integration: The project uses @google/genai to call models for prompt interpretation and edit generation.
• Developer workflow: Run npm run dev for a live dev server on http://localhost:3000/, and npm run build:extension to produce a dist folder suitable for Chrome's "Load unpacked".

Challenges we ran into

• Mapping high-level prompts to deterministic DOM edits while avoiding destructive changes.
• Handling permissions and messaging between the extension background script and content scripts.
• Latency and safety — ensuring model outputs are predictable and don't break the host page.

Accomplishments that we're proud of

• Functional prompt-driven editing flow that applies non-trivial DOM and style changes.
• Smooth development experience with Vite hot reload and a working Chrome extension build pipeline.
• A modular code layout that separates services/ (AI + Chrome integration) from the UI components.

What we learned

• Connecting large-model outputs to precise DOM operations is non-trivial and benefits from layered validation.
• Chrome extension lifecycle and messaging deserve early attention when building editor tooling.
• Fast developer feedback (local dev server + content script reload) accelerates iteration.

What's next for VisualPilot

• Improve edit validation and add an undo / preview mode for safer changes.
• Add persistent project/state storage and user settings for prompt templates.
• Expand model capabilities and integration tests, and prepare packaging for the Chrome Web Store.

If you want, I can also commit this README and open it in the editor, or add a short CONTRIBUTING section and run tests.

Run and deploy your AI Studio app

This contains everything you need to run your app locally.

View your app in AI Studio: https://ai.studio/apps/drive/1XVU9UD2fRKX_UThkAtF-r_z49cHBY34a

Run Locally

Prerequisites: Node.js

1. Install dependencies: npm install
2. Set the GEMINI_API_KEY in .env.local to your Gemini API key
3. Run the app: npm run dev