Chapter 3 of 11

Talking to the AI

The editor: asking the AI for changes and watching them applied.

• 21 min read
• 15 sections
• 25 screenshots
• Updated 5 October 2026

3.1Your site's editor

What it's forIt's your site's workshop: you see the site, you ask for changes and you check them straight away, without publishing anything until you say so.

What's on screen

• Top left, the arrow back to your projects, the project's name and its address (/my-project).
• The four screen-size icons (phone, tablet, monitor and the double arrow) change the width you see your site at. The current width is shown beside them: 100%.
• The Easy / Advanced switch. It's the most important control on the whole screen and it has its own section further down: half the tools are hidden behind it.
• The orange "Unpublished changes" bar warns you that what you're looking at isn't visible to anyone outside yet. Until you press Publish, your public site stays as it was.
• The purple strip at the top appears while the AI is working: it reads "Preparing request..." with a timer and the request number.
• The column of icons on the left are the tools (pages, blog, images…). How many you see depends on Easy or Advanced mode.
• Right at the bottom, the chat box and, above it, the mode bar.

Enlarge

3.2Easy mode and Advanced mode: where the thing you can't find is

What it's forEasy mode leaves only what everybody uses in sight. Advanced mode adds the rest of the tools. It's the number-one cause of "this used to be here and now I can't see it".

What changes, exactly

• In Easy the left-hand bar has six things: Pages, Blog, Forms, Media, the Query queue and Report bug.
• In Advanced these appear as well: Search, Languages, SEO, Styles, GTM, Google Ads, Analytics, Settings, Sofi and Agents. And Connect GitHub is added to the header.
• What does not change: the chat box, the preview, the five modes on the bottom bar, the screen sizes and the Publish button. All of that is identical in both modes.

Enlarge

Enlarge

3.3Asking the AI for changes

What it's forIt's the heart of the product: you write what you want changed and the AI does it on the page you have open.

What's on screen

• The text box. Write in your own words. The example text changes according to what you have selected on the page (for instance "Changes for h1…").
• The paperclip on the left attaches reference images. You can also paste them with Ctrl+V or drag them over the chat: a blue frame appears reading "Drop files here". The thumbnails sit above the box; you remove them with the red X and they clear themselves when you send.
• The send button is the paper plane on the right.
• "Send options", bottom left, opens the settings that widen the request — or make it more expensive. They have their own section below.

How to write a request that works

A vague request gets a vague answer. Compare:

Enlarge

Enlarge

The recipe is always the same: where (which page and which part), what (the specific change, with the exact wording if you have it) and what to leave alone.

A full example, start to finish. You want to change the headline on the home page:

1. Open your project's editor. Check at the top that you're on the page you want to change.
2. In the box at the bottom write: "On the home page, replace the "Home" headline with "Sourdough bread, straight out of the oven every day at 8 in the morning" and leave the rest of the page exactly as it is."
3. Press the paper plane.
4. The purple "Preparing request..." strip appears at the top with its timer: the AI is working.
5. When it finishes, the preview on the right updates by itself with the new headline. If it wasn't what you wanted, write the correction in the same box; there's no need to start over.

Enlarge

3.4The send options (and what they cost)

What it's forThey widen the reach of your request. They only appear when they make sense for your project, so you won't always see the same ones.

• Multi-page (layers icon). Appears when your project has more than one page. Without it, the AI can only touch the page you have open and its controller: it is forbidden from going into other pages, into the shared template or into the configuration. With it on, it can read any page as a reference, change several at once and touch the shared files (the template, the styles). It still uses its judgement: if you ask for something on a single page ("change the contact form"), it only touches that one. Cost: it tells you how many pages the project has; it uses more because the AI receives far more context.
• Apply to all languages (languages icon, in blue). Appears when the page you have open has versions in other languages. After applying the change to the current page, it translates that same change into all the other versions. Underneath it lists the targets (for example → contact-en, contact-fr). Cost: it shows you the estimate, along the lines of "+1 translation, ~2x tokens". Careful with what it does NOT do: it doesn't read the other versions. If you're on the Spanish page and ask it to "make it like the English version", it isn't going to go and look at the English one; it only translates the final result.
• Insert form (clipboard icon, green). Appears if you have forms created in the Forms tool. You pick one from the dropdown and the AI inserts it wherever you tell it: "Put the contact form in the bottom section".
• Search the web (globe icon). Lets the AI look up outside information while preparing the change.

If you combine Multi-page with Apply to all languages, every modified page gets translated into all of its languages, and instead of the list of targets you'll see an estimate of the total.

3.5Following your request: the query queue

What it's forEverything you ask the AI for goes into a queue. Here you see what's being worked on, what's waiting its turn and what has finished.

What's on screen. Three tabs: Processing, Queued and Completed. Each task shows the text you asked for, the page it was aimed at and when it was launched. Pressing a task opens its detail.

Enlarge

3.6Choosing how you touch the page: the seven modes

What it's forThe bar of eight icons just above the chat box decides what happens when you click on your site in the preview.

• Select (arrow). This is the normal mode. You click an element and it's outlined: green if the system identifies it beyond doubt, amber if the element looks like others on the page. A label with its name (h1, img…) appears above the chat box and the example text in the chat changes to "Changes for h1…", so you no longer have to explain where you want the change. Pressing that label brings up the quick actions: Delete, Edit, Duplicate and View code; each one leaves the instruction already written in the box. Holding Alt or Shift you can select several elements at once; they're numbered in purple.
• Ask (speech bubble with a question mark). You tap an element and ask Sofi about it, without changing anything. Its own section below ("Asking by pointing").
• Edit text/image (the T). You change text, images and links yourself, without going through the AI. It has its own section below.
• Forms (clipboard). You tap a form on your site and edit it right there, field by field, without going through the AI.
• Draw (pencil). You mark an area with strokes. Its own section below.
• View only (eye). The preview behaves like your real site: you navigate, press buttons and try out forms like a visitor. In this mode the chat box is hidden.
• Navigate (arrow with a click). Your site's links work inside the editor: press an internal one and you switch to that page without leaving the editor. Unlike "View only", the chat stays in sight here.
• The eighth icon (folder tree), set apart by a small divider, isn't a mode: it opens and closes the file panel.

Enlarge

3.7Drawing on the page to point at what you mean

What it's forFor when explaining in words where the problem is takes longer than pointing at it with your finger.

What's on screen. The strokes come out yellow, like a highlighter. A small bar appears underneath with four buttons: the microphone to dictate, the bin (labelled "Limpiar") to clear the strokes, the X to cancel and the tick ("Listo") to confirm — this little toolbar is still in Spanish today. The bin and the tick are greyed out until you draw something.

When you press the tick, the system takes a photo of the marked area, works out which elements are inside it and returns to Select mode; the photo stays as a thumbnail above the chat box, ready for you to write what you want changed.

Enlarge

About voice dictation. The Draw bar keeps its microphone so you can dictate what you want in the marked area. To talk to the AI anywhere else in the editor there's the call with Sofi, covered in "Talking to Sofi", a little further down.

3.8Talking to Sofi: a call instead of typing

What it's forAsking for changes and asking questions out loud, as on a phone call: "change the button text to Sign in", "how many pages does my site have?", "remove this photo" while pointing at it in the preview.

What's on screen. When you press it, the first time the browser asks for permission to use the microphone. Sofi says hello and stays listening; the button turns green ("On a call") and pressing it again hangs up. Sofi listens the whole time, answers straight away with her voice and you can interrupt her. What she already knows about your site (which pages it has and how many, what it's about, what's on the page you're looking at, whether it has a blog) she answers instantly; if she needs to look at the code, she tells you she's looking. Ask her for changes the way you'd ask a person ("make the button green", "change this" while pointing in the preview): she tells you while she does it, and confirms when she's done. If the job is a big one (a blog with articles, new pages), she first asks you the essentials, for example whether you have your own images or prefer stock images, warns you it will take a few minutes and, while she works, keeps telling you she's still on it. In the bar you can see what each of you says, which microphone she's hearing you through, how long the call has lasted, a button to mute the microphone and a red one to hang up. Every change or question Sofi carries out counts as one request, just like typing it; talking in itself costs nothing.

Sofi also makes suggestions. When she picks up she already knows what your site is missing and what's broken. If the menu links to pages that don't exist or there are images that don't load, she tells you when she says hello and sends it off to be fixed without you asking (it counts as one request). If the phone number, the email or the legal details are missing, she asks you for them when the time comes. Ask her "what is my site missing?" and she'll suggest one or two concrete improvements; she doesn't do any of it without your yes. And when she has to write new text, she tells you first what she's going to write and reads it back when she's done, so you can confirm it or change it.

Enlarge

If she can't hear you. Before picking up, Sofi chooses by herself a microphone that gives a signal: this happens, for example, with headsets that have one channel for games and another for voice. While she listens, the bar says which microphone she's hearing you through; if within a few seconds not even background noise reaches her, it warns you ("I can't hear you through…"), Sofi tells you out loud and you can pick another microphone right there, without leaving the editor. And while Sofi works on what you asked for, she tells you ("On it, one moment") so the wait doesn't look like a hang.

If you don't see the "Talk to Sofi" button. The call is switched on by whoever runs Speaksite. Where it isn't available, there's a microphone next to the chat box instead, for dictating: you press it, speak, and what you say appears in the box as you talk, in grey while it's provisional. When you pause for a moment, the sentence is confirmed and a two-second countdown ring appears: if you don't touch anything, the request sends itself; if you tap the ring, it stays written so you can correct it and send it yourself. When the change is done, Sofi confirms it out loud.

Enlarge

3.9Asking by pointing

What it's forUnderstanding your site without changing it: what a button does, why a block doesn't show on phones, what text would suit a headline. The answer comes in plain language and, if Sofi sees a clear fix, she offers it.

What's on screen. As you move the cursor over the preview, each element gets a box around it and a label tells you what it is and what it says. When you tap one, the chip "Asking about <h1> “…”" appears above the chat box with that element, and the box changes to "Ask about this <h1>…". Type or dictate the question and send it. The chip's X or Esc releases the element.

Enlarge

The answer appears in a Sofi bubble over the corner of the chat. If the question came in by voice, Sofi reads it aloud; with the bubble's speaker you can hear it again or silence it, with "Reply" you carry on the conversation and with the X you close it. When Sofi suggests a concrete change, the bubble brings a card with the change ("Show change detail" expands it) and the Apply this change button, which turns it into a normal request, with the element already pointed at.

Enlarge

3.10Changing things yourself, without spending on the AI

What it's forFor small fixes — a typo, an image, a link pointing to the wrong place — there's no need to bother the AI. These changes are saved directly and don't use up any credits.

The four panels you may come across

• Text (headings, paragraphs, buttons). An editor with bold, italic, underline, link and remove formatting. Confirmed with Save.

Enlarge

• Image. Lets you swap the image or change its alternative text, which is the description read by search engines and screen readers.

Enlarge

• Link. You change the visible text, the destination address and whether it opens in a new tab.

Enlarge

• Form field. You change the label, the helper text, the field's internal name, its type (email, text…) and whether it's required.

Enlarge

A full example. You've typed "bakerry" instead of "bakery" in the home page intro:

1. Open the editor and press the T icon (Edit text/image).
2. Click on the wrong wording in the preview.
3. Fix the word in the little panel that opens.
4. Press Save. The green flash confirms the change.
5. It's still an unpublished change: press Publish when you want your visitors to see it.

3.11Seeing your site as it looks on a phone or a tablet

What it's forMost of your visitors will arrive on a phone. This shows you what they'll see, without leaving the editor.

Enlarge

Enlarge

3.12Reporting a bug

What it's forTelling the Speaksite team about something that isn't working, without leaving the editor or hunting for an email address.

What's on screen. A title, a description (tell us what you were doing, what you expected and what happened) and an optional space to attach a screenshot, which you can drag in or paste with Ctrl+V.

Enlarge

3.13Tools that only exist in Advanced mode

The next four do not appear in Easy mode. If you can't see them, press Advanced in the header.

Asking the AI about your site's content (Sofi)

What it's forAsking questions about your own site and requesting general reviews, rather than changes to one particular page.

What's on screen. A separate chat, with ready-made suggestions along the lines of creating a contact form, analysing your site in depth or improving the copy on the current page, plus a note of how many pages your project has. (Those starter suggestions still come through in Spanish today.)

Enlarge

Agents that work for you

What it's forAutomated reviews of the whole site: checking links and images, or that the design is consistent across pages.

Enlarge

Searching for text across the whole site

What it's forFinding which pages a word appears on, without opening them one by one. Handy before changing a phone number or a price that's repeated.

Enlarge

Seeing your site's files and reading the code

What it's forLooking under the bonnet. You don't need it to use Speaksite; it's there for anyone who wants to check something, or to work alongside a developer.

What's on screen. Your project's folder tree (app, config, public, routes…) and a search box at the top. Clicking a file opens its contents on the right, with the full path above it and buttons to see its history and compare versions.

Enlarge

Enlarge

3.14Auto-repair notices

Every now and then you'll see a notice saying Speaksite has fixed something in your project by itself (a page that was left half-finished, a link pointing at a page that no longer exists). You don't have to do anything: it's there for information, and it tells you why something looks different from how you left it.

(There's no screenshot of this notice: it only appears when the system detects and repairs a real problem, and none came up in the demo project while this manual was being put together. Forcing one would have meant breaking the project on purpose.)

3.15The questions people ask most

• "I can't find a tool" → you're in Easy mode. Press Advanced.
• "I changed it and my customers can't see it" → you haven't pressed Publish.
• "The AI isn't doing what I ask" → say where, what and what not to touch, and one thing per message.
• "I want to fix a typo without spending anything" → Edit text/image mode (the T): those changes don't use up credits.
• "The change needs to go into the other language too" → switch on "Apply to all languages" before you send.