Manual
EN/JA

AI Web Builder

Sample: building a website end-to-end through chat.

The Webpage Builder is a built-in Agent Skill that ships with the Pro plan and turns the chat into an end-to-end website author. You describe what you want — a booking page, a member portal, a contact form — and the AI produces the HTML, the workflow YAML behind it, the sheet schema it needs, and the spec / change-log entries to go with it.

The skill is auto-provisioned to skills/webpage-builder/ on your Drive the first time you open the IDE on a Pro account, and is updated in place on every release. You don't install it; you just turn it on for a chat.

Activate

  1. Open the chat panel and click the Sparkles icon next to the input.
  2. Pick Webpage Builder — a purple chip appears above the input.
  3. (Or type /webpage-builder at the start of your message.)

Plan → Approval Flow

Webpage Builder follows a fixed three-step protocol so you always see what is about to be created before any file lands on Drive.

  1. Interview. The AI asks a short list of focused questions — what the site does, which account types log in (e.g. talent, company), which sheets the data lives in, who receives notification emails. Answer in plain prose; you don't have to know the file layout.
  2. Plan. The AI replies with a numbered list of every file it will create with full web/... (or admin/...) paths — pages, workflow YAMLs, mocks, the schema delta, the spec / history entries. Nothing is written yet.
  3. Approval. Reply OK / yes / 進めて to start file creation, or push back on the plan ("split the booking form into two pages", "use the existing members sheet, not a new one") and the AI re-plans.

After approval, files are created one at a time via create_drive_file, with a Pre-Save Checklist run against each one (auth boundary, escaping, schema match, mock parity). New sheet columns are migrated through migrate_spreadsheet_schema before any workflow that writes them executes.

What It Generates

web/
  index.html, login/talent.html, partner/...      ← public pages
  api/<endpoint>.yaml                             ← workflow APIs
    (served as /__gemihub/api/<endpoint>)
  __gemihub/
    auth/me.json                                  ← auth mock for IDE preview
    api/<endpoint>.json                           ← per-endpoint mocks
    schema.md, spec.md, history.md                ← living docs

admin/                                            ← IDE-only operator pages
  bookings.html, inquiries.html, ...              ← (see Premium Plan ch.)
  api/<endpoint>.yaml                             ← admin workflows

The split is deliberate: web/ is what the public serving layer exposes on your custom domain; admin/ is reachable only from the IDE preview, under the Drive owner's OAuth.

Conventions the AI Enforces

  • Soft delete. Cancel / no-show / archive flips a status column via sheet-update; sheet-delete is never used for booking-like records.
  • Authentication ≠ authorization. Every workflow with requireAuth filters its sheet-read by {{auth.email}} — without the filter, any logged-in user sees every row.
  • Mocks for IDE preview. Each API endpoint gets a sample JSON at web/__gemihub/api/... so the iframe preview renders without hitting the network.
  • Living docs. Every iteration appends a dated entry to web/__gemihub/history.md and updates spec.md.

Iterating on a Generated Site

Open any generated file from the file tree to edit it directly — the HTML editor's preview tab renders the page against the cached mocks, so you see the result without pushing to Drive. To extend the site through the AI again, keep the Webpage Builder skill active and ask for the change in plain language; the AI re-runs the Plan → Approval flow scoped to just the diff.

When the AI itself needs adjustment (your project always uses an existing members sheet, the welcome email should always cite a specific URL, etc.), use Modify Skill with AI from the Skill Settings to teach the persistent instructions instead of repeating them every chat.

Admin (Operator) Pages

Operator-facing screens — cancel a booking, mark a no-show, reply to an inquiry — go under admin/ instead of web/admin/, so they are never served on the public domain. The Drive owner opens them from the IDE preview, where calls bridge through to /api/hubwork/admin/* under the IDE OAuth session. See the Admin Pages (IDE Preview) section in the Premium Plan chapter for the full bridge / security / soft-delete rules.