From 0ffe4558369f33e94c020d0e7fe6d03ddb2cc507 Mon Sep 17 00:00:00 2001 From: Reynaldi Chernando Date: Sat, 26 Sep 2026 01:48:31 +0700 Subject: [PATCH] add additional guides --- src/content/pages/ai-app-builder.js | 8 +- src/content/pages/ai-website-builder.js | 8 +- src/content/pages/features.js | 4 +- .../pages/guide-ai-app-builder-features.js | 247 ++++++++++++++ .../guide-how-ai-website-builder-works.js | 252 ++++++++++++++ .../pages/guide-what-is-ai-app-builder.js | 307 ++++++++++++++++++ src/content/pages/guides.js | 25 +- src/content/pages/index.js | 6 + src/content/pages/vibe-coding.js | 2 +- src/content/site.js | 2 + 10 files changed, 848 insertions(+), 13 deletions(-) create mode 100644 src/content/pages/guide-ai-app-builder-features.js create mode 100644 src/content/pages/guide-how-ai-website-builder-works.js create mode 100644 src/content/pages/guide-what-is-ai-app-builder.js diff --git a/src/content/pages/ai-app-builder.js b/src/content/pages/ai-app-builder.js index e2ebfd6..48da635 100644 --- a/src/content/pages/ai-app-builder.js +++ b/src/content/pages/ai-app-builder.js @@ -2,7 +2,7 @@ import { buildLink, LINKS } from '../site.js'; export default { slug: 'ai-app-builder', - updated: '2026-09-24', + updated: '2026-09-26', priority: 0.9, changefreq: 'weekly', navLabel: 'AI app builder', @@ -199,7 +199,7 @@ export default { a: [ 'An AI app builder turns a plain-language description into a working app. You describe what the app should do, and the AI designs the screens, sets up the data, writes the logic, and wires it all together, then runs the result so you can try it right away.', 'You don\'t need to know how to code. Every step, from the first description to publishing, works in plain English, and you refine the app the same way, by asking for changes or pointing at what should be different. Hosting, accounts, and data storage are included, so there is nothing to set up or maintain yourself.', - 'Compared with traditional development, it turns weeks of work into minutes and moves your effort from writing code to deciding what the app should do. Compared with no-code tools, you end up owning source code you can read, edit, and take with you, rather than a project locked inside someone else\'s editor.', + 'Compared with traditional development, it turns weeks of work into minutes and moves your effort from writing code to deciding what the app should do. Compared with no-code tools, you end up owning source code you can read, edit, and take with you, rather than a project locked inside someone else\'s editor. The [full explainer](/guides/what-is-an-ai-app-builder/) covers how these tools work, what they generate, and where they fall short.', ], }, { @@ -207,7 +207,7 @@ export default { a: [ 'A no-code app builder gives you a visual canvas and a fixed set of components. You assemble the app by hand, which gives you fine control but takes hours or days, means learning the platform, and leaves the finished app living inside the vendor\'s system, usually with no way to export it.', 'An AI app builder starts from a description and generates the whole app in minutes: interface, data, and logic. With Puter AI Builder you refine it by asking for changes or clicking the element you want changed, so you keep the precision of a visual editor without the setup. The result is real source code you own and can export, and the app can do anything a web page can do, so you are not limited to the components a vendor anticipated.', - 'The trade-off is that code you did not write is still code you are responsible for. For anything handling money, health information, or other people\'s personal data, read what was built and treat the AI as a fast first draft rather than a security review.', + 'The trade-off is that code you did not write is still code you are responsible for. For anything handling money, health information, or other people\'s personal data, read what was built and treat the AI as a fast first draft rather than a security review. For a feature-by-feature comparison of what to look for in a builder, see [the main features of an AI app builder](/guides/main-features-of-an-ai-app-builder/).', ], }, { @@ -318,5 +318,5 @@ export default { }, ], - related: ['ai-website-builder', 'use-cases', 'for', 'what-to-build', 'guides/how-to-build-an-app-with-ai'], + related: ['ai-website-builder', 'use-cases', 'for', 'what-to-build', 'guides/how-to-build-an-app-with-ai', 'guides/what-is-an-ai-app-builder'], }; diff --git a/src/content/pages/ai-website-builder.js b/src/content/pages/ai-website-builder.js index ddfcef2..46b518a 100644 --- a/src/content/pages/ai-website-builder.js +++ b/src/content/pages/ai-website-builder.js @@ -2,7 +2,7 @@ import { buildLink, LINKS } from '../site.js'; export default { slug: 'ai-website-builder', - updated: '2026-09-24', + updated: '2026-09-26', priority: 0.9, changefreq: 'weekly', navLabel: 'AI website builder', @@ -188,7 +188,7 @@ export default { a: [ 'An AI website builder turns a plain-language description into a complete website. You say what the site is for, who it is for, and the look you want, and the AI generates the pages, the layout, the copy, and the design, from colors and fonts to images, in minutes rather than weeks.', 'Unlike a template builder, it does not start from someone else\'s layout and ask you to bend it. The site is designed around your description, works on phones and desktops from the start, and comes with the basics a search engine needs already in place.', - 'You don\'t need to know how to code. Once the first version is in front of you, you refine it the same way you started, by asking for changes or clicking the part you want changed, then publish it in one click. The one thing worth doing yourself is reading the copy, since the AI writes a first draft of your business rather than the final word.', + 'You don\'t need to know how to code. Once the first version is in front of you, you refine it the same way you started, by asking for changes or clicking the part you want changed, then publish it in one click. The one thing worth doing yourself is reading the copy, since the AI writes a first draft of your business rather than the final word. [How an AI website builder works](/guides/how-does-an-ai-website-builder-work/) explains what happens at each step.', ], }, { @@ -201,7 +201,7 @@ export default { { q: 'How do I generate a website with AI?', a: [ - 'Describe the site in a sentence or two, watch Puter AI Builder design and build it in the live preview, make it yours by asking for changes or pointing at what should be different, then press Publish. The four steps above walk through each one.', + 'Describe the site in a sentence or two, watch Puter AI Builder design and build it in the live preview, make it yours by asking for changes or pointing at what should be different, then press Publish. The four steps above walk through each one, and [how an AI website builder works](/guides/how-does-an-ai-website-builder-work/) explains what the AI is doing inside each step.', ], }, { @@ -292,5 +292,5 @@ export default { }, ], - related: ['ai-app-builder', 'use-cases', 'for', 'guides/how-to-build-a-website-with-ai', 'what-to-build'], + related: ['ai-app-builder', 'use-cases', 'for', 'guides/how-to-build-a-website-with-ai', 'guides/how-does-an-ai-website-builder-work', 'what-to-build'], }; diff --git a/src/content/pages/features.js b/src/content/pages/features.js index a7bbb1b..44525ca 100644 --- a/src/content/pages/features.js +++ b/src/content/pages/features.js @@ -252,11 +252,11 @@ export default { { type: 'cta', heading: 'The feature list is shorter than the thing it describes', - body: 'Two minutes with the builder tells you more than this page can.', + body: 'Two minutes with the builder tells you more than this page can. For what each feature is for and how to compare builders on them, read [the main features of an AI app builder](/guides/main-features-of-an-ai-app-builder/).', label: 'Open the builder', href: buildLink(''), }, ], - related: ['ai-app-builder', 'ai-website-builder', 'what-to-build', 'guides'], + related: ['ai-app-builder', 'ai-website-builder', 'guides/main-features-of-an-ai-app-builder', 'what-to-build', 'guides'], }; diff --git a/src/content/pages/guide-ai-app-builder-features.js b/src/content/pages/guide-ai-app-builder-features.js new file mode 100644 index 0000000..2fba358 --- /dev/null +++ b/src/content/pages/guide-ai-app-builder-features.js @@ -0,0 +1,247 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'guides/main-features-of-an-ai-app-builder', + parent: 'guides', + updated: '2026-09-26', + priority: 0.7, + changefreq: 'monthly', + navLabel: 'Main features of an AI app builder', + type: 'guide', + readingTime: '10 min read', + + title: 'Main Features of an AI App Builder, Explained | Puter', + description: + 'The ten features that separate an AI app builder from a demo tool, what each does for you, which matter less than they sound, and a checklist for comparing builders.', + ogTagline: 'Ten features, and which ones matter', + + hero: { + eyebrow: 'Guide', + h1: 'What are the main features of an AI app builder?', + lead: + 'Every AI app builder lists roughly the same features. This guide explains what each one does for you in practice, which ones separate a tool that produces demos from one that produces apps, and which ones sound bigger than they are.', + }, + + sections: [ + { + type: 'prose', + id: 'short-list', + heading: 'The short list', + body: [ + 'The main features of an AI app builder are generation from a description, conversational editing, a live preview, automatic error checking, a backend for data and accounts, editing by pointing, version history, one-click publishing with hosting, ownership of the code, and AI models the app itself can call. The first is what makes it an AI app builder. The rest decide whether what it builds is usable. If you want the definition first, start with [what is an AI app builder](/guides/what-is-an-ai-app-builder/). Websites are covered separately in [how an AI website builder works](/guides/how-does-an-ai-website-builder-work/).', + ], + }, + + { + type: 'prose', + id: 'generation', + heading: '1. Generation from a description', + body: [ + 'The defining feature. You write what the app should do and the model produces the interface, data handling, and logic. What to look for is what "the app" includes. Some builders generate a front end only, which is a prototype. Others generate something with a place to store data and a way to sign in, which is an app. The [AI prototype generator](/ai-prototype-generator/) page explains why Puter AI Builder treats a prototype as the first version of the real thing.', + 'Also look at how it handles an underspecified request. Good builders fill gaps with conventional choices rather than leaving a skeleton, and ask a short round of questions only when something is genuinely open. Puter AI Builder asks at most three, about the product rather than the technology, and lets you skip them.', + ], + }, + + { + type: 'prose', + id: 'conversational-editing', + heading: '2. Conversational editing', + body: [ + 'The first version is never the last. What matters is that the second, tenth, and fortieth changes are as easy as the first. You describe a change and it is made against the existing app rather than regenerated from scratch.', + 'The detail to check is whether the builder edits files surgically or rewrites them. Rewriting gets slow as the project grows and tends to undo earlier fixes. Puter AI Builder splits anything beyond a single page into files and edits only the parts that change.', + ], + }, + + { + type: 'prose', + id: 'live-preview', + heading: '3. A live preview', + body: [ + 'The app runs next to the conversation and reloads with every change. It is the real app, so you can type into it, click through it, and narrow it to phone width.', + 'A preview is the difference between reviewing behavior and reviewing code. You do not need to read a line to know whether the total updates when you delete a row. Without one, you are deploying to find out.', + ], + }, + + { + type: 'prose', + id: 'error-repair', + heading: '4. Automatic error checking and repair', + body: [ + 'Generated code sometimes throws. A builder that loads the app, watches for runtime errors, and sends them back to the model to fix before reporting the change as done removes the most tedious category of problem, the one where it looks finished and breaks on load.', + 'Not every builder does this, and it is worth asking. Puter AI Builder reloads the preview after every change, catches anything it throws, has the model read the file and fix the cause, and checks again. What it does not check is whether the app does what you meant. That review is still yours.', + ], + }, + + { + type: 'prose', + id: 'backend', + heading: '5. A backend for data, accounts, and files', + body: [ + 'An app that forgets everything on reload is a page. Real apps need somewhere to keep records, a way to know who someone is, and often a place to put files. In some builders you connect these yourself, to a database service and an authentication provider. In others they are included.', + 'Included is a large difference in practice. The first version can already save data per user, which is what turns a [form](/ai-form-builder/) into something that collects real responses, and there is nothing to configure, pay for, or maintain separately. Puter AI Builder apps have key-value storage, file storage, accounts, and [serverless workers](' + LINKS.workers + ') for shared data available from the moment the app exists. The trade-off is that people using your app sign in with a [Puter](' + LINKS.puter + ') account to use those features.', + ], + }, + + { + type: 'prose', + id: 'click-to-edit', + heading: '6. Editing by pointing', + body: [ + 'Describing where something is on a screen is slow and error-prone. "The third card in the second row" stops working as soon as the layout changes. Click-to-edit lets you select the exact element in the preview and say what should change about it.', + 'The best versions pair this with direct controls for spacing, color, size, and type, so a two-pixel adjustment is a nudge rather than a sentence. In Puter AI Builder those direct edits are stored in a stylesheet of your own, which later AI changes leave alone.', + ], + }, + + { + type: 'prose', + id: 'version-history', + heading: '7. Version history', + body: [ + 'Every change is a snapshot you can return to. This is what makes it safe to try things. A restructuring that goes wrong costs one click instead of an evening of undoing it by hand.', + 'Check that a restore is itself undoable. Puter AI Builder takes a safety snapshot before restoring, so going back is never a one-way door.', + ], + }, + + { + type: 'prose', + id: 'publishing', + heading: '8. One-click publishing and hosting', + body: [ + 'The app gets a public address with HTTPS when you decide it should, with no hosting account, deploy pipeline, or build step. Updates go live the same way. A private draft link for showing work in progress is a useful companion.', + 'The questions to ask are what hosting costs as usage grows and whether a custom domain is included. Puter AI Builder hosts published apps on puter.site for free. A custom domain means pointing your DNS at the published address or hosting the downloaded files yourself.', + ], + }, + + { + type: 'prose', + id: 'ownership', + heading: '9. Ownership of the output', + body: [ + 'Whether you can download the code, and what it is when you do. Standard files you can open in an editor and host anywhere are a different thing from a proprietary export, or from a front end with no backend behind it.', + 'This is the feature that decides what happens if you outgrow the tool or want a developer to finish the last stretch. Puter AI Builder projects are plain HTML, CSS, and JavaScript with Tailwind from a CDN and no build step, downloadable as a zip at any time, and they run from any static host or straight off your disk.', + ], + }, + + { + type: 'prose', + id: 'ai-models', + heading: '10. AI models the app can call', + body: [ + 'The app you build can itself use AI. A chat assistant over your documents, an image generator, a summarizer, a form that classifies what was typed. [What to build](/what-to-build/) has more of these. In most builders this means getting an API key from a provider, paying for usage, and wiring it in.', + 'In Puter AI Builder, chat, vision, and image generation models are callable from the app with no keys to manage, and the person using the app covers their own usage through their account. [How the user-pays model works](' + LINKS.userPays + ').', + ], + }, + + { + type: 'prose', + id: 'overrated', + heading: 'Features that sound bigger than they are', + body: [ + 'Four appear on most comparison pages and matter less than their placement suggests.', + ], + list: [ + '**Templates.** Useful in a no-code builder, where starting from blank means hours of assembly. In an AI builder the description is the template. A good first prompt produces a better starting point than any gallery, because it is your app rather than someone else\'s.', + '**Native cross-platform deployment.** Publishing to the iOS and Android stores sounds like a large feature. For most internal tools and small products a web app that installs to the home screen does the same job with no review process and instant updates. Native matters when you need device features the web does not have.', + '**Real-time collaborative editing.** Editing one project with several people at once is rarely the bottleneck. What matters more is that the app you build can be multi-user, with sign-in and shared data.', + '**Integration marketplaces.** A long list of connectors is a no-code artifact. A code-generating builder can call any API that has one, so the question is not whether the integration is on a list but whether the model can write it and whether the credentials are handled safely.', + ], + }, + + { + type: 'prose', + id: 'checklist', + heading: 'A checklist for comparing builders', + body: [ + 'Ten questions, one per feature. Answer them from the product rather than the landing page.', + ], + list: [ + 'Does the first version include somewhere to store data and a way to sign in, or only a front end?', + 'Are follow-up changes made against the existing app, or does it regenerate?', + 'Is there a live preview you can use as a visitor would?', + 'Does it catch runtime errors itself, or do you find them?', + 'Can you select an element and change it, or only describe it?', + 'Is every change a version you can return to, and is the restore undoable?', + 'What does publishing cost at ten users, and at ten thousand?', + 'Can you download the code, and what is it when you do?', + 'Can the app call AI models, and who pays for that usage?', + 'If you stopped using the tool tomorrow, what would you still have?', + ], + }, + + { + type: 'prose', + id: 'puter', + heading: 'Where Puter AI Builder stands', + body: [ + 'Against that list, Puter AI Builder includes data, accounts, files, and AI models from the first version, edits existing files rather than regenerating, runs the app in a live preview, catches and repairs runtime errors, supports click-to-edit with direct style controls, snapshots every turn with an undoable restore, publishes free to puter.site, and exports as plain files.', + 'Where it is weaker, for the record. There is no native iOS or Android build, a custom domain takes DNS work or self-hosting, each project belongs to one account so two people cannot edit it at once, and people using your app\'s backend features sign in with a Puter account. The [features page](/features/) has the complete list, and the [walkthrough](/guides/how-to-build-an-app-with-ai/) shows most of them in use on one example app.', + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'Common questions', + items: [ + { + q: 'Can I build a complex app with an AI app builder?', + a: [ + 'You can build a substantial one. Multi-page apps with sign-in, per-user data, shared state, and AI features are within reach of production-first builders, and the [SaaS builder page](/ai-saas-builder/) covers what that looks like for a product people pay for. Complexity shows up as more iteration rather than as a wall. Where you should expect to slow down is on unusual requirements, integrations with old systems, and anything where correctness is hard to check by clicking around.', + ], + }, + { + q: 'Are AI app builders secure and reliable?', + a: [ + 'The hosting, accounts, and storage are as reliable as the platform behind them. The generated code is a draft nobody has reviewed, so treat anything handling money or personal data as needing a human read. Builders that run and check the app before handing it back catch crashes, not vulnerabilities.', + ], + }, + { + q: 'Who owns the app and the data?', + a: [ + 'Read the terms of the specific builder. With Puter AI Builder the code and design are yours and downloadable at any time, and each user\'s data is stored under their own [Puter](' + LINKS.puter + ') account rather than in a database you run or the builder controls.', + ], + }, + { + q: 'What does "full stack" mean for an AI app builder?', + a: [ + 'That it generates both the part people see and the part that stores data, handles sign-in, and runs logic that cannot live in the browser. A front-end-only builder produces something that looks like an app and forgets everything on reload.', + ], + }, + { + q: 'Is built-in hosting a must-have?', + a: [ + 'For most people, yes. Hosting is the step that turns files into something a colleague can open on their phone, and setting it up separately is where non-developers stop. The exception is a team with its own hosting that only wants the code, in which case export matters more than hosting.', + ], + }, + { + q: 'Do I need templates to get started?', + a: [ + 'No. A one-paragraph description of what the app should do, who uses it, and where the data should live produces a better starting point than a template built for someone else. [How to write a build prompt](/guides/how-to-write-a-build-prompt/) has the patterns.', + ], + }, + { + q: 'Is coding knowledge required?', + a: [ + 'Not to build or publish. It helps when judging whether something sensitive was built correctly, and it grows from reading the output of a few dozen changes. [Vibe coding](/vibe-coding/) covers where that boundary sits.', + ], + }, + { + q: 'Are apps built this way scalable?', + a: [ + 'The output is ordinary web code served as static files, which scales as far as any static site does. Data and AI usage are where cost usually grows with users. In Puter AI Builder each user covers their own through their account, so the app\'s cost to you does not rise with its popularity.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Try the features on a real app', + body: 'Describe an app and watch the preview, the error checking, and click-to-edit work on something of yours.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['guides/what-is-an-ai-app-builder', 'ai-app-builder', 'features', 'guides/how-to-build-an-app-with-ai'], +}; diff --git a/src/content/pages/guide-how-ai-website-builder-works.js b/src/content/pages/guide-how-ai-website-builder-works.js new file mode 100644 index 0000000..ced35ca --- /dev/null +++ b/src/content/pages/guide-how-ai-website-builder-works.js @@ -0,0 +1,252 @@ +import { buildLink, LINKS } from '../site.js'; + +const EXAMPLE_PROMPT = + 'Build a one-page site for a neighborhood bakery. Sections: a hero with the name and opening hours, a menu with prices, a gallery, a short about section, a map and address, and a contact form that saves messages to my Puter account. Warm and simple, easy to read on a phone.'; + +export default { + slug: 'guides/how-does-an-ai-website-builder-work', + parent: 'guides', + updated: '2026-09-26', + priority: 0.7, + changefreq: 'monthly', + navLabel: 'How does an AI website builder work?', + type: 'guide', + readingTime: '9 min read', + + title: 'How Does an AI Website Builder Work? | Puter', + description: + 'How AI website builders turn a description into a live site, combine AI assistance with visual editing, and create layouts you can review on phones and desktops.', + ogTagline: 'From a description to a live site', + + hero: { + eyebrow: 'Guide', + h1: 'How does an AI website builder work?', + lead: + 'An AI website builder takes a description of a site in ordinary language and turns it into a working website, with layout, copy, and design chosen for you. This guide explains what happens in between, and why two tools that both call themselves AI website builders can produce very different things.', + }, + + sections: [ + { + type: 'prose', + id: 'short-answer', + heading: 'The short answer', + body: [ + 'An AI website builder reads what you tell it about the site, decides what sections and pages it needs, writes the copy and picks a design, and produces a site you can edit and publish. Depending on the tool, it assembles existing components, generates code, or combines the two. You refine the draft with AI assistance, visual editing, or both.', + 'The details vary by tool, particularly how you edit the result and whether you can download its files. Apps rather than sites are covered in [what is an AI app builder](/guides/what-is-an-ai-app-builder/).', + ], + }, + + { + type: 'prose', + id: 'generation-and-editing', + heading: 'AI generation and visual editing work together', + body: [ + 'How a builder creates the first draft and how you edit it are separate questions. A tool can generate code and still give you visual controls, or assemble a site from existing components and let you revise it through conversation.', + ], + list: [ + '**Assembling components.** The AI arranges templates, sections, and design components, then fills them with copy and images based on your description. The available components and ways to extend them depend on the platform.', + '**Generating code.** The AI writes the page structure, styling, and behavior as code. Puter AI Builder produces HTML, CSS, and JavaScript files this way. Other tools may combine generated code with an existing component library.', + ], + after: [ + 'Either approach can offer AI assistance alongside visual editing. You might ask for a new services section, then use direct controls to adjust its spacing. Check the editing options, hosting, and code export separately; one does not guarantee the others.', + ], + }, + + { + type: 'steps', + id: 'steps', + heading: 'What happens, step by step', + intro: + 'Seven steps, from the first sentence to a live address. The details vary by builder, but the basic workflow is the same.', + items: [ + { + title: 'You describe the site', + body: + 'The input is a sentence or a paragraph, sometimes with attachments such as a logo, photos, or your existing copy. Some builders guide you with questions. Either way, the useful information is the same. What the site is for, who it is for, and what sections it needs.', + }, + { + title: 'The model works out what you meant', + body: + 'A large language model reads the description and infers the parts you did not say. "A site for a two-person landscaping business" implies a services section, a quote form, a service area, and photos of past work, because that is what sites for that kind of business contain. Naming the domain is what makes this step go well, and [how to write a build prompt](/guides/how-to-write-a-build-prompt/) covers the rest.', + }, + { + title: 'It produces the structure', + body: + 'Pages, sections, and their order. The builder may arrange existing components, write the page structure as code, or combine both approaches. A bakery site might need a menu, opening hours, a gallery, and a contact section.', + }, + { + title: 'It writes the copy and picks the design', + body: + 'Headings, body text, calls to action, and placeholder details for anything you did not supply. A palette, type, and spacing are chosen to fit the tone you described, or a default if you did not describe one. Images come from a stock library, an image model, or the files you attached.', + }, + { + title: 'It loads the site in a preview', + body: + 'The assembled pages or generated files load so you can see and use the site. In Puter AI Builder, the preview runs the generated HTML, CSS, and JavaScript. The builder also watches the running page for errors and sends any it finds back to the model to fix before showing you the result.', + }, + { + title: 'You review and change things', + body: + 'Use AI assistance for a change such as adding a section or rewriting the introduction. Use visual editing to adjust a heading, color, or spacing directly. Tools that offer both let you switch between them. Review the site at phone and desktop widths as you make changes.', + }, + { + title: 'You publish', + body: + 'Once you have reviewed the content, links, forms, and mobile layout, publish the site to a hosted address. Hosting and custom-domain options depend on the platform. Some builders also let you download the files and choose your own host.', + }, + ], + }, + + { + type: 'prose', + id: 'technology', + heading: 'What the model is actually doing', + body: [ + 'The word "AI" in the name covers a stack of ordinary parts. The one doing most of the work is a large language model, the same kind that powers a chat assistant, given a long set of instructions about what a good website looks like. Those instructions are where the builder\'s opinions live. Mobile layouts first, readable contrast, one clear call to action, alt text on images, a sensible heading order. The model applies them to your description.', + 'Around the model sit the pieces that turn its output into a working site: component libraries, file editing, a preview, and publishing tools. Some builders also check the running site for errors. Images may come from a stock library, an image model, or your own uploads.', + 'Nothing in this stack understands your business. The model predicts what a good site for your description would contain, based on everything it has read. That is why it is strong on conventional sites and weaker on anything unusual, and why the details only you know, such as prices, hours, and what you actually offer, are the things to supply rather than let it guess.', + ], + }, + + { + type: 'prose', + id: 'control', + heading: 'Refining the site with AI assistance and visual editing', + body: [ + 'The first version is a draft. AI assistance is useful for adding a section, changing its content, or rearranging the page. Visual editing gives you direct control over individual details. Puter AI Builder combines them in three ways.', + ], + list: [ + '**Describe the change.** "Move testimonials above pricing and make the quote button more prominent." Useful for structural changes or changes across several parts of the site. Review the result to make sure the AI applied the change where you intended.', + '**Point at the element.** Click the exact heading, card, or button in the preview and say what should be different. This removes the problem of describing where something is. In Puter AI Builder this is the [element picker](/features/).', + '**Adjust it directly.** Use visual controls for spacing, size, color, and type on the selected element. Puter AI Builder keeps these edits in a stylesheet of your own, so later AI changes leave them alone.', + ], + after: [ + 'If the builder gives you access to the code, there is a fourth option: open the files and edit them. The output of Puter AI Builder is ordinary HTML, CSS, and JavaScript with no build step, so changing a phone number is a text edit, and a developer can take the project over at any point.', + ], + }, + + { + type: 'prose', + id: 'responsive-layouts', + heading: 'How responsive layouts work', + body: [ + 'A responsive layout adapts the same site to different screen sizes. Cards that sit in a row on a desktop can stack on a phone, images shrink to fit, and navigation can collapse into a menu. The builder creates those layout rules through its components or generated styling.', + 'Review the result at both phone and desktop widths. Look for text that is too small, buttons that are hard to tap, images that overflow, and forms that are awkward to use. You can ask the AI for a specific correction, such as "Stack the menu cards on phones and make the contact button full width," then check the result again.', + ], + }, + + { + type: 'prose', + id: 'vs-traditional', + heading: 'AI website builder vs traditional website builder', + body: [ + 'A traditional builder gives you a template and a drag-and-drop editor, and you make every decision by hand. The differences with an AI builder are practical rather than philosophical.', + ], + list: [ + '**Starting point.** A traditional builder starts from a template you picked. An AI builder starts from a draft of your specific site, with your sections and a first pass at your copy.', + '**Time to a first version.** Hours in a traditional builder, spent choosing and arranging. Minutes in an AI builder.', + '**Editing.** A traditional workflow relies on manual edits. AI assistance lets you describe a change, and many builders combine that with visual controls for direct adjustments.', + '**What the site can do.** Check the specific platform. Forms, bookings, payments, and other features may use built-in components, integrations, or generated code, each with its own setup and limits.', + '**Ownership.** AI generation does not guarantee code export. Check whether you can download the site and what services it will still depend on if you host it elsewhere.', + ], + }, + + { + type: 'prose', + id: 'limits', + heading: 'Where it falls short', + body: [ + 'Being clear about the limits is more useful than another paragraph about speed. Four show up repeatedly.', + ], + list: [ + '**Generic output.** A first draft with no direction reads like every other first draft. The fix is to supply the things only you have, your real copy, your photos, your actual prices, and two or three words of tone. Sites that skip this look like AI sites.', + '**Made-up details.** If you do not give it hours, prices, or an address, the model invents plausible ones. Check every fact on the page before publishing. This is the most common mistake with AI-built sites.', + '**Complex functionality.** A store with tax rules, a [membership site with billing](/ai-saas-builder/), or an integration with your booking system needs more setup and testing than a simple page. Check what the platform already supports and what would need custom work. Expect to iterate, and to review what was built.', + '**Judgment about correctness.** In a code-generating builder the code was written for you. Whether it works is checkable by clicking around. Whether it is secure, for a site that handles anything sensitive, is not, and needs a person who can read it.', + ], + }, + + { + type: 'prose', + id: 'puter', + heading: 'How Puter AI Builder does it', + body: [ + 'Here is the concrete version of the steps above in Puter AI Builder. You describe the site, with attachments if you have them. If something is genuinely open, you get one round of up to three questions, which you can skip. The model writes the files, a checklist shows progress, and the preview loads the site as it takes shape.', + 'After every change the preview is reloaded and watched for runtime errors. Anything that throws goes back to the model, which reads the file, fixes the cause, and checks again. You are told a change is done only once the page runs clean. What is not checked is whether the site says what you meant. That review is yours.', + 'Publishing puts the site on its own address on puter.site in one click, and the project can be downloaded as a zip at any time. Two limits to know about. A custom domain means pointing your DNS at the published address or hosting the downloaded files yourself, and each project belongs to one account, so two people cannot edit the same project at once. The [full walkthrough](/guides/how-to-build-a-website-with-ai/) carries one example site from prompt to published address, and the [landing page](/ai-landing-page-builder/) and [portfolio](/ai-portfolio-builder/) pages show what a first version includes for those two kinds of site.', + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'Common questions', + items: [ + { + q: 'How does AI build a website for you?', + a: [ + 'A language model reads your description, decides what sections and pages a site like yours needs, writes the copy, and chooses a design. The builder assembles components, generates code, or combines both. You then refine the draft with AI assistance and the editing controls the tool provides, review it, and publish it.', + ], + }, + { + q: 'Do AI website builders write code?', + a: [ + 'Some generate code, some assemble existing components, and some combine both. Whether you can view, edit, or export the code is a separate question. Puter AI Builder writes HTML, CSS, and JavaScript files that you can download and host elsewhere.', + ], + }, + { + q: 'Are websites made with an AI website builder unique?', + a: [ + 'The structure and copy are generated for your description, so no two are identical. Whether they look distinctive depends on what you supply, and the [profession pages](/for/) show how much naming a specific line of work changes the first version. A site built from a one-line prompt with no images or copy of your own will look like other sites built that way. Real photos, your own words, and a tone direction make more difference than any setting.', + ], + }, + { + q: 'Can I edit the site after the AI builds it?', + a: [ + 'Yes. The available controls depend on the tool: AI assistance, visual editing, and direct code editing can work together. In Puter AI Builder you can describe a change, select an element to edit, or adjust its styling with visual controls. Every change is saved as a version, so an edit that makes things worse is one click to undo.', + ], + }, + { + q: 'How long does it take to build a website with AI?', + a: [ + 'A first version takes a couple of minutes. Getting it right takes as long as the review takes, which for a small business site is usually under an hour spread over a handful of changes. The slow part is gathering your own copy and photos, and that is worth doing before you start.', + ], + }, + { + q: 'How much does an AI website builder cost?', + a: [ + 'Pricing varies by platform. Check generation limits, hosting, and custom-domain costs separately. Puter AI Builder is free with a [Puter](' + LINKS.puter + ') account, including hosting. People who use features of your site that consume storage or AI cover that through their own account. [How that works](' + LINKS.userPays + ').', + ], + }, + { + q: 'Are AI-built websites good for SEO?', + a: [ + 'They can be, but review the finished site to make sure it is search-friendly. Check that each page has a descriptive title, clear headings, useful content, working links, and descriptions for meaningful images. You can ask the AI to help with these details and check what it produces. A responsive layout should also be part of that review. These are checks on the site itself; using an AI builder does not guarantee search rankings.', + ], + }, + { + q: 'Is it legal to use AI to create a website?', + a: [ + 'Yes. You are responsible for the content, the same as if you had written it yourself, so check facts and claims and use images you have the right to use.', + ], + }, + { + q: 'What is the difference between an AI website builder and a no-code builder?', + a: [ + 'A no-code builder gives you components to assemble by hand. An AI builder assembles a first version for you from a description. Many products are both, with AI for the first draft and a no-code editor for refinement. The question worth asking is what you own at the end, a project inside their editor or files you can take with you.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Watch the steps happen', + body: 'Describe a site and see each step in this guide play out in the preview. Free with a Puter account.', + label: 'Open with this prompt', + href: buildLink(EXAMPLE_PROMPT), + }, + ], + + related: ['ai-website-builder', 'guides/how-to-build-a-website-with-ai', 'guides/what-is-an-ai-app-builder', 'vibe-coding'], +}; diff --git a/src/content/pages/guide-what-is-ai-app-builder.js b/src/content/pages/guide-what-is-ai-app-builder.js new file mode 100644 index 0000000..ac3610b --- /dev/null +++ b/src/content/pages/guide-what-is-ai-app-builder.js @@ -0,0 +1,307 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'guides/what-is-an-ai-app-builder', + parent: 'guides', + updated: '2026-09-26', + priority: 0.7, + changefreq: 'monthly', + navLabel: 'What is an AI app builder?', + type: 'guide', + readingTime: '10 min read', + + title: 'What Is an AI App Builder? A Plain Definition | Puter', + description: + 'An AI app builder turns a plain-language description into a working app. How it works, how it differs from no-code tools and coding assistants, and its limits.', + ogTagline: 'The definition, the mechanism, the limits', + + hero: { + eyebrow: 'Guide', + h1: 'What is an AI app builder?', + lead: + 'An AI app builder is software that turns a description of an app into a working one. You say what it should do, and a model writes the screens, the data handling, and the logic, then runs it so you can use it. This guide covers what that means in practice, what it is good at, and what to check before relying on one.', + }, + + sections: [ + { + type: 'prose', + id: 'definition', + heading: 'The definition', + body: [ + 'An AI app builder is a tool that generates a functioning application from a plain-language description. You write what the app should do, and a large language model produces the interface, the data storage, and the logic that connects them, then runs the result so you can try it immediately. You refine it the same way, by describing changes.', + 'Three words in that definition carry the weight. "Functioning" separates it from a design or mockup tool. "Description" separates it from a no-code builder, where you assemble the app yourself. "Generates" separates it from a coding assistant, which helps a developer write code rather than producing an app on its own.', + 'Websites rather than apps are covered in [how an AI website builder works](/guides/how-does-an-ai-website-builder-work/).', + ], + }, + + { + type: 'steps', + id: 'how-it-works', + heading: 'How an AI app builder works', + intro: 'Six steps, and the same loop whether the app is a habit tracker or a client portal.', + items: [ + { + title: 'You describe the app', + body: + 'One paragraph does it. What the app is, who uses it, and the two or three things it must do. "An equipment checkout tracker for a small video team, where I register gear, check it out to a person with a due date, and see what is overdue." Naming the domain matters more than length.', + }, + { + title: 'The model interprets it', + body: + 'It infers the parts you left out. A checkout tracker implies a list of items, a list of people, a status per item, and a way to search. Some builders ask a short round of questions at this point. Puter AI Builder asks at most three, only about the product, and lets you skip them.', + }, + { + title: 'It generates the app', + body: + 'The interface, meaning the screens, forms, and navigation. The data layer, meaning what is stored and how. The logic, meaning what happens when someone taps a button. In most builders this is written as real code in files. In some it is configured inside the platform.', + }, + { + title: 'It runs the result', + body: + 'A preview loads the app next to the conversation. This is the app, not a picture of it. You can type into it and click through it. Some builders also watch the running app for errors and fix them before showing you.', + }, + { + title: 'You iterate', + body: + 'Describe the next change, click an element and say what should be different, or adjust styling directly. Each turn produces a new version. This is where most of the work happens.', + }, + { + title: 'You publish', + body: + 'The app gets a hosted address, usually in one click. Some builders also let you download the code and host it elsewhere.', + }, + ], + }, + + { + type: 'prose', + id: 'what-it-generates', + heading: 'What it generates', + body: [ + 'Vendors draw the lines differently, but a complete AI app builder produces all five of these.', + ], + list: [ + '**An interface.** Layout, forms, tables, navigation, empty states, and a version that works on a phone.', + '**A place for data.** Records that survive a reload. Depending on the builder this is a database it provisions, a storage API it calls, or a connection to a service you bring.', + '**Logic.** Validation, calculations, filtering, and what happens on each action. This is the part that makes it an app rather than a page.', + '**Accounts.** Sign-in, so the app knows who someone is and can keep their data separate. Builders without this produce apps everyone shares anonymously.', + '**Hosting.** A public address, HTTPS, and a way to update the live app.', + ], + after: [ + 'Anything the builder does not generate, you have to bring. A builder that produces only an interface is a prototype tool, however it describes itself. The [feature-by-feature guide](/guides/main-features-of-an-ai-app-builder/) goes through each of these in detail.', + ], + }, + + { + type: 'prose', + id: 'comparison', + heading: 'AI app builder vs no-code builder vs AI coding assistant', + body: [ + 'These three get grouped together and solve different problems.', + ], + list: [ + '**No-code builders** such as Bubble, Glide, Softr, and Knack give you a visual canvas and a set of components. You build the app by hand, which gives you control and takes hours or days. The app lives inside the vendor\'s platform and rarely exports. Several have added AI to generate a starting point, which makes them a hybrid.', + '**AI coding assistants** such as Cursor, GitHub Copilot, and Claude Code help a developer write code in an existing project. They assume you can read code, run a development environment, and deploy the result. They are more capable in the hands of a developer and not usable without one.', + '**AI app builders** such as Puter AI Builder, Lovable, Bolt, Replit, and Base44 generate a whole app from a description, run it, and host it. There is no canvas to learn and no development environment to set up. Many produce standard code you can export, which no-code builders generally do not.', + ], + after: [ + 'The practical question for choosing among them is who will operate the tool. A developer gets more from an assistant. A team that wants fine manual control and does not mind the platform gets a no-code builder. Someone who wants an app they can use this afternoon, and who may want to hand the code to a developer later, gets an AI app builder. The [vibe coding](/vibe-coding/) page covers the related distinction between building by description and AI-assisted coding.', + ], + }, + + { + type: 'prose', + id: 'prototype-vs-production', + heading: 'Prototype-first and production-first', + body: [ + 'Within AI app builders there is a split that matters more than the feature lists. Some are built to produce an impressive demo fast. Others are built to produce an app you can actually run. The first kind generates a front end and stops. The second kind includes data, accounts, and hosting, and gives you the code.', + 'One question sorts them. If you stopped using the tool tomorrow, what would you still have? For a prototype-first builder the answer is a front end with no data behind it. For a production-first builder the answer is a working app and its files.', + 'Puter AI Builder is production-first. The app has accounts, storage, file handling, and AI models available from the first version, is hosted when you publish, and can be downloaded as plain HTML, CSS, and JavaScript at any time.', + ], + }, + + { + type: 'grid', + id: 'what-people-build', + columns: 2, + heading: 'What people build with them', + intro: + 'The common thread is software with a conventional shape. Records, lists, forms, and the actions between them.', + items: [ + { + icon: 'briefcase', + title: 'Internal tools', + body: + 'Trackers, checkout logs, approval queues, and dashboards for a team of four. The [business software](/ai-software-builder/) that was never worth a developer\'s week and now takes an afternoon.', + }, + { + icon: 'users', + title: 'Client portals and CRMs', + body: + 'A place for clients to see their status, upload files, and message you, or a pipeline board for deals, with sign-in so each person sees their own data. The [profession pages](/for/) have examples by line of work.', + }, + { + icon: 'calculator', + title: 'Calculators and planners', + body: + 'Quotes, pricing, schedules, and the recurring decision that currently lives in a spreadsheet nobody enjoys. [What to build](/what-to-build/) has a longer list.', + }, + { + icon: 'zap', + title: 'Prototypes and MVPs', + body: + 'A clickable version of a product idea to show people before committing to it. Because it is a [real, working prototype](/ai-prototype-generator/), it can also become the product.', + }, + { + icon: 'heart', + title: 'Personal utilities', + body: + 'Habit trackers, reading lists, study tools, and [small games](/ai-game-builder/). Low stakes, immediate payoff, and the best way to learn what the tool does.', + }, + { + icon: 'sparkles', + title: 'Apps that use AI', + body: + 'A chat assistant over your own documents, an image tool, a summarizer. Builders with [AI models built in](/features/) make these a one-sentence request.', + }, + ], + }, + + { + type: 'prose', + id: 'limits', + heading: 'Where it works and where it does not', + body: [ + 'AI app builders are strongest on software with a conventional shape, which covers most of what small teams need. They are weaker in four places.', + ], + list: [ + '**Correctness beyond the happy path.** Generated code that runs is not the same as code that handles empty inputs, bad data, and edge cases. Click through your app like an annoyed user before trusting it. Builders that check for runtime errors automatically remove one class of problem, not all of them.', + '**Anything sensitive.** Payments, health records, credentials, and other people\'s personal data need review by someone who can read the code. That is true of code written by a person too, but with generated code nobody has read it yet.', + '**Unusual requirements.** Heavy real-time features, integrations with legacy systems, performance-critical work, and specialized compliance are where the model\'s defaults stop helping. Expect to iterate more, or to bring in a developer for the last stretch, which is only possible if you have the code.', + '**The last ten percent.** A first version in minutes does not mean a finished product in an hour. Getting from working to polished is a conversation of many small turns, and the tools that make that loop fast are the ones worth paying attention to.', + ], + }, + + { + type: 'prose', + id: 'who-for', + heading: 'Who they are for', + body: [ + 'People who understand a problem and do not have a way to build the solution. Operations staff, founders before a first hire, freelancers who want a client portal, teachers, small business owners, and developers who want a first version in minutes rather than a day of setup.', + 'They are a poor fit for teams that need to work on one codebase together in real time, for products with strict brand systems, and for anyone who needs a native iOS or Android app in the stores rather than a web app that installs to the home screen.', + ], + }, + + { + type: 'steps', + id: 'getting-started', + heading: 'How to get started', + intro: 'Five steps, most of which happen before you type a prompt.', + items: [ + { + title: 'Pick a builder and check what you would own', + body: + 'Find out whether the code exports, whether data and accounts are included, and what hosting costs as usage grows. These are the differences that matter in month three.', + }, + { + title: 'Start with a low-stakes problem', + body: + 'A tracker, a calculator, a tool for your own team. You understand the problem, the audience is small, and being wrong is cheap. Save the app that takes payments for after you know how the tool behaves.', + }, + { + title: 'Write one paragraph', + body: + 'What it is, who uses it, the two or three actions it must support, and where the data should live. [How to write a build prompt](/guides/how-to-write-a-build-prompt/) covers the patterns that separate a demo from something usable.', + }, + { + title: 'Review, then iterate in small turns', + body: + 'Use the app end to end, try the empty state, put in bad data, reload the page. Then ask for two or three related changes at a time rather than a list of ten. [The full walkthrough](/guides/how-to-build-an-app-with-ai/) carries one example from prompt to published app.', + }, + { + title: 'Publish when it does the original job', + body: + 'Not when the list of nice-to-haves is empty. People using it will tell you what to build next.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'Common questions', + items: [ + { + q: 'Is an AI app builder the same as a no-code platform?', + a: [ + 'No, though they overlap. A no-code platform is a visual editor where you assemble the app. An AI app builder generates the app from a description. Some no-code platforms have added AI generation, and some AI builders include a visual editor for refinement. The clearest difference is usually what you own at the end. AI builders often produce standard code, and no-code platforms usually do not.', + ], + }, + { + q: 'Do I need to know how to code?', + a: [ + 'To build something useful, no. Everything from the first description to publishing works in plain language. To judge whether what you built is trustworthy for something sensitive, being able to read the code helps, and that skill grows from reading the output of a few dozen changes.', + ], + }, + { + q: 'What is a generative AI app builder, or a no-code AI app builder?', + a: [ + 'Different labels for the same category. "Generative" emphasizes that the model writes the app rather than choosing from templates. "No-code" emphasizes that you do not write anything yourself. Most tools called AI app builders are both.', + ], + }, + { + q: 'Can I build a SaaS product with an AI app builder?', + a: [ + 'You can build the product. Sign-in, per-user data, and the features people pay for are ordinary requests in a production-first builder. Payments are usually handled by linking to a payment provider rather than inside the builder. The [AI SaaS builder page](/ai-saas-builder/) covers the specifics for Puter AI Builder, including the cost model, where each user covers their own storage and AI through their own account.', + ], + }, + { + q: 'Are AI app builders secure?', + a: [ + 'The platform parts, hosting, accounts, and storage, are as secure as the platform behind them. The generated code is as secure as generated code is, which means it should be reviewed for anything that handles money or personal data. Treat the builder as a fast first draft, not as a security review.', + ], + }, + { + q: 'Do I own the app I build?', + a: [ + 'It depends on the tool, and it is the first thing to check. With Puter AI Builder the code, the design, and everything you publish are yours, and the whole project can be downloaded as a zip of standard files at any time. Some builders only export the front end, and some do not export at all.', + ], + }, + { + q: 'Can an AI app builder make a mobile app?', + a: [ + 'Most produce web apps that work on a phone and can be added to the home screen with their own icon. Native iOS and Android apps for the app stores need a builder that specifically supports them. For most internal tools and small products the installable web app does the job and skips the store review.', + ], + }, + { + q: 'Are AI app builders free?', + a: [ + 'Many have a free tier with limits on generations or hosting, and paid plans that scale with usage. Puter AI Builder is free with a [Puter](' + LINKS.puter + ') account, including hosting, and people who use your app cover their own storage and AI through their own account. [How that works](' + LINKS.userPays + ').', + ], + }, + { + q: 'Can ChatGPT build me an app?', + a: [ + 'It can write the code for one. It cannot run it, host it, store its data, or give people a way to sign in, and it cannot see what happens when the code runs. An AI app builder is the same kind of model wrapped in the pieces that turn code into a running app.', + ], + }, + { + q: 'How long does it take?', + a: [ + 'A first working version takes a couple of minutes. A version you would show someone takes a handful of changes. A polished product takes as long as you choose to spend, and the builder does not make that decision for you.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Describe an app and see what comes back', + body: 'Free with a Puter account. Nothing is public until you publish.', + label: 'Open the builder', + href: buildLink(''), + }, + ], + + related: ['ai-app-builder', 'guides/main-features-of-an-ai-app-builder', 'guides/how-to-build-an-app-with-ai', 'vibe-coding'], +}; diff --git a/src/content/pages/guides.js b/src/content/pages/guides.js index 03032fd..837256e 100644 --- a/src/content/pages/guides.js +++ b/src/content/pages/guides.js @@ -1,13 +1,13 @@ export default { slug: 'guides', - updated: '2026-08-15', + updated: '2026-09-26', priority: 0.6, changefreq: 'monthly', navLabel: 'Guides', title: 'Guides: Building Apps and Sites With AI | Puter', description: - 'Practical guides to building with an AI builder: full walkthroughs from prompt to published app and site, plus how to write a prompt that gets what you meant.', + 'Practical guides to building with an AI builder: walkthroughs from prompt to published app, how to write a prompt, and plain explanations of how these tools work.', ogTagline: 'Practical, specific, no filler', hero: { @@ -44,6 +44,27 @@ export default { body: 'The difference between a prompt that produces a demo and one that produces something you can use, with before-and-after examples and the six patterns that account for most of the gap.', }, + { + icon: 'search', + label: 'What is an AI app builder?', + slug: 'guides/what-is-an-ai-app-builder', + body: + 'The definition, the six steps from description to published app, how it differs from no-code tools and coding assistants, and the question that sorts prototype tools from production ones.', + }, + { + icon: 'sliders', + label: 'Main features of an AI app builder', + slug: 'guides/main-features-of-an-ai-app-builder', + body: + 'Ten features explained by what they do for you, four that sound bigger than they are, and a checklist for comparing builders from the product rather than the landing page.', + }, + { + icon: 'globe', + label: 'How does an AI website builder work?', + slug: 'guides/how-does-an-ai-website-builder-work', + body: + 'The seven steps from a description to a live site, how AI assistance and visual editing work together, how layouts adapt to phones and desktops, and what to review before publishing.', + }, { icon: 'sparkles', label: 'What is vibe coding?', diff --git a/src/content/pages/index.js b/src/content/pages/index.js index b0d45f5..26173e0 100644 --- a/src/content/pages/index.js +++ b/src/content/pages/index.js @@ -46,6 +46,9 @@ import guides from './guides.js'; import guideBuildAnApp from './guide-build-an-app.js'; import guideBuildAWebsite from './guide-build-a-website.js'; import guideBuildPrompt from './guide-build-prompt.js'; +import guideHowAiWebsiteBuilderWorks from './guide-how-ai-website-builder-works.js'; +import guideWhatIsAiAppBuilder from './guide-what-is-ai-app-builder.js'; +import guideAiAppBuilderFeatures from './guide-ai-app-builder-features.js'; export const PAGES = [ aiAppBuilder, @@ -81,6 +84,9 @@ export const PAGES = [ guideBuildAnApp, guideBuildAWebsite, guideBuildPrompt, + guideHowAiWebsiteBuilderWorks, + guideWhatIsAiAppBuilder, + guideAiAppBuilderFeatures, ]; export const BY_SLUG = new Map(PAGES.map((p) => [p.slug, p])); diff --git a/src/content/pages/vibe-coding.js b/src/content/pages/vibe-coding.js index feb7c44..0455020 100644 --- a/src/content/pages/vibe-coding.js +++ b/src/content/pages/vibe-coding.js @@ -185,5 +185,5 @@ export default { }, ], - related: ['ai-app-builder', 'guides/how-to-write-a-build-prompt', 'guides/how-to-build-an-app-with-ai', 'what-to-build'], + related: ['ai-app-builder', 'guides/what-is-an-ai-app-builder', 'guides/how-to-write-a-build-prompt', 'guides/how-to-build-an-app-with-ai', 'what-to-build'], }; diff --git a/src/content/site.js b/src/content/site.js index 2255d01..9b8d8db 100644 --- a/src/content/site.js +++ b/src/content/site.js @@ -112,6 +112,8 @@ export const FOOTER_NAV = [ { label: 'Guides', slug: 'guides' }, { label: 'How to build an app with AI', slug: 'guides/how-to-build-an-app-with-ai' }, { label: 'How to write a build prompt', slug: 'guides/how-to-write-a-build-prompt' }, + { label: 'What is an AI app builder?', slug: 'guides/what-is-an-ai-app-builder' }, + { label: 'How does an AI website builder work?', slug: 'guides/how-does-an-ai-website-builder-work' }, { label: 'What is vibe coding?', slug: 'vibe-coding' }, ], },