Install Lizard Studio

Lizard Studio is a free Chrome extension that connects Claude Code or ChatGPT to the page you are building. Open a chat beside the page, select an element and ask the agent to edit the files in your local project. The extension includes page inspection, annotations, rulers, a color picker and browser debugging tools.

This guide takes you from installation to one source edit that survives a page refresh. For an example you can download, see the Claude Code visual editing guide.

What you need

Google Chrome on macOS, Windows or Linux.
Node.js and npm. The local host declares Node.js 18 or later; your chosen agent can have a higher requirement. Use a Node.js version that both support.
The local CLI for Claude Code or ChatGPT, signed in with your own account.
A local project folder. To see source edits in the browser, run that project’s development server and open its URL.

The extension and host are free and MIT licensed. Model use follows your provider’s account requirements, limits and charges. You do not need a Lizard account to use Lizard Studio.

1. Add the Chrome extension

Open Lizard Studio in the Chrome Web Store and choose Add to Chrome. Pin the extension if you want to reach it from the toolbar.

The toolbar provides the design tools; the Chrome side panel holds your chats. Installation from the store does not require Developer mode.

2. Install your agent

Choose the agent you want to use. You can add the other one later.

For Claude Code, follow the official setup guide. Check the installation in a terminal:

claude --version

For ChatGPT in Lizard Studio, install the Codex CLI:

npm install -g @openai/codex
codex --version

Lizard Studio calls this agent ChatGPT in its interface. The package and terminal command use the name Codex. This is a local coding agent connected to your project; it does not embed the chatgpt.com website.

Open your chosen agent and complete its sign-in flow before continuing. See the Lizard Studio README for the supported connection paths.

3. Install the local host

Run this command once in a terminal:

npx @lizard-build/lizard-studio-host install

The host connects the Chrome extension to the agent on your computer. The installer copies the host into ~/.lizard-studio/host and registers it with the browser. Keep Node.js installed: the browser uses it to start the host.

Reopen the extension’s side panel after installation. If you updated an existing host, reopen the panel before starting a new chat.

4. Connect the page to its project

Start your project’s development server using its usual command. Open the URL that it prints in Chrome, then open Lizard Studio on that tab.

Start a chat, choose Claude Code or ChatGPT, and choose the folder that contains this project’s source code. Each chat keeps its own project folder and permissions. A tab showing the right page does not by itself tell the agent which local repository should change.

Before asking for an edit, check the connection with a read-only request:

Read this page's title and inspect its main heading. Tell me which
local project folder you are using. Do not change any files yet.

If the agent names the wrong folder, correct the selection before continuing.

5. Select an element and make one edit

Choose Selector in the page toolbar and click the element you want to change. The selection attaches context to the chat. For a visual issue that spans several elements, use Annotate to mark the area and add the screenshot to the chat.

Try a request with a measurable result:

Find the source for the selected card's action row. Set the gap
between its buttons to 24px in the project files. Keep the button
labels and colors unchanged. Show the diff, then inspect the
rendered row to check its computed gap.

Read the proposed file changes and use the permission controls to approve the work you want. Your permission mode determines which actions need a separate prompt.

When your development server reloads the page, inspect the result. If it does not reload automatically, refresh Chrome.

6. Check that the edit persists

A temporary DOM edit can look correct until you refresh. A source edit changes the files that your development server serves.

Check the file diff in your editor or run git diff from the project folder. Refresh the page and inspect the same element again. For the example above, its computed gap should still be 24px. Review both desktop and narrow layouts before keeping the change.

Editing a local project does not update a deployed website. Deploy separately when you want the change to go live.

If the connection fails

What you see	What to check
The side panel cannot reach the host	Run the host installer, confirm Node.js is available, then reopen the panel.
The agent cannot start	Check `claude --version` or `codex --version` in a terminal and complete that agent’s login.
The agent sees the page but cannot find its code	Choose the correct local folder and confirm the tab uses that project’s development server.
An edit disappears on refresh	Check the diff. Ask for a source change if the agent only changed the live DOM.
The toolbar does not appear on a Chrome settings page	Chrome blocks content scripts on `chrome://` pages, the New Tab page and the Chrome Web Store. Open a normal website.

On macOS, the host location in ~/.lizard-studio/host also avoids the restrictions Chrome can encounter when starting a host under Desktop, Documents or Downloads. See the README’s host notes for more detail.

Where your data goes

The extension and host run on your computer. The selected model provider receives the requests you send through its agent. Lizard Studio does not use a Lizard chat server or collect telemetry. Local installation does not mean that a cloud model processes your prompts locally. Read the Lizard Studio privacy policy before using it with a project that has data restrictions.

Setup checked against the Lizard Studio source on September 14, 2026.

App quickstart Overview

Updated September 14, 2026