Vercel Integration Reference Implementation

This app is a reference implementation / proof-of-concept to help realize a likely-common pattern for a Vercel Integration - creating or mapping "project"-like entities in your system to projects in Vercel. The thought here is that an integration will set environment variables which your SDK depends on such that, upon completing the integration, a user installs an integration and the SDK it then things will "just work".

See this integration with the Deploy button in action:

The app that gets cloned by Deploy renders the values set during the integration install flow.

Deploy button documentation

Integration Flowchart

Building Your Integration

1. Create a production-quality integration on the Vercel integration console.

2. Set the "Redirect URL" (do not set UIHook URL) to an URL on your system. You can set this value to localhost for iterative development.

3. When a user adds your integration from the marketplace Vercel will redirect the user to your "Redirect URL" with query parameters:

   • code: which you'll exchange for an OAuth2 access token
   • configurationId: represents the id of the related configuration
   • teamId: The teamId for this scope on Vercel (or null if it's a personal account) Ensure you test your integration with a team account as well as a personal account to make sure you are including teamId when it is present in your Redirect URL
   • next: The URL you'll redirect to once configuration on your side is complete

4. Get in touch with Vercel once your integration is ready so we can begin testing and ultimately make your integration available to our users!

More substantive documentation is available here

You'll also likely want to reference our API documentation

Running this Demo

First, configure and run the development server:

cp .env.local.example .env.local

You'll need to copy your CLIENT_ID and CLIENT_SECRET values from the bottom of your new integration in the integration console to .env.local

Note: If you want to run this demo on a different port you will also need to change the HOST value in .env.local.

yarn install
yarn dev -p 3000

Now add your integration to a project and it should open a popup window that loads this application to set and unset the environment variables.