Connect a GitHub Repo and Load a Site

Overview

To edit a site in Website Studio you first get its code onto your machine and running. You can open a local folder you already have, or connect GitHub and import a repo. Studio then installs the dependencies, starts the dev server, and shows the live site on the canvas. This guide walks through the GitHub path end to end.

📘 Good to know

Studio works before you sign in to Intempt, on your own Claude. Studio is macOS only and expects a Next.js App Router repo.

1. Check the setup checklist

The first time you open Studio it checks your machine for the tools it needs: Node, git, the GitHub CLI (gh), and Claude. If any are missing, a checklist appears at the top with a one-line hint for each and a Recheck button. Install what's listed, then recheck. If Studio is installing a tool for you, it shows an installing state instead.

📘 Media pending

Screenshot of the setup checklist hasn't been captured yet.

2. Connect GitHub

Open the GitHub panel in the left sidebar and click Connect. Studio uses GitHub's device flow: it shows you a short code and a verification URL. Open the URL in your browser, enter the code, and approve the app. Once that's done, the panel shows you as connected with your GitHub login.

📘 Media pending

Screenshot of the GitHub connect step hasn't been captured yet.

📘 Good to know

If the panel says GitHub isn't set up, the connection isn't configured on your machine yet. Connect becomes available once it is.

3. Import a repo

With GitHub connected, click Import to list your repositories. Pick the Next.js repo you want to edit. Studio clones it and registers it as a site. The site then shows up in the site switcher at the top left, and becomes the active site.

📘 Media pending

Screenshot of the repo import list hasn't been captured yet.

📘 Good to know

You can also skip GitHub and load a site from disk. Use Open folder on the empty state, or the site switcher, to pick a local project folder. Studio names the site from the folder and loads it the same way.

4. Import your environment variables

Most real sites need environment variables to run. Open the environment import dialog, paste the contents of your .env file into the box, and click Import. Studio writes the keys into the site and reports how many it wrote. If the dev server later fails because a variable is missing, this is where you add it.

📘 Media pending

Screenshot of the environment import dialog hasn't been captured yet.

5. Let the site load on the canvas

Once a site is active, Studio installs its dependencies and starts the dev server in the background, then loads the running site into the canvas. The first install can take a while; later loads are faster.

If the server can't start, Studio shows the captured output, names the likely cause (missing tooling, an install is needed, the port is in use, a missing environment variable, or a timeout), and gives you two buttons: Retry to try again, or Fix with chat to hand the error to the agent to diagnose. It won't leave you at a dead end.

📘 Media pending

Screenshots of the loaded canvas and the dev-server error state haven't been captured yet.

Where to go next

• Edit a page visually now that the site is on the canvas.
• Use the agent for hard edits when a click can't make the change.
• Preview and publish your site to review and ship your changes.
• Website Studio for how the pieces fit together.
• Desktop App Overview for the rest of the desktop app.