Biz Up Starts Tools

A.I. Web Build Kit

Dede

self-hosted AI Web Build Kit: a single page your users open, fill a few fields, drop assets or a ZIP, and it spits out a ready-to-deploy static-site ZIP (plus a live server preview). Works on any cheap cPanel host (PHP + ZipArchive).

Below is a copy-paste starter you can upload as public_html/ai-web-build-kit/. It has:

  • a builder UI (index.html)
  • a PHP build endpoint that assembles pages and zips them (kit/api/build.php)
  • two starter templates (Landing, Portfolio)
  • merging of an optional ZIP the user uploads (your “one-click ZIP merge”)
  • a simple “index.html creator” via form fields (headline, hero media, features, pages, etc.)

How it works (for your users)

  1. Visit /ai-web-build-kit/
  2. Fill site name, colors, hero, features, pages
  3. (Optional) upload images/CSS/JS or a prepared site ZIP (it will merge)
  4. Click Build & Download ZIP
  5. Upload that ZIP to cPanel → Extract → site is live

It also writes a preview at /ai-web-build-kit/kit/_output/{your-site-slug}/index.html so people can click around before downloading.

Deploy steps (once)

  1. In cPanel → File Manager, create a folder: public_html/ai-web-build-kit/.
  2. Add the files above in the same tree (create subfolders as shown).
  3. Ensure PHP has ZipArchive (most hosts do by default).
  4. Visit https://yourdomain.com/ai-web-build-kit/ and try a build.

Roadmap ideas (easy next steps)

  • Template packs: drop more HTML templates in kit/templates/ (the builder auto-picks by filename you add to the <select>).
  • Theme presets: palette dropdown that sets brand/accent combos.
  • Form blocks: prebuilt sections (pricing, FAQ, testimonials) toggled by checkboxes.
  • Auto-deploy options: SFTP push or cPanel API call to extract the ZIP server-side (optional; many hosts block APIs, so keep “download + extract” as the default).
  • Content “AI help”: a text area where users paste bullets; your server can transform them into headings/paragraphs before baking pages. (Keep it local/simple unless you wire an external LLM API.)

Local AI Web Build Kit (v2) that already includes a chat-style builder (no external APIs). It’s rule-based JavaScript that lives entirely in the browser and fills the form for you; then PHP zips the finished site. This gives users that “talk to the builder” feel without any network calls.

Download it here:
Download AI Web Build Kit v2 (local)

What’s inside (v2)

  • /index.html — UI with two sides:
    • Chat Builder (local): users type things like title My Great Site, pages About, Contact, add feature Fast Builds | Zip your site, brand color #6ee7b7, template landing, build.
    • Form: always in sync with chat, so power users can tweak fields directly.
  • kit/api/build.php — assembles pages and creates a ZIP + live preview folder. (Requires PHP ZipArchive).
  • kit/templates/ — Landing and Portfolio starter templates + base CSS.
  • Optional “merge a ZIP”: users can upload a prepared site ZIP (e.g., assets/*, pages/*, index.html) and it merges into the build.

Install (once)

  1. In cPanel → File Manager, create public_html/ai-web-build-kit/.
  2. Upload & extract the ZIP above into that folder.
  3. Visit https://yourdomain.com/ai-web-build-kit/.

Use (as a user)

  • Open the page and chat:
    • title My Great Site
    • tagline The simplest builder
    • headline Build once. Deploy anywhere.
    • sub Generate your static site ZIP in seconds.
    • brand color #6ee7b7
    • accent color #93c5fd
    • template landing
    • pages About, Contact
    • add feature Fast Builds | Zip production site
    • gallery assets/images/hero.jpg, assets/images/shot-2.jpg
    • links Docs | https://example.com/docs; Contact | mailto:me@example.com
    • build
  • Or fill the form directly. The Build & Download ZIP button outputs:
    • A ZIP you can save and upload anywhere;
    • A live preview served from /ai-web-build-kit/kit/_output/{your-site}/index.html.

Why this fits your plan

  • Local-first, free: no keys, no 3rd-party calls.
  • Few clicks: users can just chat → build → download → extract in cPanel.
  • Extensible: when you’re ready, we’ll create a sibling directory like /ai-web-build-kit-cloud/ that swaps the local rule-based parser for a real LLM back end. Same UI flow; just more brains.

Next upgrades (still local)

  • Extra templates: drop more HTML files in kit/templates/ and I’ll add them to the template selector.
  • Section toggles: pricing/FAQ/testimonials blocks you can include by chat (add pricing, etc.).
  • cPanel auto-extract (optional): a PHP endpoint that, if given your cPanel creds, can upload & extract the ZIP automatically. (Many hosts restrict this; download-and-extract stays the safe default.)
  • Images / MP4 / MP3 / PDFs
    Upload all as assets. Use them as:
    • Hero background: set image or video URL (MP4) in the form.
    • Gallery: paste asset paths (one per line); they get lazy-loaded.
    • Inline media: in pages you import, you can embed <audio src="assets/your.mp3" controls> or <video src="assets/your.mp4" controls> or link PDFs.
  • “Match image to document title” auto-pairing
    When you Ingest a doc (DOCX/RTF/ODT/TXT/MD/HTML; PDF best-effort), we compute a slug from its title. At build time, any asset whose filename equals or starts with that slug (e.g. the-forest-report.jpg, the-forest-report-1.png) is ideal to use for cover/gallery. This is a simple, dependable rule without AI.
  • Links
    Footer links are Text | URL per line. You can also put any links in imported page HTML itself.
  • PDFs
    If your host has pdftotext, we’ll extract text into HTML. If not, we embed the PDF with a fallback download link. (All local.)

“More style options” — without AI

New Style tab includes:

  • Paste CSS → auto-map: drop any CSS snippet; we parse colors, font-family, border-radius and map to the site variables. We then generate a custom override file (assets/override.css) you can edit freely.
  • Custom CSS textarea: everything here is appended to the build, so advanced users can paste/modify rules directly.
  • Copy example: one-click button copies a sample style block users can tweak.

“Copy/paste an example style and match it”

The “StyleBot” analyzes pasted CSS, grabs the first two colors (brand/accent), first font-family, and first border-radius, then:

  • applies them to the form colors,
  • generates a starter override.css with those values,
  • leaves comments inviting the user to refine.

No AI; just deterministic parsing.

Document ingestion → pages

In Ingest:

  • Upload DOCX/RTF/ODT/TXT/MD/HTML/PDF → we convert to HTML and show a preview.
  • Click Add as Page → it’s added to the project with a proper title + slug.
  • Build → we output that page plus nav links.
    (For PDFs w/o text extraction, we embed the PDF viewer and expect the actual PDF to be uploaded as an asset.)

What to tell users (simple rules)

  • Name your images to match the document title/slug for auto-pairing.
  • Keep assets inside assets/ (the builder handles this automatically).
  • For video hero, just set the MP4 URL as the hero background and choose “Video”.
  • Paste any brand CSS you like—colors, font, radius get picked up.

Deploy steps

  1. Upload & extract the v3 ZIP to public_html/ai-web-build-kit/.
  2. Visit /ai-web-build-kit/.
  3. Use Ingest to convert docs → Add as Page.
  4. Paste CSS in Style (optional) → Apply.
  5. Build & Download ZIP → extract wherever you want the site to live

Dede Avatar

AUTHOR

Dede

Recent Posts
Recent Comments
Archives
Categories
Tags
  • No tags