OpenSlack - Open Source Slack Clone with AI

A beautiful, fully-featured Slack clone built with Next.js 14, TypeScript, and Tailwind CSS. Features optional AI-powered capabilities using OpenAI.

Features

Core Messaging

• Channels - Public and private channels with descriptions and topics
• Direct Messages - One-on-one conversations
• Message Threading - Full thread support with reply counts
• Rich Text - Bold, italic, strikethrough, code blocks, links
• Reactions - Emoji reactions with counters
• Message Actions - Edit, delete, pin, bookmark, share, copy
• Search - Real-time search across all messages

User Experience

• Dark Mode - Beautiful dark theme (Slack-authentic colors)
• Responsive Sidebar - Collapsible with starred channels, channel sections, and DMs
• User Presence - Online, away, DND, and offline status indicators
• Keyboard Shortcuts - Enter to send, Shift+Enter for new line, Escape to cancel
• Smooth Animations - Slide-in panels, fade-in messages, hover effects
• Formatting Toolbar - Rich text editing with formatting buttons

AI Features (Optional - Requires OpenAI API Key)

• Thread Summarization - Get AI summaries of long threads and channels
• Smart Replies - AI-suggested responses based on conversation context
• Tone Adjustment - Rewrite messages as Professional, Casual, Friendly, or Concise
• AI Chat Panel - Ask questions about your conversations
• Translation - Translate messages to any language
• Action Items - Extract action items from conversations

Note: AI features are completely optional. The app works perfectly without an API key. If you want to use AI features, you can enter your OpenAI API key in Settings. Your key is stored locally in the browser and is never sent to any server other than OpenAI.

Tech Stack

Technology	Purpose
Next.js 14	React framework with App Router
TypeScript	Type safety
Tailwind CSS	Utility-first styling
Zustand	Lightweight state management
Lucide React	Beautiful icon library
date-fns	Date formatting
OpenAI SDK	AI features (optional)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/open-slack.git
cd open-slack

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 to see OpenSlack.

Enable AI Features (Optional)

1. Get an API key from OpenAI
2. Click the Settings gear icon in the top-right
3. Go to the AI Features tab
4. Paste your API key and click Save AI Settings
5. You can test your key with the Test Key button

Alternatively, create a .env.local file:

cp .env.example .env.local
# Edit .env.local and add your OpenAI API key

Project Structure

open-slack/
├── src/
│   ├── app/
│   │   ├── api/ai/          # AI API route
│   │   ├── globals.css       # Global styles
│   │   ├── layout.tsx        # Root layout
│   │   └── page.tsx          # Main page
│   ├── components/
│   │   ├── ai/              # AI panel components
│   │   ├── chat/            # Chat area components
│   │   │   ├── ChatArea.tsx
│   │   │   ├── ChatHeader.tsx
│   │   │   ├── MessageInput.tsx
│   │   │   ├── MessageItem.tsx
│   │   │   ├── MessageList.tsx
│   │   │   └── ThreadPanel.tsx
│   │   ├── modals/          # Modal components
│   │   │   ├── CreateChannelModal.tsx
│   │   │   └── SettingsModal.tsx
│   │   ├── sidebar/         # Sidebar components
│   │   │   └── Sidebar.tsx
│   │   └── ui/              # Reusable UI components
│   │       └── Avatar.tsx
│   └── lib/
│       ├── ai.ts            # AI utility functions
│       ├── mock-data.ts     # Sample data
│       ├── store.ts         # Zustand store
│       ├── types.ts         # TypeScript types
│       └── utils.ts         # Utility functions
├── public/
├── .env.example
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Contributing

Contributions are welcome! Here are some ways you can contribute:

1. Report bugs - File an issue with steps to reproduce
2. Suggest features - Open a feature request
3. Submit PRs - Fork, create a branch, make changes, and submit a PR

Development Guidelines

• Follow the existing code style
• Use TypeScript for all new files
• Write meaningful commit messages
• Test your changes before submitting

Roadmap

• Real-time messaging with WebSockets
• User authentication (NextAuth.js)
• Database integration (PostgreSQL/Prisma)
• File uploads and sharing
• Voice/Video calls (WebRTC)
• Mobile responsive design
• Custom emoji support
• Message scheduling
• Workflow automations
• Plugin/App marketplace

License

This project is open source and available under the MIT License.

Acknowledgments

• Inspired by Slack
• Built with Next.js
• Icons by Lucide
• AI powered by OpenAI

---

Made with love by the OpenSlack Community

If you find this project useful, please give it a star on GitHub!