tomczak.dev
Zurück zur Startseite

MockMate MCP

Mock-APIs in Sekunden generieren – direkt in deinem KI-Editor.

Kein Backend-Setup. Keine Konfiguration. Einfach fragen und loslegen. Perfekt für Frontend-Entwickler, die keine Zeit verlieren wollen.

Jetzt installieren Features entdecken

Das bekommst du

Instant Mock-APIs

Beschreibe deine API in natürlicher Sprache – MockMate generiert automatisch realistische Mock-Daten.

Unique API-URLs

Jede Mock-API erhält eine eigene URL, die du direkt in deinem Frontend nutzen kannst.

Volle Editor-Integration

Funktioniert nahtlos mit Cursor AI, Cline, VS Code und GitHub Copilot.

KI-gestützte Datengenerierung

Die integrierte KI versteht deinen Kontext und erstellt passende, realistische Testdaten.

Das Problem, das jeder Frontend-Dev kennt

Du willst nur schnell eine Komponente bauen und testen – aber ohne Daten geht nichts.

Zeitverschwendung

Backend-Setup, Docker, Datenbank-Konfiguration – nur um ein paar Testdaten zu haben? Das dauert Stunden.

Komplexität

JSON-Server, Mirage JS, MSW... Jedes Tool hat seine eigene Lernkurve und Konfiguration.

Dummy-Daten schreiben

Manuell JSON-Dateien mit Testdaten erstellen ist langweilig und die Daten sehen nie realistisch aus.

Die Lösung: MockMate MCP

Ein intelligenter MCP-Server, der mit deinem KI-Editor kommuniziert und Mock-APIs on-the-fly generiert.

Schnelles Setup

Einmal eingerichtet, kannst du in Sekunden Mock-APIs erstellen. Einfache Installation mit npm/yarn und minimale Konfiguration.

  • Setup in unter 5 Minuten
  • Keine Backend-Kenntnisse nötig
  • Funktioniert mit jedem Frontend-Framework

KI-generierte Daten

MockMate nutzt KI, um kontextbezogene, realistische Testdaten zu erstellen – keine generischen "Lorem Ipsum" mehr.

  • Deutsche Namen, Adressen, E-Mails
  • Branchenspezifische Testdaten
  • Anpassbare Datenstruktur

Echte API-Endpoints

Jede generierte Mock-API erhält eine eindeutige URL, die du in deinem Code als echte API nutzen kannst.

  • Unique URLs pro Mock-API
  • CORS aktiviert für Frontend-Zugriff
  • JSON-Response mit Custom-Daten

Volle Kontrolle

Liste, verwalte und lösche deine Mock-APIs jederzeit. Behalte den Überblick über alle aktiven Endpoints.

  • Alle Mocks auflisten
  • Einzelne Mocks löschen
  • Temporäre Daten für Prototyping

Praxis-Beispiele: So nutzt du MockMate

Entdecke, wie andere Entwickler MockMate in ihrem Alltag einsetzen.

Case Study #1: Frontend-Entwicklung ohne Backend

Wie du einen vollständigen E-Commerce Produktkatalog baust, während das Backend noch entwickelt wird.

❌ Die Herausforderung

Du sollst einen Produktkatalog mit Filtern, Suche und Warenkorb für einen Online-Shop bauen. Das Backend-Team arbeitet noch an der API, aber der Kunde will in 3 Tagen eine Demo sehen. Du brauchst realistische Produktdaten, um das Frontend zu entwickeln und zu testen.

✓ Die Lösung mit MockMate

1

Sage deinem KI-Assistenten:

"Erstelle eine Mock-API für 20 Produkte mit Name, Preis, Beschreibung, Kategorie, Bild-URL und Lagerbestand"
2

MockMate generiert automatisch:

{
  "products": [
    {
      "id": 1,
      "name": "Ergonomische Gaming-Maus",
      "price": 79.99,
      "description": "Hochpräzise Gaming-Maus mit 16000 DPI",
      "category": "Gaming",
      "image": "https://via.placeholder.com/400x300",
      "stock": 45
    },
    // ... 19 weitere Produkte
  ]
}

URL: https://n8n.tomczak.dev/webhook/mock-serve/mock/a7x3k-products
3

Nutze die URL direkt in deinem React/Vue/Angular Code:

// React Beispiel
const { data } = await fetch(
  'https://n8n.tomczak.dev/webhook/mock-serve/mock/a7x3k-products'
)
const products = data.products

// Jetzt kannst du dein UI bauen, testen und dem Kunden zeigen!

Ergebnis

  • Frontend vollständig entwickelt und getestet – ohne Warten auf das Backend-Team
  • Erfolgreiche Demo beim Kunden mit realistischen Daten statt Lorem Ipsum
  • Zeitersparnis: 4-6 Stunden (kein Backend-Setup, keine manuellen JSON-Dateien)

Case Study #2: Schnelles Prototyping für Investor-Demo

Wie ein Startup-Team in 2 Tagen einen funktionsfähigen MVP für Investoren gebaut hat.

❌ Die Herausforderung

Ein Startup hat in 2 Tagen ein Pitch-Meeting mit Investoren. Sie brauchen einen funktionierenden Prototypen einer Social-Media-App mit User-Profilen, Posts, Kommentaren und Likes. Kein Zeit für Backend-Entwicklung – nur das Frontend muss funktionieren.

✓ Die Lösung mit MockMate

Das Team nutzt MockMate, um 4 separate Mock-APIs zu erstellen:

/mock/users

15 User-Profile mit Avatar, Bio, Follower-Count

/mock/posts

50 Posts mit Bildern, Text, Likes, Timestamps

/mock/comments

120 Kommentare zu Posts mit Autor-Info

/mock/notifications

30 Benachrichtigungen für User-Interaktionen

Beispiel: Posts-Mock erstellen

// Frage an KI-Assistenten:
"Erstelle einen Mock für 50 Social Media Posts mit
user_id, text, image_url, likes_count, created_at"

// MockMate generiert sofort realistische Posts:
{
  "posts": [
    {
      "id": 1,
      "user_id": 7,
      "text": "Endlich Wochenende! ☀️",
      "image_url": "https://via.placeholder.com/600x400",
      "likes_count": 142,
      "created_at": "2026-01-05T14:30:00Z"
    },
    // ... 49 weitere Posts
  ]
}

Ergebnis

  • Vollständig funktionierender Prototyp in 2 Tagen statt 2 Wochen
  • Investoren waren beeindruckt von der "funktionierenden" App mit realistischen Daten
  • €500K Seed-Funding gesichert – Frontend war der Proof of Concept

Case Study #3: API-Integration Testing mit verschiedenen Datenstrukturen

Wie ein Frontend-Team Error-Handling und Edge Cases testet, bevor die echte API fertig ist.

❌ Die Herausforderung

Du baust ein Dashboard, das Daten von einer Backend-API abruft. Du musst verschiedene Szenarien testen: Erfolgreiche Responses, leere Datensätze, sehr lange Texte, fehlende Felder. Die Backend-API ist noch nicht fertig und kann diese Test-Cases nicht liefern.

✓ Die Lösung mit MockMate

Erstelle mehrere Mock-APIs für verschiedene Test-Szenarien:

Szenario 1: Erfolgreiche Response mit Daten

"Erstelle Mock-API für 10 User mit vollständigen Daten"
→ /mock/users-success

Szenario 2: Leere Ergebnisse

"Erstelle Mock-API die ein leeres User-Array zurückgibt"
→ /mock/users-empty

Szenario 3: Edge Cases (sehr lange Texte, Sonderzeichen)

"Erstelle Mock mit Usern die sehr lange Namen haben (>100 Zeichen)
und Sonderzeichen in E-Mails"
→ /mock/users-edge-cases

💡 Pro-Tipp:

Erstelle separate Mocks für jeden Test-Case. So kannst du in deinem Code einfach zwischen den URLs wechseln und verschiedene Szenarien testen, ohne Code zu ändern.

Ergebnis

  • Alle Edge Cases im Frontend getestet und Error-Handling implementiert – vor Backend-Integration
  • Keine Bugs in Production, weil alle Szenarien bereits im Vorfeld getestet wurden
  • UI/UX für leere States, Fehler und Edge Cases perfekt durchdacht

Für wen ist MockMate gemacht?

Wenn du dich hier wiederfindest, ist MockMate MCP genau für dich.

Frontend-Entwickler

Du baust React, Vue oder Angular Apps und brauchst schnell Testdaten, ohne ein Backend aufzusetzen.

Startup-Teams

Ihr prototyped schnell und wollt nicht auf das Backend-Team warten. MockMate beschleunigt eure Iteration.

Freelancer

Du arbeitest an Kunden-Frontends und brauchst Mock-Daten für Demos und Präsentationen.

AI-Editor Nutzer

Du arbeitest mit Cursor AI, Cline oder GitHub Copilot und willst die Power von MCP-Servern nutzen.

UI/UX Designer

Du baust Prototypen in Code und brauchst realistische Daten, um dein Design zu testen.

Hobby-Entwickler

Du lernst Frontend-Entwicklung und willst nicht mit Backend-Komplexität kämpfen.

Installation in 4 Schritten

MockMate MCP ist in wenigen Minuten einsatzbereit. Wähle deinen Editor.

1

Kostenlosen Account erstellen & API-Key generieren

MockMate nutzt Bearer Token Authentifizierung. Registriere dich kostenlos und generiere deinen API-Schlüssel:

Jetzt kostenlos registrieren Bereits registriert? Anmelden

Wichtig: Nach der Registrierung generierst du im Dashboard deinen API-Schlüssel:

mk_live_xxxxxxxxxx_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Dieser wird als Bearer Token verwendet und muss als Umgebungsvariable MOCKMATE_API_KEY gesetzt werden.

2

Repository klonen

Klone das MockMate Repository an einen beliebigen Ort auf deinem Rechner:

# Klone das Repository
git clone https://github.com/devgio81/MockMate.git

# Ins Verzeichnis wechseln
cd MockMate

💡 Merke dir den Pfad – du brauchst ihn für die Editor-Konfiguration (z.B. /Users/deinname/MockMate)

3

Dependencies installieren

Installiere die benötigten npm-Pakete mit npm oder yarn:

# Mit npm
npm install

# Oder mit yarn
yarn install

⚠️ Dieser Schritt ist notwendig, damit index.ts ausgeführt werden kann. Die Installation dauert nur wenige Sekunden.

4

Editor konfigurieren

Wähle deinen Editor und füge die Konfiguration hinzu:

⌘

Cursor AI

Empfohlen

Öffne ~/.cursor/mcp.json (erstelle die Datei, falls sie nicht existiert) und füge deinen API-Schlüssel hinzu:

{
  "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"
      }
    }
  }
}

💡 Ersetze /pfad/zu/MockMate mit dem tatsächlichen Pfad und mk_live_xxx... mit deinem API-Schlüssel aus dem Dashboard.

Cline (VS Code Extension)

Öffne die Cline-Einstellungen und füge unter "MCP Servers" hinzu:

{
  "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"
      }
    }
  }
}

💡 In VS Code: Cmd+Shift+P → "Cline: Open Settings" → MCP Servers. Vergiss nicht, deinen API-Schlüssel einzutragen.

VS Code + GitHub Copilot

Füge zu deinen VS Code Settings hinzu (settings.json):

// .vscode/settings.json oder User Settings
{
  "mcp.servers": {
    "mockmate": {
      "command": "npx",
      "args": [
        "tsx",
        "${workspaceFolder}/MockMate/index.js",
        "https://n8n.tomczak.dev/webhook/mcp"
      ],
      "env": {
        "MOCKMATE_API_KEY": "mk_live_xxxxxxxxxx_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

💡 MCP-Support in GitHub Copilot ist noch experimental. Prüfe die aktuelle Dokumentation.

4

Loslegen!

Starte deinen Editor neu und frage einfach deinen KI-Assistenten:

// Sage einfach zu deinem KI-Assistenten:

"Erstelle eine Mock-API für /users mit 5 Benutzerdaten"

// MockMate generiert automatisch:
{
  "users": [
    { "id": 1, "name": "Max Mustermann", "email": "max@example.com" },
    { "id": 2, "name": "Anna Schmidt", "email": "anna@example.com" },
    { "id": 3, "name": "Thomas Müller", "email": "thomas@example.com" },
    { "id": 4, "name": "Lisa Weber", "email": "lisa@example.com" },
    { "id": 5, "name": "Peter Fischer", "email": "peter@example.com" }
  ]
}

// Und liefert dir eine unique API-URL:
// https://n8n.tomczak.dev/webhook/mock-serve/mock/39e43ca1-8fa4-cc6d-aa87-9cc2da5d319a-users

Verfügbare MCP-Tools

MockMate stellt drei einfache, aber mächtige Tools bereit.

create_mock_api

Mock erstellen

Erstellt eine neue Mock-API mit deinen gewünschten Daten und liefert eine eindeutige URL zurück.

Parameter:
• slug: "users"
• data: { ... }
list_mock_apis

Mocks auflisten

Zeigt alle aktiven Mock-APIs mit ihren URLs an. Perfekt für den Überblick.

Keine Parameter nötig
delete_mock_api

Mock löschen

Entfernt eine Mock-API, wenn du sie nicht mehr brauchst. Halte deine Mocks sauber.

Parameter:
• public_id: "a7x3k..."

Häufige Fragen

Ist MockMate wirklich kostenlos?

Ja, kostenlos mit Fair Use Policy: 50 Mock-APIs pro Tag erstellen, unbegrenzt abrufen. Alle Mocks laufen 7 Tage. Perfekt für Entwicklung und Prototyping. Erstelle deinen kostenlosen Account im Dashboard.

Wie lange bleiben meine Mock-APIs aktiv?

Mock-APIs sind temporär und werden regelmäßig bereinigt. Für Entwicklung und Prototyping perfekt – für Produktion solltest du ein richtiges Backend nutzen.

Was ist MCP (Model Context Protocol)?

MCP ist ein offenes Protokoll, das KI-Assistenten erlaubt, mit externen Tools zu kommunizieren. Es wurde von Anthropic entwickelt und wird von Cursor AI, Cline und anderen KI-Editoren unterstützt.

Brauche ich Node.js?

Ja, Node.js muss auf deinem Rechner installiert sein. Der MCP-Client läuft lokal und kommuniziert dann mit dem MockMate-Server.

Kann ich eigene Datenstrukturen definieren?

Absolut! Du kannst jede beliebige JSON-Struktur an MockMate übergeben. Die KI kann auch basierend auf deiner Beschreibung passende Daten generieren.

Funktioniert es mit TypeScript?

MockMate liefert JSON-Daten – perfekt für TypeScript. Du kannst die Response direkt typen und in deinem Frontend nutzen.

Bereit, loszulegen?

Installiere MockMate MCP jetzt und generiere deine erste Mock-API in unter 5 Minuten.

Jetzt installierenFragen? Kontaktiere mich