Quick Start

Stream lets you build activity feeds at scale. The largest apps using Stream have over 100 Million users. Stream Activity Feeds scales effectively while giving you more flexibility over the content shown in your feed.

Getting Started

For SDK-accurate examples generated from the OpenAPI spec, use the Stream snippets reference: TypeScript SDK - Feeds API. Replace node in the URL with the SDK language you want to inspect.

import { StreamClient } from "@stream-io/node-sdk";

// Initialize the client
const client = new StreamClient("<API key>", "<API secret>");

// Create a feed (or get its data if exists)
const feed = client.feeds.feed("user", "john");
await feed.getOrCreate({ user_id: "john" });

// Add activity
await client.feeds.addActivity({
  type: "post",
  feeds: ["user:john"],
  text: "Hello, Stream Feeds!",
  user_id: "john",
});

Key Concepts

Activities

Activities are the core content units in Stream Feeds. They can represent posts, photos, videos, polls, and any custom content type you define.

Feeds

Feeds are collections of activities. They can be personal feeds, timeline feeds, notification feeds, or custom feeds for your specific use case.

Real-time Updates

Stream Feeds provides real-time updates through WebSocket connections, ensuring your app stays synchronized with the latest content.

Social Features

Built-in support for reactions, comments, bookmarks, and polls makes it easy to build engaging social experiences.

Server-side vs client-side

Most API calls can be made client-side. Client-side API calls use the permission system. Server-side API calls have full access.

Most apps will default to making API calls client-side. Engineers will often use server-side to do the following tasks:

  • Updating feed groups or feed views for ranking and aggregation
  • Syncing users
  • Returning tokens for authenticating users
  • Writing to feeds that do not belong to the current user (since the user does not have access client side to do this)

Common Use Cases

Social Media Feed

// Create a timeline feed
const timeline = client.feeds.feed("timeline", "john");
await timeline.getOrCreate({ user_id: "john" });

// Add a reaction to activity
await client.feeds.addActivityReaction({
  activity_id: "activity_123",
  type: "like",
  user_id: "john",
});

// Add a comment to activity
await client.feeds.addComment({
  object_id: "activity_123",
  object_type: "activity",
  comment: "Great post!",
  user_id: "john",
});

// Add a reaction to comment
await client.feeds.addCommentReaction({
  id: "comment_456",
  type: "love",
  user_id: "john",
});

Notification Feed

// Create a notification feed
const notifications = client.feeds.feed("notification", "john");
await notifications.getOrCreate({ user_id: "john" });

// Mark notifications as read
await notifications.markActivity({
  mark_all_read: true,
  user_id: "john",
});

Polls

const poll = await client.createPoll({
  name: "What is your favorite color?",
  options: [{ text: "Red" }, { text: "Blue" }, { text: "Green" }],
  user_id: "john",
});

// Attach it to an activity
const activity = await client.feeds.addActivity({
  feeds: ["user:john"],
  text: "What is your favorite color?",
  type: "poll",
  poll_id: poll.poll.id,
  user_id: "john",
});

// Cast a vote on an existing poll
await client.feeds.castPollVote({
  activity_id: "activity_123",
  poll_id: "poll_456",
  user_id: "john",
  vote: {
    option_id: "option_789",
  },
});

Advanced Features

Custom Activity Types

Create custom activity types to represent your app's specific content:

// Add custom activity with custom fields
await client.feeds.addActivity({
  type: "workout",
  feeds: ["user:john"],
  text: "Just finished my run",
  user_id: "john",
  custom: {
    distance: 5.2,
    duration: 1800,
    calories: 450,
  },
});

Real-time Updates with State Layer

Only for client-side SDKs

const feed = client.feed("user", "john");
// Subscribe to WebSocket events for state updates
await feed.getOrCreate({ watch: true });
feed.state.subscribe((state) => {
  // Called everytime the state changes
  console.log(state);
});

// or if you only want to observe part of the state
feed.state.subscribeWithSelector(
  (state) => ({
    activities: state.activities,
  }),
  (state, prevState) => {
    console.log(state.activities, prevState?.activities);
  },
);

// Current state
console.log(feed.state.getLatestValue());
Next
Installation