Vercel Groq IntegrationNative Integration

Groq is a high-performance AI inference service with an ultra-fast Language Processing Unit (LPU) architecture. It enables fast response times for language model inference, making it ideal for applications requiring low latency.

You can use the Vercel and Groq integration to:

• Connect AI models such as Whisper-large-v3 for audio processing and Llama models for text generation to your Vercel projects.
• Deploy and run inference with optimized performance.

Groq provides a diverse range of AI models designed for high-performance tasks.

The Vercel Groq integration can be accessed through the AI tab on your Vercel dashboard.

To follow this guide, you'll need the following:

• An existing Vercel project
• The latest version of Vercel CLI
  pnpmyarnnpmbun

  pnpm i -g vercel@latest

1. Navigate to the AI tab in your Vercel dashboard
2. Select Groq from the list of providers, and press Add
3. Review the provider information, and press Add Provider
4. You can now select which projects the provider will have access to. You can choose from All Projects or Specific Projects
   • If you select Specific Projects, you'll be prompted to select the projects you want to connect to the provider. The list will display projects associated with your scoped team
   • Multiple projects can be selected during this step
5. Select the Connect to Project button
6. You'll be redirected to the provider's website to complete the connection process
7. Once the connection is complete, you'll be redirected back to the Vercel dashboard, and the provider integration dashboard page. From here you can manage your provider settings, view usage, and more
8. Pull the environment variables into your project using Vercel CLI
   terminal

   vercel env pull

9. Install the providers package
   pnpmyarnnpmbun

   pnpm i @ai-sdk/groq ai

10. Connect your project using the code below:
    Next.js (/app)Next.js (/pages)SvelteKitOther frameworks

    app/api/chat/route.ts

    // app/api/chat/route.ts
    
    import { groq } from '@ai-sdk/groq';
    import { streamText } from 'ai';
    
    // Allow streaming responses up to 30 seconds
    export const maxDuration = 30;
    
    export async function POST(req: Request) {
      // Extract the `messages` from the body of the request
      const { messages } = await req.json();
    
      // Call the language model
      const result = streamText({
        model: groq('llama-3.1-8b-instant'),
        messages,
      });
    
      // Respond with the stream
      return result.toDataStreamResponse();
    }
    
    

1. Add the provider to your project using the Vercel CLI install command
   terminal

   vercel install groq

   During this process, you will be asked to open the dashboard to accept the marketplace terms if you have not installed this integration before. You can also choose which project(s) the provider will have access to.
2. Install the providers package
   pnpmyarnnpmbun

   pnpm i @ai-sdk/groq ai

3. Connect your project using the code below:
   Next.js (/app)Next.js (/pages)SvelteKitOther frameworks

   app/api/chat/route.ts

   // app/api/chat/route.ts
   
   import { groq } from '@ai-sdk/groq';
   import { streamText } from 'ai';
   
   // Allow streaming responses up to 30 seconds
   export const maxDuration = 30;
   
   export async function POST(req: Request) {
     // Extract the `messages` from the body of the request
     const { messages } = await req.json();
   
     // Call the language model
     const result = streamText({
       model: groq('llama-3.1-8b-instant'),
       messages,
     });
   
     // Respond with the stream
     return result.toDataStreamResponse();
   }
   
   

// app/chat/page.tsx

'use client';

import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

pnpm i @ai-sdk/react