How to Integrate Lovable with Lucidchart

To use the Lucidchart API, you need to register an application in Lucidchart's developer portal to obtain OAuth2 client credentials. Navigate to developer.lucid.co in your browser and sign in with your Lucidchart account. If you do not see a developer portal, you may need to contact Lucidchart support to enable API access for your account — the REST API is available on Team and Enterprise plans. In the developer portal, click 'Create Application'. Give your application a name (such as 'Lovable Integration') and a description. For the OAuth2 flow, the Edge Function pattern uses the client credentials grant type (machine-to-machine authentication) rather than the authorization code flow. This is appropriate for server-side integrations where you are accessing your own Lucidchart documents, not other users' documents. After creating the application, Lucidchart provides you with a Client ID and a Client Secret. Copy both values — the Client Secret is only shown once in some implementations, so store it immediately in a secure location. You will also need your Lucidchart account's User ID, which can be found in your Lucidchart account settings under Profile → API or in the URL when viewing account settings. The Lucidchart API base URL is https://api.lucid.co.

For the iframe embedding approach — which is the most reliable and performant way to display Lucidchart diagrams in Lovable — you need to enable public sharing on each document you want to embed. In Lucidchart, open the document you want to embed. Click the Share button in the top-right corner of the editor. In the sharing dialog, click 'Advanced' or find the 'Publish' or 'Embed' option. Enable 'Anyone with the link can view' to make the document publicly accessible. Then look for an 'Embed' option which provides an iframe HTML snippet. The embed URL follows the format: https://lucid.app/documents/embedded/YOUR-DOCUMENT-ID. Copy this URL. Store the embed URL in your Lovable app — either hardcoded in a component for a single diagram, or stored in a Supabase table alongside document metadata for a dynamic diagram browser. For an org chart page, you might store the embed URL in an environment variable or Supabase settings table so it can be updated without code changes. Important: Also store your Lucidchart OAuth2 credentials in Cloud Secrets now. Open the Cloud tab in Lovable, go to Secrets, and add three secrets: LUCIDCHART_CLIENT_ID (your OAuth2 client ID), LUCIDCHART_CLIENT_SECRET (your OAuth2 client secret), and LUCIDCHART_USER_ID (your Lucidchart user account ID).

For operations beyond simple embedding — listing documents, fetching page metadata, or programmatically accessing document structure — you need the Edge Function proxy. This function uses OAuth2 client credentials flow: it POSTs your client ID and secret to the Lucidchart token endpoint to get a Bearer access token, then uses that token to call the Lucidchart API endpoints. The Lucidchart API provides endpoints for listing documents owned by a user, retrieving document details (title, pages, creation date), and accessing page-level information. The Edge Function caches the access token in memory during its execution lifetime (Edge Functions are stateless between calls, so the token must be fetched on each cold start or refreshed when expired).

1// supabase/functions/lucidchart-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
9async function getLucidToken(clientId: string, clientSecret: string): Promise<string> {
10  const res = await fetch('https://api.lucid.co/oauth2/token', {
11    method: 'POST',
12    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
13    body: new URLSearchParams({
14      grant_type: 'client_credentials',
15      client_id: clientId,
16      client_secret: clientSecret,
17    }),
18  });
19  if (!res.ok) {
20    const err = await res.text();
21    throw new Error(`OAuth token request failed: ${err}`);
22  }
23  const data = await res.json();
24  return data.access_token;
25}
26
27serve(async (req) => {
28  if (req.method === 'OPTIONS') {
29    return new Response('ok', { headers: corsHeaders });
30  }
31
32  try {
33    const clientId = Deno.env.get('LUCIDCHART_CLIENT_ID');
34    const clientSecret = Deno.env.get('LUCIDCHART_CLIENT_SECRET');
35    const userId = Deno.env.get('LUCIDCHART_USER_ID');
36
37    if (!clientId || !clientSecret || !userId) {
38      return new Response(
39        JSON.stringify({ error: 'Lucidchart credentials not fully configured' }),
40        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
41      );
42    }
43
44    const token = await getLucidToken(clientId, clientSecret);
45    const { action, payload = {} } = await req.json();
46    const apiBase = 'https://api.lucid.co';
47    const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };
48
49    let url = '';
50    switch (action) {
51      case 'list_documents':
52        url = `${apiBase}/users/${userId}/documents`;
53        break;
54      case 'get_document':
55        url = `${apiBase}/documents/${payload.document_id}`;
56        break;
57      case 'get_pages':
58        url = `${apiBase}/documents/${payload.document_id}/pages`;
59        break;
60      default:
61        return new Response(
62          JSON.stringify({ error: `Unknown action: ${action}` }),
63          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64        );
65    }
66
67    const res = await fetch(url, { headers });
68    const data = await res.json();
69
70    return new Response(JSON.stringify(data), {
71      status: res.status,
72      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
73    });
74  } catch (err) {
75    return new Response(
76      JSON.stringify({ error: err.message }),
77      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
78    );
79  }
80});

With both the embedding approach and the API Edge Function in place, ask Lovable to build the diagram viewer interface. For most use cases, the primary interaction is embedding — displaying a Lucidchart diagram in an iframe with the correct dimensions and responsive behavior. The API calls are used to populate a document browser sidebar. The embedding pattern requires careful attention to responsive iframe sizing. Lucidchart diagrams have fixed aspect ratios, so you need to use a padding-based responsive container technique (the 'aspect ratio box' CSS pattern) or set explicit dimensions based on the diagram type. Org charts typically need height proportional to the org depth, while flowcharts may be wider than tall.