Skip to main content
Detects your framework from package.json, loads the matching skill, and writes the integration as real file edits — provider component, script tag, environment variables, and CSP headers.

​
Usage

/userplane:integrate
No arguments required. The agent reads package.json to identify the framework.

​
What it does

  1. Detects the framework from package.json dependencies.
  2. Loads the matching skill as the source of truth for the integration pattern.
  3. Asks for your write key if not already in the environment.
  4. Writes the integration — creates the provider file, registers it at the app root, wires the env var, adds CSP headers.
  5. Reports a summary of files changed and the next step.
If Userplane is already installed, the agent stops and tells you to run /userplane:audit instead.

​
Framework detection

Dependency in package.jsonDetected frameworkSkill loaded
nextNext.jsuserplane-nextjs
nuxtNuxt 3userplane-nuxt
@angular/coreAngularuserplane-angular
vue (without nuxt)Vue 3userplane-vue
@sveltejs/kitSvelteKituserplane-sveltekit
astroAstrouserplane-astro
@tanstack/react-startTanStack Startuserplane-tanstack-start
react (with vite, no metaframework)React (Vite)userplane-react
Top-level index.html, no bundlerStatic HTMLuserplane-static-html
If the framework can’t be determined, the agent asks before proceeding.

​
Example prompts

/userplane:integrate

Add Userplane screen recording to this project. I want the CDN install, not the npm package.

Set up Userplane in this Next.js app. My write key is in NEXT_PUBLIC_USERPLANE_WRITE_KEY.