I found a way to integrate GCP Vertex AI API into Next.js

Showcase
1

Recently I run into issue while integrating Vertex AI into my application.
What I found in oficial documentation is deprecate, so I did research and find a way how to solve this problem.

First you need to generate json file on Google Cloud:

  • go to Google Cloud → IAM and admins → Service account → click on 3 dots (Actions row) → Manage keys
  • then click on button “Add key” → create new key → select json as key type → create
    Then json file will be imidiately downloaded to your PC. After that past your json file into /app directory in your next.js app.

Then you need to run this command in terminal:
[Convert]::ToBase64String((Get-Content -Raw “app\your-generated-file.json” | ForEach-Object { [Text.Encoding]::UTF8.GetBytes($_) }))

Don’t forget to remane your-generated-file.json to your real json file name.
Then you will get base64 string in your terminal, copy it, and store in .env file with GOOGLE_APPLICATION_CREDENTIALS_JSON_BASE64=”your-generated-base64-key”

thay you can create /api/vertex/route.ts and you can call Vertex AI API:

import { createVertex } from '@ai-sdk/google-vertex';

import { generateText } from 'ai';



const GCP_PROJECT_ID = process.env.GCP_PROJECT_ID;

 

const vertex = createVertex({

  project: GCP_PROJECT_ID,

  location: 'us-central1',

  googleAuthOptions: {

    credentials: JSON.parse(

    Buffer.from(process.env.GOOGLE_APPLICATION_CREDENTIALS_JSON_BASE64!, 'base64').toString()

  ),

    projectId: GCP_PROJECT_ID,

  },

});

 

export const POST = async (req: Request) => {

    const {promt} = await req.json();

  const result = await generateText({

    model: vertex('gemini-2.5-flash'),

    prompt: 'Write a vegetarian lasagna recipe for 4 people.',

  });

  console.log('Generated text:', result.content);

  return Response.json(result);

};

That’s it :slight_smile:

2

Thanks for sharing your solution :smile:

1 Like