# stream-react

Скилл для сборки и аудита чата, видео и лент на Stream SDK в React и Next.js. Помогает не писать код по устаревшей памяти.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 304 установки · ★ 20
- Автор: GetStream
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/GetStream/agent-skills/tree/HEAD/skills/stream-react/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/stream-react

## Что делает

Скилл закрывает работу с Stream Chat, Video, Feeds и Moderation в веб-приложениях на React и Next.js. Он пригодится, когда нужно поднять новое приложение, добавить Stream в существующий проект, проверить интеграцию или перейти на новую мажорную версию SDK. React Native здесь не покрывается — для него есть отдельный скилл `stream-react-native`.

Главное правило скилла: не писать код Stream SDK по памяти. API меняются между мажорами, поэтому сначала читаются документы через команду `getstream docs`, например `cat $(getstream docs chat-sdk/react)/INDEX.md`. Настройка начинается с `getstream init` и `getstream env`. Токены выпускаются на сервере: маршрут вроде `/api/token` использует секрет и возвращает токен вместе с apiKey, а секрет на клиент не попадает. Если в приложении уже есть авторизация или эндпоинт токена, скилл расширяет его, а не создаёт второй.

Есть и жёсткие ограничения. Клиенты монтируются один раз на уровне оболочки приложения, а `disconnectUser()` в очистке экрана убивает клиент, которым пользуются все остальные экраны. Кастомные типы реакций должны быть зарегистрированы в `reactionOptions` — незарегистрированные молча не отрисуются. Правила модерации на бесплатных планах возвращают 403, поэтому там остаётся блоклист с конфигом. Смена настроек типа звонка не применяется к уже существующим звонкам, так что проверять её стоит на новом id звонка.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add GetStream/agent-skills --skill stream-react -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/stream-react/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/stream-react/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add GetStream/agent-skills --skill stream-react -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/stream-react/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add GetStream/agent-skills --skill stream-react -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/stream-react/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install GetStream/agent-skills stream-react
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/stream-react/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add GetStream/agent-skills --skill stream-react -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/GetStream/agent-skills --path skills/stream-react
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/stream-react/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add GetStream/agent-skills --skill stream-react -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/GetStream/agent-skills/tree/HEAD/skills/stream-react/SKILL.md

## Когда брать
- поднять новое приложение на Stream Chat в Next.js
- добавить видеозвонки в существующий React-проект
- проверить интеграцию Stream перед релизом
- перейти на новую мажорную версию Stream SDK
- перенести проект с Sendbird на Stream

## Примеры запросов агенту
- Добавь Stream Chat в мой Next.js проект: экран логина, список каналов, личные сообщения
- Проверь интеграцию Stream Video в этом приложении и скажи, что сломается
- Обнови Stream Chat SDK до последнего мажора и почини то, что отвалилось

## Похожие
- [zoom-contact-center-android](https://affpapa.org/nevibecode/skills/zoom-contact-center-android.md) — скилл · ★ 7596
- [ai-elements](https://affpapa.org/nevibecode/skills/vercel-ai-elements.md) — скилл · 20400 установок
- [text-message-animation](https://affpapa.org/nevibecode/skills/text-message-animation.md) — скилл · 589 установок
- [metabase-react-sdk-setup](https://affpapa.org/nevibecode/skills/metabase-react-sdk-setup.md) — скилл · 362 установки
- [vercel-react-view-transitions](https://affpapa.org/nevibecode/skills/vercel-react-view-transitions.md) — скилл · 168100 установок
- [gsap-react](https://affpapa.org/nevibecode/skills/gsap-react.md) — скилл · 66300 установок

Из того же набора: [getstream/agent-skills](https://affpapa.org/nevibecode/by/getstream/agent-skills.md) — 4 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md