Krave Docs

Overview

Krave Docs is a small collection of real-time computer vision components for Next.js, powered by MediaPipe Tasks Vision. The project pairs live browser demos with implementation guides for face detection and hand tracking that can be adapted to other projects.

Processing runs in the browser: the camera only starts when the user enables it, and video stays in the browser tab. The shadcn registry currently provides two components, each a single TSX file that depends on @mediapipe/tasks-vision.

Features

• Face detection: Detects faces from the camera in real time and reports a face count.
• Hand landmarks: Tracks hands and their landmarks live in the browser.
• Client-side processing: Video is processed locally, with no upload.
• Opt-in camera: The live demo starts the camera only after it is enabled.
• Guides: Docs explain how to build each feature with MediaPipe and Next.js.

Tech stack

• Next.js, React, MediaPipe Tasks Vision

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @krave-docs/component-name