Setup guide for web

This page shows you how to set up your development environment to use MediaPipe Tasks in your JavaScript and TypeScript web applications.

Supported platforms and versions

To create web applications with MediaPipe Tasks, your development environment requires the following:

• Modern browser with WebAssembly support (Chrome, Edge, Safari, or Firefox; WebGPU-enabled browser recommended for large generative, retrieval, and decision models)
• A web application that uses Node.js and npm. Alternatively, you can import MediaPipe Tasks ES modules directly through a content delivery network (CDN).

MediaPipe Tasks dependencies

MediaPipe Tasks provides five prebuilt domain packages for vision, text, audio, retrieval, and decision tasks. Install the package that matches the task used by your application, or import its ESM bundle from a CDN such as jsDelivr.

Vision tasks

The MediaPipe Tasks vision package (@mediapipe/tasks-vision) contains tasks that process images, video files, and live camera streams (such as Hand Landmarker, Face Landmarker, Pose Landmarker, Object Detector, and Image Segmenter). See Prepare vision input data for supported DOM media inputs.

npm install @mediapipe/tasks-vision

To import directly from a CDN in HTML without a bundler, point FilesetResolver to the matching /wasm directory on the CDN:

<script type="module">
  import { FilesetResolver, HandLandmarker } from
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs";

  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm"
  );
</script>

Text tasks

The MediaPipe Tasks text package (@mediapipe/tasks-text) contains tasks that analyze and embed text strings (such as Text Classifier, Language Detector, and Text Embedder).

npm install @mediapipe/tasks-text

To import directly from a CDN in HTML:

<script type="module">
  import { FilesetResolver, TextClassifier } from
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/text_bundle.mjs";

  const text = await FilesetResolver.forTextTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/wasm"
  );
</script>

Audio tasks

The MediaPipe Tasks audio package (@mediapipe/tasks-audio) contains tasks that classify audio clips, transcribe speech, and synthesize voice audio (Audio Classifier, Audio Transcriber, and Text-to-Speech). See Prepare audio input data for AudioContext and AudioWorkletNode examples.

npm install @mediapipe/tasks-audio

To import directly from a CDN in HTML:

<script type="module">
  import {
    AudioClassifier,
    AudioTranscriber,
    FilesetResolver,
    TextToSpeech,
  } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/audio_bundle.mjs";

  const audio = await FilesetResolver.forAudioTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/wasm"
  );
</script>

Retrieval tasks

The MediaPipe Tasks retrieval package (@mediapipe/tasks-retrieval) provides on-device chunking, vector indexing, retrieval-augmented generation (RAG), and multimodal text, image, and audio embeddings (Semantic Retriever and Universal Embedder).

npm install @mediapipe/tasks-retrieval

To import directly from a CDN in HTML:

<script type="module">
  import { FilesetResolver, SemanticRetriever, UniversalEmbedder } from
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-retrieval/retrieval_bundle.mjs";

  const retrieval = await FilesetResolver.forRetrievalTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-retrieval/wasm"
  );
</script>

Decision tasks

The MediaPipe Tasks decision package (@mediapipe/tasks-decision) evaluates structured choices, boolean rules, and rubric scores in a single calibrated forward pass (Decision Maker).

npm install @mediapipe/tasks-decision

To import directly from a CDN in HTML:

<script type="module">
  import { FilesetResolver, DecisionMaker } from
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-decision/decision_bundle.mjs";

  const decision = await FilesetResolver.forDecisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-decision/wasm"
  );
</script>

BaseOptions configuration

BaseOptions configures the model source and hardware delegate shared across MediaPipe Task APIs:

Troubleshooting

For help with technical questions related to MediaPipe, visit the discussion group or Stack Overflow for support from the community. To report bugs or make feature requests, file an issue on GitHub.