Integrate Bolt with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Bolt?

Bolt.new is StackBlitz's browser-based AI development studio, built for developers who would rather describe an app than hand-code every scaffold. You open the workspace, type a plain-language brief—"Marketing site with a blog in Next.js"—and Bolt's Claude-powered agent assembles a full repository in seconds, complete with routing, state management, and Tailwind styling.

Because the workspace runs on WebContainers, the entire Node.js toolchain lives in your browser; there's no local setup, and hot-reloading feels instant.

Under the hood, Bolt leans on production-ready stacks—React, Vite, or Next.js by default—so the code it produces can drop into any Git workflow. One-click deployment creates a live build on a managed *.bolt.host domain, while built-in hooks connect to Supabase for authentication or data persistence.

You can prototype a CMS-driven MVP during a single coffee break, then export the repository for long-term maintenance. Non-developers appreciate the conversational prompts; seasoned engineers appreciate that they still own every line of generated code.

Why Integrate Bolt with Strapi

Bolt's prompt-driven workspace paired with Strapi v5's headless CMS cuts through the usual frontend tedium. You describe what you want, and the agent scaffolds React, Vite, or Next.js code while the CMS handles your content structure and versioning.

You get working frontends fast. Tell Bolt, "Create a course catalog that displays lessons from my API," and it generates fetch calls, pagination, and UI components in one shot. Strapi's tutorial on building a company site shows how a single prompt spins up an entire marketing stack—logo, nav, blog feed—all connected to your CMS content.

Strapi v5's flattened REST responses work seamlessly with Bolt's generated code. No more data.attributes gymnastics from earlier versions. The CMS is already optimized for API-first development, so Bolt maps JSON fields directly to props. Cleaner output, easier refactors.

The combination accelerates MVP development. Bolt's in-browser WebContainers eliminate local setup hassles. The CMS's quick content modeling gets you from schema to deployable site in an afternoon, not a sprint. Perfect for content-heavy apps like blogs, catalogs, or documentation.

You can mix data sources by building custom integrations. While Bolt's built-in support isn't documented, combining a CMS for editorial content with Supabase for user records is possible with additional configuration in your application logic.

When you're ready to scale, export the Bolt project to GitHub and layer in your team's CI/CD. Bolt writes the first draft, but you own the code from there.

How to Integrate Bolt with Strapi

Bolt's workspace feels like working with an AI pair-programmer, but it still needs a clean, accessible backend to function properly.

You'll spend most of your time in two loops: configuring your CMS so Bolt can communicate with it, then refining prompts until the generated frontend behaves exactly as expected. Treat each loop as iterative rather than a one-time setup, and the integration comes together smoothly.

Prerequisites

Before opening Bolt.new, you'll want to have a few pieces in place. A Bolt.new account works fine on the free tier, and you'll need a Strapi v5 instance accessible via a public URL. Public content should be reachable through the Content API, with permissions configured on the "public" role or through API tokens.

CORS configuration is critical—it must allow requests from *.bolt.new and *.bolt.host, otherwise the browser blocks every API call. From a knowledge perspective, you'll benefit from understanding REST conventions, v5's flattened responses (the .attributes nesting is gone), and the documentId pattern for single-type entries.

Since Bolt runs entirely in the browser, there's no local development environment to manage. This simplicity comes with a tradeoff: your backend endpoint needs to stay stable and accessible during iterations, since you can't fall back to localhost for testing.

Preparing Your Strapi API for Bolt

The CMS ships locked down by default, so you'll want to open it just enough for Bolt to connect. Start by enabling CORS for Bolt domains and any custom preview domains you plan to use later.

Grant read permissions for the collection types you want to surface publicly, but keep write operations behind authenticated roles and tokens. For private content, create API tokens and pass them as headers in Bolt's fetch calls.

A minimal CORS middleware configuration in config/middlewares.js allowing subdomains of 'bolt.new' and 'bolt.host' should use a function for origin and correct options, like this:

1module.exports = [
2  'strapi::errors',
3  {
4    name: 'strapi::cors',
5    config: {
6      origin: (ctx) => {
7        const origin = ctx.request.header.origin;
8        if (
9          origin?.endsWith('.bolt.new') ||
10          origin?.endsWith('.bolt.host')
11        ) {
12          return origin;
13        }
14        return '';
15      },
16      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
17      headers: ['Content-Type', 'Authorization', 'Origin'],
18      keepHeaderOnError: true,
19    },
20  },
21  'strapi::security',
22  'strapi::poweredBy',
23  'strapi::logger',
24  'strapi::query',
25  'strapi::body',
26  'strapi::session',
27];

Test each endpoint in the browser before involving Bolt. Document your content types and field names, and note any relations that require populate parameters like the approach outlined in the populate plugin guide. A few minutes of verification here prevents an hour of prompt debugging later.

Crafting Effective Prompts for Strapi Integration

Bolt doesn't automatically understand your schema—you need to be explicit. A solid prompt includes the API base URL, clarifies that you're using v5, lists the relevant content types, and specifies any relations you want populated. Include documentIds for single types and describe the UI you're building.

Here's an effective example prompt:

1Create a Next.js app that fetches courses from my Strapi v5 REST API at https://api.example.com. 
2Course fields: id, title, description, slug, coverImage, lessons (relation). 
3Responses are flat—no .attributes field. 
4Build a list page with pagination and a detail page at /courses/[slug]. 
5Populate lessons for the detail view and show coverImage via getMediaUrl helper.

When Bolt's first attempt isn't quite right, use the "enhance prompt" option to guide it: "Add search by title," or "Remove /api from the base URL." You can also target specific files ("Only update lib/strapiClient.ts") to preserve previously working components.

Building Your First Strapi-Connected App

Open Bolt, start a fresh project, and input your detailed prompt. Bolt scaffolds a Next.js codebase, installs fetch helpers, and provides a live preview within seconds. Use the enhance feature to provide missing context—the exact endpoint for courses or the need to sort by publishedAt.

Inspect the generated code: you'll typically see a strapiClient.ts wrapping fetch, custom hooks like useCourses, and React components that map JSON fields directly to props. Check the live preview to confirm data flows correctly; the Network tab should show 200 OK responses from your backend, not CORS errors.

Iterate with follow-up prompts. Want pagination? Tell Bolt: "Update the courses page to request ?pagination[page]=1&pagination[pageSize]=10 and render next/prev buttons." Need better styling? "Add Tailwind and convert the course cards." Once everything renders correctly, deploy with one click to a *.bolt.host domain or export to GitHub for a traditional Vercel pipeline, maintaining code ownership throughout the process.

Handling Complex Content Structures

Nested relations, Blocks fields, and media assets require more detailed prompts but follow the same pattern: be specific. For deep relations, ask Bolt to include precise populate parameters: "Populate modules and lessons, but skip instructor bios."

For rich text Blocks, request a renderer: "Map each block type to a React component—Paragraph, Image, Quote—and handle gracefully if a new block type appears." Media handling benefits from a helper that prefixes relative URLs; tell Bolt to create one and reuse it consistently.

Here's a complex prompt example:

1Refactor getCourseBySlug to call /courses?filters[slug][$eq]={slug}&populate[modules][populate]=lessons. 
2Add dynamic routing for lessons at /courses/[courseSlug]/[lessonSlug]. 
3Use a getMediaUrl helper to transform coverImage.url into an absolute path. 
4Render the lesson's richText blocks using a component switch.

Bolt generates TypeScript interfaces matching v5's flat structure, custom hooks with the correct populate chain, and updates routes accordingly. If you want to preserve critical files, mention "Lock strapiClient.ts before proceeding" to prevent later prompts from breaking core logic.

Testing and Deploying Your Integration

Bolt's live preview lets you verify requests without leaving the browser. Confirm that empty collections show a friendly state, large datasets paginate instead of timing out, and network failures surface readable errors. When everything checks out, deploy directly to *.bolt.host or push to GitHub and let Vercel or Netlify handle builds.

Remember to set NEXT_PUBLIC_STRAPI_URL (and any tokens) as environment variables on the host—hard-coded URLs will cause issues during staging.

After the first deploy, verify API calls, check SSL connectivity, and monitor performance dashboards. Backend logs will reveal any unexpected 401s or populate failures. Regular audits and typed client helpers help maintain a solid Bolt-headless CMS connection over time.

Project Example: Build an Online Learning Platform

Let's build "SkillPath Academy"—an online learning platform where instructors publish courses through a headless CMS while students access content via a Bolt-generated React frontend.

The backend manages four Collection Types: Courses, Modules, Lessons, and Instructors. Editors use Draft & Publish workflow to stage updates without exposing incomplete material. Bolt scaffolds the frontend pages in-browser, and Supabase handles authentication plus lesson progress tracking.

Here's the exact prompt I used:

1Create a Next.js 13 App Router project called "SkillPath Academy."
2Connect to my Strapi v5 REST API at https://api.skillpath.academy.
3Content types:
4  – Course { id, title, slug, coverImage, description, modules (relation) }
5  – Module { id, title, order, lessons (relation) }
6  – Lesson { id, title, slug, content (Blocks), videoUrl }
7  – Instructor { id, name, bio, avatar }
8Use documentId routing: /courses/[courseSlug]/[lessonId].
9Generate a client in src/lib/strapi.ts that reads STRAPI_URL + token.
10Populate "modules.lessons,instructor" for course pages.
11Integrate Supabase auth; gate lesson pages behind login.
12Add a progress bar that writes completion status to Supabase `lesson_progress`.
13Style with Tailwind CSS; keep components in src/components/ui.
14TypeScript everywhere, no any.

Bolt generated a typed client, React hooks, and route files in one pass. The first challenge was handling deep relationships: Courses → Modules → Lessons. I had Bolt replace its default populate=* with the focused populate string above, following populate plugin best practices.

Rendering rich lesson content required another prompt: "map each Blocks type to a React component." This gave me clean converters for paragraphs, images, and embedded videos.

The trickiest part was managing hybrid data—progress tracking in Supabase while content lives in the headless CMS. I kept these systems separate by making the CMS read-only and isolating Supabase mutations in src/lib/progress.ts. This separation prevented the context drift issues that can arise in complex integrations.

The integration delivered rapid UI scaffolding, zero local setup, and code ownership via GitHub export once the prototype was ready. Success came from being explicit in prompts—spelling out every relation, endpoint, and auth rule kept Bolt on track.

For future features like quizzes or certificates, add the new content types first, then iterate prompts until Bolt integrates them. Complex logic, like PDF generation,n will still require manual work.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and Bolt documentation.