@buildwithlayer/embeddable-button v0.1.1

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

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

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.