claude-frontend
v0.1.0
Published
Visual element inspector for Claude Code - select elements in your browser and send them to Claude for instant code modifications
Maintainers
tobias-schuemannReadme
claude-frontend
Visual element inspector for Claude Code. Select elements on your webpage and send them to Claude for instant code modifications.
Features
- 🎯 Visual Element Selection - Click any element on your page to select it
- 🤖 AI-Powered Code Modifications - Claude understands context and makes intelligent changes
- ⚡ Hot Reload Friendly - Works seamlessly with all modern dev servers
- 🎨 Smart Component Detection - Automatically finds React/Vue/Svelte components
- 🔒 Development Only - Automatically disabled in production builds
- ⌨️ Keyboard Shortcuts - Alt+C to toggle widget
- 💾 Persistent Settings - Remembers your preferences across sessions
Quick Start
1. Install
npm install --save-dev claude-frontend2. Add to your app
// In your app's entry point (main.js, index.js, etc.)
import 'claude-frontend';3. Start the server
npx claude-frontend4. Use it!
- Open your app in the browser
- Click the widget button (bottom-right corner) or press Alt+C
- Click on elements to select them (they'll highlight in red)
- Type what you want to change (e.g., "make this button blue")
- Press Enter - Claude will modify your code!
Framework Setup
Next.js (App Router)
Create app/components/claude-dev.jsx:
'use client';
import { useEffect } from 'react';
export function ClaudeDevTools() {
useEffect(() => {
import('claude-frontend');
}, []);
return null;
}Add to app/layout.js:
import { ClaudeDevTools } from './components/claude-dev';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ClaudeDevTools />
</body>
</html>
);
}Next.js (Pages Router)
In pages/_app.js:
import { useEffect } from 'react';
export default function App({ Component, pageProps }) {
useEffect(() => {
import('claude-frontend');
}, []);
return <Component {...pageProps} />;
}Vite
// main.js
if (import.meta.env.DEV) {
import('claude-frontend');
}Create React App
// src/index.js
import 'claude-frontend';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);Vue 3
// main.js
import { createApp } from 'vue';
import 'claude-frontend';
import App from './App.vue';
createApp(App).mount('#app');Configuration
Widget Options
For manual initialization with custom options:
import { ClaudeFrontendWidget } from 'claude-frontend';
const widget = new ClaudeFrontendWidget({
serverPort: 3002, // Default: 3002
position: 'bottom-right' // Options: 'bottom-right', 'bottom-left'
});Settings Panel
Click the settings icon (⚙️) in the widget to configure:
- Bypass Permissions - Skip Claude's permission prompts (
--dangerously-skip-permissions) - Continue Chat - Reuse the same Claude chat session (
-c) - Subagent - Request specific Claude subagents (e.g.,
code-reviewer)
Settings are saved in localStorage and persist across sessions.
Advanced Usage
Conditional Loading
// Only load in development
if (process.env.NODE_ENV === 'development') {
import('claude-frontend');
}Server-Only Usage
Run the server in any project directory:
cd /path/to/your/project
npx claude-frontendUsing Subagents
Enter a subagent name in settings to request specialized assistance:
fontend-dev- For code reviewgeneral-purpose- For complex tasks- Custom subagents you've configured
Example: With "code-reviewer" in settings, your request becomes: "Use the code-reviewer subagent to [your request]"
How It Works
- Widget runs in your browser for element selection
- Local Server bridges browser and Claude CLI (port 3002)
- Claude CLI receives the context and modifies your code
Browser Widget → Local Server → Claude CLI → Your CodeRequirements
- Node.js 14+
- Claude CLI (
npm install -g @anthropic/claude-cli) - Active Claude subscription
- Development environment (localhost)
Troubleshooting
Widget not appearing?
- Ensure you're on localhost, 127.0.0.1, or a local development URL
- Check that the server is running:
npx claude-frontend - Look for errors in the browser console
- Verify the import is in your app's entry point
Server won't start?
# Check if port 3002 is in use
lsof -i :3002
# Kill the process if needed
kill -9 <PID>
# Or use a different port (requires manual widget config)Claude not making changes?
Verify Claude CLI is installed:
claude --versionCheck you have an active session:
claude auth statusTry with bypass permissions in settings
Element selection issues?
- Some elements may be non-interactive (try their parents)
- Framework dev tools might interfere (disable temporarily)
- Check that JavaScript is enabled
API Reference
ClaudeFrontendWidget
class ClaudeFrontendWidget {
constructor(options?: {
serverPort?: number; // Default: 3002
position?: string; // Default: 'bottom-right'
});
toggle(): void; // Toggle widget visibility
open(): void; // Open widget
close(): void; // Close widget
clearHighlights(): void; // Clear all selected elements
}Global Instance
// Access the auto-initialized instance
window.claudeFrontendSecurity
- Local Only - All communication stays on your machine
- Development Only - Automatically disabled in production
- No External Services - Direct connection to Claude CLI only
- No Data Collection - Your code never leaves your machine
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT
Support
- Issues: GitHub Issues
- Discussions: GitHub Discussions
Made with ❤️ for developers who love Claude Code