Skip to content

Update AI docs #209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devvaannsh merged 12 commits into from
Oct 7, 2026
Merged

Update AI docs #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eb67f7e
docs: add ai panel images
devvaannsh Oct 7, 2026
9f835f1
docs: rewrite ai setup page
devvaannsh Oct 7, 2026
78ff742
docs: rewrite ai chatting page
devvaannsh Oct 7, 2026
5a2698d
docs: update ai permission modes page
devvaannsh Oct 7, 2026
2462100
docs: update ai reviewing changes page
devvaannsh Oct 7, 2026
119a15b
docs: add ai live preview and editor page
devvaannsh Oct 7, 2026
7447aad
docs: add ai cli page
devvaannsh Oct 7, 2026
cdfc411
docs: add ai image search page
devvaannsh Oct 7, 2026
f3d6dcc
docs: add ai usage page
devvaannsh Oct 7, 2026
360ed8f
docs: renumber ai models and disable pages
devvaannsh Oct 7, 2026
c4f48d9
docs: update ai overview page
devvaannsh Oct 7, 2026
952817f
docs: add ai app links
devvaannsh Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions app-links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,11 +130,11 @@ export const appLinks = [
},
{
from: '/app-links/claude-code-integration',
to: '/docs/Pro Features/ai-setup#step-2-install-claude-code',
to: '/docs/Pro Features/ai-setup',
},
{
from: '/app-links/claude-code-config',
to: '/docs/Pro Features/ai-setup#step-3-connect-your-claude-account',
to: '/docs/Pro Features/ai-setup#step-2-set-up-claude-code',
},
{
from: '/app-links/design-mode',
Expand Down Expand Up @@ -187,5 +187,21 @@ export const appLinks = [
{
from: '/app-links/layers-panel',
to: '/docs/Pro Features/layers-panel',
},
{
from: '/app-links/ai-cli',
to: '/docs/Pro Features/ai-cli',
},
{
from: '/app-links/ai-ask',
to: '/docs/Pro Features/ai-ask',
},
{
from: '/app-links/ai-images',
to: '/docs/Pro Features/ai-images',
},
{
from: '/app-links/ai-usage',
to: '/docs/Pro Features/ai-usage',
}
];
54 changes: 25 additions & 29 deletions docs/03-AI/01-ai-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,28 @@ title: Setup
slug: "/Pro Features/ai-setup"
---

import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';

AI in Phoenix Code is powered by [Claude Code](https://code.claude.com/docs/en/overview), the coding agent from Anthropic. To use it you need three things:
AI in Phoenix Code is powered by [Claude Code](https://code.claude.com/docs/en/overview), the coding agent from Anthropic. Claude Code ships inside the desktop app, so there is nothing to install. To start chatting you need two things:

1. A **Phoenix Code account**, signed in to the editor.
2. The **Claude Code CLI**, installed on your machine.
3. A **Claude account** that pays for the AI: either a Claude subscription or an API key.

Phoenix Code walks you through each step in the AI panel. Chats are billed to the Claude account you connect, not to Phoenix Code.
2. A **Claude account** that pays for the AI: either a Claude subscription or an API key.

<VideoPlayer
src="https://docs-images.phcode.dev/website/videos/claude-code-config.mp4"
/>
Chats are billed to the Claude account you connect, not to Phoenix Code.

## Step 1: Sign in to Phoenix Code

Click the **AI tab** *(sparkle icon)* in the sidebar. If you are not signed in, the panel asks you to sign in to your Phoenix Code account. Click **Sign In**.

![AI sign in screen](../images/pro/ai-signin.png "Sign in to your Phoenix Code account")

## Step 2: Install Claude Code

If the Claude Code CLI is not installed on your machine, the panel tells you it must be installed. Click **Install Claude Code**. Phoenix Code opens its built-in terminal and runs the official installer from Anthropic. The install can take a while; Phoenix Code detects when it finishes.
Click the **AI** tab *(sparkle icon)* in the sidebar. If you are not signed in, the panel asks you to sign in to your Phoenix Code account. Click **Sign In** and finish in the browser window that opens. The panel updates on its own once you are signed in.

![Install Claude Code screen](../images/pro/ai-install-claude.png "The Install Claude Code screen")
![AI sign in screen](../images/pro/ai-signin.png "The sign in screen, with a Surprise Me demo you can watch before signing in")

Restart Phoenix Code after the installation completes.
> You can watch a demo before signing in. Click **Surprise Me** to see a recorded build play in the panel.

If you prefer to install the CLI yourself, follow [Anthropic's setup guide](https://code.claude.com/docs/en/setup#install-claude-code) and restart Phoenix Code when done.
## Step 2: Set up Claude Code

## Step 3: Connect your Claude account
Once you are signed in, the panel shows the start screen. If Claude Code is not signed in to a Claude account yet, the **Visual AI with Claude Code** row shows a **Set up** button, and the message box reads *Set up Claude Code to start chatting*.

Once the CLI is installed, the panel shows **Claude Code is installed but needs to be configured**. Click **Setup Claude Code** to open Claude Code in the built-in terminal, where you log in with your Claude account. Restart Phoenix Code after the configuration completes.
![Set up button](../images/pro/ai-setup-button.png "The Set up button on the Visual AI row")

![Setup Claude Code screen](../images/pro/ai-setup-claude.png "The Setup Claude Code screen")
Click **Set up**. Phoenix Code opens its built-in terminal and starts the Claude Code login. Pick the way you want to log in, finish the steps in the terminal, and the panel notices within a few seconds. No restart is needed.

You have two ways to log in:

Expand All @@ -48,20 +34,30 @@ Claude Code is included in Claude's paid plans (Pro and above). The free claude.

1. Create a Claude account at [claude.ai](https://claude.ai) if you don't have one.
2. Get a plan that includes Claude Code at [claude.com/pricing](https://claude.com/pricing).
3. Click **Setup Claude Code** and pick the subscription login option in the terminal.
3. Click **Set up** and pick the subscription login in the terminal. It opens your browser to confirm.

### With an API key

If you don't want a subscription, you can pay per use with an API key instead:

1. Create an API key at [platform.claude.com](https://platform.claude.com).
2. Click **Setup Claude Code** and pick the API key option in the terminal, or add the key as a custom provider in [AI settings](./05-ai-models-providers.md#settings).
2. Either click **Set up** and pick the API key option in the terminal, or add the key as a provider in [AI Settings](./09-ai-models-providers.md#settings). With a provider active, the Claude login step is skipped.

You can also use any other provider with an Anthropic-compatible API. See [Models and Providers](./09-ai-models-providers.md#compatible-providers).

## Using Your Own Claude Code

If you already have Claude Code installed, Phoenix Code uses it whenever it is newer than the bundled copy. To use a specific copy, enter its path in [AI Settings](./09-ai-models-providers.md#settings) under **Path to the Claude Code executable**. Leave the field blank to let Phoenix Code pick.

The **Codex CLI** is not bundled. Phoenix Code offers to install it the first time you pick it. See [Claude Code CLI and Codex CLI](./06-ai-cli.md#setting-up-a-cli).

## If Claude Code Is Not Found

You can also use any other provider with an Anthropic-compatible API. See [Models and Providers](./05-ai-models-providers.md#compatible-providers).
In rare cases the bundled Claude Code cannot run on your machine, or the path saved in AI Settings no longer works. The panel then shows **Getting started with Claude Code** with an **Install Claude Code** button. Click it: Phoenix Code opens the built-in terminal and runs the official installer from Anthropic, then continues on its own when the install finishes. If the panel does not pick it up, restart Phoenix Code.

> The Claude Code CLI must be installed even when you bring your own API key or use a third-party provider.
If you prefer to install the CLI yourself, follow [Anthropic's setup guide](https://code.claude.com/docs/en/setup#install-claude-code), then open the AI tab again.

## If your login expires
## If Your Login Expires

If your Claude login expires later, the chat shows a **Claude Code is signed out or your login has expired** notice with a **Log in to Claude in Terminal** button. Click it, type `/login` in the terminal that opens, then send your message again.

Expand Down
150 changes: 118 additions & 32 deletions docs/03-AI/02-ai-chatting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,155 @@ title: Chatting
slug: "/Pro Features/ai-chatting"
---

## Opening the AI Panel
import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';

Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
## The Start Screen

![AI tab in the sidebar](../images/pro/ai-chat-panel.png "AI tab in the sidebar")
Click the **AI** tab *(sparkle icon)* in the sidebar. The panel opens on the start screen, which asks *What are we building today?* and lists the assistants you can work with.

![The start screen](../images/pro/ai-start-screen.png "The start screen with the Surprise Me card and the Work with rows")

- **Surprise Me**: Plays a demo of what the AI can do. See [Surprise Me](#surprise-me).
- **Visual AI with Claude Code**: The built-in chat. Click the row to put the cursor in the message box, or just start typing.
- **Claude Code CLI** and **Codex CLI**: The command-line tools, running inside the panel. See [Claude Code CLI and Codex CLI](./06-ai-cli.md).
- **AI Settings**: The link at the bottom opens the settings dialog, where you can add a custom provider. See [Models and Providers](./09-ai-models-providers.md).

Once you have used the panel, the Surprise Me card shrinks to a *Want a demo? Surprise me.* line at the bottom, so the rows come first.

![The compact start screen](../images/pro/ai-start-compact.png "The start screen after the first chat")

> After your first chat, a **Usage** card appears below the rows. See [Usage and Cost](./08-ai-usage.md).

### Surprise Me

The first time you click **Surprise Me**, the panel plays a recorded build: a real conversation, replayed in the chat while the files land in your project and the Live Preview shows the result. This uses no AI credits and works before you sign in to Claude.

A bar at the bottom of the panel controls the demo. Click the **speed** button to cycle through 1x to 32x, or click **Back** to leave. When the demo ends, a card shows which model built it, with **Reveal the prompt** to see the prompt that was used, **See another demo** to play the next one, and **+ New** to start your own chat.

From then on, **Surprise me** opens a choice:

![Surprise Me choice](../images/pro/ai-surprise-choice.png "Make something new or Show another demo")

- **Make something new**: The AI builds a small project of its own choosing, live. This uses your Claude credits.
- **Show another demo**: Plays the next recorded demo for free.

> Demos and live builds create files in the project you have open. Try them in a scratch project.

## Sending Messages

Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line.
Type in the message box at the bottom and press `Enter` to send. Press `Shift + Enter` for a new line. Your message appears under **You**, and the reply under **Claude**.

While the AI is working, a status line under the chat shows what it is doing, like *Thinking...*, *Read...*, or *Edit...*, with a timer once it takes more than a few seconds. The **send** button turns into a **stop** button *(square icon)*. Click it, or press `Esc` while the message box has focus, to stop the AI. Anything it already did stays in the chat.

![Stop button](../images/pro/ai-stop.png "The stop button while the AI works")

You can keep typing while the AI works. Press `Enter` and the message is held in a **Queued** bubble above the message box. The AI reads it as soon as it finishes its current step and folds it into what it is doing. If the AI finishes first, the queued message is sent as the next turn. Click **Edit** on the bubble to take the text back into the message box.

![Queued message](../images/pro/ai-queued.png "A queued follow-up, waiting for the AI")

> The first time you send a message, Phoenix Code asks you to confirm that prompts and context are sent to Claude Code.

## Context

Phoenix Code tells the AI what you are looking at. Chips above the message box show what goes along with your next message:

![Context chips](../images/pro/ai-chips.png "The Live Preview and Selection chips")

While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response.
- **Live Preview**: Shown while the Live Preview is open. The AI is told which page it shows.
- **Selection L12-L40 in index.html**: Shown when you have text selected in the editor. The selected text goes with your message.
- **Line 26 in index.html**: Shown when nothing is selected. The AI is told which file you are in and where the cursor is.
- **Folder chips**: One for each folder you added with **Add folder as context**. See [Attachments](#attachments).

To stop the AI mid-response, click the **stop button** *(square icon)* that appears next to the send button while the AI is working, or press `Escape`.
The AI is also told which open files have unsaved changes, so it reads what you see in the editor instead of the file on disk.

![Stop button](../images/pro/ai-stop.png "Stop button")
Click the **x** on a chip to leave that part out. The chip comes back when the selection, the cursor line, or the Live Preview changes.

### Context
## Attachments

Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing:
Click the **paperclip** button to attach more context:

- **Selection** - the file and line range you have selected in the editor
- **Cursor** - your current line and file
- **Live Preview** - if the Live Preview panel is open
![Attach menu](../images/pro/ai-attach-dropdown.png "Attach a file, or add a folder as context")

You can dismiss any of these by clicking the **x** button on the chip.
- **Attach a file**: Pick one or more files. Images are attached as pictures the AI can look at. Other files are attached as references, and the AI reads them when it needs to.
- **Add folder as context**: Pick a folder outside your project. It appears as a chip, and the AI can read and edit files inside it without asking. The folder stays attached for this project until you remove the chip.

![Context chips above the input box](../images/pro/ai-chips.png "Context chips above the input box")
You can also paste an image from the clipboard into the message box. Attachments appear in a tray above the message box. Click one to preview it, or click its **x** to remove it. A message can carry up to 10 images.

## Attachments and Screenshots
## Screenshots

Click the **paperclip button** to attach a file or folder. The dropdown lets you choose:
Click the **camera** button to attach a screenshot:

- **Attach a file** - attach a single file. Supported image formats include PNG, JPG, GIF, WebP, and SVG. You can also attach code or document files.
- **Add folder as context** - attach an entire folder so the AI can read its contents.
![Screenshot menu](../images/pro/ai-screenshot-dropdown.png "The screenshot options")

![Paperclip attach dropdown](../images/pro/ai-attach-dropdown.png "Paperclip attach dropdown")
- **Select Area**: Draw a rectangle over any part of the window. Drag the handles to adjust it, then click **Capture** or press `Enter`.
- **Live Preview**: The page in the Live Preview. The preview is opened if it is closed.
- **Live Preview Selection**: Just the element selected in the Live Preview.
- **Full Editor**: The whole Phoenix Code window.
- **Upload from Device**: Pick an image from your computer.

You can also paste an image directly from your clipboard into the input box.
> The AI can take its own screenshots of the Live Preview and the editor while it works. They show up as cards in the chat.

Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture:
## Following the AI's Work

- **Live Preview** - your Live Preview panel (if open)
- **Live Preview Selection** - the currently selected element in Live Preview
- **Full Editor** - the entire editor window
- **Select Area** - a custom region you select with a crop tool
- **Upload from Device** - choose an existing image from your computer instead of taking a new screenshot
![A conversation](../images/pro/ai-chat-panel.png "A conversation: the prompt, the steps the AI took, and its reply")

![Camera screenshot dropdown](../images/pro/ai-screenshot-dropdown.png "Camera screenshot dropdown")
Everything the AI does appears as a card in the chat, in the order it happens: *Read index.html*, *Edit styles.css*, *Ran command*, *Screenshot of live preview*, and so on. Click a card to see the details, like the command it ran or the code it inspected. A card that did not work is marked **failed**.

When several steps finish in a row, they are folded into one card that reads, for example, **3 steps**, with the files it read and edited listed underneath. Click the card to open the steps.

![Tool pile](../images/pro/ai-tool-pile.png "Three finished steps folded into one card")

Cards for edits have a **Show diff** button. See [Reviewing and Undoing Changes](./04-ai-reviewing-changes.md).

When the chat is scrolled up, a **Scroll to bottom** button *(down arrow)* appears at the lower right of the chat.

### Questions From the AI

When the AI needs a decision, it asks with a card. Click an option, or type your own answer in the **Type a custom answer** box. If the card has several questions, answer each one and click **Submit**.

![Question card](../images/pro/ai-question-card.png "A question with options and a custom answer box")

> Typing in the message box does not answer the question. It is queued until the question is answered.

The AI can also ask inside the Live Preview, with options you can preview on the page. See [Questions in the Live Preview](./05-ai-ask.md#questions-in-the-live-preview).

### Code in Replies

Code blocks in a reply have a **Copy** button in their header. Blocks longer than five lines are collapsed. Click the footer to expand them. Color codes outside code blocks get a swatch so you can see the color.

## New, Back, and Home

The buttons in the panel header appear when you move the pointer over the panel:

- **New** *(plus icon)*: Starts a new conversation. The old one stays in [session history](#session-history). If the AI is working, you are asked before it is stopped.
- **Back** *(left arrow)*: Returns to the start screen without stopping the chat. The **Visual AI** row then reads *In progress*. Click it, or pick **Visual AI** from the dropdown in the header, to get back to the chat.
- **Visual AI dropdown**: Switches between the built-in chat and the CLI tools. Each keeps running while you look at another.

![The mode dropdown](../images/pro/ai-mode-dropdown.png "Visual AI, Claude Code CLI, and Codex CLI in the header dropdown")

![Home over a running chat](../images/pro/ai-home.png "The start screen over a running chat")

> Opening another project resets the chat. If the AI is working, you are asked before the switch.

## Session History

Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
Every conversation is saved automatically. Click the **history** button *(clock icon)* in the panel header to list the sessions of this project, newest first. Each row shows the first prompt, when it was last used, and the tokens it used. Hover a row to see the title Claude gave the session.

![Session history dropdown](../images/pro/ai-history.png "Session history dropdown")
![Session history](../images/pro/ai-history.png "The session list")

> Sessions are saved per project, so each project has its own chat history.
Click a row to continue that conversation. The AI picks up with the full context of the session. Click the **trash** button on a row to delete it, or **Clear all** to delete every session of the project.

> Sessions are saved per project, so each project has its own history. Up to 50 sessions are kept.

## Keyboard Shortcuts

These work while the message box has focus:

| Action | Shortcut |
| -------- | ---------- |
| Send message | `Enter` |
| New line | `Shift + Enter` |
| Cycle permission mode | `Shift + Tab` |
| Stop the AI mid-response | `Escape` (while AI is generating) |
| Clear input and focus the editor | `Escape` (when idle) |
| Stop the AI | `Esc` (while the AI is working) |
| Clear the message box and focus the editor | `Esc` (when idle) |
Loading
Loading