Guides
Vite + React Integration
1. Install the SDK
npm install @consentlayer/sdk2. Add the banner script
Easiest: let your agent install it
Run claude mcp add consentlayer --transport http https://api.consentlayer.com/mcp
then ask: "Add the ConsentLayer banner to my Vite React app." Your agent will sign in,
provision the site, and write the script tag with your real key.
More on the MCP path →
Manual setup
-
Sign in to the dashboard and copy your project key.
-
In
index.html, add to the<head>— replace<your-key>with the value you copied. Don't includedeferorasync.<script src="https://b.consentlayer.com/<your-key>/banner.js"></script>
3. Wrap your app
// main.tsx
import { ConsentLayerProvider } from '@consentlayer/sdk/react'
createRoot(document.getElementById('root')!).render(
<ConsentLayerProvider>
<App />
</ConsentLayerProvider>
)4. Gate components
import { ConsentGate } from '@consentlayer/sdk/react'
function App() {
return (
<div>
<h1>My App</h1>
<ConsentGate category="statistics">
<AnalyticsScript />
</ConsentGate>
<ConsentGate category="marketing" fallback={<p>Enable marketing cookies to see this.</p>}>
<MarketingWidget />
</ConsentGate>
</div>
)
}