Integration
Frontman for Vite
One Plugin for React, Vue, and Svelte
Frontman is an open-source AI coding agent that lives in your browser. The Vite integration installs as a Vite plugin and auto-detects your framework — React, Vue, or Svelte — providing framework-specific context to the AI.
Click any element in your running Vite app. Describe what you want to change in plain English. Frontman generates real source code edits with instant hot reload via Vite's HMR. It knows whether you clicked a React component, a Vue template element, or a Svelte block — and edits the right file.
60-second install. Auto-detects React, Vue, or Svelte. Full framework-level context. Free and unlimited with BYOK.
Get Started in 60 Seconds
Install
npx @frontman-ai/vite install Auto-detects React, Vue, or Svelte from your project configuration.
Open Frontman
http://localhost:5173/frontman Connect your AI
Enter your API key for any supported provider. That's it.
Framework-Specific Context
One Vite plugin, three frameworks. Frontman auto-detects your framework from vite.config and provides framework-level context to the AI.
React
- Component tree via React fiber nodes
- Props, state, and context for every component
- Hooks inspection (useState, useEffect, useContext)
- Client-side routing (React Router, TanStack Router)
Vue
- Reactivity graph and component hierarchy
- Props, emits, and slot content
- Composition API refs and reactive state
- Vue Router navigation and route params
Svelte
- Component tree and slot structure
- Reactive declarations and stores
- Props and event dispatchers
- SvelteKit routing (when used with SvelteKit + Vite)
Vite Dev Server
- HMR pipeline for instant feedback
- Module graph and dependency tracking
- Plugin hooks and middleware chain
- Build warnings and errors
Styles & Layout
- CSS Modules, Tailwind, PostCSS resolution
- Computed styles with full cascade
- Scoped styles per framework
- Responsive breakpoint context
How It Works
The @frontman-ai/vite package adds a Vite plugin that hooks into the dev server. It does not proxy traffic, modify your build, or inject anything into production code. In production builds, the plugin is a no-op.
Frontman reads your Vite config and package.json to determine your framework. It detects @vitejs/plugin-react for React, @vitejs/plugin-vue for Vue, and @sveltejs/vite-plugin-svelte for Svelte. No manual framework configuration is needed.
When you click an element, Frontman walks the framework's internal tree: React fiber nodes, Vue's reactivity graph, or Svelte's component hierarchy. It identifies which component rendered that element, what props it received, and what state it holds.
Edits are written to your source files and reflected instantly through Vite's hot module replacement. No full page reload and no state loss.
For Vue Developers
Most AI coding tools optimize for React-first workflows. Frontman has full Vue support.
The Composition API is understood natively. Frontman reads ref(), reactive(), computed(), and watch() calls, giving it the reactivity graph rather than just the template output.
Single File Component structure is preserved: the AI knows whether to edit the <template>, <script setup>, or <style scoped> section. It also reads the component's props interface and emitted events, so edits respect the component contract.
Vue Router is visible too. Route params, navigation guards, and nested routes show up in the server context.
For Svelte Developers
Most browser-based AI coding tools either skip Svelte entirely or offer only surface-level DOM access. Frontman has native Svelte support.
Frontman understands $: reactive statements and Svelte stores. It works with the reactive model rather than just inspecting the compiled output. The AI walks the Svelte component hierarchy, reading slot content, event dispatchers, and prop bindings.
SvelteKit projects work through the Vite plugin. Frontman sees SvelteKit routing, load functions, and form actions alongside the component tree.
For comparison: Stagewise can inject a toolbar into any app at the DOM level, but it has no Svelte-specific context (no component tree, no reactive state, no store access). Frontman is currently the only browser-based AI tool with native Svelte integration.
Frequently Asked Questions
How do I install Frontman in a Vite project?
Run npx @frontman-ai/vite install in your Vite project directory. This adds the Frontman plugin to your vite.config file. Then start your dev server normally (npm run dev) and visit localhost:5173/frontman. Works with React, Vue, and Svelte projects.
Does Frontman auto-detect which framework I'm using?
It reads your Vite config and package.json. If you have @vitejs/plugin-react, it activates React-specific context (fiber tree, hooks). For Vue, it detects @vitejs/plugin-vue. For Svelte, @sveltejs/vite-plugin-svelte. No manual configuration required.
Does Frontman work with SvelteKit?
SvelteKit uses Vite under the hood, so the @frontman-ai/vite integration works with SvelteKit projects. Frontman sees SvelteKit routing, load functions, and form actions alongside the Svelte component tree.
Does it work with Nuxt?
Nuxt uses Vite internally but has its own module system. The @frontman-ai/vite plugin should work when added to the Nuxt Vite config, though this is not officially tested yet. For the best Vue experience with a meta-framework, standalone Vite + Vue projects are recommended.
Can non-developers use Frontman with Vite projects?
Designers and PMs can open the running app in a browser, click any element, and describe changes in plain English. They do not need an IDE or terminal. The AI generates source code edits that developers review in their normal workflow. This works the same way whether the project uses React, Vue, or Svelte.
What AI models can I use?
Any LLM provider via BYOK (bring your own key). Claude, ChatGPT, or any OpenAI-compatible API through OpenRouter. There are no prompt limits or usage caps on the Frontman side. You pay your LLM provider directly.
Does Frontman for Vite support Svelte? What about Stagewise?
Frontman fully supports Svelte via the @frontman-ai/vite integration. It detects the Svelte compiler, walks the component tree, and understands reactive declarations and stores. Stagewise is a CLI overlay that works at the DOM level. It can inject into any app but has no framework-specific context for Svelte (no component tree, no reactive state, no store access).
Add Frontman to Your Vite Project
One command. 60 seconds. Works with React, Vue, and Svelte.
$ npx @frontman-ai/vite install