Build a Company Website with Bolt.new and Strapi 5 - Part 1

Introduction

If you’ve ever sat back and watched your AI write code for you, you’re not alone. This practice is often called vibe coding, a term popularized by Andrej Karpathy that captures AI-assisted development.

AI-assisted development tools like Bolt.new, v0 by Vercel, Lovable, and so on can speed up your app development from “idea” to “live prototype” in minutes.

In this guide, you’ll learn how to combine Bolt.new and Strapi 5 to build a full-stack app that fetches content from a real CMS, using Next.js as the frontend framework, giving you hands-on experience with vibe coding.

Tutorial Parts

This tutorial is divided into two parts:

• Part 1 — Planning and Building the Frontend: Using Bolt.new and Strapi 5.
• Part 2 — Connecting Bolt.new to Strapi API and Deploying to Netlify.

What We will Build

We will build a company website using Bolt.new. And by the end of this tutorial, you will have:

• A website that fetches dynamic content from a real Strapi backend.
• A practical understanding of how to prompt, refine and structure AI-generated code with Bolt.new
• A clean foundation you can extend to any web application.

Project Demo

Prerequisites

To follow along, make sure you have:

• Basic Familiarity with HTML, CSS, and JavaScript: Knowing how to work with basic HTML, CSS, and JavaScript will help you understand how the generated code works.
• Experience with Next.js. You can learn more about Next.js by building a real-life project in this tutorial series.
• A Bolt account.

What is Vibe Coding?

Vibe coding is a term coined by Andrej Karpathy, in a famous [Twitter post], to describe the trend of letting AI "take the wheel" when writing code.

Vibe coding means collaborating with AI tools by giving them intent and refining the results through iteration.

This doesn't mean outsourcing your thinking, but about using AI as a pair programmer that can help accelerate your ideation, prototyping and debugging.

What is Bolt?

Bolt is an AI-powered builder for creating web and mobile apps directly from natural language prompts.

It allows developers to:

• Generate full-stack apps in real time with no external editor required.
• Integrate with design tools like Figma for UI consistency.
• Add functionality easily through built-in integrations such as Stripe for payments or GitHub for version control.
• Prototype across platforms,

How Does Bolt Work?

Bolt works through prompt-based development. You describe what you want to create.

For example, when you give it the prompt:

Build a marketing website for a design agency using Next.js and Tailwind CSS.

From there, Bolt:

• Generates the code for your request.
• Runs it instantly in a built-in preview environment.
• Allows you to refine or debug using natural language commands.

You can edit files directly, switch agents (like Claude or v1 Agent), and view the live results in seconds without leaving your browser.

Bolt.new Alternatives

While Bolt.new is one of the most polished AI app builders available, several alternatives explore similar concepts with unique approaches.

Some Bolt.new alternatives include, Lovable.dev, v0 by Vercel, Replit Agent and so on.

Each tool shares the same goal; to let developers move from idea to implementation faster, while maintaining creative control.

Bolt's User Interface and Features

Bolt.new’s interface is designed to make AI-assisted development intuitive, visual, and context-aware.

Here is a quick rundown of Bolt's user interface and some key features:

Interacting with Bolt AI

Bolt’s interface is centered around an AI workspace where you can chat, plan, and edit code in real time. From the left-hand menu, you can view your projects and select which AI agent you want to work with:

• Claude Agent → uses Plan Mode, ideal for structured planning, step-by-step discussions, and scoped implementation.
• v1 Agent (Legacy) → uses Discussion Mode, suited for open-ended conversations and quick edits.

You can attach files, insert reusable prompts, and clear context when switching topics, ensuring the AI stays focused and efficient.

Projects and Files in Bolt

Bolt makes managing and organizing your projects straightforward:

• Create, rename, or delete projects directly from the main sidebar or project header.
• Access settings for hosting, analytics, and environment configuration.
• Edit files using the Code view or upload assets such as images, videos, or documents.

You can also export a project locally or duplicate it to preserve specific configurations.

Lock and Target Features

• Lock: Protects key files or code blocks from unintended edits.
• Target: Focuses Bolt’s attention on a specific file, preventing broad rewrites that waste tokens.

These tools are crucial for maintaining control as your project grows in complexity.

Other features include code highlighting and inspection.

Backups and Reverting Changes in Bolt

Bolt automatically saves backups and maintains a version history, so you can restore previous states without overwriting the current version.

Browser Support

Bolt runs best on Chromium-based browsers such as Chrome, Edge, Brave, Vivaldi, or Opera. Mobile browsers are currently not fully supported.

Integration and Database Support

Bolt supports third-party integrations for authentication, payments, analytics, and design systems.
For databases, you can choose between:

• Bolt Cloud Database: a built-in, no-setup option for quick prototyping.
• Supabase Integration: for developers who need SQL capabilities or external data access.

Publishing Your Project

Beefore August 14, 2025, all Bolt projects were deployed using Netlify by default.
Today, you can export, connect custom hosting, or deploy through supported CI/CD workflows.

This lets you choose between instant preview deployments and production-ready builds, depending on your project’s scope.

Tokens - The Fuel for Vibe Coding

To interact with Bolt or any AI-powered coding environment, you need tokens. Tokens are the smallest units of text (like words or characters) that an AI model processes.

Think of tokens as the "fuel" for your vibe coding or AI development session.

Every time you send a message, receive code, or ask Bolt to analyze your files, tokens are consumed, just like API calls consume bandwidth.

Maximizing Token Usage in Bolt

Efficient token management can make a huge difference, especially in large or collaborative projects.

To learn more about token optimization, visit the Maximizing Token Efficiency guide by Bolt. Here is the summary:

1. Plan your app
2. Use Discussion mode
3. Undo changes using the Version history feature
4. Keep your prompts specific and focused
5. Avoid repeated automated error fix attempts
6. Add functionality incrementally
7. Use the .bolt/ignore file
8. Reduce the size of your project

Let's discuss Bolt pricing for token usage.

Bolt Pricing Plans

Bolt's pricing is based directly on token usage. Each plan determines how many tokens you can use.

As of this writing, Bolt offers four main plans:

• Free plan: Includes 1M tokens per month and public/private projects
• Pro plan: Most popular. Costs $25/month for 1M tokens and includes more features.
• Teams plan: $30 per member. Everything in Pro with each member receiving a monthly token allotment.
• Custom plan: Custom pricing is for larger organizations.

For this tutorial, we’ll use the Teams plan, which includes 10M tokens per month. The Teams plan is ideal for longer and multi-prompt workflows.

If you’re just experimenting, the Free plan is perfect for quick prototypes and learning how token budgeting works.

Visit Bolt's pricing page to learn more.

General Prompting Techniques

Before you start vibe coding, it’s important to understand how to communicate effectively with your AI.

Here are nine general prompting techniques that can dramatically improve of AI-generated results.

1. Context Layering: Give your AI the full project context.
2. Stepwise Prompting: Don't dump everything at once on your AI. Break big tasks into chunks
3. Role Assignment: You should give the AI its persona.
4. Constraint Anchoring: Give the AI clear boundaries and requirements.
5. Comparative Prompting: Ask your AI to generate multiple distinct solutions for a single problem.
6. Chain-of-Thought Emulation: Ask the AI to explain its reasoning before generating your code.
7. Error-Forward Prompting: Forward your errors, stack traces, and linting messages to your AI to leverage its pattern recognition for quick debugging solutions.
8. Pattern Extension: Use examples of existing code conventions to teach AI to generate new code that matches your project's style and structure.
9. Asking your AI: This option is very useful if you are struggling to articulate your prompt.

Using Bolt, we will be combining most of these techniques to achieve better results. So, let's look at the best practices when using Bolt.

Strapi Project Overview and Setup: Company Website

👋 NOTE:
You can skip this section if you already have a live Strapi Cloud project running.

Before we generate our frontend with Bolt.new, we need a backend that Bolt can connect to.

In this tutorial, we will be using a Company Website as an example. Below are the content models and relationships that make up its structure.

Content Model Overview

Diagram 1: Content Model Types

Diagram 2: Content Models and Relationships

In the first diagram, we specified the content model types. And in the second diagram, we have the relationships between every model.

Setting up your Strapi Project

We’ll start with a ready-made Strapi project that includes seed data and configurations.
You can run this locally or deploy it directly to Strapi Cloud.

So, let's use a Strapi page builder Company website example.

Step 1: Clone the Example Project
Clone the Strapi company website example from GitHub:

git clone https://github.com/Theodore-Kelechukwu-Onyejiaku/strapi5-page-builder-example.git

Inside the cloned project, you’ll find a file named company-website-data.tar.gz. This archive contains seed data that will pre-populate your Strapi app thereby saving time on manual content creation.

---

Step 2: Install Dependencies
Install all required dependencies using either npm or yarn:

npm install
#or
yarn install

---

Step 3: Populate Strapi Project with Seed Data
Next, populate your Strapi project using the provided seed data file:

npm run strapi import -- -f company-website-data.tar.gz
# or 
yarn strapi import -f company-website-data.tar.gz

This command automatically imports the prebuilt content models and sample data.

---

Step 4. Start Strapi Project
Once the dependencies are installed and data imported, start your local server:

npm run dev

You should now have a working Strapi instance with preloaded content:

---

Step 5. Deploy to Strapi Cloud
Hosting your Strapi instance on Strapi Cloud makes it publicly accessible. This is essential for connecting Bolt.new to a real CMS API.

Now, you can decide to host your project on Strapi cloud. Check out this guide on Strapi cloud deployment options or see the video below.

Follow the Strapi Cloud deployment guide or watch this quick video overview:

---

Step 6. Transfer Local Data to Strapi Cloud
Once deployed, we’ll transfer our local data to the cloud instance. First, create a Transfer Token from your Strapi Cloud dashboard.

Then, run the transfer command, replacing the destination URL with your Strapi Cloud project URL:

npm run strapi transfer -- --to destinationURL

# or

yarn strapi transfer --to destinationURL

In this tutorial, our destinationURL is https://superb-freedom-8531c68dfe.strapiapp.com/admin. So we will run the command below:

npm run strapi transfer -- --to https://superb-freedom-8531c68dfe.strapiapp.com/admin

When prompted, paste in your transfer token, which you created earlier. After a successful transfer, you’ll see the following confirmation:

You can now verify the imported content in your Strapi Cloud dashboard:

Visit the Data Transfer guide to learn more about Data transfer in Strapi.

---

With your Strapi backend running on the cloud, your API is now publicly accessible.

This means you can connect Bolt.new to your Strapi project’s API URL, thus allowing you to build and preview your frontend dynamically.

In the next section, we’ll prompt Bolt to generate our frontend using this Strapi API as the backend.

Prompt 1— Planning your App

Before diving into code, it’s good practice to help your AI tool understand the context and goal of your project.

In this case, we’ll start by using ChatGPT to help us write a clear, well-scoped prompt for Bolt.new.

Step 1: Generate a Prompt with Context

To make Bolt.new more effective, we first “prime” ChatGPT with context, telling it what Bolt is, what we’re building, and what stack we’re using.

Then, we ask it to create a structured prompt for our company landing page.

Here’s the resulting prompt:

I want to generate a visually creative and complex AI-based company landing page with Bolt.new.

Can you generate the prompt for a very complex landing page with amazing designs and be as creative as you possibly can? The tech stack is Next.js 15, TypeScript, and Tailwind CSS. 

Let's start with the landing page for now. Other pages can come in later.

Step 2: Run the Prompt in Bolt.new

Now, copy and paste the prompt into Bolt.new. Within seconds, Bolt generates a complete landing page using Next.js, TypeScript, and Tailwind CSS, all scaffolded automatically.

Landing page from Bolt.new

This is a best practice when working with AI tools: start small and foundational.

By focusing on a single page first, you allow Bolt to establish consistent styling and structure. This sets a strong base for future iterations.

→ View Full Prompt 1 on GitHub gist.

Prompt 2— Iterative Steps

Now that Bolt has built the landing page, we’ll add structure incrementally.
This iterative process helps you guide the AI’s creativity while keeping full control of the design and logic.

For this step, we’ll focus on creating the Header component. Bolt already generated a Footer component automatically, so we’ll only prompt it for the header.

Once again, we use ChatGPT to refine the header prompt and then paste it into Bolt.new.

After a few seconds, we get a responsive, fully functional header layout.

→ View Full Prompt 2 on GitHub gist.

This step-by-step approach of generating, previewing, and refining reflects the vibe-coding mindset. This mindset means collaborating with your AI, not just instructing it.

Prompt 3— Creating Additional Pages with Plan/Discussion Mode

With the header and landing page ready, it’s time to extend the project.

Here we’ll leverage Bolt’s Plan Mode, which lets you discuss your codebase, generate ideas, and make controlled updates without consuming too many tokens.

Because we’re using the Claude Agent, only Plan Mode is available (the legacy v1 Agent uses Discussion Mode).

Step 1. Ask Bolt to Generate a Plan

Prompt Bolt to identify other pages to create:

Now that I have the landing page and a header component, what other pages can you generate?

Bolt will propose a project plan. If you’re satisfied, you can implement it directly by clicking “Implement Plan”.

Step 2. Adjust for Strapi Integration

In our case, Bolt suggested using the Bolt Database for persistence. However, since we already have Strapi as our backend, we’ll correct that with another prompt:

I want you to create only the pages and use only mock data. Don't integrate Bolt Database backend and authentication

💡 Tip: Bolt may occasionally hallucinate (generate irrelevant results). Keep refining your prompts in Plan Mode until it meets your requirements.

Step 3. Debug and Refine with the Select/Inspect Tool

After the new pages are created, you may notice small layout bugs.

For example:

• The header disappears when navigating between pages.
• The announcement bar is misaligned.

Instead of manually hunting for the issues, use Bolt’s Select/Inspect tool for targeted fixes. This tool lets you visually select an element and prompt Bolt to adjust just that component.

For example:

The Header component disappears upon scrolling or clicking to other pages. Please fix only this.

Then, to simplify the UI for now:

Now remove the announcement bar for now.

And when we preview our app, we can see that the Header component works and that all pages are working.

Other Pages Created by Bolt

Next, let's connect with Strapi backend!

Wrapping Up Part 1

In this first part of the series, we explored the concept of vibe-coding and learned how to use Bolt.new alongside Strapi 5 to set up a real CMS backend and generate the initial version of our company website’s frontend.

We covered Bolt’s interface, features, and prompting best practices while preparing a Strapi Cloud project as the foundation for integration. With our backend ready and frontend structure in place, we’ve built a strong starting point for a full-stack project.

In the next part, we’ll connect the Bolt-generated frontend to Strapi’s API, fetch live data, and publish our project to Netlify. Stay tuned!