Vercel Replicate IntegrationMarketplace

Replicate provides a platform for accessing and deploying a wide range of open-source artificial intelligence models. These models span various AI applications such as image and video processing, natural language processing, and audio synthesis. With the Vercel Replicate integration, you can incorporate these AI capabilities into your applications, enabling advanced functionalities and enhancing user experiences.

You can use the Vercel and Replicate integration to power a variety of AI applications, including:

• Content generation: Use Replicate for generating text, images, and audio content in creative and marketing applications
• Image and video processing: Use Replicate in applications for image enhancement, style transfer, or object detection
• NLP and chat-bots: Use Replicate's language processing models in chat-bots and natural language interfaces

Replicate models cover a broad spectrum of AI applications ranging from image and video processing to natural language processing and audio synthesis.

The Vercel Replicate 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
  pnpm

  yarn

  npm

  pnpm i -g vercel@latest

1. Navigate to the AI tab in your Vercel dashboard
2. Select Replicate 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 .env.development.local

9. Install the providers package
   pnpm

   yarn

   npm

   pnpm i replicate 

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

    Next.js (/pages)

    SvelteKit

    Other frameworks

    app/api/predictions/route.ts

    // app/api/predictions/route.ts
    
    import { NextResponse } from 'next/server';
    import Replicate from 'replicate';
    
    const replicate = new Replicate({
      auth: process.env.REPLICATE_API_TOKEN,
    });
    
    // In production and preview deployments (on Vercel), the VERCEL_URL environment variable is set.
    // In development (on your local machine), the NGROK_HOST environment variable is set.
    const WEBHOOK_HOST = process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}`
      : process.env.NGROK_HOST;
    
    export async function POST(request) {
      if (!process.env.REPLICATE_API_TOKEN) {
        throw new Error(
          'The REPLICATE_API_TOKEN environment variable is not set. See README.md for instructions on how to set it.',
        );
      }
    
      const { prompt } = await request.json();
    
      const options = {
        version: '8beff3369e81422112d93b89ca01426147de542cd4684c244b673b105188fe5f',
        input: { prompt },
      };
    
      if (WEBHOOK_HOST) {
        options.webhook = `${WEBHOOK_HOST}/api/webhooks`;
        options.webhook_events_filter = ['start', 'completed'];
      }
    
      // A prediction is the result you get when you run a model, including the input, output, and other details
      const prediction = await replicate.predictions.create(options);
    
      if (prediction?.error) {
        return NextResponse.json({ detail: prediction.error }, { status: 500 });
      }
    
      return NextResponse.json(prediction, { status: 201 });
    }
    
    // app/api/predictions/[id]/route.ts
    
    import { NextResponse } from 'next/server';
    import Replicate from 'replicate';
    
    const replicate = new Replicate({
      auth: process.env.REPLICATE_API_TOKEN,
    });
    
    // Poll for the prediction's status
    export async function GET(request, { params }) {
      const { id } = params;
      const prediction = await replicate.predictions.get(id);
    
      if (prediction?.error) {
        return NextResponse.json({ detail: prediction.error }, { status: 500 });
      }
    
      return NextResponse.json(prediction);
    }
    
    

You can deploy a template to Vercel that uses a pre-trained model from Replicate:

Inpainter with Stable Diffusion

Next.js application for inpainting with Stable Diffusion using the Replicate API.

Paint by Text

Edit your photos by chatting with a generative AI model (InstructPix2Pix), powered by Replicate.