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. "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.

• 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.

"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 deck 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.