✨AI Builder Integration

Integrating MeshBase with Lovable

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

Why MeshBase + Lovable?

⚡Speed

Lovable generates beautiful frontends instantly. MeshBase gives you a backend just as fast.

🎯Zero Infrastructure

No database setup, no backend code. Just define your content types and start fetching data.

🔌API-First

Works with any frontend framework Lovable generates—React, Vue, vanilla JS.

🎨Flexible Content

Define any content structure you need. Blog posts, products, events—you name it.

What You'll Need

  • âś“A Lovable-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 app needs. Let's say you're building a blog generated by Lovable.

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:
    • title (Text, required)
    • slug (URL Slug, unique)
    • content (Rich Text)
    • excerpt (Text)
    • coverImage (Media)
    • publishedAt (Date)
  5. Enable Draft & Publish
  6. Click Save

đź’ˇ Pro tip: Match your content types to what Lovable generated. If your frontend expects a "posts" endpoint, name it "Post" in MeshBase (plural: posts).

Step 2: Get Your API Key

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

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

⚠️ Important: 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 Lovable App

Now we'll add a simple fetch layer to your Lovable-generated app.

🤖

Let the AI Do It For You!

Don't want to write code manually? Just tell Lovable's AI:

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

đź’ˇ The AI will add the integration for you. The code below is just for reference if you want to see what gets generated!

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'; // From Step 2

class MeshBaseAPI {
  constructor() {
    this.baseURL = MESHBASE_API;
    this.apiKey = API_KEY;
  }

  async fetch(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const response = await fetch(url, {
      ...options,
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json',
        ...options.headers,
      },
    });

    if (!response.ok) {
      throw new Error(`API Error: ${response.statusText}`);
    }

    return response.json();
  }

  // Get all blog posts
  async getBlogPosts() {
    return this.fetch('/blog-posts');
  }

  // Get single blog post by ID
  async getBlogPost(id) {
    return this.fetch(`/blog-posts/${id}`);
  }

  // Get blog post by slug
  async getBlogPostBySlug(slug) {
    return this.fetch(`/blog-posts?slug=${slug}`);
  }
}

export default new MeshBaseAPI();

Use it in your components

Example React component (modify based on what Lovable generated):

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

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

  useEffect(() => {
    async function loadPosts() {
      try {
        const response = await meshbase.getBlogPosts();
        setPosts(response.data);
      } catch (error) {
        console.error('Failed to load posts:', error);
      } finally {
        setLoading(false);
      }
    }
    
    loadPosts();
  }, []);

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

  return (
    <div className="blog-grid">
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <a href={`/blog/${post.slug}`}>Read more →</a>
        </article>
      ))}
    </div>
  );
}

Step 4: Deploy & Add Content

You're almost done! Deploy your updated Lovable app and add content through MeshBase.

Deploy your app

Push your changes and let Lovable deploy (or deploy manually to Vercel/Netlify).

Add content

  1. Go back to your MeshBase dashboard
  2. Navigate to Content Manager → Blog Posts
  3. Click Create New Entry
  4. Fill in your content
  5. Click Publish

🎉 Done! Your content should now appear in your Lovable app!

Common Patterns

Pagination

// Load 10 posts, skip first 20
const response = await meshbase.fetch('/blog-posts?limit=10&skip=20');

Filtering by Field

// Find post with specific slug
const response = await meshbase.fetch('/blog-posts?slug=my-post');

Sorting

// Sort by publishedAt, newest first
const response = await meshbase.fetch('/blog-posts?sort=-publishedAt');

Troubleshooting

CORS errors?

MeshBase allows all origins by default for public API keys. If you're still seeing CORS errors, make sure you're using the public API key (not the admin key) in your frontend.

Getting 401 Unauthorized?

Double-check your API key. Make sure you're including it in the Authorization header as Bearer YOUR_KEY.

No data returned?

Make sure your content is published (not just saved as draft). Public API keys only return published content.

Next Steps