MockMate Tutorial: Mock-APIs in 30 Sekunden erstellen – Der ultimative Guide für Entwickler

🚀MockMate: Mock-APIs direkt aus deinem AI-Editor erstellen – in unter 30 Sekunden

Kennst du das? Du entwickelst ein neues Frontend-Feature, brauchst schnell Test-Daten für eine Demo oder möchtest eine neue API-Integration ausprobieren – aber das Backend ist noch nicht fertig. Normalerweise würdest du jetzt JSON Server installieren, Dummy-Daten manuell erstellen und einen lokalen Server starten. Das kostet Zeit. Viel Zeit.

Mit MockMate gehört dieser Workflow der Vergangenheit an. Stell dir vor, du könntest einfach in deinem AI-Editor wie Claude, Cursor oder Cline fragen: "Erstelle mir eine Mock-API mit 10 Produkten" – und 30 Sekunden später hast du eine funktionierende API mit öffentlicher URL. Kein npm install, keine Konfiguration, kein lokaler Server. Einfach nur: fragen, URL bekommen, loslegen.

🎯Warum MockMate? Der Zeit-Vergleich

Lass uns ehrlich sein: Als Entwickler ist unsere Zeit wertvoll. Hier ist ein realistischer Vergleich, wie lange verschiedene Ansätze dauern, um Mock-Daten für ein Projekt bereitzustellen:

Der Sweet Spot von MockMate liegt in der Kombination aus Geschwindigkeit und Flexibilität: Du bekommst die Geschwindigkeit von JSONPlaceholder mit der Flexibilität eines eigenen Servers – ohne Aufwand.

🛠️Praktisches Beispiel: E-Commerce Dashboard in 5 Minuten

Stell dir vor, du bist Entwickler bei einem Startup und sollst dem Gründer bis morgen ein funktionierendes Dashboard-Mockup präsentieren. Du brauchst realistische Produkt-Daten, Bestellungen und Kunden-Statistiken. Hier ist, wie MockMate dir den Tag rettet:

1️⃣Schritt 1: MockMate in deinem Editor einrichten

Die Einrichtung ist super einfach und dauert nur 3 Minuten. MockMate funktioniert mit Claude Desktop, Cursor und Cline (VS Code Extension).

Für Claude Desktop bearbeitest du die Datei ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mockmate": {
      "command": "npx",
      "args": [
        "tsx",
        "/pfad/zu/MockMate/index.ts",
        "https://n8n.tomczak.dev/webhook/mcp"
      ],
      "env": {
        "MOCKMATE_API_KEY": "mk_live_xxxxxxxxxx_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

2️⃣Schritt 2: Erste Mock-API erstellen

Jetzt kommt der magische Moment: Öffne deinen AI-Editor und frage einfach nach Mock-Daten. Die AI versteht natürliche Sprache und erstellt automatisch passende JSON-Strukturen.

MockMate erstellt automatisch eine Mock-API und gibt dir eine öffentliche URL zurück:

✅ Mock-API erfolgreich erstellt!

📡 Mock-URL:
https://n8n.tomczak.dev/webhook/mock/x7k9m-products

🔗 Slug: x7k9m-products
⏱️  TTL: 7 Tage (17.01.2026)
📊 Daten: 15 Produkte

Diese URL kannst du jetzt sofort in deinem Frontend verwenden – kein Backend, kein Server, keine Wartezeit.

3️⃣Schritt 3: Mock-API im Frontend nutzen

Jetzt integrieren wir die Mock-API in ein React-Dashboard. Hier sind drei praktische Code-Beispiele für verschiedene Szenarien:

// Einfacher Fetch-Request
fetch("https://n8n.tomczak.dev/webhook/mock/x7k9m-products")
  .then(response => response.json())
  .then(data => {
    console.log("Products:", data.products);
    // Daten verarbeiten...
  })
  .catch(error => console.error("Error:", error));

// React Component mit TypeScript
import { useEffect, useState } from "react";

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  stock: number;
  imageUrl: string;
}

export default function ProductsTable() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://n8n.tomczak.dev/webhook/mock/x7k9m-products")
      .then(res => res.json())
      .then(data => {
        setProducts(data.products);
        setLoading(false);
      });
  }, []);

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

  return (
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        {products.map(product => (
          <tr key={product.id}>
            <td>{product.name}</td>
            <td>${product.price}</td>
            <td>{product.stock}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// Next.js API Route (Server-Side)
export async function GET() {
  const response = await fetch(
    "https://n8n.tomczak.dev/webhook/mock/x7k9m-products",
    { cache: "no-store" }
  );
  
  const data = await response.json();
  
  return Response.json(data);
}

Das Beste: Diese URLs sind öffentlich zugänglich. Du kannst sie deinem Team teilen, in Code-Reviews verwenden oder direkt in Demos einbinden.

🔥Use Cases: Wann solltest du MockMate verwenden?

MockMate ist nicht für jeden Use Case die perfekte Lösung. Hier sind die Szenarien, in denen MockMate wirklich glänzt:

⚡MockMate vs. Konkurrenz: Der ehrliche Vergleich

Es gibt viele Mock-API-Tools auf dem Markt. Hier ist ein ehrlicher Vergleich, der dir hilft zu entscheiden, welches Tool für deinen Use Case am besten ist:

JSONPlaceholder: Der Klassiker

JSONPlaceholder ist perfekt für schnelle Tests mit Standard-Daten (Posts, Users, Todos). Vorteil: Null Setup, sofort nutzbar. Nachteil: Du bist auf die vordefinierten Daten-Strukturen beschränkt. Nutze JSONPlaceholder wenn du generische Test-Daten brauchst. Nutze MockMate wenn du spezifische Daten für dein Projekt benötigst.

Mocky.io & MockAPI: Die Web-Interfaces

Beide bieten Web-Interfaces zum manuellen Erstellen von Mocks. Vorteil: Keine Installation nötig. Nachteil: Du musst JSON manuell schreiben, durch Web-Forms klicken und URLs kopieren. MockMate macht das in einem Schritt: Fragen, fertig. Der Workflow-Unterschied: Mocky.io = 5 Klicks + Copy-Paste. MockMate = 1 Frage im Editor.

JSON Server: Lokale Entwicklung

JSON Server ist großartig für lokale Entwicklung mit vollem CRUD-Support. Vorteil: Volle Kontrolle, REST-Endpoints, Relationen. Nachteil: Nur localhost, keine öffentliche URL, Setup erforderlich. Nutze JSON Server für komplexe lokale Entwicklung. Nutze MockMate für schnelles Prototyping und öffentliche Demos.

🎓Erweiterte Tipps für Power User

Sobald du die Basics drauf hast, kannst du MockMate noch effizienter nutzen. Hier sind einige Pro-Tipps:

📊Limits & Fair Use Policy

MockMate ist kostenlos für Entwicklung und Prototyping. Hier sind die aktuellen Limits:

Die 7-Tage-TTL ist perfekt für Entwicklungs-Sprints. Nach 7 Tagen wird der Mock automatisch gelöscht – ideal um die Datenbank sauber zu halten. Für längere Verfügbarkeit kannst du einfach einen neuen Mock mit derselben Struktur erstellen.

🚀Fazit: Ist MockMate das richtige Tool für dich?

MockMate ist perfekt für dich, wenn du Frontend-Entwickler bist und schnell realistische Test-Daten brauchst ohne Zeit mit Backend-Setup zu verschwenden. Es glänzt besonders bei Prototyping, Client-Demos und paralleler Frontend/Backend-Entwicklung.

MockMate ist weniger geeignet wenn du komplexe Backend-Logik, Authentifizierung oder persistente Datenbanken brauchst. Für solche Fälle sind Tools wie JSON Server oder ein echtes Backend die bessere Wahl.

❓Häufige Fragen (FAQ)

**Kann ich MockMate in Production verwenden?** MockMate ist für Entwicklung und Prototyping gedacht, nicht für Production. Die 7-Tage-TTL und Fair-Use-Limits sind auf Entwicklungs-Workflows optimiert.

**Welche AI-Editoren werden unterstützt?** Claude Desktop, Cursor und Cline (VS Code Extension) werden offiziell unterstützt. Jeder Editor mit MCP-Support kann MockMate theoretisch nutzen.

**Sind meine Daten sicher?** Mock-Daten sind öffentlich über die URL zugänglich. Speichere keine sensiblen oder persönlichen Daten in MockMate. Es ist für Test-Daten gedacht, nicht für echte User-Daten.

**Kann ich die TTL verlängern?** Aktuell ist die TTL auf 7 Tage fixiert. Du kannst aber einfach einen neuen Mock mit den gleichen Daten erstellen wenn du ihn länger brauchst.

**Was passiert wenn ich das Limit erreiche?** Du kannst maximal 50 neue Mocks pro Tag erstellen. Bestehende Mocks funktionieren weiterhin und haben unbegrenzte Abrufe. Am nächsten Tag wird dein Limit zurückgesetzt.