Fronti - Visual Layer for Claude Code
Fronti brings Claude Code's powerful agent capabilities into your browser. Point it at any localhost project, select the element you want to change, describe what you need, and Claude updates your codebase instantly.
- Visual interface for Claude Code running on your localhost
- Works with React, Next.js, Vue, Tailwind, Astro, Svelte, and any web stack
- Handles UI changes, refactors, API integrations, logic updates, and test generation
- Perfect for rapid prototyping and production refinements
Quick start
Install the Chrome extension
Fronti Chrome Extension
Install this VS Code extension
You're already here! Install from VS Code marketplace or extensions panel
Install Claude Code CLI
npm install -g @anthropic-ai/claude-code
Start your project
- Start your local development server (e.g.,
npm run dev → http://localhost:3000)
Edit visually
- Launch the Chrome extension, select an element, describe the change, and let Claude apply it to your codebase
What you can do
- Redesign components, restyle layouts, and update content directly from your browser
- Refactor logic, connect APIs, adjust data flows, and generate tests using Claude's agent capabilities
- Create new sections and reusable components with production-ready code
- Apply batch improvements like accessibility fixes, theme updates, or design token changes across your entire project
- See changes instantly with your existing dev server and hot reload
Why Fronti?
Get the speed of hosted AI tools with complete control over your codebase.
| Feature |
Hosted AI Builders |
Fronti |
| Works with your existing codebase |
No |
Yes |
| Code stays on your machine |
No |
Yes |
| Visual click-to-edit interface |
Limited |
Yes |
| Full agent capabilities |
No |
Yes |
How it works
- The Chrome extension provides a visual interface over your localhost dev server
- This VS Code extension bridges Fronti chrome extension to Claude Code CLI
- Claude executes changes locally in your codebase
Built for web development
- Turn visual feedback into code changes in minutes
- Works with any framework or design system
- Everything runs locally on your machine
Requirements
- Claude Code CLI (
npm install -g @anthropic-ai/claude-code)
- This VS Code Extension
- Fronti Chrome Extension
- Chromium-based browser (Chrome, Edge, Arc, etc.)
- Local dev server running your project
All requests run through Claude Code CLI, which requires an active Anthropic subscription.
Questions or feedback? Open an issue on the Fronti repository.
| |
