✨AI Builder Integration

Integrating MeshBase with v0.dev

Turn your v0.dev-generated UI components into data-driven applications. Connect beautiful AI-generated interfaces to MeshBase for instant content management.

Why MeshBase + v0?

🎨Beautiful UI, Real Data

v0 creates stunning interfaces. MeshBase fills them with real content—no more Lorem ipsum.

⚡Component-First

v0 generates React components. MeshBase gives you hooks to fetch data—perfect match.

🚀Production Ready

No mock data. Real API, real authentication, real content management from day one.

🎯Vercel Ecosystem

Built by Vercel. Deploy on Vercel. MeshBase works seamlessly in that workflow.

What You'll Need

  • âś“UI components generated by v0.dev
  • âś“A MeshBase account (free plan works fine)
  • âś“Basic React knowledge (v0 generates React components)

Step 1: Define Your Content Structure

Look at your v0 components and identify what data they need. A blog card? Product listing? Portfolio items?

In your MeshBase dashboard:

  1. Navigate to Content-Type Builder
  2. Click Create New Collection Type
  3. Name it to match what v0 generated (e.g., "Product", "Blog Post")
  4. Add fields that match your component's props/data structure
  5. Enable Draft & Publish if needed
  6. Click Save
đź’ˇ

Match Component Props to Fields

If your v0 component expects:

{title, image, description, price}

Create matching fields in MeshBase for seamless integration!

Step 2: Get Your API Key

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

Safe for Client-Side

This key is safe to use in v0 components. It only allows reading published content—perfect for frontend use.

Step 3: Connect Your v0 Components

Add data fetching to your v0 components.

🤖

Let v0 Do the Heavy Lifting!

v0 can integrate the API for you! Just describe what you need and let it generate the fetch logic.

đź’ˇ The code examples below show what v0 might generate for you.

Tell v0

Modify this component to fetch data from https://api.meshbase.io/v1/products using Bearer token authentication. Use React hooks for data fetching.

Create a custom hook

Create hooks/useMeshBase.js:

import { useState, useEffect } from 'react';

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

export function useMeshBase(endpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`${API_URL}${endpoint}`, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json',
      },
    })
      .then(res => res.json())
      .then(json => setData(json.data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [endpoint]);

  return { data, loading, error };
}

Use it in your v0 components

Replace v0's mock data with real data:

import { useMeshBase } from '@/hooks/useMeshBase';
import { ProductCard } from '@/components/v0/product-card';

export function ProductGrid() {
  const { data: products, loading } = useMeshBase('/products');

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

  return (
    <div className="grid grid-cols-3 gap-4">
      {products?.map(product => (
        <ProductCard
          key={product.id}
          title={product.title}
          image={product.coverImage}
          price={product.price}
          description={product.description}
        />
      ))}
    </div>
  );
}

Step 4: Add Content & Deploy

Add content in MeshBase

  1. Go to Content Manager
  2. Select your content type
  3. Click Create New Entry
  4. Fill in all the fields your v0 component needs
  5. Click Publish

Deploy to Vercel

Since v0 is built by Vercel, deploying to Vercel is seamless. Your MeshBase integration will work perfectly in production.

🎉

Done!

Your v0 components are now powered by real data! No more mock content—it's production-ready.

Advanced Patterns

Server-Side Rendering (Next.js)

If you're using v0 with Next.js, fetch on the server:

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.meshbase.io/v1/products', {
    headers: { Authorization: 'Bearer ...' },
    next: { revalidate: 60 } // Cache for 60s
  });
  return res.json();
}

export default async function ProductsPage() {
  const { data: products } = await getProducts();
  
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(p => <ProductCard {...p} key={p.id} />)}
    </div>
  );
}

Dynamic Routes

// app/products/[id]/page.tsx
async function getProduct(id: string) {
  const res = await fetch(`https://api.meshbase.io/v1/products/${id}`, {
    headers: { Authorization: 'Bearer ...' }
  });
  return res.json();
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  return <ProductDetail {...product} />;
}

Next Steps