A production-ready live streaming chat application that integrates Stream's React Chat SDK with Synthetic's inference API to provide context-aware smart reply suggestions.
- Real-time Chat: Built on Stream's powerful Chat API with React SDK
- AI Smart Replies: Context-aware reply suggestions powered by Synthetic AI
- Streaming Platform UI: Sleek, dark theme inspired by Twitch and StreamLabs
- Secure Authentication: Backend token generation for Stream users
- Fully Responsive: Works seamlessly across all devices
- Node.js 18+ and npm installed
- Stream account with API key and secret
- Synthetic API key
- Basic knowledge of React and Next.js
npm installCreate a .env.local file in the root directory:
# Client-side (public)
NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key
# Server-side (private)
STREAM_API_SECRET=your_stream_api_secret
SYNTHETIC_API_KEY=your_synthetic_api_keynpm run devOpen http://localhost:3000 to see the application.
The /api/token endpoint generates secure Stream user tokens:
- Accepts userId and userName
- Creates or updates user in Stream
- Returns authentication token
- Initializes Stream client with user token
- Creates or joins a messaging channel
- Renders chat UI with Stream's React components
- Captures recent conversation messages
- Sends context to Synthetic AI inference API
- Generates 3 contextually relevant reply suggestions
- Displays suggestions as clickable buttons
- Sends selected reply instantly to chat
┌─────────────┐
│ Frontend │
│ (Next.js) │
└──────┬──────┘
│
├─────────────┐
│ │
▼ ▼
┌─────────────┐ ┌─────────────┐
│ Stream │ │ Synthetic │
│ Chat API │ │ AI API │
└─────────────┘ └─────────────┘Deploy to Vercel with one click:
- Push code to GitHub
- Import project in Vercel
- Add environment variables
- Deploy
- Frontend: Next.js 15, React 19, TypeScript
- Chat: Stream Chat React SDK
- AI: Synthetic Inference API
- Styling: Tailwind CSS, shadcn/ui
- Deployment: Vercel
stream-synthetic
├─ app
│ ├─ api
│ │ ├─ smart-replies
│ │ │ └─ route.ts
│ │ └─ token
│ │ └─ route.ts
│ ├─ globals.css
│ ├─ layout.tsx
│ └─ page.tsx
├─ components
│ ├─ discord-chat-layout.tsx
│ ├─ smart-reply-bar.tsx
│ ├─ stream-chat-container.tsx
│ ├─ theme-provider.tsx
│ └─ ui
│ ├─ accordion.tsx
│ ├─ alert-dialog.tsx
│ ├─ alert.tsx
│ ├─ aspect-ratio.tsx
│ ├─ avatar.tsx
│ ├─ badge.tsx
│ ├─ breadcrumb.tsx
│ ├─ button-group.tsx
│ ├─ button.tsx
│ ├─ calendar.tsx
│ ├─ card.tsx
│ ├─ carousel.tsx
│ ├─ chart.tsx
│ ├─ checkbox.tsx
│ ├─ collapsible.tsx
│ ├─ command.tsx
│ ├─ context-menu.tsx
│ ├─ dialog.tsx
│ ├─ drawer.tsx
│ ├─ dropdown-menu.tsx
│ ├─ empty.tsx
│ ├─ field.tsx
│ ├─ form.tsx
│ ├─ hover-card.tsx
│ ├─ input-group.tsx
│ ├─ input-otp.tsx
│ ├─ input.tsx
│ ├─ item.tsx
│ ├─ kbd.tsx
│ ├─ label.tsx
│ ├─ menubar.tsx
│ ├─ navigation-menu.tsx
│ ├─ pagination.tsx
│ ├─ popover.tsx
│ ├─ progress.tsx
│ ├─ radio-group.tsx
│ ├─ resizable.tsx
│ ├─ scroll-area.tsx
│ ├─ select.tsx
│ ├─ separator.tsx
│ ├─ sheet.tsx
│ ├─ sidebar.tsx
│ ├─ skeleton.tsx
│ ├─ slider.tsx
│ ├─ sonner.tsx
│ ├─ spinner.tsx
│ ├─ switch.tsx
│ ├─ table.tsx
│ ├─ tabs.tsx
│ ├─ textarea.tsx
│ ├─ toast.tsx
│ ├─ toaster.tsx
│ ├─ toggle-group.tsx
│ ├─ toggle.tsx
│ ├─ tooltip.tsx
│ ├─ use-mobile.tsx
│ └─ use-toast.ts
├─ components.json
├─ hooks
│ ├─ use-dialog-manager.ts
│ ├─ use-mobile.ts
│ └─ use-toast.ts
├─ lib
│ ├─ synthetic-ai.ts
│ └─ utils.ts
├─ next.config.mjs
├─ package-lock.json
├─ package.json
├─ pnpm-lock.yaml
├─ postcss.config.mjs
├─ public
│ ├─ placeholder-logo.png
│ ├─ placeholder-logo.svg
│ ├─ placeholder-user.jpg
│ ├─ placeholder.jpg
│ └─ placeholder.svg
├─ README.md
├─ src
│ ├─ components
│ │ └─ chat
│ ├─ hooks
│ ├─ services
│ └─ types
├─ styles
│ └─ globals.css
└─ tsconfig.json