Build and refine with Opal AI

Opal AI can build a page from a written brief or refine components you attach from the canvas. Its panel includes a conversation and a History view of AI snapshots.

Before you generateCopy Anchor Link

Open Home before using AI. AI generation and snapshot restore currently save to the home page at /, even if another page is open in Studio. Do not use AI on a secondary page expecting it to leave Home untouched.

Save work you want to keep before starting. Whole-page generation can replace the layout rather than simply add a section. Completed AI generations are saved to Home by the AI flow itself. If Home is already published, those changes can affect its public content without a separate click on Studio's Save button.

AI also requires access to an AI session for the website. Website editing access alone does not guarantee that the AI session will be available to every collaborator.

Generate from a promptCopy Anchor Link

1. Open Opal AI at the bottom of the left panel.
2. Wait for the session to connect.
3. Check the Context strip. For whole-page generation, remove attached components using the small detach buttons.
4. Describe the page in the Message Opal AI box.
5. Click Send prompt, or press Enter. Use Shift+Enter for a new line.
6. Watch the page appear on the canvas, then wait for generation to finish before editing it.
7. Review the result at Desktop, Tablet, and Mobile widths.

When the conversation is empty, starter cards fill the composer with an example prompt. Clicking a card does not send it: edit the wording before submitting.

Screenshot placeholder

Example: a service business home pageCopy Anchor Link

Build a home page for Cedar Workshop, a furniture repair studio in Bristol. Include a hero, three services, a short process section, customer quotes, and a contact section. Use a warm editorial style. The main action should link to #contact. Use the supplied service descriptions and do not invent prices, certifications, or customer testimonials.

Give the AI the facts it needs:

• Who the site serves and what the business offers.
• Which sections you want, in order.
• Exact names, dates, service descriptions, and contact details.
• A visual direction, such as restrained typography and warm neutral surfaces.
• Where buttons should lead.
• Content it must not invent.

Treat the result as a draft to review. Verify copy, links, images, and any business claims yourself.

Build from a documentCopy Anchor Link

1. Click Attach documents beside the composer.
2. Select a supported file.
3. Wait for extraction to finish and confirm that its filename appears in Context.
4. Add instructions explaining what to use and what to leave out.
5. Send the prompt.

Supported file types are PDF, Word .docx, TXT, Markdown, CSV, JSON, and HTML. Older .doc Word files are not in the supported list.

You can send a document without typing a prompt. In that case, Opal AI uses a general instruction to build a complete website from the attached material. Add a prompt when you need control over the section order, audience, tone, or content selection.

Example: turn a company profile into a pageCopy Anchor Link

Use the attached company profile to create our home page. Keep the company name and service names exactly as written. Summarize the team section in one paragraph. Leave internal financial figures and staff phone numbers out. Link the main contact button to mailto:[email protected].

Document limitsCopy Anchor Link

• Each file can be up to 10 MB.
• Extracted text is limited to 16,000 characters per document and 48,000 characters across attachments.
• Long content may be truncated. Check attachment notices and provide the most important material early in the document.
• A file with no readable text cannot provide useful context. If extraction fails, try a text-based export or paste the relevant content into your prompt.
• The attachment supplies text context; it is not a promise to reproduce a PDF or Word document's page layout.

Only attach material you are authorized to send for AI processing. Remove confidential content before uploading.

Enhance specific componentsCopy Anchor Link

Selection and attachment are different. Selecting an element does not by itself target the AI request. Attach it so it appears in Context.

1. Open Home and select the element you want to change.
2. In its floating action bar, click Add this component to Opal AI. This also opens the AI panel.
3. Alternatively, select the element and click Attach selected section beside the AI composer.
4. Check the component chip in Context.
5. Describe the change and what should stay the same.
6. Send the request and review the whole affected area.

You can attach up to eight components. Remove individual chips to narrow the request. After a successful generation, the attached components and documents are cleared, so attach them again for a follow-up targeted edit.

Screenshot placeholder

Example: shorten a hero without redesigning the pageCopy Anchor Link

Shorten this hero heading to no more than eight words. Keep the business name, existing image, and button destination. Make the supporting paragraph two sentences. Do not change the other sections.

Attach the whole section when you want to change its layout and content together. Attach an individual heading or button when that is the intended target.

Without attached components, the request uses whole-page generation, even if the wording sounds like a small revision. Attachment narrows the editing request; it does not remove the need to inspect the result for unintended changes.

While generation is runningCopy Anchor Link

The canvas shows a streamed preview, and canvas editing is paused while the AI works. Wait for completion before making manual changes or sending another request.

Use Stop generating if you need to interrupt the run. Stopping is not the same as reverting: a usable partial result may already have been saved. Check Home again before deciding whether to continue, restore a snapshot, or undo a canvas change.

If generation fails, read the error message and inspect the page before retrying. A visible streamed section is not, on its own, proof that the full generation completed.

Use conversation and HistoryCopy Anchor Link

Read or copy a messageCopy Anchor Link

Use Chat to return to the conversation. Messages show a timestamp, and token usage appears when available. The copy control copies the message text, not a page export.

Restore an AI snapshotCopy Anchor Link

1. Save any manual changes you want to keep.
2. Make sure Home is open.
3. Click History in the AI panel header.
4. Find a snapshot by its name and date.
5. Click Restore.
6. Wait for the restore confirmation and inspect the restored content and theme.

Screenshot placeholder

Restoring replaces Home's saved layout with the selected snapshot and restores its saved theme. It is not just a preview, and it does not wait for a later Save click. The restore also adds a checkpoint to the AI history.

History belongs to the website's AI session, not to a separate timeline for each page. It records AI snapshots; it is not a complete history of every manual canvas edit. Use the canvas Undo and Redo controls for recent document edits, and use AI History only when you intend to restore a saved AI layout.

Clear a conversationCopy Anchor Link

In Chat, use Clear conversation, then confirm Clear everything.

This permanently deletes the session's messages and snapshots. It does not reset the current page layout. Do not clear the conversation if you still need one of its restore points.

Review before keeping the resultCopy Anchor Link

• Replace invented or unverified facts.
• Check image suitability and alternative text where available.
• Test button destinations and navigation in Preview mode.
• Check smaller viewport widths and text wrapping.
• Review form behavior separately if the generated layout contains forms.
• Confirm Home's Draft or Published status.

Continue with Canvas editing, Styling, or Pages and publishing.