How to Integrate Lovable with Mural

The Mural REST API requires OAuth2 authentication. You need to register a developer application to get a client ID and client secret. Navigate to developers.mural.co in your browser and sign in with your Mural account. Click 'Create application' or navigate to the Applications section of the developer portal. Fill in the application details: give it a name like 'Lovable Integration', set a description, and for the OAuth2 redirect URI enter your Lovable project's URL followed by /auth/mural/callback — for example https://your-project.lovable.app/auth/mural/callback. For the Edge Function pattern you are building, you may also use a placeholder URL since you will be generating an access token manually for initial testing. After creating the application, note the Client ID and Client Secret. Also take note of the OAuth2 token endpoint: https://app.mural.co/api/public/v1/authorization/oauth2/token. For a personal single-user integration, you can generate a personal access token from your Mural account settings (Account Settings → Developer) rather than implementing the full OAuth2 authorization code flow. A personal access token is simpler and works like a Bearer token directly. Store all credentials immediately in a secure location — you will add them to Cloud Secrets in the next step.

Add your Mural credentials to Cloud Secrets so the Edge Function can authenticate with the Mural API server-side. Open the Cloud tab in your Lovable project by clicking the '+' icon next to the Preview panel at the top. Navigate to the Secrets section in the Cloud tab sidebar. If you are using a personal access token (simpler approach), add a single secret: MURAL_ACCESS_TOKEN with your personal token as the value. If you are using OAuth2 client credentials, add two secrets: MURAL_CLIENT_ID and MURAL_CLIENT_SECRET. Also add MURAL_WORKSPACE_ID — your Mural workspace ID, visible in the URL when you are logged into Mural (app.mural.co/t/WORKSPACE-ID/). This is the URL slug that identifies your team workspace, not a numeric ID. Lovable's security infrastructure scans all application code for hardcoded API keys and blocks approximately 1,200 per day. Always use Cloud Secrets for Mural credentials — never include access tokens in React component code or Lovable chat prompts where they could be exposed.

Build the Edge Function that authenticates with the Mural API and exposes the operations your Lovable frontend needs. The Mural API base URL is https://app.mural.co/api/public/v1. All requests use Bearer token authentication — pass the token in the Authorization header. The Edge Function needs to support three core operations: listing murals in a room, fetching widgets (sticky notes, text boxes, shapes) from a specific mural, and getting rooms in the workspace. Widget data is the most valuable for data extraction use cases since it contains the text content of sticky notes and other board elements. The Mural widgets endpoint returns an array of all elements on a board with their type, position, size, text content, and properties like background color and vote count. Your frontend can filter this array to find specific types or those within specific frames.

1// supabase/functions/mural-proxy/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders });
12  }
13
14  try {
15    const token = Deno.env.get('MURAL_ACCESS_TOKEN');
16    const workspaceId = Deno.env.get('MURAL_WORKSPACE_ID');
17
18    if (!token || !workspaceId) {
19      return new Response(
20        JSON.stringify({ error: 'MURAL_ACCESS_TOKEN or MURAL_WORKSPACE_ID not configured' }),
21        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
22      );
23    }
24
25    const { action, payload = {} } = await req.json();
26    const base = 'https://app.mural.co/api/public/v1';
27    const headers = {
28      Authorization: `Bearer ${token}`,
29      'Content-Type': 'application/json',
30      Accept: 'application/json',
31    };
32
33    let url = '';
34    switch (action) {
35      case 'list_rooms':
36        url = `${base}/workspaces/${workspaceId}/rooms`;
37        break;
38      case 'list_murals':
39        url = payload.room_id
40          ? `${base}/rooms/${payload.room_id}/murals`
41          : `${base}/workspaces/${workspaceId}/murals`;
42        break;
43      case 'get_mural':
44        url = `${base}/murals/${payload.mural_id}`;
45        break;
46      case 'get_widgets':
47        url = `${base}/murals/${payload.mural_id}/widgets`;
48        break;
49      default:
50        return new Response(
51          JSON.stringify({ error: `Unknown action: ${action}` }),
52          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
53        );
54    }
55
56    const res = await fetch(url, { headers });
57    const data = await res.json();
58
59    return new Response(JSON.stringify(data), {
60      status: res.status,
61      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
62    });
63  } catch (err) {
64    return new Response(
65      JSON.stringify({ error: err.message }),
66      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
67    );
68  }
69});

With the Edge Function deployed, ask Lovable to build both the embedding interface and the data extraction view. For the embedding, Mural provides viewer URLs in the format https://app.mural.co/t/WORKSPACE/m/WORKSPACE/MURAL-ID/view — when public viewing is enabled on a board, this URL can be placed in an iframe for live board viewing. For data extraction, the widget API fetches all elements on a board and your React components can filter and display them as structured content. The most common extraction pattern is filtering for sticky notes (type 'sticky note') and grouping them by their parent frame — this reconstructs the cluster structure visible on the Mural board. Ask Lovable to build a page that combines both: an embedded viewer tab for visual reference and a data tab that extracts and structures the widget content for actionable use.