✨AI Builder Integration

Integrating MeshBase with Bolt.new

Add a powerful content management backend to your Bolt.new-generated application in minutes. No infrastructure setup, no database configuration—just a drop-in API that works.

Why MeshBase + Bolt.new?

⚡Instant Backend

Bolt.new generates full-stack apps lightning-fast. MeshBase gives you production-ready CMS just as quickly.

🎯Zero Config

No database to set up, no backend to deploy. Just define your content types and fetch data.

🔌Works With Any Stack

Bolt.new can generate React, Vue, or vanilla JS—MeshBase works with all of them.

📈Production Ready

Built-in authentication, rate limiting, media management—everything you need to ship.

What You'll Need

  • ✓A Bolt.new-generated application (any framework)
  • ✓A MeshBase account (free plan works fine)
  • ✓5-10 minutes of your time

Step 1: Create Your Content Types

First, define what kind of content your Bolt.new app needs. Let's say you're building a blog.

In your MeshBase dashboard:

  1. Navigate to Content-Type Builder
  2. Click Create New Collection Type
  3. Name it "Blog Post" (API ID will be blog-posts)
  4. Add fields that match what Bolt.new generated
  5. Enable Draft & Publish if you want content approval
  6. Click Save
💡

Pro Tip: Match Your Generated Code

Look at what fields Bolt.new generated in your app. Create matching fields in MeshBase so the integration is seamless.

Step 2: Get Your API Key

You'll need this to authenticate API requests from your Bolt.new app.

  1. Go to Project Settings
  2. Click the API Keys tab
  3. Copy your Public API Key
⚠️

Important: Public Keys Are Safe

This key is safe to use in frontend code. It only allows reading published content. For creating/updating content, you'd need the admin key (keep that secret!).

Step 3: Connect Your Bolt.new App

Now we'll add MeshBase to your Bolt.new-generated code.

🤖

Let Bolt Do It For You!

Don't want to write code manually? Just tell Bolt's AI to add the integration:

💡 Bolt will add the integration for you. The code below is just for reference if you want to see what gets generated!

Tell Bolt

Add MeshBase API integration to fetch blog posts from https://api.meshbase.io/v1/blog-posts with Bearer token authentication using my API key

Create an API service file

Create src/services/meshbase.js:

const MESHBASE_API = 'https://api.meshbase.io/v1';
const API_KEY = 'your-api-key-here';

export async function fetchBlogPosts() {
  const response = await fetch(`${MESHBASE_API}/blog-posts`, {
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
    },
  });
  
  if (!response.ok) throw new Error('Failed to fetch');
  return response.json();
}

export async function fetchBlogPost(id) {
  const response = await fetch(`${MESHBASE_API}/blog-posts/${id}`, {
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
    },
  });
  
  if (!response.ok) throw new Error('Failed to fetch');
  return response.json();
}

Use it in your components

Replace Bolt's mock data with real MeshBase content:

import { useState, useEffect } from 'react';
import { fetchBlogPosts } from './services/meshbase';

function BlogList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchBlogPosts()
      .then(data => setPosts(data.data))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Step 4: Deploy & Add Content

Your Bolt.new app is ready! Now add some content.

Deploy your app

Bolt.new can deploy to Netlify or Vercel with one click. Your MeshBase integration will work anywhere.

Add content in MeshBase

  1. Go to Content Manager → Blog Posts
  2. Click Create New Entry
  3. Fill in your content
  4. Click Publish
🎉

You're Done!

Your content should now appear in your Bolt.new app! Refresh your site to see it live.

Common Patterns

Pagination

// Load 10 posts, skip first 20
const response = await fetch(
  'https://api.meshbase.io/v1/blog-posts?limit=10&skip=20',
  { headers: { Authorization: 'Bearer ...' } }
);

Sorting

// Newest first
const response = await fetch(
  'https://api.meshbase.io/v1/blog-posts?sort=-publishedAt',
  { headers: { Authorization: 'Bearer ...' } }
);

Next Steps