Skip to content

Our customers love our GitHub and GitLab integrations. You can set them up with a single click and save countless hours of your team's deployment workflow.

There are similarly powerful services available for every aspect of development. Performance, analytics, security, payments, databases, CMS... it's an infinite list. We believe all these services should be one click away from your existing workflow.

Towards that goal, we are thrilled to introduce the Vercel Integrations Platform.

But that's not all. We are also announcing the first-ever Vercel Hackathon to bring our community of developers, customers, and partners together to create their own integrations.

For this hackathon, we've invited an inspiring panel of expert judges and put together some amazing prizes. All the details can be found on the hackathon website.

What Integrations Are

Integrations are one-click seamless extensions for the Vercel Dashboard. Their custom UI can be securely provided by a third-party service.

Our staff have already created beta integrations for Lighthouse, Slack, and Google Cloud. The source code for these integrations is public. You're welcome to use them as the base for your own integration.

Marketplace

Vercel Integrations can be published to the Marketplace, where they are listed by category. This includes not only integrations from our team and partner companies, but also integrations built by you.

All the integrations that you can add to your Vercel account can be found on our Marketplace.

All the integrations that you can add to your Vercel account can be found on our Marketplace.

Anyone can add an integration to their account through its landing page.

The landing page explains what an integration offers, along with cover images and screenshots of it in action.

The landing page explains what an integration offers, along with cover images and screenshots of it in action.

Integrations Dashboard

Once enabled, integrations appear within your Dashboard, listed as a series of configurations.

The Integrations Dashboard lists all configurations for integrations you've added.

The Integrations Dashboard lists all configurations for integrations you've added.

You can find the UI supplied by an integration on its configuration page. In the following example, the Lighthouse integration displays scores for a project's latest deployment.

The configuration page provided by the Lighthouse integration. In this example, it lists the Lighthouse scores for a project's latest deployment.

The configuration page provided by the Lighthouse integration. In this example, it lists the Lighthouse scores for a project's latest deployment.

Creating Integrations via the Developer Console

Through Integrations, we are enabling you to securely extend our platform, in any manner you desire:

  • Add new features to the platform
  • Securely extend our UI
  • Respond to events
  • Accelerate your workflow

You can create an integration using techniques you're already familiar with. All you need is an HTTP endpoint which returns a string containing a set of UI Components that we support. We call this endpoint a UIHook. To create one, you can make use of our @zeit/integration-utils package and deploy it with Vercel as a Serverless Function.

// index.js

const { withUiHook } = require('@zeit/integration-utils')

let count = 0

module.exports = withUiHook(({ payload }) => {
  count += 1
  return `
    <Page disableTheme>
      <P>Counter: ${count}</P>
      <Button>Count Me</Button>
    </Page>
  `
})

Our docs illustrate a simple Serverless Function example available at https://my-ui-hook.now.sh

The source code for this example is public on GitHub. The Counter integration is shown in action below:

The Counter integration example in action.

Once created, you can submit your integration for Marketplace approval via the Developer Console.

Conclusion

The Vercel Integrations Platform opens a new world of possibilities by unifying your existing workflow with your favorite third party services.

We are very excited about the first-ever Vercel Hackathon, and welcome everyone to participate. It's a great opportunity to create a new integration accessible to 200,000+ developers, and to interact with our community of expert engineers and judges.

Summary:

  • Looking for extensions to add? Explore our Marketplace.
  • Want to manage integrations you installed? Find them on your Dashboard.
  • Developer looking to create and submit an integration? Visit the Developer Console.
  • Want to join the hackathon? Register on the event website.

For any questions or feedback, you can reach out to us through Twitter or Discussions.

We would like to thank Luis Alvarez, Harrison Harnisch, Max Rovensky, Timothy Lorimer, Paulo De Mitri, Arunoda Susiripala, Naoyuki Kanezawa, Javi Velasco, Juan Campa, Igor Klopov, Lukáš Huvar, and Allen Hai for submitting the first set of integrations on our Marketplace, as well as Christopher Skillicorn and Sarup Banskota for their contributions to our Integration Platform and Hackathon.