Installation
How to install Kine UI components and set up the MediaPipe vision engine in your Next.js application.
Initialize System Core
Run the init command to scaffold your local components/kine directory. This will automatically install the required computer vision dependencies (@mediapipe/tasks-vision and framer-motion).
npx @opendevsociety/kine-ui@latest initZero Server Load
MediaPipe runs its neural networks 100% locally on the user's device via WebAssembly. Kine UI offloads no processing to your servers.
Mount Tracking Engine
Install the global context provider. You must wrap your root Next.js layout.tsx inside this provider. This acts as a singleton engine that boots up the background webcam tracking process exactly once.
npx @opendevsociety/kine-ui@latest add kine-providerIf an interactive spatial component detects this provider, it taps into the engine's requestAnimationFrame loop to read 3D coordinates.
Install Spatial Elements
> Select individual spatial elements from the registry. Execute the deployment command listed on each component documentation page to inject the physics layer directly into your environment.