npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@d-id/client-sdk

v3.0.1

Published

Browser SDK for D-ID Agents: connect to an agent, stream its video and audio, chat and speak.

Readme

D-ID Client SDK

npm version license docs coverage

D-ID Agents SDK

The D-ID Agents SDK embeds an agent you built in D-ID Studio or with the Agents API into a web application. Create an AgentManager for the agent, connect(), then chat() to have the agent answer with its own LLM or speak() to have it say exactly what you give it. The SDK opens the video session (WebRTC, or LiveKit for Expressive agents), keeps the chat transcript and retries a failed connection.

Please note: This SDK is designed for front-end development only. The creation of Agents and Knowledge bases should be handled through the Agents API or directly within the D-ID Studio.

Version 3.0 is a breaking release. Upgrading from 2.x? Read the migration guide.

Install

npm i @d-id/client-sdk

You need an agent id and a client key. Both come from the agent's </> Embed snippet in the D-ID Studio agents gallery, which is also where you list the domains the agent may be used from — see Getting started.

Quick start

import * as sdk from '@d-id/client-sdk';

const videoElement = document.getElementById('agent-video') as HTMLVideoElement;
const agentManager = await sdk.createAgentManager('agt_fumf1234', {
    auth: { type: 'key', clientKey: 'YOUR_CLIENT_KEY' },
    callbacks: {
        onSrcObjectReady: stream => (videoElement.srcObject = stream),
        onNewMessage: messages => console.log(messages[messages.length - 1]?.content),
    },
});

await agentManager.connect();
await agentManager.speak({ type: 'text', input: "Hi! I'm Alice!" });
await agentManager.chat('What is the distance to the moon?');

// Both resolve when the request is accepted, not when the agent has spoken.
window.addEventListener('beforeunload', () => void agentManager.disconnect());

Next steps

The full API reference — every method, callback, option and type, generated from the source on each release — is at sdk.d-id.com. Start with createAgentManager(), AgentManager, AgentManagerCallbacks and, on Talks (V2) and Clips (V3) agents, StreamOptions.

The guides:

  • Getting started — credentials, the first connection, chat() and speak(), disconnecting.
  • Chat modes — conversation, scripted speech or chat off, and what each one creates on the wire.
  • Client tools — running your own functions when the agent's LLM calls them.
  • Expressive agents — microphone, camera, speech-to-text, interrupts and data-channel messages.
  • Handling errors — which failures reject, which reach onError, and what to log.
  • Migration guide — every breaking change from 2.x.

A working sample project in Vanilla JavaScript and Vite is in the demo repository.

Requirements

  • A modern browser with WebRTC. The SDK streams the agent's video over WebRTC (Talks and Clips) or LiveKit (Expressive), and renders it into a <video> element you provide.
  • ESM and UMD builds. import resolves to the ES module; require and a <script> tag resolve to the UMD bundle.
  • TypeScript types included. They ship with the package; there is no separate @types to install.
  • Node is not a runtime target, but importing the package on a server is safe: the module graph touches no browser globals at import time, so server-rendered frameworks (Next.js, Remix, SvelteKit, Astro) can evaluate it. Everything past createAgentManager() needs a browser.

Avatar types

  • Talks (V2) — Photo-based presenters using WebRTC streaming.
  • Clips (V3) — Pre-built presenter avatars using WebRTC streaming.
  • Expressive (V4) — Next-generation avatars using LiveKit-based streaming, supporting microphone input and always-on fluent mode.

Support

Questions, bug reports and documentation issues are welcome as GitHub issues. The product documentation lives at docs.d-id.com.