Optimizely Site Builder

No files needed

Describe the tool you want in plain English. Site Builder writes the code, shows you the page as it builds, runs it to check it actually works, and publishes it to a private URL only Optimizely can open. It comes out looking like Optimizely made it — and arrives with a database, AI and keyed API calls already wired up.

It is the only way into this portal that assumes no files, no terminal and no git. If you have never deployed anything before, start here.

Open Site Builder

You are already signed in — it uses the same Optimizely account as this portal.

01What it is, and when to use it

Site Builder is an AI assistant that builds static web apps— HTML, CSS and JavaScript — and publishes them to this portal. Think of the public tools like v0 or Lovable, except it is internal, it already knows Optimizely's design system, and it deploys to a URL that requires an Optimizely sign-in.

You describe what you want. It writes the files, renders them live beside the conversation, and you keep talking until it is right — “make the header green”, “add a second chart”, “let people submit their name”. Then you publish.

Good fit

A group dashboard, scorecard or metrics page
A sign-up, intake or request form
A poll, survey or self-assessment
A launch or announcement page
An FAQ, roadmap or onboarding microsite
A quick prototype to put in front of people

Not a fit

Anything server-rendered — Next.js SSR, Express, Django
Anything that must be public. Every URL here needs a sign-in
Long-running jobs, queues or background workers
Customer data of any kind — this is an internal tool
Something you already have files for. Use the dashboard upload instead

It is one of five ways to deploy here, and the only one that starts from a sentence rather than a folder. The others — dashboard upload, Claude, GitHub Actions, and the API — are on the full guide. Every one lands in the same place, so you can start in Site Builder and take over manually later.

02How the two apps fit together

This trips people up, so it is worth thirty seconds. Two applications, one account. Site Builder lives in OptiGPT and holds the conversation. This portal holds the project — its files, versions, sharing and URL. They talk to each other over a private connection on the server.

OptiGPT · Site Builder

The conversation
Writes & edits your files
Live preview (the canvas)
The “does it run?” check

Deploy Portal · this site

The published URL
Versions & rollback
Who can see it
Database, AI, API keys, digests

Publish →← Builder

You sign in once

Both apps use your Optimizely account. There is no second login, no token to paste and no connection to authorise.

It acts as you

Projects it creates are yours — they appear on your dashboard, under your username, exactly as if you had uploaded them.

Either side works

Publish from Site Builder, then rename, share or roll back here. Or start here and open it in Site Builder later.

Yours, or a workspace's

When Site Builder deploys, it can create the project under you or under a workspace you belong to. A workspace owns what it holds, so a page built for a team stays with the team when people move on. It offers the workspaces you may add work to — being able only to view one is not enough.

It also lists projects you maintain but do not own — ones you were made an editor of, and ones a workspace you are in owns — so you can open and update them here without owning them.

03Build your first page

1Open Site Builder. Nothing to install or configure.
2Describe what you want, or pick one of the templates and change it. Be concrete about the purposeand let it choose the layout — “a page where the group votes on our offsite date and sees the running totals” works better than a list of div specifications.
3Watch the preview. The page renders beside the conversation as files are written. You do not need to wait for it to finish to see where it is going. What you are watching is the sandbox — real code, running, but with identity, data and AI stood in for. The bar above it says which preview you are on and whether it has caught up.
4Iterate in plain English.“Make the totals a bar chart.” “Only one vote each.” “Add our logo to the header.” It edits the files and re-renders.
5Name it — once. The first time you publish anything, a dialog asks for a name and shows the address it becomes. It offers Save draft (private to you and your maintainers) and Deploy (the same, then live). Either one claims that address permanently — renaming afterwards changes the title and the conversation, never the URL. If the address is already taken you are told before you commit; if it belongs to a colleague, you cannot take it.
6Publish. It deploys here and returns your link — https://deploy.optimizely.com/your-name/your-project/ What ships is the bytes you previewed, not a second copy of them.
7Share it. The link works for anyone at Optimizely who is signed in. To narrow that to named people, open the project here and use sharing.

Say who it is for and what happens next.“An intake form for design requests; submissions should reach our group” gets you a form that saves entries and posts them to Groups. Describing only the fields gets you a form that saves them and tells nobody.

04The canvas, pane by pane

The canvas is the working area beside the chat. It is not a preview image — it is your project actually running, compiled in the browser and re-rendered on every change.

Sandbox vs live draft. The canvas runs your page in a sandbox, which stands in for the platform: sign-in returns a made-up colleague, the database is a scratch copy, and Opti.call / Opti.ai are stubs. Perfect for layout and flow, useless for anything that reads real data. Switch to live draft and the same page is served from the portal at your real URL, with the real database, the real you and your real API connections — visible to only you and your maintainers, even on a project everyone can see. Happy with it? Publish makes it the next version of your live site — and keeps the draft, so your next edit starts from what is live. Not happy? Discard on the project page throws it away; on a project that has never been published, that removes the project, because the draft is all there is.

The first draft claims the address. Previewing for real needs a URL, so Site Builder takes one the first time you switch to a live draft — /your-name/what-you-called-it/. Renaming after that changes the title and never the address: links people already have keep working. If the name is wrong, Discard before you publish — on a project with nothing published it removes the project, freeing the name to claim again. Once it IS published the address stays — but you can give it a better one alongside: claim a custom link on the project page and it also answers at deploy.optimizely.com/go/whatever-you-want. An alias, never a rename — the original keeps working.

Conversation

“Build a group poll…”

writing index.html…

✓ verified

Files

index.html

styles.css

brand.css

app.js

Live preview

Schematic, not a screenshot — see the note in this page's source for why.

Every file is yours to see

Open any file the assistant wrote. Nothing is hidden or generated at publish time — what you read is what deploys.

It runs your real code

The preview compiles and executes the real project, so a JavaScript error shows up as an error rather than a page that quietly renders wrong. What it stands in for is the platform — see above.

Styling matches production

The styling lives in your project's own files. Nothing is injected into the preview alone — so a page cannot look right while you build it and broken for everyone you send it to.

Download it any time

You are never locked in. Take the files and deploy them yourself, or hand them to someone else.

05The controls above the preview

One row, left to right. Nothing here changes your files — it changes what you are looking at.

Code · Split · Preview · Changes

What fills the canvas. Split puts code beside the page, and the divider between them drags. Changes appears once there is a previous version to compare against.

Sandbox · Live draft

Which preview. The sandbox is instant and stands in for identity, data and AI; the live draft is your page served for real, privately. Switching to it publishes a draft.

Desktop · Tablet · Mobile

Constrains the page’s width so you can check a narrow layout. Available wherever the preview is on screen, including in split.

The status, on the right

Building… while it writes, Publishing to draft… while it uploads, then Updated just now once the page you are looking at has caught up. If it says 2 changes not published, the preview is behind your files.

The chat can move

Its header docks it beside the canvas, floats it over the page, or folds it to a bar along the bottom. Floating, it can be dragged sideways and resized by its top edge.

The model can change

The composer shows which model is running. The default is the fast one, which handles most pages; if a generation disappoints, switching to Smart for that turn is usually a better move than rewording the request.

06When something looks wrong

The live draft is blank, or asks you to sign in

The draft is served from this portal, and the frame borrows your session here. If you have not signed in to the portal in this browser, it shows you the sign-in page instead of your app — and nothing can detect that, because the frame is on another origin. Press Open beside the address once. After that the frame works.

“I couldn’t verify the live preview”

The assistant checks its work by watching the page actually run. If it says it could not, the preview was not available to it — usually because the canvas was closed. Reopen the canvas and ask again; the files it wrote are fine, only the check was skipped.

The preview has not caught up

The status on the right of the control row says so — 2 changes not published means your files have moved on and the live draft has not. It republishes after each generation while the draft is the preview you are on. Not updated means a publish failed: the previous draft is still there and still being served, so nothing is lost.

That address is already taken

Names become addresses, so two apps cannot share one. If it is yours, publishing replaces it — the old version stays in the project’s history and can be rolled back. If it belongs to a colleague, you cannot take it; choose another name.

You named it wrong and it is already published

⚠️ The address cannot be changed. Renaming moves the title and the conversation, never the URL. Before you deploy, Discard on the project page removes the draft — and on a project that has never been published, that deletes the project, which is what frees the name. Afterwards, a custom link is the nearest thing: it adds a second address rather than moving the first.

A generation is not good enough

The composer names the model it is using. The default is the fast one and it builds most pages well; for something intricate, switching that turn to Smart is usually more effective than rewording the request a third time.

It warns about AI or connections you did not add

Before deploying it lists platform calls it found, because those need a switch flipped or a credential saved to work at all. It reads your code, not your prose — a page that merely mentions these by name should not trigger it. If one fires on an app that does none of it, that is a bug worth reporting.

07Start from a template

Twelve starters, if a blank page is harder than a first draft. Each is a real working page you then change by talking to it — several can be tailored before the assistant even runs.

Landing page

Hero, feature grid, call to action. For a launch or a project home.

Metrics dashboard

KPI tiles, a bar chart and a sparkline. Renders without JavaScript.

Roadmap timeline

What is shipping and when.

Scored self-assessment

Questions in, a score and guidance out.

Data report & chart

A written report with the chart beside it.

Searchable FAQ

Questions with instant filtering.

Group poll

One vote each, totals updating live. Uses the database.

Event sign-up

Collects names; you see the list.

Request form → Groups

Submissions saved and posted to a channel.

Survey + results

Collect answers, then show them back.

Multi-page site

Several linked pages with shared navigation.

Shared checklist

One list everybody edits together.

06Why it looks Optimizely

This is the part a public tool structurally cannot do. v0 and Lovable have never heard of Optimizely's design system, so anything they build needs restyling before you would put it in front of the company.

Site Builder starts every project with the real design tokens already in the files — the official palette and typography, as a stylesheet the page loads. The assistant is not asked politely to remember the brand colours; it is writing against them from the first line. That is why the default output looks finished rather than like a wireframe you have to redecorate.

The Optimizely theme

Dark Fir

#08251A

text & anchors

Mid Fir

#0D3A29

deep surfaces

Neutral 3

#E4F0DA

panels

LF Green

#ABFF44

accents only

Grass

#7DDD3D

support

Light Blue

#91DBDA

charts

Light Pink

#FF99B6

charts

There is also a Neutral theme — unbranded slate — for customer demos and mock-ups where Optimizely green would be wrong.

The brand lives in your project's files, not in the builder. So the deployed site looks identical to the preview, and it keeps looking right after you edit it by hand or hand it to somebody else.

07The check before it says "done"

The most common complaint about every AI builder is being told a thing is finished when it is broken — which makes you the test suite. Site Builder is not allowed to finish on its own say-so. Before it reports success it compiles the project and runs it, and checks:

It builds at all

Nothing throws once it is running

Every stylesheet it wrote is actually linked

Every library it imported is one that exists

If any of those fail it does not get to declare victory — it sees the errors and fixes them. The third one is worth knowing about: a stylesheet that was written but never linked is the classic silent failure. It builds, it runs, it throws nothing, and the page just renders with browser defaults and looks wrong.

08The backend it can wire up

A static page normally cannot keep data, hold a password or call an API without exposing a key. Pages deployed here can, because the portal does those parts. Ask for the behaviour and Site Builder wires it up — you do not need to know the function names.

Save what people submit

“Collect sign-ups and show me the list.” Entries are stored per project; you can read and export them from the project page here.

Ask a question

“Summarise the responses.” The page can call AI without a key in it. You switch this on per project — it spends your own monthly budget.

Call another system

“Pull the open tickets from Jira.” You save the credential once, here; the page names the connection. The key never reaches the browser.

Send it somewhere

“Post each request to our Teams channel”, or a weekly digest of what came in.

Full detail on all four — including how to turn them on — in the guide.

09Editing something already live

It works in both directions. Any project on your dashboard has an Builder action that opens thatproject's current version in a fresh Site Builder conversation — including projects you uploaded by hand or shipped from GitHub.

Ask for the change, and publishing creates a new version of the same project at the same URL. Nothing is overwritten: earlier versions stay, and you can roll back from the project page if a change turns out wrong. The link you shared never changes.

The same is true of a site you maintain for someone else. If a colleague has given you editor access, its card has the same action, and your changes publish as a new version of their project at their link — you never end up with a copy under your own name. Deleting it, renaming it, and moving its short link stay with the owner.

Because every route lands in the same place, you are never committed to one. Start a prototype in Site Builder, hand it to an engineer to finish in git, and it stays the same project at the same address.

10Limits & troubleshooting

It built something, but not what I meant.

Say what is wrong in one sentence and it will revise — you do not need to start over. It helps to name the goal rather than the fix: “people can't tell which option is winning” gets you a better answer than “make the bar taller”.

Can it build a Next.js or React server app?

No. Everything here is static — HTML, CSS and JavaScript that runs in the browser. React is fine as long as it compiles down to files. Nothing runs on a server except the portal features above.

Can I use any npm package?

A curated set — charts, dates, icons, animation, utilities. If it asks for something outside that list it will be told no and will find another way, which is deliberate: an unvetted package in an internal tool is a supply-chain risk.

Who can see what I build?

Nobody until you publish. Once published, anyone at Optimizely who is signed in can open the link — and you can narrow that to named people, or lock it entirely, from the project page. Nothing here is ever public.

Where did my project go?

To your dashboard on this site, under your own username. If it is not there, check you are signed in with the same Optimizely account — the two apps share it, so they should agree.

Can I take the code and leave?

Yes. Download the files from the canvas at any point. There is no lock-in and no proprietary format — it is a folder of HTML, CSS and JavaScript.

Describe it and see

One sentence is enough to start. You can throw away anything you do not like — nothing is published until you say so.

Open Site Builder →Read the full guide