The Kit: browsing, previews, and adding a module

The Explorer is exactly three levels deep, and each one lives in the page's own address, not just component state: the category grid (/projects/kit or /projects/<id>/kit), a single category's list of modules (add ?cat=<key>), and one module's full detail page (add &module=<id>). That means the browser's Back button always does the right thing, and a specific module's detail page is a real, shareable link — send someone straight to "here's exactly what the Quote or Estimate Request Form gets you" instead of telling them where to click. Escape backs up one level at a time, the same as Back.

Opened from inside a project (/projects/<id>/kit), the page knows which project you're looking at, so it can show what's already on it and let you add straight to it. Opened on its own (/projects/kit, reached from the Kit tab's link, or directly), it's the same three levels with nothing project-specific — useful for browsing before you've decided what to build, or for showing someone the catalog without opening one specific project.

At the top of the category grid, the same two-way toggle as everywhere else in aiKit splits the whole catalog: Site kit is sections and features that become part of the website or app itself (pages, forms, galleries, store, booking, SEO); Business tools kit is tools that run alongside the project instead of inside it (marketing automation, invoicing, CRM, staff tools, reporting). Each category tile shows how many modules it has, and a "N ready now" badge whenever at least one of them is a Ready now module (see below).

The search box above the categories matches on module name or description across the ENTIRE catalog at once — both Site kit and Business tools kit, regardless of which toggle is selected — so searching "invoice" finds it even while you're looking at Site kit.

Opened from inside a project, and only while you're not searching, a "Recommended for this project" row appears above the category grid when aiKit has real suggestions: simple, non-AI rules matched against the project's kind (a website gets a quote form, a contact form, a reviews showcase, local SEO, and FAQ pages suggested; an online store gets cart and checkout, cart-abandonment recovery, and product reviews; and so on for landing pages, apps, admin systems, dashboards, client portals, blogs, and marketing-automation projects) plus a few keyword matches against the project's own goal text (mentioning "quote," "booking," "review," "email," "invoice," or "sell online" each surfaces the matching module with its own one-line reason). Anything already on the project is left out, and the list is capped at six.

Every module carries one of two status pills, and the wording is deliberately literal, not marketing language. "Ready now" means the module is one of the build engine's tested modules — real code that renders an actual page with sample data standing in for your details, the exact same template a live site gets. "Built for you" means the module is a real, planned part of the catalog that nothing renders yet: choosing it adds it to the plan and files a real work item, and the module gets built into the site's own code, in its own brand and wording, the same way any other AI edit does — it just doesn't have a tested template sitting ready today.

Neither status means "not real" or "hypothetical." Both are things aiKit will actually build for you. The only difference the pill is telling you is whether you can see the finished shape of it right now or have to picture it from a description and a diagram.

Opening a category shows every module in it as a card: a thumbnail, the module's name, its status pill, a short one-line description, a "Works best for" chip row (up to three), and "On this project" if it's already been added (when you're browsing inside a project). A Ready now module's thumbnail is a small live preview of the real page — lazily mounted only once it scrolls into view, and capped at six live thumbnails on screen at once so a long category never bogs the page down; anything past that cap shows a plain loading placeholder until it's actually visible. A Built for you module's thumbnail is the same illustrative diagram described below, just smaller — except for modules that have a working preview (see below), whose card shows the real sample site shrunk down, a "Working preview · N variations" badge, and a "See it work" button instead of "See details." "See details" opens the module's own page.

For a Ready now module, the preview is a real iframe of the actual tested page, at full size, framed like a small browser window with a Desktop/Phone toggle that genuinely resizes the frame so you can check how it reads on a phone (on an actual phone the toggle is replaced by a plain "Phone preview" label and the frame opens scrolled to the form itself, so you see the fields, not just the hero). The frame fades out at the bottom; "Open full preview" under it opens the whole page in a new tab, and a caption below names the sample business whose data is standing in. Opened inside a project, a "Show in this site's colors" toggle re-requests that same preview with the project's own brand colors (read straight out of any #hex codes typed into the brief's brand notes) and project name swapped in, so you're looking at something closer to what your actual site would show, not a generic sample.

For a Built for you module, there's no live iframe — instead you get the same illustrative wireframe as the category list, drawn larger: a plain, monoline SVG diagram of the layout's shape (a form's fields, a calendar's grid, a dashboard's tiles, whichever kind of screen fits that module) with a few short labels pulled from the module's own preview data. A caption underneath is mandatory on every one of these and never removed: "Illustration of the layout. Your version is designed to match your site." It's there specifically so a sketch of the shape is never mistaken for a finished, on-brand preview.

Working previews (2026-10-04): a growing set of Built for you modules skip the sketch and open a full, clickable sample site instead, shown full width above the details. All twelve E-commerce / Online Store modules open the same sample pottery shop, Juniper Kiln, each on the part that module is about: the catalog (filter, sort, search, open a product and pick a glaze and size — the picture and price change), the cart and checkout (change quantities, remove items, enter WELCOME10, FREESHIP, or GIFT-2580, estimate delivery by ZIP code, and check out to a confirmation page), payment options (card, Pay in 4, and wallet buttons), shipping rates, discount codes and gift cards, product reviews (filter by stars or photos, mark helpful, write one), bundles and add-ons, sales tax (change the delivery state and the tax line changes), customer accounts (sign in, buy again, track a package, start a return), order emails (the confirmation, shipped, and delivered emails, with a working tracking page), returns and exchanges (find the order, pick items and a reason, get a return label), and inventory (an Owner view where changing stock changes what shoppers see). All ten Online Courses & Digital Products modules open a sample bread school, Rise & Crumb: play a lesson (speed, captions), mark it complete, watch the progress ring fill, take the quiz, enroll from the free preview, see the certificate, ask a question under a lesson, buy a digital download, pick a course bundle or tick a checkout add-on, and switch to the Owner view to rename, reorder, add, or unpublish lessons and set when each week opens. On the release-schedule module, a Preview time row above the frame has Skip ahead a week (and Back to today), so you can watch locked lessons open on their dates.

Above the frame: one row of choices per variation the module offers (for example Shop layout: Grid, List, or Featured; Cart: Slide-out cart or Cart page plus Checkout: One page or Step by step; Release rule: On set dates, Days after joining, or After finishing the last lesson). Picking one redraws the sample site in that variation right away and is saved in the page address (?v=…), so a link to a specific variation can be shared. Desktop and Phone resize the frame so the sample site reflows the way it would on a phone (on an actual phone this is a plain "Phone view" label). Reset puts the sample site back to how it started. A short "Things to do" row lists what to click first, and the description of each picked variation sits under the frame. Inside a project with brand colors in its brief, "Show in this site's colors" swaps the sample site's main color for the project's own (only when that color is dark enough to keep white button text readable).

Nothing in a working preview reaches a server. There is no payment connection: checkout is labeled "Preview — nothing is charged and no order is sent," the card number is a fixed, read-only sample, and wallet buttons (Apple Pay, Google Pay, PayPal) only show a note. No email is sent, no review is posted, and nothing is saved; leaving the page forgets it all. The sample businesses, products, people, and prices are invented. The caption under the frame says so: "Working preview with sample data for an invented business. Your version uses your own products, prices, wording, and brand. Nothing here is charged, saved, or sent." Every other Built for you module still shows the layout illustration.

• What the visitor sees — a numbered, plain-English walkthrough of what someone using the module actually experiences, step by step.
• What you get — what the module hands the project owner (leads recorded somewhere real, a status you can update, and so on).
• Features, and — only for a module with genuine named variants defined in the catalog — a "Choose the variant" set of selectable cards right in this section (the first is selected by default, marked with a small check), so a real either/or choice (not just a free-text customization) is picked here rather than typed out by hand.
• Why it matters — the honest case for why a business would want it.
• How it customizes (Ready now) or Variants you can pick (Built for you) — what can genuinely be made different about it.
• Works best for — the same business-type chips as the card, shown in full.
• How it gets built — one plain sentence stating exactly how this module comes into existence (a tested page the engine renders today, or built into the site by the AI during a build), including a note if it needs a third-party account like payments or maps.

Under everything else sits "Add this to <project name>" (or "your project," browsing with no project chosen yet). If the module has any customization ideas on file, they show as a checklist first — labeled "Suggested customizations" for a Ready now module, "Choose the variants you want" for a Built for you one — and checking any of them folds that exact line into what gets sent, not just a silent checkbox.

For a module with a working preview, the panel sits in the left column under the preview and starts with "Your variation" — the variation picked in the preview's choice rows (for example "Cart: Cart page · Checkout: Step by step"). Whatever is showing in the preview when you press Add is what gets recorded: it's saved on the project's brief with that module, and the work item reads "Variant: …" so whoever builds it builds that layout. A module that also has named options in its Features section asks "Which matters most to you?" there, so the two choices don't get confused.

"What should be different for you?" is a free-text note with the same dictation button as everywhere else in aiKit, plus an "Attach a photo or PDF" button (images and PDFs only, up to 2.5 MB each) for a logo, a reference photo, or a spec sheet — attached files show as removable chips right there. If the module has real, specific questions it needs answered before it can be built well, they show under "What we'll ask you," each with its own optional text field, so you can answer up front instead of waiting to be asked later.

"Add to plan" is always available once you're on a real project: it records the pick on the project's brief (the same plan the Site plan screen and the project page read from) and files a real, staff-facing work item in the Feedback tab, marked "Waiting on us," exactly the way any other request is. "Add and build now" sits next to it only once the project already has real files to edit — its first build has finished, or it's already live; it does the same two things and then immediately runs that work item through the same AI editor Fix with AI uses, no separate queue. Trying to add a module that's already on the project is refused outright with a plain "already on this project" message rather than adding a duplicate.

Once it's sent, a confirmation replaces the buttons with what actually happened — the plain "Added to the plan as a work item" message, or, for a build-now request, the real status (started, or the specific reason it couldn't, like being on hold for review-first approval) — plus two links straight to "Open the plan" and "See requests," so you're never left wondering where it went.

At /projects/kit — the same real sign-in as the rest of the hosted-projects dashboard, no project required — everything works exactly the same, right up until you try to add something. Pressing "Add to a project" (the button reads that way instead of "Add to plan" when there's no project loaded) opens "Add to which project?", a small picker listing every project on your account. Pick one and you're handed straight to that project's own Kit Explorer with the exact same module still open, ready to finish adding it. If you don't have any projects yet, the picker says so plainly and offers a direct "Start a project →" link instead of leaving you stuck.