How to Integrate Google Docs with V0

Google's API access for server-to-server use requires a Service Account — a robot identity managed by Google Cloud that authenticates using a JSON key file rather than user credentials. This is ideal for V0 apps because it works without OAuth user consent flows. First, go to the Google Cloud Console at console.cloud.google.com. If you do not have a project, click New Project and create one with a name like 'V0 Google Docs Integration'. In your project, go to APIs & Services → Library. Search for 'Google Docs API' and click Enable. Next, create the Service Account. Navigate to APIs & Services → Credentials. Click Create Credentials → Service Account. Give it a name like 'v0-docs-integration' and click Create and Continue. For the project role, you can skip adding project roles for now (the Service Account only needs access to specific documents, not project-level permissions). Click Done. You will see your new service account in the list. Click on it to open the details. Go to the Keys tab and click Add Key → Create new key → JSON. Google will download a JSON file containing the service account's credentials. This file includes the private key, client email, and other authentication details. Open the JSON file and note the client_email field — it will look like v0-docs-integration@your-project.iam.gserviceaccount.com. This is the email address you will use to share Google Docs with the service account. For any Google Doc you want your app to access, open it in Google Docs, click Share (top right), and add the service account email as an Editor (for read/write) or Viewer (for read-only). The service account cannot access documents it has not been explicitly shared with.

The Service Account JSON key file cannot be stored as a regular file in your repository — it contains a private key that would be exposed to anyone with repo access. Instead, store the entire JSON content as an environment variable in Vercel. Open the JSON key file in a text editor. You will see a multi-line JSON object with fields like type, project_id, private_key, client_email, and more. You need to store this entire JSON string as a single environment variable value. The challenge is that the JSON contains newlines (the private_key field has \n characters for each line of the RSA key), and raw newlines may cause issues in some environment variable storage systems. The safest approach is to encode the entire JSON as a Base64 string first: in your terminal, run cat your-key-file.json | base64 and copy the output. Store this Base64-encoded string in Vercel as GOOGLE_SERVICE_ACCOUNT_BASE64. Alternatively, you can store the raw JSON string directly as GOOGLE_SERVICE_ACCOUNT_JSON. In this case, copy the entire file contents and paste them as the value. Vercel handles multi-line values correctly in its Dashboard UI when you use the text area input. Also add the Google Doc ID for your target document as GOOGLE_DOCS_DOCUMENT_ID. The document ID is the long alphanumeric string in the Google Doc URL between /d/ and /edit — for example, in https://docs.google.com/document/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms/edit, the ID is 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms. Do not add NEXT_PUBLIC_ to either variable — service account credentials must be server-side only.

Use V0 to build the front-end component for your Google Docs integration. The UI will vary depending on your use case — a read-only document viewer, a form that generates documents, or an editor interface. The key is telling V0 what API endpoints to call. For a content viewer, V0 should generate a component that fetches from /api/google-docs/content and renders the returned text with appropriate formatting. Ask V0 to handle loading states and show the document title, body paragraphs, and last-modified date. For a document generator (like a proposal builder), V0 should generate a form component that collects the required data and posts it to /api/google-docs/generate. The response should include the URL of the created or updated Google Doc so you can link the user directly to the result. For displaying rich document content, you will need to decide how to render it. The Google Docs API returns content as a structured JSON body (not HTML), so you will need to transform it in your API route. A common approach is to extract plain text paragraphs and heading levels and return them as a simplified array that is easy to render in React. Your V0-generated component can then map over this array and render each element with the appropriate HTML tag and Tailwind classes.

Build the server-side API route that reads and writes Google Doc content. Create app/api/google-docs/route.ts. Install the googleapis npm package which provides the official Google API client for Node.js including the Docs API client. Authentication requires parsing your Service Account credentials from the environment variable and creating a GoogleAuth client. The google.auth.GoogleAuth class handles JWT-based authentication automatically when you provide the credentials object and the required API scopes. For reading a document, use the google.docs({ version: 'v1', auth }).documents.get method with your document ID. The response contains a body.content array of structural elements — paragraphs, tables, and section breaks. Each paragraph has an elements array containing TextRun objects with the actual text content and optional textStyle for formatting. For writing to a document, use the documents.batchUpdate method with an array of request operations. The replaceAllText operation is the most practical for template-based document generation — it finds all occurrences of a placeholder like {{CLIENT_NAME}} and replaces them with the actual value, throughout the entire document. This approach lets you maintain document formatting (fonts, styles, colors) in the template while only changing the variable content. An important V0 limitation to be aware of: V0 cannot validate that the document ID is correct or that the service account has been given access to the specific Google Doc. You will need to test this manually — if you see a 403 or 404 error from the Docs API, it means the service account lacks access to that document.

1import { google } from 'googleapis';
2import { NextRequest, NextResponse } from 'next/server';
3
4function getAuthClient() {
5  const credentialsJson = process.env.GOOGLE_SERVICE_ACCOUNT_JSON;
6
7  if (!credentialsJson) {
8    throw new Error('GOOGLE_SERVICE_ACCOUNT_JSON is not configured');
9  }
10
11  const credentials = JSON.parse(credentialsJson);
12
13  return new google.auth.GoogleAuth({
14    credentials,
15    scopes: ['https://www.googleapis.com/auth/documents'],
16  });
17}
18
19function extractDocumentText(content: Array<{
20  paragraph?: {
21    paragraphStyle?: { namedStyleType?: string };
22    elements?: Array<{ textRun?: { content?: string } }>;
23  };
24}>) {
25  const blocks: Array<{ type: string; text: string }> = [];
26
27  for (const element of content) {
28    if (!element.paragraph) continue;
29
30    const styleType = element.paragraph.paragraphStyle?.namedStyleType || 'NORMAL_TEXT';
31    const text = (element.paragraph.elements || [])
32      .map((el) => el.textRun?.content || '')
33      .join('')
34      .trim();
35
36    if (text) {
37      blocks.push({ type: styleType, text });
38    }
39  }
40
41  return blocks;
42}
43
44export async function GET() {
45  try {
46    const auth = getAuthClient();
47    const docs = google.docs({ version: 'v1', auth });
48    const documentId = process.env.GOOGLE_DOCS_DOCUMENT_ID;
49
50    if (!documentId) {
51      return NextResponse.json(
52        { error: 'GOOGLE_DOCS_DOCUMENT_ID is not configured' },
53        { status: 500 }
54      );
55    }
56
57    const response = await docs.documents.get({ documentId });
58    const document = response.data;
59
60    const blocks = extractDocumentText(
61      (document.body?.content || []) as Parameters<typeof extractDocumentText>[0]
62    );
63
64    return NextResponse.json({
65      title: document.title || '',
66      lastModified: document.revisionId || '',
67      blocks,
68    });
69  } catch (error: unknown) {
70    console.error('Google Docs GET error:', error);
71    return NextResponse.json(
72      { error: 'Failed to read Google Doc' },
73      { status: 500 }
74    );
75  }
76}
77
78export async function POST(request: NextRequest) {
79  try {
80    const auth = getAuthClient();
81    const docs = google.docs({ version: 'v1', auth });
82    const documentId = process.env.GOOGLE_DOCS_DOCUMENT_ID;
83
84    if (!documentId) {
85      return NextResponse.json(
86        { error: 'GOOGLE_DOCS_DOCUMENT_ID is not configured' },
87        { status: 500 }
88      );
89    }
90
91    const replacements: Record<string, string> = await request.json();
92
93    // Build replaceAllText requests for each placeholder
94    const requests = Object.entries(replacements).map(([placeholder, value]) => ({
95      replaceAllText: {
96        containsText: { text: `{{${placeholder}}}`, matchCase: true },
97        replaceText: value,
98      },
99    }));
100
101    await docs.documents.batchUpdate({
102      documentId,
103      requestBody: { requests },
104    });
105
106    const docUrl = `https://docs.google.com/document/d/${documentId}/edit`;
107    return NextResponse.json({ success: true, documentUrl: docUrl });
108  } catch (error: unknown) {
109    console.error('Google Docs POST error:', error);
110    return NextResponse.json(
111      { error: 'Failed to update Google Doc' },
112      { status: 500 }
113    );
114  }
115}