How to add custom button with Vercel deploy hook in Sanity Studio?

Great question! Yes, adding a custom button to trigger Vercel builds is totally doable, and there's actually an official plugin that handles this for you!

The Easy Way: Use the Vercel Deploy Plugin

The sanity-plugin-vercel-deploy plugin is the recommended solution. It adds a "Deploy" tool to your Studio navbar with features like:

• ✨ One-click deploys
• LIVE status updates
• Multiple deployment environments
• Active polling
• Vercel Teams support

Installation:

npm install sanity-plugin-vercel-deploy

Configuration:

// sanity.config.ts
import {defineConfig} from 'sanity'
import {vercelDeployTool} from 'sanity-plugin-vercel-deploy'

export default defineConfig({
  // ...
  plugins: [
    vercelDeployTool(),
  ],
})

Once installed, click "Add Project" in the Deploy tool and configure:

• Deploy Hook URL: Get this from Vercel Project Settings → Git → Deploy Hooks
• Vercel Project Name: Found in your Vercel project settings
• Vercel Token: Create one in your Vercel Account Settings → Tokens
• Vercel Team Slug (if applicable): The team URL slug from vercel.com/your-team

Building Your Own Custom Button

If you want to create a custom implementation, you have a few options:

1. Document Actions - Add buttons to individual document views using the Document Actions API. This is useful if you want to trigger builds when specific documents are published.

2. Custom Studio Tool - Create a custom tool that appears in the Studio navbar, similar to how the Vercel plugin works. You can build this using the Structure Builder.

3. Sanity Functions - For automation, you could use Sanity Functions to automatically trigger Vercel builds when content changes, without needing a manual button at all. This is the modern, serverless approach that runs natively within Sanity.

However, for triggering Vercel builds on-demand, the plugin approach is much cleaner and gives you the status monitoring UI out of the box! The plugin is actively maintained and handles all the edge cases for you.