Integration
Frontman for Astro
The Only Browser-Based AI Coding Agent with Native Astro Support
Frontman is an open-source AI coding agent that lives in your browser. The Astro integration installs through Astro's built-in integration system, giving the AI direct access to Islands architecture, rendering modes, content collections, and scoped styles.
Click any element in your running Astro site. Describe what you want to change in plain English. Frontman generates real source code edits with instant hot reload. It knows the difference between a static Astro element and a hydrated React/Vue/Svelte island.
Frontman is the only browser-based AI coding tool with native Astro integration. Listed on the official Astro integration registry with 594+ weekly downloads.
Get Started in 60 Seconds
Install
astro add @frontman-ai/astro Uses Astro's built-in integration installer. Automatically configures astro.config.mjs.
Open Frontman
http://localhost:4321/frontman Connect your AI
Enter your API key for any supported provider. That's it.
What Frontman Sees in Your Astro Site
Frontman runs as an Astro integration inside your dev server. This gives it access to runtime information that browser extensions and CLI overlays cannot reach.
Astro Runtime
- Islands architecture boundaries
- Client directive mapping (client:load, client:visible, etc.)
- Component framework detection (React, Vue, Svelte, Solid)
- Content collection data and schemas
Rendering Modes
- Static (SSG) page context
- Server (SSR) request/response data
- Hybrid mode per-route configuration
- Prerendered vs on-demand routing
Styles & Layout
- Scoped Astro styles resolution
- Tailwind utility class mapping
- Global stylesheet cascade
- Responsive layout context
Dev Server
- Vite HMR pipeline
- Integration hooks and middleware
- Build warnings and errors
- Hot reload feedback loop
Built for Islands Architecture
Astro's Islands architecture means your page is a mix of static HTML and interactive components from different frameworks. Great for performance, but it creates a real problem for AI coding tools.
A CLI overlay sees one flat DOM. It cannot tell the difference between a static Astro heading and a React island with client:load. It has no idea which framework rendered which element, or what client directive controls hydration.
Frontman sees the island boundaries. Because it runs as Astro middleware, it can distinguish:
- Static Astro HTML vs interactive islands
- The framework behind each island (React, Vue, Svelte, or Solid)
- The client directive controlling hydration:
client:load,client:visible,client:idle, etc. - Framework-specific internals inside each island, like React props or Vue reactive state
Click a button inside a React island and say "make it larger" — Frontman edits the React component file. Click a static heading and say "change the text" — it edits the .astro file. The correct source file is targeted automatically.
No Other Browser AI Tool Supports Astro Natively
As of early 2026, Astro developers have limited options for browser-based AI coding tools:
Frontman has a native Astro integration via the official registry. It sees Islands, SSR/SSG context, and content collections.
Stagewise is a CLI overlay that works at the DOM level. It can inject into any app but has no Astro-specific context and cannot distinguish static elements from islands.
Cursor and Copilot are IDE tools that work from source files. They have no browser awareness and no framework-specific features.
v0 generates new UI in a sandbox and cannot edit an existing Astro project.
If you want browser-based AI editing that understands Islands architecture, Frontman is currently the only option with native Astro integration.
Content Collections Aware
Frontman understands Astro's content collections. When a page renders data from a collection, the AI has access to the collection name and schema (field names and types), the current entry's frontmatter, and the template that renders it.
In practice: click a blog post title and say "move the date below the title." The AI edits the collection template, not the content file. Say "add a reading time estimate" and it can suggest both the frontmatter schema change and the template update.
Frequently Asked Questions
How do I install Frontman in an Astro project?
Run astro add @frontman-ai/astro in your project directory. This uses Astro's built-in integration installer. Then start your dev server normally (astro dev) and visit localhost:4321/frontman. The entire setup takes about 60 seconds.
Is Frontman listed on the Astro integration registry?
@frontman-ai/astro is published on the official Astro integration registry at astro.build/integrations. It currently has 594+ weekly downloads and is listed as a verified integration.
Does Frontman understand Islands architecture?
It detects island boundaries and knows which parts of the page are static Astro HTML vs interactive islands with client directives. When you click an element inside a React island, Frontman identifies it as a React component with client:load (or whichever directive applies), not a static Astro element.
Does it work with SSR and hybrid mode?
All Astro rendering modes are supported: static (SSG), server (SSR), and hybrid. In SSR mode, Frontman can read server-side request data, response headers, and middleware execution alongside the client-side rendering.
Can I use Frontman with React/Vue/Svelte islands in Astro?
Frontman detects which framework renders each island and provides framework-specific context. A React island exposes fiber nodes and props; a Vue island exposes the reactivity graph; a Svelte island exposes the component tree. Multi-framework pages work without any extra configuration.
Do other AI coding tools support Astro?
As of early 2026, Frontman is the only browser-based AI coding tool with native Astro integration. Stagewise is framework-agnostic (it injects a toolbar into any app) but has no Astro-specific middleware or context. Cursor and Copilot work from source files and have no framework-specific integrations.
Does Frontman work with Astro content collections?
It reads content collection data at runtime: which collection a page renders, the collection schema, and the current entry's frontmatter. This means the AI can suggest edits to both the template and the content itself.
What AI models can I use?
Any LLM provider via BYOK (bring your own key). Connect Claude, ChatGPT, or any OpenAI-compatible API through OpenRouter. There are no prompt limits or subscription fees on the Frontman side.
Add Frontman to Your Astro Project
One command. 60 seconds. No account required.
$ astro add @frontman-ai/astro