Getting Started
Getting Started
Display an opted-in Discord user's current status and activities in a few lines. Start with the published package; working from source is optional.
Prerequisites
Join the Discord server below and use the /confirm command to enable presence sharing. Your status and activities will then appear automatically after the setup.
1. Install
bun add @iconical/presencekitSee installation for npm/pnpm/Yarn and building from source.
2. Fetch an approved presence
import { createPresenceClient } from "@iconical/presencekit";
const presence = createPresenceClient();
const data = await presence.getPresence("123456789012345678");
console.log(data.profile.displayName);
console.log(data.availability); // "live" or "pending"
console.log(data.presence?.status ?? "No snapshot yet");
console.log(data.presence?.activities ?? []);Your ID must be a Discord snowflake (17–20 digits). Use an account that has enabled sharing. A pending result can have presence: null; do not treat that as an SDK failure.
3. Get live updates
const stop = presence.subscribePresence(
"123456789012345678",
{
onUpdate(result) {
console.log(result.presence?.status, result.spotify?.song);
},
onError(error) {
console.error(error);
},
},
{ transport: "auto", intervalMs: 15_000 },
);
// Call when the view is removed, or when updates are no longer needed:
stop();auto tries SSE and falls back to polling when streaming is unavailable. intervalMs controls polling, not the speed of SSE events; minimum 5,000 ms.
4. Prefer framework-specific integrations
React and Next.js use the usePresence hook; Vue uses usePresence as a composable, and Svelte uses createPresenceStore. Use these rather than manually managing subscriptions in components.
Permission comes first
Users opt in through the official Discord community with /confirm, and can stop sharing with /disconnect. Only authorized profiles are returned. See sharing and availability.
In this section
Was this page helpful?