Refactor with AI

This tutorial shows a safe AI-assisted refactor: extract a repeated utility, update call sites, and review every diff before accepting.

Prepare

1. Open a project folder in Shape.
2. Sign in to your Shape account for AI access.
3. Open AI Chat from the titlebar.

Pick a small, well-scoped task, such as "Move duplicated date formatting into lib/format-date.ts and update imports."

Optional: Plan first

For larger refactors, start in Plan mode:

1. Select Plan from the mode dropdown.
2. Describe the refactor and which files you think are involved.
3. Send the message.

The assistant researches the codebase and saves a plan to .shape/plans/. Open that file in the editor, edit if needed, then continue in Code mode.

Run in Code mode

1. Switch the dropdown to Code.
2. Send a clear instruction, for example:

3. Wait for the assistant to propose edits.

Review each edit

Each changed file appears in the pending strip above the chat input.

1. Click the file to open a diff tab.
2. Read added and removed lines.
3. Click Keep only when the change looks correct.
4. Click Undo on anything that touches files outside scope.

Do not enable auto-apply until you are comfortable with the workflow. See Reviewing Edits.

Verify

After accepting edits:

1. Save all files (Ctrl+K S).
2. Open Problems (Ctrl+Shift+M) and fix new type errors.
3. Run tests or the dev server from the terminal:

If the assistant proposed a terminal command, approve Run on the card and check output in the panel.

Iterate

If something failed, send a follow-up in the same thread:

Review and accept the follow-up edits the same way.

What you learned

• Use Plan for design and Code for implementation
• Preview and Keep or Undo edits one file at a time
• Verify with Problems and terminal commands

Related

• Chat Modes
• Reviewing Edits
• Diff and Merge
• Problems, Output, and Tests