How to Integrate Lovable with Quip

Navigate to quip.com/dev/token in your browser while logged into your Quip account. This page shows your personal access token for API access. If you do not see a token, click 'Generate Personal Access Token'. The token is a long alphanumeric string that provides API access scoped to everything your Quip account can see — all documents in shared folders, personal documents, and team threads you have access to. Copy the token and store it somewhere secure immediately. Quip personal access tokens do not expire automatically, but you can regenerate a new one from the same page, which will invalidate the old token — so update your Cloud Secrets whenever you regenerate. For integrations used across a team, consider creating the token under a dedicated Quip account rather than a personal account, so the integration continues working if the personal account changes. The Quip API base URL is https://platform.quip.com and all endpoints use Bearer token authentication in the Authorization header. Key endpoints include /1/oauth/current-user to verify authentication works, /1/threads/{id} for getting a specific thread, /1/folders/{id}/children for listing folder contents, and /1/threads for creating new threads.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview panel, then navigate to the Secrets section. Click 'Add Secret' and create a new secret named QUIP_ACCESS_TOKEN with your personal access token value. This single credential authenticates all Quip API calls. You may also want to add QUIP_FOLDER_ID with the ID of your primary Quip folder — folder IDs are visible in the Quip URL when you open a folder (the alphanumeric string after /folder/ in the URL), and storing it as a secret rather than hardcoding it makes your integration easier to point at different folders without code changes. Lovable's Cloud Secrets are encrypted at rest with SOC 2 Type II and ISO 27001:2022 certified infrastructure. The personal access token grants read and write access to all Quip content your account can see, making it particularly important to keep it out of any frontend code. Lovable's automated security layer blocks approximately 1,200 hardcoded API keys per day from leaking into application code — but storing secrets in the Cloud Secrets panel rather than anywhere in your codebase is the best practice that makes this protection effective. For Salesforce-integrated Quip accounts, the same personal access token works for both standalone Quip API calls and Quip features exposed through Salesforce.

Ask Lovable to create a Supabase Edge Function called quip-api that proxies requests to the Quip API. The function reads the access token from Deno.env.get('QUIP_ACCESS_TOKEN'), accepts an endpoint path, HTTP method, and optional request body, constructs the full URL as https://platform.quip.com/{path}, adds the Authorization: Bearer header, and returns the Quip API response. The Quip API returns thread objects with a thread property containing id, title, type, created_usec, updated_usec, and link. For documents, thread.document contains the content. For spreadsheets, use the spreadsheet-specific endpoints. The function should support both GET requests (for reading thread content and folder listings) and POST requests (for creating threads and adding messages). Add an allowlist of valid Quip API path prefixes (1/threads, 1/folders, 1/messages, 1/users, 1/oauth) to prevent proxy misuse. For the most common operations, the function should handle: GET to 1/threads/{id} for fetching a thread, GET to 1/folders/{id}/children for listing folder contents, POST to 1/threads/new-document for creating a document, POST to 1/messages/new for adding a message to a thread, and GET to 1/threads/{id}/export/pdf for exporting as PDF (returns binary, which should be handled separately).

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8const ALLOWED_PATHS = ["1/threads", "1/folders", "1/messages", "1/users", "1/oauth"];
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
12
13  try {
14    const token = Deno.env.get("QUIP_ACCESS_TOKEN");
15    if (!token) throw new Error("QUIP_ACCESS_TOKEN not configured");
16
17    const { path, method = "GET", params, body: reqBody } = await req.json();
18    if (!path) throw new Error("path is required");
19
20    const allowed = ALLOWED_PATHS.some(p => path.startsWith(p));
21    if (!allowed) throw new Error(`Path not allowed: ${path}`);
22
23    const url = new URL(`https://platform.quip.com/${path}`);
24    if (params) {
25      Object.entries(params as Record<string, string>).forEach(([k, v]) => {
26        url.searchParams.set(k, v);
27      });
28    }
29
30    const fetchOptions: RequestInit = {
31      method,
32      headers: {
33        "Authorization": `Bearer ${token}`,
34        "Content-Type": "application/x-www-form-urlencoded",
35      },
36    };
37
38    if (reqBody && method !== "GET") {
39      // Quip API uses form-encoded bodies for POST requests
40      const formData = new URLSearchParams();
41      Object.entries(reqBody as Record<string, string>).forEach(([k, v]) => {
42        formData.set(k, v);
43      });
44      fetchOptions.body = formData.toString();
45    }
46
47    const response = await fetch(url.toString(), fetchOptions);
48    const data = await response.json();
49
50    if (!response.ok) {
51      throw new Error(data.error_description || data.error || JSON.stringify(data));
52    }
53
54    return new Response(JSON.stringify(data), {
55      headers: { ...corsHeaders, "Content-Type": "application/json" },
56    });
57  } catch (error) {
58    return new Response(
59      JSON.stringify({ error: error.message }),
60      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
61    );
62  }
63});

With the Edge Function working, ask Lovable to build a document management interface. Start with the folder browser: call the Edge Function with path '1/folders/{folderId}/children' to get the list of threads and sub-folders inside your target folder. Each child in the response includes a thread_id and a folder_id — threads are documents and spreadsheets while folder entries are sub-folders. For each thread ID, you may need to fetch the thread details from '1/threads/{threadId}' to get the title, type, and last modified time. Display threads as a document list with type icons (document vs spreadsheet), titles, last modified dates, and quick action buttons for opening in Quip. For the detail view, fetch thread content from '1/threads/{threadId}' which returns the thread.html property containing the rendered HTML of the document — display this in a styled container. For the document creation workflow, ask Lovable to build a form that calls the Edge Function to create a new document. The Quip API creates threads by POSTing form data to '1/threads/new-document' with a content parameter containing HTML content and an optional member_ids parameter to share with specific users. Format the POST body as URL-encoded form data since Quip uses this encoding for its write endpoints rather than JSON.

Quip spreadsheets are one of the most powerful integration targets for Salesforce-connected teams because they often contain live operational data maintained by business users. To read spreadsheet data from Quip, fetch the thread using '1/threads/{threadId}' and examine the thread.spreadsheet property, which contains the spreadsheet data in a structured format. Quip spreadsheets have a columns object and a rows array where each row contains cells keyed by column ID. Map the column IDs to column names from the columns object to build readable data structures. Ask Lovable to build a spreadsheet reader component that fetches a specific Quip spreadsheet, parses the column and row structure, and displays the data in a React table. Add column-level filtering and sorting so users can interact with the data. For updating specific cells in a Quip spreadsheet, use the '1/spreadsheets/update-row' endpoint with the thread ID, row ID, and cell values. This enables two-way sync where your Lovable dashboard can update deal stages or statuses back into Quip. For complex Salesforce-connected Quip workflows — where spreadsheets pull live Salesforce data — RapidDev can help design the right synchronization architecture.