Installation

Build with Stream CLI and Agent Skills

The Stream CLI and Agent Skills provide AI coding agents, such as Claude Code, Cursor, and Codex, with the tools and knowledge necessary to build apps with Stream.

Install the CLI and add the skills to your project:

curl -fsSL https://getstream.io/cli.sh | bash
getstream skills stream-react

Once installed, invoke it from your agent:

/stream Add Stream Feeds to my React app.

The /stream skill acts as a router, reading your request and dispatching it to the specialist skill. You can also invoke the /stream-react skill directly.

Stream Agent Skills can also be installed from skills.sh.

npm install @stream-io/feeds-react-sdk
# or using yarn
yarn add @stream-io/feeds-react-sdk

GitHub repository: https://github.com/GetStream/stream-feeds-js. Feel free to submit bug reports and feature requests.

The package can be used with both JavaScript and TypeScript.

Client configuration

import { useCreateFeedsClient } from "@stream-io/feeds-react-sdk";

const client = useCreateFeedsClient({
  apiKey,
  userData: {
    id: "adam",
    // Optional data
    name: "Adam",
    image: "url/to/profile/picture",
  },
  tokenOrProvider: "<string token or token API call>",
  // Optional
  options: {
    timeout: 5000,
  },
});

The timeout option is the per-request timeout in milliseconds (default 3000).

Custom headers

custom_headers are sent along with every API request:

import { useCreateFeedsClient } from "@stream-io/feeds-react-sdk";

const client = useCreateFeedsClient({
  apiKey,
  userData: { id: "adam" },
  tokenOrProvider: "<string token or token API call>",
  options: {
    custom_headers: {
      "x-stream-ext": "my-value",
    },
  },
});

custom_headers can't be used to overwrite the SDK's internal settings, and they apply to HTTP requests only, not to the WebSocket connection.

Supported React versions: 17 || 18 || 19

Server-side rendering (SSR)

The React Activity Feeds SDK is built for the browser and does not support server-side rendering. Do not render SDK components or call SDK hooks (for example useCreateFeedsClient) during the server render pass in SSR frameworks such as Next.js or Remix.

Next.js example

In the Next.js Pages Router, you can load a feeds-only subtree on the client with next/dynamic and { ssr: false }. See Lazy loading with no SSR in the Next.js docs.

import dynamic from "next/dynamic";

const FeedsApp = dynamic(() => import("../components/FeedsApp"), {
  ssr: false,
});

export default function Page() {
  return <FeedsApp />;
}

Point the dynamic import at a module that imports @stream-io/feeds-react-sdk and renders your feeds UI.

In the App Router, put all feeds hooks and components in a file that starts with 'use client', then import that file from your page.tsx. Your page can stay a Server Component; only the feeds module is client-side.

// app/feeds-ui.tsx
"use client";

import { useCreateFeedsClient } from "@stream-io/feeds-react-sdk";

export function FeedsUi() {
  const client = useCreateFeedsClient({
    /* ... */
  });
  // ...
}

// app/page.tsx
import { FeedsUi } from "./feeds-ui";

export default function Page() {
  return <FeedsUi />;
}