✨AI Builder Integration

Integrating MeshBase with Replit

Build and deploy full-stack applications with Replit and MeshBase. Perfect for learning, prototyping, and indie hacking—code, deploy, ship, all in your browser.

Why MeshBase + Replit?

🎓Learn by Building

Perfect for students and learners. Build real apps with MeshBase—no local setup, no configuration headaches.

âš¡Instant Deployment

Deploy with one click. Your MeshBase-powered app goes live instantly on Replit hosting.

🤖AI Ghostwriter

Replit's AI helps you write the integration code. Just describe what you want and it generates the MeshBase calls.

🔌Zero Setup

No npm install, no build tools, no deployment pipeline. Code in browser, deploy instantly, done.

What You'll Need

  • ✓A Replit account (free tier works fine)
  • ✓A MeshBase account with content types defined
  • ✓5-10 minutes of your time

Step 1: Create a Replit Project

  1. Go to Replit.com
  2. Click Create Repl
  3. Choose your template:
    • React for frontend apps
    • Node.js for backend APIs
    • Next.js for full-stack apps
  4. Give it a name and click Create Repl

Step 2: Add MeshBase API Key to Secrets

Store your API key securely in Replit Secrets (not in code!).

  1. In your Repl, click the Secrets icon (🔒) in the left sidebar
  2. Click New Secret
  3. Key: MESHBASE_API_KEY
  4. Value: paste your MeshBase API key
  5. Click Add new secret
🔒

Keep It Secret!

Secrets are encrypted and never exposed in public Repls. This is the safe way to store API keys!

Step 3: Let Replit's AI Write the Code

Use Ghostwriter (Replit's AI) to generate the integration code.

🤖

Ask Ghostwriter

Replit's AI will write the integration for you:

  1. Click the Ghostwriter icon or press Ctrl+K
  2. Paste the prompt above
  3. Ghostwriter generates the code
  4. Accept and customize as needed

Tell Ghostwriter

Create a function to fetch blog posts from https://api.meshbase.io/v1/blog-posts using fetch with Bearer token authentication from process.env.MESHBASE_API_KEY

What Ghostwriter might create

Example output (for reference):

// api/meshbase.js
const API_URL = 'https://api.meshbase.io/v1';
const API_KEY = process.env.MESHBASE_API_KEY;

export async function fetchBlogPosts() {
  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');
  return response.json();
}

export async function fetchBlogPost(id) {
  const response = await fetch(`${API_URL}/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 in your React components

import { useState, useEffect } from 'react';
import { fetchBlogPosts } from './api/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>
  );
}

export default BlogList;

Step 4: Deploy & Share

Your app is already deployed!

Every Repl gets a public URL automatically. Click the URL at the top of your Repl to view your live app.

Add content in MeshBase

  1. Go to Content Manager in MeshBase
  2. Create some blog posts
  3. Click Publish
  4. Refresh your Replit app—content appears!
🎉

You're Live!

Your Replit app is now powered by MeshBase. Share the URL, add more content, iterate—it's all live!

Replit-Specific Tips

💤Always-On Repls

Free Repls sleep after inactivity. For production apps, upgrade to Always-On to keep them running 24/7.

🔄Replit Database

You don't need Replit Database! MeshBase is your database. Keep your Repl simple and lightweight.

🎨Multiplayer Coding

Invite collaborators to code together in real-time. Great for pair programming or teaching!

Next Steps