MCP med Lovable Cloud

Har du redan ett Lovable-projekt med Supabase-databas och användarkonton? Då sitter du på en potentiell MCP-server. Med TanStack server routes kan du exponera dina tabeller och affärslogik som verktyg — direkt från samma kodbas som driver din webbapp.

Varför Lovable + MCP?

• Ingen separat backend behövs — Lovable Cloud driftar allt.
• Delad auth med webbappen via Supabase RLS.
• En kodbas för både UI och MCP — mindre drift.
• Skala automatiskt via Cloudflare Workers-runtime.

Setup

Installera @modelcontextprotocol/sdk i ditt Lovable-projekt. Skapa en fil src/routes/api/public/mcp.ts som exponerar streaming HTTP-transport. Prefixet /api/public/* kringgår publish-auth så att externa MCP-klienter når endpointen — men vi lägger till egen auth i handlern.

MCP-endpointen

import { createFileRoute } from "@tanstack/react-router";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHttpServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { z } from "zod";

export const Route = createFileRoute("/api/public/mcp")({
  server: {
    handlers: {
      POST: async ({ request }) => {
        const token = request.headers.get("authorization")?.replace("Bearer ", "");
        if (!await verifySupabaseToken(token)) {
          return new Response("Unauthorized", { status: 401 });
        }

        const server = new McpServer({ name: "min-lovable-mcp", version: "1.0.0" });
        server.tool(
          "list_kunder",
          "Listar aktiva kunder för inloggad användare.",
          { limit: z.number().default(20) },
          async ({ limit }) => {
            const rows = await queryKunder(limit);
            return { content: [{ type: "text", text: JSON.stringify(rows) }] };
          },
        );

        const transport = new StreamableHttpServerTransport();
        await server.connect(transport);
        return transport.handleRequest(request);
      },
    },
  },
});

Autentisering

Eftersom endpointen bor under /api/public/* måste vi själva verifiera anroparen. Rekommenderat mönster: låt användaren generera en API-nyckel i din webbapp (en rad i tabellen api_keys med hashad token) och validera nyckeln i handlern innan McpServer-instansen skapas.

Publicering

Publicera projektet i Lovable som vanligt. Din MCP-endpoint blir tillgänglig på https://ditt-projekt.lovable.app/api/public/mcp — stabil URL som externa klienter kan peka på.

Koppla in en klient

{
  "mcpServers": {
    "min-lovable": {
      "transport": "http",
      "url": "https://ditt-projekt.lovable.app/api/public/mcp",
      "headers": { "Authorization": "Bearer sk_..." }
    }
  }
}

Klart — Claude, Cursor och andra HTTP-MCP-klienter kan nu upptäcka och anropa dina verktyg. Vill du lista din integration i katalogen? Skicka in via formuläret så verifierar vi din server.