Embeddable Chat Button using Layer APIs
npm install @buildwithlayer/embeddable-buttonA 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.
``bash`
npm install @buildwithlayer/embeddable-buttonor
yarn add @buildwithlayer/embeddable-button
`jsx
import { LayerUseWithButton } from "@buildwithlayer/embeddable-button";
function App() {
return (
paletteMode="css-color-scheme"
defaultClient="Windsurf"
mcpConfig={
server_name: "yourServer",
server_command: "npx",
server_args: ["@yourServer/mcp", "--flag=example"]
}
/>
);
}
`
| 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 |
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"
>
| 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 |
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.
The dropdown currently supports the following clients:
- Cursor
- Claude
- Windsurf
- light: Forces light modedark
- : Forces dark modebrowser
- : Uses system preferencecss-color-scheme
- : Uses CSS color-scheme property
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.