Layer Embeddable Button

A customizable dropdown button for displaying instructions to install your Layer MCP server on various clients. The dropdown button is available to use as a React component or as a script tag.

Using as a React Component

Installation

npm install @buildwithlayer/embeddable-button
# or
yarn add @buildwithlayer/embeddable-button

Usage

import { LayerUseWithButton } from "@buildwithlayer/embeddable-button";

function App() {
  return (
    <LayerUseWithButton
      apiKey="your_layer_api_key"
      paletteMode="css-color-scheme"
      defaultClient="Windsurf"
      mcpConfig={
        server_name: "yourServer",
        server_command: "npx",
        server_args: ["@yourServer/mcp", "--flag=example"]
      }
    />
  );
}

Props

| Prop | Type | Default | Description | | --------------- | ---------------------------------------------------------------------- | --------------------- | ----------------------------------------- | | apiKey | string | Required | Your Layer API key | | paletteMode | "light" \| "dark" \| "browser" \| "css-color-scheme" | "css-color-scheme" | Color scheme mode for the dropdown button | | defaultClient | "Cursor" \| "Windsurf" \| "Claude" | Cursor | Default client to show as main button | | mcpConfig | {server_name: string; server_command: string; server_args: string[]} | Layer Demo MCP Server | The configuration for your MCP server |

Using as a Script Tag

Usage

If you'd like to use the dropdown as a script tag, you can do so by including the following script tag before your closing head tag

<script
  src="https://storage.googleapis.com/generic-assets/buildwithlayer-button.js"
  type="text/javascript"
  id="layer-button-script"
  api-key="your_layer_api_key"
  palette-mode="css-color-scheme"
  default-client="Windsurf"
  mcp-server-name="yourServer"
  mcp-server-command="npx"
  mcp-server-args="@yourServer/mcp,--flag=example"
></script>

Script Tag Attributes

| Prop | Type | Default | Description | | -------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------- | ---------------------------------------------------------- | | apiKey | string | Required | Your Layer API key | | paletteMode | "light" \| "dark" \| "browser" \| "css-color-scheme" | "css-color-scheme" | Color scheme mode for the button | | default-client | "Cursor" \| "Windsurf" \| "Claude" | "Cursor" | Default client to show as main button | | mcp-server-name | string | "layerdemo" | The name of your mcp server | | mcp-server-command | string | "npx" | The command for your mcp server | | mcp-server-args | string | "@buildwithlayer/generator,demo,mcp,your_layer_api_key,your_auth_override_flags" | A comma separated list of the arguments of your mcp server |

Layer Demo MCP Server

If any of the MCP configuration properties aren't included, your dropdown will default to a Layer demo MCP server using your Layer resources, tools, and prompts.

Clients

The dropdown currently supports the following clients:

• Cursor
• Claude
• Windsurf

Color Scheme Modes

• light: Forces light mode
• dark: Forces dark mode
• browser: Uses system preference
• css-color-scheme: Uses CSS color-scheme property

Custom Styling

The CSS for the dropdown can be found at @buildwithlayer/embeddable-button/dist/assets/LayerUseWithButton.css. If you'd like to customize the dropdown to fit your site, you can override the classes listed there.