{"library":"stream-chat-react","title":"Stream Chat React Components","type":"library","description":"Stream Chat React is the official React component library for building real-time chat UIs using the Stream Chat API. The current stable version is 14.0.1, with frequent patch releases and significant major version updates, such as the recent v14.0.0 which introduced a complete visual and architectural refresh. This SDK provides a comprehensive set of UI components for various chat use cases, including livestream, team collaboration, messaging, and customer support, abstracting away much of the complexity of real-time communication. Key differentiators include its deep integration with the Stream Chat backend service, a highly customizable component system, and a robust API for handling chat functionality, making it a powerful tool for developers needing to implement rich chat experiences quickly.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install stream-chat-react"],"cli":null},"imports":["import { Chat } from 'stream-chat-react';","import { Channel } from 'stream-chat-react';","import { MessageList } from 'stream-chat-react';","import { MessageInput } from 'stream-chat-react';","import { StreamChat } from 'stream-chat';","import 'stream-chat-react/dist/css/index.css';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://getstream.io/chat/sdk/react/","github":"https://github.com/GetStream/stream-chat-react","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/stream-chat-react","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport { StreamChat } from 'stream-chat';\nimport { Chat, Channel, ChannelHeader, MessageList, MessageInput, Window, LoadingIndicator } from 'stream-chat-react';\nimport 'stream-chat-react/dist/css/index.css';\n\nconst API_KEY = process.env.STREAM_API_KEY ?? '';\nconst USER_ID = process.env.STREAM_USER_ID ?? 'john-doe';\nconst USER_TOKEN = process.env.STREAM_USER_TOKEN ?? 'YOUR_USER_TOKEN'; // Generate this on your backend\n\nconst client = StreamChat.getInstance(API_KEY);\n\nfunction App() {\n  const [channel, setChannel] = useState(null);\n\n  useEffect(() => {\n    async function initChat() {\n      if (!API_KEY || !USER_ID || !USER_TOKEN) {\n        console.error('Please provide STREAM_API_KEY, STREAM_USER_ID, and STREAM_USER_TOKEN environment variables.');\n        return;\n      }\n      try {\n        await client.connectUser(\n          {\n            id: USER_ID,\n            name: USER_ID,\n            image: `https://getstream.io/random_png/?id=${USER_ID}&name=${USER_ID}`,\n          },\n          USER_TOKEN,\n        );\n\n        const newChannel = client.channel('messaging', 'react-chat-demo', {\n          name: 'React Chat Tutorial',\n          members: [USER_ID, 'other-user-id'], // Add other users you want in the channel\n        });\n        await newChannel.watch();\n        setChannel(newChannel);\n      } catch (error) {\n        console.error('Failed to connect or join channel:', error);\n      }\n    }\n\n    initChat();\n\n    return () => {\n      client.disconnectUser();\n    };\n  }, []);\n\n  if (!channel) return <LoadingIndicator />;\n\n  return (\n    <Chat client={client} theme='messaging light'>\n      <Channel channel={channel}>\n        <Window>\n          <ChannelHeader />\n          <MessageList />\n          <MessageInput />\n        </Window>\n      </Channel>\n    </Chat>\n  );\n}\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to set up the Stream Chat client, connect a user, join a channel, and render a basic chat UI with message list and input components using `stream-chat-react` v14.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}