✨AI Code Editor Integration

Integrating MeshBase with Windsurf

Use Windsurf's AI to integrate MeshBase into your projects instantly. Free tier, Cascade mode, and powerful context understanding—MeshBase integration made easy.

Why MeshBase + Windsurf?

🆓Free Tier Available

Windsurf offers generous free usage. Add MeshBase integration without paying for AI coding assistance.

🌊Cascade Mode

Windsurf's Cascade can edit multiple files at once. Add MeshBase across your entire codebase in one go.

âš¡Fast Context

Windsurf understands your codebase quickly. Point it at MeshBase docs and it writes perfect integration code.

🎯Multi-Framework

React, Vue, Next.js, Svelte—Windsurf knows them all. MeshBase works with every framework Windsurf supports.

What You'll Need

  • ✓Windsurf IDE installed (codeium.com/windsurf)
  • ✓A web project open in Windsurf
  • ✓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 (e.g., "Blog Post", "Product")
  4. Add fields your app needs
  5. 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. Keep it handy for the next step

Step 3: Ask Windsurf to Add MeshBase

Use Windsurf's Cascade mode for the best results.

🌊

Use Cascade Mode

Cascade will:

  • Analyze your project structure
  • Create API helper files
  • Add TypeScript types if you're using TS
  • Update multiple components at once
  • Follow your project's patterns

💡 Cascade can edit multiple files simultaneously—perfect for adding MeshBase across your app!

Open Cascade (Cmd+Shift+P > Cascade) and say:

Add MeshBase CMS integration to this project. Fetch blog posts from https://api.meshbase.io/v1/blog-posts using Bearer token authentication with my API key. Create necessary files (API helpers, types, components) following best practices for this framework.

What Windsurf Might Create

Example for a React project:

// lib/meshbase.ts
const API_URL = import.meta.env.VITE_MESHBASE_API_URL;
const API_KEY = import.meta.env.VITE_MESHBASE_API_KEY;

export interface BlogPost {
  id: string;
  title: string;
  excerpt: string;
  content: string;
}

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

And it will update your components:

// components/BlogList.tsx
import { useState, useEffect } from 'react';
import { fetchBlogPosts, type BlogPost } from '../lib/meshbase';

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

  useEffect(() => {
    fetchBlogPosts()
      .then(setPosts)
      .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>
  );
}
💡

Ask for Refinements

Not happy with the first result? Tell Windsurf: "Add error handling" or "Use React Query instead" and it'll refine the integration instantly.

Step 4: Add Environment Variables

Store your API key securely.

Create .env (or .env.local):

VITE_MESHBASE_API_URL=https://api.meshbase.io/v1
VITE_MESHBASE_API_KEY=your-api-key-here

Prefix depends on your build tool: VITE_ for Vite, REACT_APP_ for CRA, NEXT_PUBLIC_ for Next.js

🎉

Done!

Your app is now powered by MeshBase! Run your dev server and add some content in MeshBase to see it live.

Advanced: Complex Integrations

Windsurf's Cascade mode shines with complex tasks.

🌊

Ask for Complete Features

Cascade can handle complex requests:

  • "Add MeshBase with React Query, loading states, and error boundaries"
  • "Integrate MeshBase with Next.js App Router and Server Components"
  • "Add MeshBase pagination, search, and filtering"
  • "Set up MeshBase with TypeScript strict mode and Zod validation"

Cascade will edit multiple files, add dependencies, and implement the entire feature!

Windsurf-Specific Tips

✅ Use Cascade for Initial Setup

Cascade mode is perfect for adding MeshBase across multiple files. Use chat mode for smaller tweaks.

✅ Reference MeshBase Docs

Tell Windsurf about MeshBase's API patterns. Paste relevant sections from our API docs for better results.

✅ Iterate Quickly

Windsurf is fast. Don't like something? Just ask for changes—"Add error handling", "Make it type-safe", etc.

Next Steps