---
title: AI Editor
description: Select elements on the live preview, describe the change, and commit the AI's edits.
---

Open **AI Editor** in the site sidebar. The site is shown in a preview with its scripts removed. The toolbar has **Select**, **Edit content**, **Code**, **Components**, **Layers** and **Feedback**.

## Select and describe

1. **Select**

    Click **Select** and pick one or more elements on the preview.

2. **Describe**

    Write what should change. Attach images with **Add media** if you want the AI to use them.

3. **Review the edits**

    The AI reads the matching source files (`.astro`, `.tsx`, content) and returns search-and-replace edits. They are shown live in the preview. While it works, the chat shows its plan, the files it read and its reasoning.

4. **Apply & commit**

    Writes all edits in one commit. Attached images that the edits use are committed to the media folder with it. The commit is refused if a file changed in the meantime.

**An example request for a selected hero section**

> Make this heading shorter and move the button under the paragraph. Use the attached photo as the background.

Chats are kept per site in your browser (**History**).

## Edit content

**Edit content** lets you change or delete text in place, right on the preview. **Publish** finds each text in its source file and commits. Text that appears in several files is skipped.

## Undo

Applied AI changes and published text edits have **Undo**: it commits the previous file versions back. Undo is refused if the file changed again since.

## Code

**Code** shows a read-only file tree with syntax highlighting, so you can check what the AI touched.

## Which preview is shown

**1. The saved preview URL**

Admins can set it with the gear button.

**2. The repository website**

The website set on the GitHub repository.

**3. site in astro.config**

The `site` value of the Astro config.

**4. The preview runner**

With none of these (a site just created from a template, for example), Gitupcms clones the branch, installs dependencies and runs `astro dev` for it, pulling after each commit. This runs the repo's code on the CMS server, so self-hosted installs turn it on with `PREVIEW_RUNNER=1`.

:::note
The live site changes only after your host redeploys. Fonts from other origins may not load in the preview.
:::

## Roles

Editors and above can use Select, Edit content and Undo. Viewers can browse the preview and leave [Feedback](/editing/feedback).