Built-in Browser

Codewick includes a Chromium-based browser directly in the workspace so you can preview your app without switching windows. It auto-refreshes on every change, supports element selection for AI instructions, and manages local dev servers for you.

Browser Panel

The browser lives in the right panel of the workspace, starting at 360px wide by default. It behaves like a standard browser with a few additions tailored to the Codewick workflow.

Browser Header

The header bar includes:

• Back / Forward navigation buttons.
• URL bar showing the current address (editable).
• Refresh button for manual reload.
• Expand toggle to open the browser as a full window overlay.

Auto-Refresh

The browser automatically refreshes when:

• A file is saved in the editor.
• The AI applies a code change.

A brief amber border flash confirms the refresh occurred, so you always know when the preview is up to date.

Element Selection Modes

Codewick’s browser goes beyond passive preview. Three selection modes let you point at UI elements and feed them directly into the AI conversation.

1. Highlight Mode

Hover over any element to see it highlighted. Click to capture it.

• The element’s CSS selector and text content are extracted.
• A reference chip is automatically inserted into the chat input.
• Type your instruction (e.g., “make this heading larger”) and send.

This is the fastest way to tell the AI exactly which part of the page you want changed.

2. Bounding Box Mode

Click an element to place a persistent amber bounding box around it. A floating toolbar appears with four actions:

Action	Description
Edit	Opens the element’s source file in the editor at the relevant line.
Move	Starts a drag interaction to reposition the element.
Delete	Removes the element from the DOM (and proposes the code change).
Ask AI	Sends the element reference to chat so you can describe what to change.

The bounding box stays visible until you dismiss it, making it useful for multi-step adjustments to a single element.

3. Screenshot Selection

Drag a rectangle over any region of the browser viewport:

• The selected area is captured as an image.
• The image is attached to the chat input along with the HTML context of the visible elements.
• You can annotate your instruction (“move this section above the hero image”) and the AI receives both the visual and structural context.

Tip

Screenshot selection is especially useful for layout issues. Circle or highlight problem areas, describe what’s wrong, and the AI can see exactly what you see.

Local Dev Server

Codewick automatically starts a local development server for your project so the browser has something to display.

Auto-Start

When you open a project, Codewick detects the framework and starts the appropriate dev server:

• Node.js is bundled with Codewick, so projects using npm/yarn/pnpm work out of the box.
• Common frameworks (Next.js, Vite, Create React App, etc.) are detected automatically.
• The server output is available in a dedicated Server Log tab in the terminal.

Port Management

Codewick auto-assigns an available port for your dev server. If the default port is occupied, it increments until it finds an open one. The browser URL bar updates to reflect the assigned port.

Note

If your project requires a custom start command or specific port, you can configure this in your project settings.

Expanding the Browser

Click the expand toggle in the browser header to open the preview as a full-window overlay. This is useful for:

• Testing responsive layouts at larger viewport sizes.
• Reviewing complex pages that need more screen space.
• Presenting your work without the editor and chat panels visible.

Click the toggle again or press Esc to return to the standard panel layout.

Keyboard Shortcuts

Action	Shortcut
Toggle browser panel	⌘ + B
Refresh browser	⌘ + R (when browser is focused)
Toggle element highlight mode	Click selection icon in browser header

How It Connects to Chat

The browser and chat form a feedback loop:

1. Preview your app in the browser.
2. Spot something to change — click it (highlight mode) or screenshot it.
3. The reference appears in the chat input.
4. Describe the change and send.
5. The AI applies the edit, the browser refreshes, and you see the result immediately.

This cycle of see, point, describe, review removes friction from frontend development and makes visual iteration fast.