Fronti

Fronti - Visual Layer for Claude Code

Fronti is a powerful tool that brings Claude Code's agent capabilities directly into your browser. It allows you to visually interact with your localhost projects, making it easier to update and refine your codebase. Whether you're working on a new prototype or refining a production project, Fronti helps you make changes quickly and efficiently.

Benefits

Fronti offers several key advantages for web developers:

• Visual Interface: Interact with your codebase through a visual interface, making it easier to see and implement changes.
• Framework Flexibility: Works with popular frameworks like React, Next.js, Vue, Tailwind, Astro, and Svelte, as well as any web stack.
• Comprehensive Updates: Handle UI changes, refactors, API integrations, logic updates, and test generation all in one place.
• Rapid Prototyping: Perfect for quickly prototyping new ideas and refining them for production.
• Local Control: All changes are executed locally, giving you full control over your codebase.

Use Cases

Fronti is ideal for a variety of tasks:

• Redesigning Components: Easily update the look and feel of your components directly from your browser.
• Restyling Layouts: Make layout adjustments and see the changes instantly.
• Updating Content: Modify content and see the results in real-time.
• Refactoring Logic: Refactor your code logic and connect APIs with ease.
• Generating Tests: Create tests to ensure your code works as expected.
• Batch Improvements: Apply accessibility fixes, theme updates, or design token changes across your entire project.

Quick Start

Getting started with Fronti is straightforward:

1. Install the Chrome extension.
2. Install Fronti Core usingnpm install -g @fronti/core.
3. Install Claude Code CLI usingnpm install -g @anthropic-ai/claude-code.
4. Start your project by opening it in your editor and running your local development server (e.g.,npm run dev).
5. Launch the Chrome extension, select an element, describe the change you want, and let Claude apply it to your codebase.

Requirements

To use Fronti, you'll need:

• Node.js 18 or newer
• Claude Code CLI (npm install -g @anthropic-ai/claude-code)
• Fronti Core (npm install -g @fronti/core)
• Fronti Chrome Extension
• A Chromium-based browser (Chrome, Edge, Arc, etc.)
• A local dev server running your project

Additional Information

Fronti is designed to provide the speed of hosted AI tools while giving you complete control over your codebase. All Claude requests run through Claude Code CLI, which requires an active Anthropic subscription.

Fronti is open-source and welcomes contributions. You can fork the repository, create a feature branch, commit your changes, and open a pull request. For support, you can star the repo and share your feedback.

Fronti is distributed under the MIT License.