✨AI Code Editor Integration

Integrating MeshBase with Cursor

Use Cursor's AI pair programming to integrate MeshBase into your projects instantly. No infrastructure setup, no database configuration—just natural language instructions and working code.

Why MeshBase + Cursor?

🤖AI-Powered Integration

Ask Cursor's AI to add MeshBase integration. It writes the code, you get the backend.

âš¡Lightning Fast

From "add a CMS" to working integration in minutes. No context switching, no documentation hunting.

🎯Framework Agnostic

React, Vue, Next.js, Svelte—Cursor knows them all. MeshBase works with any framework.

🔌Production Ready

Real API, real auth, real content management—not mock data.

What You'll Need

  • ✓Cursor IDE installed (cursor.sh)
  • ✓A web project open in Cursor (React, Next.js, Vue, etc.)
  • ✓A MeshBase account (free plan works fine)

Step 1: Set Up Your Content Types

First, define what content your app needs in MeshBase.

In your MeshBase dashboard:

  1. Navigate to Content-Type Builder
  2. Click Create New Collection Type
  3. Name it based on what you're building (e.g., "Blog Post", "Product")
  4. Add fields (title, content, images, etc.)
  5. Enable Draft & Publish if you want content workflow
  6. Click Save

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
  4. Save it somewhere—you'll give it to Cursor in a moment

Step 3: Ask Cursor to Add MeshBase

This is where the magic happens. Let Cursor's AI do the integration work.

🤖

Tell Cursor What You Want

Cursor will:

  • Create the API service file
  • Set up authentication
  • Build a custom hook (if you're using React)
  • Update your components to use real data

💡 The code below shows what Cursor might generate for you!

Press Cmd+K (Mac) or Ctrl+K (Windows) and say:

Add MeshBase CMS integration to fetch blog posts from https://api.meshbase.io/v1/blog-posts. Use my API key for Bearer token auth. Create a custom hook for data fetching and use it in the blog listing component.

Example: What Cursor Might Create (React)

lib/meshbase.ts:

const MESHBASE_API = 'https://api.meshbase.io/v1';
const API_KEY = process.env.NEXT_PUBLIC_MESHBASE_KEY;

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

// Hook version
export function usePosts() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchPosts()
      .then(json => setData(json.data))
      .finally(() => setLoading(false));
  }, []);

  return { posts: data, loading };
}

Your Component Gets Updated

Cursor will modify your existing component:

import { usePosts } from '@/lib/meshbase';

export function BlogList() {
  const { posts, loading } = usePosts();

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

  return (
    <div className="grid gap-4">
      {posts?.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}
💡

Pro Tip: Be Specific

The more specific you are with Cursor, the better the result. Tell it which framework you're using, what pattern you prefer (hooks vs. utility functions), and where to put the files.

Step 4: Add Content & Test

Add content in MeshBase

  1. Go to Content Manager in MeshBase
  2. Select your content type
  3. Click Create New Entry
  4. Fill in your content
  5. Click Publish

Test it locally

Run your dev server and check that content loads. Cursor's integration should just work!

🎉

Done!

Your app is now powered by MeshBase! No database setup, no backend deployment—just working content management.

Advanced: Let Cursor Handle Everything

🪄

Complex Integrations Made Easy

Ask Cursor to handle advanced patterns:

  • "Add pagination to the blog list"
  • "Implement search with MeshBase filtering"
  • "Add SSR with Next.js App Router"
  • "Cache MeshBase responses with SWR"
  • "Add error boundaries for API failures"

Cursor knows MeshBase's API patterns and can implement these features automatically!

Example: SSR with Next.js

Ask Cursor: "Convert this to Next.js Server Components with server-side rendering"

// Cursor will generate something like this:
async function getBlogPosts() {
  const res = await fetch('https://api.meshbase.io/v1/blog-posts', {
    headers: { Authorization: 'Bearer ...' },
    next: { revalidate: 60 }
  });
  return res.json();
}

export default async function BlogPage() {
  const { data: posts } = await getBlogPosts();
  
  return (
    <div>
      {posts.map(post => (
        <BlogCard key={post.id} {...post} />
      ))}
    </div>
  );
}

Tips for Cursor Users

✅ Use Environment Variables

Ask Cursor to put your API key in .env.local instead of hardcoding it.

✅ Reference MeshBase Docs

Tell Cursor about MeshBase's API patterns. You can even paste our API reference into chat for context!

✅ Iterate Fast

Don't like what Cursor generated? Just say "make it simpler" or "use a different pattern" and it'll refactor instantly.

Next Steps