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

$3

``bash
npm install @buildwithlayer/embeddable-button


or


yarn add @buildwithlayer/embeddable-button
`

$3

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

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

$3

| 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

$3

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

`html
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"
>
`

$3

| 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.