Connect
lovable logo

Lovable

Lovable specializes in full-stack apps with Supabase backends. Pair it with Dock for shared, agent-readable state alongside your app's own DB. REST with a Supabase edge function as the bridge is the cleanest pattern.

Client
Lovable
AI app builder. Supabase-first, REST-friendly.
HTTP JSON-RPC (streamable-http)
Dock MCP
trydock.ai/api/mcp
37 tools · OAuth 2.1 + DCR · Bearer
Auth path
1
Mint a dk_ key in Dock Settings → API keys.
2
Paste it as Authorization: Bearer dk_… in the client config.
3
Client calls Dock MCP directly on every request.

Prerequisites

  • A Lovable project.
  • A Dock dk_ key.
Where to put the key
Lovable · Settings · Secrets · add DOCK_API_KEY. Secrets are injected into Supabase edge functions and server code; never exposed to the client.
Prompt
"Create a Supabase edge function dock-sync that posts a row to Dock whenever a new item is inserted into posts. Use the DOCK_API_KEY secret."
supabase/functions/dock-sync/index.tstypescript
import "jsr:@supabase/functions-js/edge-runtime.d.ts";

Deno.serve(async (req) => {
  const { title, status } = await req.json();
  const r = await fetch(
    "https://trydock.ai/api/workspaces/posts/rows",
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Deno.env.get("DOCK_API_KEY")}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ data: { title, status } }),
    }
  );
  return new Response(await r.text(), { status: r.status });
});

Troubleshooting

Symptom
Fix
Edge function deploys but returns 401
Secrets propagate on deploy, not on save. Trigger a fresh deploy from the Lovable UI after adding DOCK_API_KEY.

Frequently asked questions

How do I connect Dock to Lovable?
Add Dock as a remote MCP server in Lovable. Either let Lovable's OAuth 2.1 + DCR flow handle auth (recommended; no credential ceremony), or paste a scoped Dock `dk_` API key in Lovable's MCP config under the `Authorization: Bearer dk_…` header.
Does Lovable work with Dock's MCP server?
Yes. Dock exposes 43 MCP tools at `https://trydock.ai/api/mcp` over HTTP transport with OAuth 2.1 + DCR and Bearer-token auth. Any MCP-spec-compliant client, including Lovable, discovers them via the standard `tools/list` handshake. Learn more →
How do I limit which Dock workspaces Lovable can write to?
When you mint the `dk_` key for Lovable in Settings → API keys, pick the workspace from the dropdown. The key returns 403 on every other workspace regardless of what the prompt asks. To scope across multiple, mint multiple keys or add the agent as an explicit member of each. Learn more →
How do I see what Lovable did in my Dock workspace?
Open the workspace in your browser. Every row Lovable created or updated is stamped with the agent's identity (orb + name) in the createdBy / updatedBy field. The workspace activity feed shows every action chronologically. Learn more →
How do I undo a row Lovable wrote to Dock?
Open the row, click the kebab menu, choose Delete (soft-delete preserves history). For bulk reverts use the activity feed to find the agent's session and delete its rows in batch. To prevent future writes, revoke Lovable's `dk_` key in Settings → API keys.
Can multiple Lovable sessions share state through Dock?
Yes. Every Lovable session reads and writes the same workspace, so handoffs across machines or across long-running multi-session workflows just work. The Dock workspace IS the shared state; no separate message bus required.
Does Lovable need OAuth or a dk_ API key for Dock?
Either works. OAuth 2.1 + DCR is the recommended path: Lovable hits Dock's discovery endpoint at `/.well-known/oauth-authorization-server` and auto-registers as a client. The `dk_` Bearer token path is fine for owned-code agents and CI scripts; pick whichever fits your stack. Learn more →
Can Lovable generate Next.js apps backed by Dock?
Yes. Lovable's Next.js scaffolds can hit any HTTPS API. In your prompt, ask Lovable to add server actions that call `https://trydock.ai/api/workspaces/<slug>/rows`. Pass `DOCK_API_KEY` via Lovable's env-var settings.
How do I let users of a Lovable-built app read shared Dock data?
If the Dock workspace is `public` or `unlisted`, Lovable can read it without auth (anonymous viewer access). For private workspaces, add Lovable's app as an authenticated client with its own `dk_` key scoped to the workspace.
Can Lovable's auto-deploy app receive Dock webhooks?
Yes. Add a webhook handler route in your Lovable project (Lovable supports Next.js API routes). Register a Dock webhook pointing at the deployed URL; Lovable's preview environment + production both receive events.

Related

Updated