Get embed code for Zapier MCP

Select your framework

HTML
Vanilla JS
React
Angular
Vue.js 2

The <zapier-mcp> element can be used directly in HTML. Add the script to the <head> and use the <zapier-mcp> element in your body.

Head

Add this script tag to your HTML <head>:

<script src="https://mcp.zapier.com/embed/v1/mcp.js"></script>

Body

Add the <zapier-mcp> element to your HTML body:

<zapier-mcp

embed-id="FILL_IN_YOUR_EMBED_ID"
width="100%"
height="600px"
sign-up-email="email_of_your_user@example.com"
sign-up-first-name="first_name_of_your_user"
sign-up-last-name="last_name_of_your_user"

> </zapier-mcp>

<script>
document.querySelector('zapier-mcp').addEventListener('mcp-server-url', (event) => {
// this is the URL of the MCP server for a specific user
console.log('MCP Server URL:', event.detail.serverUrl);
});

document.querySelector('zapier-mcp').addEventListener('tools-changed', (event) => {
// this is sent whenever a user adds/removes tools from their MCP server
console.log('Tools changed');
});

document.querySelector('zapier-mcp').addEventListener('close-requested', (event) => {
// this is sent when the user clicks the close button in the embed
});
</script>

The Zapier MCP custom element can be used with vanilla JS. Use the JavaScript snippet to load the script and add a <zapier-mcp> element.

Javascript

// Load the MCP embed script

const script = document.createElement("script");
script.src = "https://mcp.zapier.com/embed/v1/mcp.js";
document.head.appendChild(script);

// Wait for script to load, then create and display zapier-mcp
script.onload = () => {
const element = document.createElement("zapier-mcp");
element.setAttribute("embed-id", "FILL_IN_YOUR_EMBED_ID");
element.setAttribute("width", "100%");
element.setAttribute("height", "600px");
element.setAttribute("sign-up-email", "email_of_your_user@example.com");
element.setAttribute("sign-up-first-name", "first_name_of_your_user");
element.setAttribute("sign-up-last-name", "last_name_of_your_user");

element.addEventListener('mcp-server-url', (event) => {
// this is the URL of the MCP server for a specific user
console.log('MCP Server URL:', event.detail.serverUrl);
});

element.addEventListener('tools-changed', (event) => {
// this is sent whenever a user adds/removes tools from their MCP server
console.log('Tools changed');
});

element.addEventListener('close-requested', (event) => {
// this is sent when the user clicks the close button in the embed
console.log('Close requested');
});

const container = document.querySelector("#zapier-mcp-container") || document.body;
container.appendChild(element);
};

Custom elements (web components) can be used with React. The example shows a TypeScript wrapper component with typed props for handling callbacks. Add the jsx-types.d.ts snippet for proper TypeScript support.

HTML

Add the script to your HTML <head>:

<!-- See the "Vanilla JS" solution if you'd rather use JS to load these -->
<script src="https://mcp.zapier.com/embed/v1/mcp.js"></script>

Now create a React component to use the <zapier-mcp> element:

ZapierMcp.tsx

import { useEffect, useRef } from "react";

interface ZapierMcpProps {
embedId: string;
width?: string;
height?: string;
className?: string;
origin?: string;
signUpEmail?: string;
signUpFirstName?: string;
signUpLastName?: string;
onMcpServerUrl?: (serverUrl: string) => void;
onToolsChanged?: (tools: any[]) => void;
onCloseRequested?: () => void;
}

export const ZapierMcp = ({
embedId,
width = "100%",
height = "600px",
className,
origin,
signUpEmail,
signUpFirstName,
signUpLastName,
onMcpServerUrl,
onToolsChanged,
onCloseRequested,
}: ZapierMcpProps) => {
const mcpRef = useRef<HTMLElement>(null);

useEffect(() => {
const element = mcpRef.current;
if (!element) return;

const handleMcpServerUrl = (event: CustomEvent<{ serverUrl: string }>) => {
  onMcpServerUrl?.(event.detail.serverUrl);
};

const handleToolsChanged = (event: CustomEvent<{ tools: any[] }>) => {
  onToolsChanged?.();
};

const handleCloseRequested = () => {
  onCloseRequested?.();
};

element.addEventListener('mcp-server-url', handleMcpServerUrl as EventListener);
element.addEventListener('tools-changed', handleToolsChanged as EventListener);
element.addEventListener('close-requested', handleCloseRequested);

return () => {
  element.removeEventListener('mcp-server-url', handleMcpServerUrl as EventListener);
  element.removeEventListener('tools-changed', handleToolsChanged as EventListener);
  element.removeEventListener('close-requested', handleCloseRequested);
};

}, [onMcpServerUrl, onToolsChanged, onCloseRequested]);

return (
<zapier-mcp
  ref={mcpRef}
  embed-id={embedId}
  width={width}
  height={height}
  class-name={className}
  origin={origin}
  sign-up-email={signUpEmail}
  sign-up-first-name={signUpFirstName}
  sign-up-last-name={signUpLastName}
/>
);
};

// Example usage:
export default function App() {
const handleMcpServerUrl = (serverUrl: string) => {
// this is the URL of the MCP server for a specific user
console.log('MCP Server URL:', serverUrl);
};

const handleToolsChanged = () => {
// this is sent whenever a user adds/removes tools from their MCP server
console.log('Tools changed:', tools);
};

const handleCloseRequested = () => {
// this is sent when the user clicks the close button in the embed
console.log('Close requested');
};

return (
<div>
<h1>Zapier MCP React</h1>
<ZapierMcp
    embedId="FILL_IN_YOUR_EMBED_ID"
    width="100%"
    height="600px"
    signUpEmail="email_of_your_user@example.com"
    signUpFirstName="first_name_of_your_user"
    signUpLastName="last_name_of_your_user"
    onMcpServerUrl={handleMcpServerUrl}
    onToolsChanged={handleToolsChanged}
    onCloseRequested={handleCloseRequested}
  />
</div>
);
}

declare namespace JSX {
  interface IntrinsicElements {
    "zapier-mcp": any;
  }
}

import "react";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "zapier-mcp": any;
    }
  }
}

Custom elements (web components) can be used with Angular. Use the following snippets as an example.

Installation

Add the script to your <head>:

<!-- See the "Vanilla JS" solution if you'd rather use JS to load these -->
<script src="https://mcp.zapier.com/embed/v1/mcp.js"></script>

And then use these components in your Angular application:

<div>
  <h1>Zapier MCP Angular</h1>
  <zapier-mcp
    #mcpEmbed
    [embed-id]="'FILL_IN_YOUR_EMBED_ID'"
    [width]="'100%'"
    [height]="'600px'"
    [sign-up-email]="'email_of_your_user@example.com'"
    [sign-up-first-name]="'first_name_of_your_user'"
    [sign-up-last-name]="'last_name_of_your_user'"
    (mcp-server-url)="onMcpServerUrl($event)"
    (tools-changed)="onToolsChanged($event)"
    (close-requested)="onCloseRequested($event)"
  ></zapier-mcp>
</div>

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMcpServerUrl(event: CustomEvent) {
    // this is the URL of the MCP server for a specific user
    console.log("MCP Server URL:", event.detail.serverUrl);
  }

  onToolsChanged(event: CustomEvent) {
    // this is sent whenever a user adds/removes tools from their MCP server
    console.log("Tools changed");
  }

  onCloseRequested(event: CustomEvent) {
    // this is sent when the user clicks the close button in the embed
    console.log("Close requested");
  }
}

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  // -*-*-*- Add this line -*-*-*-
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // -*-*-*-*-*-*-*-*-*-*-*-*-*-*-
})
export class AppModule {}

Custom elements (web components) can be used with Vue.js. Use the main.js and App.vue snippets as examples.

Installation

Add the script to your <head>:

<!-- See the "Vanilla JS" solution if you'd rather use JS to load these -->
<script src="https://mcp.zapier.com/embed/v1/mcp.js"></script>

And then use these components in your Vue application:

<template>
  <div>
    <h1>Zapier MCP Vue</h1>
    <zapier-mcp
      :embed-id.prop="'FILL_IN_YOUR_EMBED_ID'"
      :width.prop="'100%'"
      :height.prop="'600px'"
      :sign-up-email.prop="'email_of_your_user@example.com'"
      :sign-up-first-name.prop="'first_name_of_your_user'"
      :sign-up-last-name.prop="'last_name_of_your_user'"
      @mcp-server-url="onMcpServerUrl"
      @tools-changed="onToolsChanged"
      @close-requested="onCloseRequested"
    ></zapier-mcp>
  </div>
</template>

<script>
  export default {
    name: "App",
    methods: {
      onMcpServerUrl(event) {
        // this is the URL of the MCP server for a specific user
        console.log("MCP Server URL:", event.detail.serverUrl);
      },
      onToolsChanged(event) {
        // this is sent whenever a user adds/removes tools from their MCP server
        console.log("Tools changed");
      },
      onCloseRequested(event) {
        // this is sent when the user clicks the close button in the embed
        console.log("Close requested");
      },
    },
  };
</script>

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
// Allow `<zapier-mcp>` custom element
// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
Vue.config.ignoredElements = ["zapier-mcp"];

new Vue({ render: (h) => h(App) }).$mount("#app");

Available attributes

The <zapier-mcp> element supports the following attributes:

embed-id

string

required

The unique identifier for your embed.

width

string

default:"100%"

Width of the embed.

height

string

default:"600px"

Height of the embed.

class-name

string

CSS class to apply to the iframe.

Event reference

The <zapier-mcp> element dispatches the following events:

mcp-server-url

CustomEvent

Fired when an MCP server URL is received. event.detail.serverUrl contains the URL.

tools-changed

CustomEvent

Fired when available tools change. Use a tools/list request from your MCP client to get the updated list of tools.

close-requested

CustomEvent

Fired when the user requests to close the embed.

Enable quick account creation for your users (optional)

To enable Quick Account Creation, provide your user’s email, first name, and last name to Zapier MCP. This will bypass Zapier sign-up for your users.

All three sign-up fields (sign-up-email, sign-up-first-name, sign-up-last-name) must be provided together to enable quick account creation.

User’s email address for quick account creation.

User’s first name for quick account creation.

User’s last name for quick account creation.

Overview

Get started

Features

Manage

Embed

Troubleshoot

Get embed code for Zapier MCP

Select your framework

Head

Body

Javascript

HTML

Installation

Installation

Available attributes

Event reference

Enable quick account creation for your users (optional)

​Select your framework

​Head

​Body

​Javascript

​HTML

​Installation

​Installation

​Available attributes

​Event reference

​Enable quick account creation for your users (optional)

Select your framework

Head

Body

Javascript

HTML

Installation

Installation

Available attributes

Event reference

Enable quick account creation for your users (optional)