How to Integrate Bolt.new with Quip

Quip provides personal access tokens as the simplest authentication method for single-user or internal apps. These tokens grant API access to all content visible to your account — documents you own, documents shared with you, and all content in your organization's Quip instance. To get your personal access token, go to quip.com/dev/token in your browser while logged into your Quip account. The page displays your Personal Access Token immediately — it is a long alphanumeric string unique to your account. Copy it immediately and store it securely. If you do not see quip.com/dev/token, you may be on a Quip plan that does not include API access, or your organization's Quip administrator may have disabled developer tools. Contact your Quip administrator to enable API access for your account. Add the token to your .env file as QUIP_ACCESS_TOKEN without the NEXT_PUBLIC_ prefix. The Quip API base URL is https://platform.quip.com/1. Every API request requires the header Authorization: Bearer {QUIP_ACCESS_TOKEN}. Quip's API also uses OAuth 2.0 for multi-user applications where each user authorizes access to their own Quip content. For OAuth apps, you need API credentials from the Quip developer portal (different from the personal access token page). The OAuth callback flow requires your app to be deployed at a public URL — the Bolt WebContainer preview cannot receive the OAuth callback. For most internal tooling use cases, personal access tokens are simpler and sufficient. Test the connection immediately after setup by calling GET /1/users/current — this returns your Quip user profile including your name, email, and account ID. A successful response confirms the token is valid and properly configured in your environment.

1// lib/quip.ts
2const QUIP_BASE_URL = 'https://platform.quip.com/1';
3
4function getHeaders() {
5  const token = process.env.QUIP_ACCESS_TOKEN;
6  if (!token) throw new Error('QUIP_ACCESS_TOKEN must be set in .env');
7  return {
8    Authorization: `Bearer ${token}`,
9    'Content-Type': 'application/json',
10  };
11}
12
13export async function quipFetch<T = unknown>(
14  path: string,
15  params?: Record<string, string | number>
16): Promise<T> {
17  const url = new URL(`${QUIP_BASE_URL}${path}`);
18  if (params) {
19    Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, String(v)));
20  }
21
22  const response = await fetch(url.toString(), { headers: getHeaders() });
23
24  if (!response.ok) {
25    const err = await response.json().catch(() => ({ error_code: response.status, error_description: response.statusText })) as { error_description?: string };
26    throw new Error(err.error_description || `Quip API error: ${response.status}`);
27  }
28
29  return response.json() as Promise<T>;
30}
31
32export async function quipPost<T = unknown>(path: string, body: Record<string, unknown>): Promise<T> {
33  const params = new URLSearchParams();
34  Object.entries(body).forEach(([k, v]) => params.set(k, String(v)));
35
36  // Quip POST endpoints use application/x-www-form-urlencoded, not JSON
37  const response = await fetch(`${QUIP_BASE_URL}${path}`, {
38    method: 'POST',
39    headers: {
40      Authorization: `Bearer ${process.env.QUIP_ACCESS_TOKEN}`,
41      'Content-Type': 'application/x-www-form-urlencoded',
42    },
43    body: params.toString(),
44  });
45
46  if (!response.ok) {
47    const err = await response.json().catch(() => ({ error_description: response.statusText })) as { error_description?: string };
48    throw new Error(err.error_description || `Quip POST error: ${response.status}`);
49  }
50
51  return response.json() as Promise<T>;
52}

Quip's content model organizes everything as threads (documents and spreadsheets) and folders. The API exposes endpoints for fetching individual threads by ID, listing recent threads, and traversing folder contents. The recent threads endpoint (GET /1/threads/recent) returns threads the current user has recently accessed, sorted by last modification time. This is an excellent starting point for building an activity dashboard — it surfaces the most relevant content without requiring users to specify a folder path. To access a specific folder's contents, first fetch the folder (GET /1/folders/{folderId}) which returns the folder metadata and a children array. The children array contains objects with either thread_id (for documents and spreadsheets) or folder_id (for subfolders). To get the full list of content in a folder, iterate the children array and fetch each thread or subfolder as needed. For browsing your folder tree, start with the root folders. GET /1/users/current returns a user object that includes folder IDs for the user's private folder, starred folder, and desktop (home screen) folder. These IDs let you navigate from the user's home screen downward. Each thread returned by the API includes: id, title, link (direct URL), created_usec and updated_usec timestamps (microseconds, not milliseconds — divide by 1000 for JavaScript Date), author_id, and type ('document' or 'spreadsheet'). For documents, the thread also includes an html field with the document's content as HTML. For spreadsheets, the html field contains the rendered spreadsheet table. Thread IDs in Quip are short alphanumeric strings (about 11 characters). You can compose direct Quip document URLs as https://quip.com/{threadId} or use the link field returned by the API for the fully qualified URL.

1// app/api/quip/recent/route.ts
2import { NextResponse } from 'next/server';
3import { quipFetch } from '@/lib/quip';
4
5interface QuipThread {
6  id: string;
7  title: string;
8  link: string;
9  type: string;
10  author_id: string;
11  created_usec: number;
12  updated_usec: number;
13  sharing: { company_mode?: string };
14}
15
16interface QuipRecentResponse {
17  [threadId: string]: QuipThread;
18}
19
20let recentCache: { data: unknown; expiresAt: number } | null = null;
21
22export async function GET() {
23  if (recentCache && Date.now() < recentCache.expiresAt) {
24    return NextResponse.json(recentCache.data);
25  }
26
27  try {
28    const threads = await quipFetch<QuipRecentResponse>('/threads/recent');
29
30    const result = Object.values(threads)
31      .map((t) => ({
32        id: t.id,
33        title: t.title || 'Untitled',
34        link: t.link,
35        type: t.type,
36        createdAt: new Date(Math.floor(t.created_usec / 1000)).toISOString(),
37        updatedAt: new Date(Math.floor(t.updated_usec / 1000)).toISOString(),
38      }))
39      .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
40
41    const response = { threads: result, total: result.length };
42    recentCache = { data: response, expiresAt: Date.now() + 30_000 };
43    return NextResponse.json(response);
44  } catch (err) {
45    const message = err instanceof Error ? err.message : 'Failed to fetch recent Quip threads';
46    return NextResponse.json({ error: message }, { status: 500 });
47  }
48}

Quip stores and returns document content as HTML in the thread object's html field. This HTML is a clean representation of the document's formatted content — paragraphs, headings, lists, tables, and inline formatting like bold and italic text are all represented as standard HTML tags. Fetch the full thread object to get the HTML content: GET /1/threads/{threadId} returns the thread object including the html field. The HTML content is self-contained and renderable directly in a browser, but includes Quip-specific attributes and data tags that you may want to strip before displaying in your Bolt app. For rendering, use React's dangerouslySetInnerHTML with the HTML from the thread. Since you control the source (Quip documents in your organization), XSS risk is low — but add basic sanitization to remove script tags and event handler attributes as a precaution. The dompurify library handles this well with { ALLOWED_TAGS: [...standard HTML tags...] }. Quip documents can contain embedded tables, which are returned as HTML table elements. Ensure your CSS handles table styling with appropriate borders, padding, and responsive overflow. Inline images in Quip documents are referenced as blobs served from quip.com — they require the user's Quip session cookie to load, so they will not display in your Bolt app unless you proxy the image requests through your API route with your access token in the Authorization header. For spreadsheet threads, the html field contains the spreadsheet rendered as an HTML table. This is a convenient format for display but loses spreadsheet-specific metadata like cell types and formulas. For applications that need to work with spreadsheet data programmatically, the Quip API also provides a separate spreadsheet data endpoint that returns cell values in a structured format.

1// app/api/quip/threads/[id]/route.ts
2import { NextResponse } from 'next/server';
3import { quipFetch } from '@/lib/quip';
4
5interface QuipThreadDetail {
6  id: string;
7  title: string;
8  link: string;
9  type: string;
10  author_id: string;
11  created_usec: number;
12  updated_usec: number;
13  html: string;
14}
15
16function sanitizeQuipHtml(html: string): string {
17  if (!html) return '';
18  return html
19    // Remove script tags and content
20    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
21    // Remove event handler attributes
22    .replace(/\son\w+="[^"]*"/gi, '')
23    // Remove Quip data attributes
24    .replace(/\sdata-[a-z-]+="[^"]*"/gi, '')
25    // Remove empty class attributes
26    .replace(/\sclass=""/gi, '')
27    .trim();
28}
29
30export async function GET(
31  _request: Request,
32  { params }: { params: { id: string } }
33) {
34  try {
35    const thread = await quipFetch<QuipThreadDetail>(`/threads/${params.id}`);
36
37    return NextResponse.json({
38      id: thread.id,
39      title: thread.title || 'Untitled',
40      type: thread.type,
41      link: thread.link,
42      createdAt: new Date(Math.floor(thread.created_usec / 1000)).toISOString(),
43      updatedAt: new Date(Math.floor(thread.updated_usec / 1000)).toISOString(),
44      html: sanitizeQuipHtml(thread.html || ''),
45    });
46  } catch (err) {
47    const message = err instanceof Error ? err.message : 'Failed to fetch thread';
48    return NextResponse.json({ error: message }, { status: 500 });
49  }
50}

Quip's Automation API includes webhook support for real-time notifications when documents are created, modified, or when new messages are added to thread conversations. These webhooks enable event-driven features in your Bolt app — Slack notifications when documents are updated, automatic indexing of new content, or workflow triggers based on document changes. Quip webhooks work by registering a callback URL that Quip will POST to when specified events occur. Registration is done via POST /1/webhooks with the callback URL and the list of events you want to receive. Quip supports events for thread creation, thread modification, message creation, and folder events. The critical requirement for Quip webhooks is that your callback URL must be a publicly accessible HTTP endpoint. The Bolt WebContainer preview URL is a browser-tab runtime that cannot receive incoming POST requests from Quip's servers — this is a fundamental limitation of Bolt's architecture where networking is virtualized through Service Workers inside the browser. Outbound API calls from your Bolt app to Quip work perfectly, but Quip cannot send webhook events back to a WebContainer preview URL. To use Quip webhooks, deploy your Bolt app to Netlify or Bolt Cloud first. Your deployed app gets a stable HTTPS URL. Create your webhook handler route and deploy, then register the deployed URL as the webhook callback via the Quip API or through Quip's Automation settings interface. For development and testing, use polling as an alternative. Poll the /1/threads/recent endpoint every 30-60 seconds to detect newly modified documents. This approach works in the Bolt WebContainer preview and provides near-real-time updates for most use cases without requiring a deployed webhook infrastructure.

1// app/api/quip/webhook/route.ts
2// IMPORTANT: This webhook handler requires deployment to Netlify or Bolt Cloud.
3// Quip cannot send POST requests to the Bolt WebContainer preview URL.
4//
5// After deploying:
6// 1. Register your webhook URL via Quip API:
7//    POST https://platform.quip.com/1/webhooks
8//    with: callback_url=https://yourapp.netlify.app/api/quip/webhook
9// 2. Or register via Quip's Automation tab in your document settings
10//
11// For development, use polling (/api/quip/recent endpoint) instead of webhooks.
12import { NextResponse } from 'next/server';
13
14interface QuipWebhookPayload {
15  type: string;
16  thread_id?: string;
17  user_id?: string;
18  message?: { author_id: string; parts: unknown[] };
19}
20
21export async function POST(request: Request) {
22  const body = await request.json() as QuipWebhookPayload;
23
24  console.log(`[Quip Webhook] Event: ${body.type}, Thread: ${body.thread_id || 'N/A'}`);
25
26  switch (body.type) {
27    case 'thread.created':
28      console.log(`[Quip] New document created: ${body.thread_id}`);
29      // Add logic: index document, notify team, etc.
30      break;
31    case 'thread.modified':
32      console.log(`[Quip] Document modified: ${body.thread_id}`);
33      // Add logic: invalidate cache, send update notification
34      break;
35    case 'message.created':
36      console.log(`[Quip] New message in thread: ${body.thread_id}`);
37      break;
38    default:
39      console.log(`[Quip] Unknown event: ${body.type}`);
40  }
41
42  return NextResponse.json({ received: true });
43}