Repoburg
Login

Integrations: The Visual Editor

The Visual Editor is a powerful feature that allows you to make AI-powered changes to your frontend application in a completely visual way. Instead of describing a component in a text prompt, you can select it directly in your running application, issue a command, and have Repoburg generate the code changes for you.

The User Journey

  1. Start the Editor: From your terminal, run the new start-live command, pointing it to your running frontend development server:

    repoburg start-live --url http://localhost:5173

  2. Open the Proxy URL: The command starts a local proxy server. Open the provided proxy URL (e.g., http://localhost:9999) in your browser. You will see your application, now augmented with a Repoburg floating action button.

  3. Select a Component: Click the "Repo" button to enter "Selector Mode." As you hover over your application, components will be highlighted. Click on any component you wish to modify.

  4. Submit a Prompt: A modal will appear, showing you the component you selected and its parent. Type your prompt (e.g., "add an icon to this button") and submit it.

  5. Review the Plan: The prompt and contextual information about the selected component are sent to your active Repoburg session. Switch to your Repoburg tab, where you'll find a new plan generated by the AI, ready for your review and approval.

How It Works

The Visual Editor works by using a proxy server to inject a client-side script into your application.

  • Proxy Server (visual-editor-proxy): This is a lightweight Express server that forwards all requests to your frontend application. Before sending back the main HTML file, it injects a small JavaScript payload.
  • Injected Client Script: This script runs in your browser. It's responsible for:
    • Displaying the floating action button.
    • Handling "Selector Mode" to highlight and select components.
    • Using React DevTools hooks to inspect the component hierarchy and extract contextual information.
    • Showing the prompt modal.
    • Sending the final prompt and context to a dedicated endpoint on the Repoburg backend.
  • Backend Module (/visual-editor): A new controller in the backend receives the request, finds your active session (or creates a new one), and creates a new prompt (SessionInput) with the visual context attached. This triggers the normal AI workflow, just as if you had typed the prompt yourself.