Introducing Slack Kit
Building a near-accurate Slack prototype using Cursor.
If you’re building enterprise experiences, Slack is the most important third-party surface you’ll integrate with. Teams spend their entire workday there. Critical decisions get made there. Workflows get executed there. When you need to show how your product fits into a customer’s daily operations, you need to show it in Slack.
But prototyping Slack use cases with canvas tools is painstakingly slow. You’re manually creating static screens that can’t capture the dynamic nature of real conversations. You can’t show how a workflow unfolds over time. You can’t demonstrate how notifications appear. You can’t show how team members interact with your integration. Static screens fail to paint the real picture. They show what something looks like, but not how it feels to use in context.
When you want to show a contextual instance to stakeholders, you need something interactive that responds to their questions and demonstrates the actual experience.
Slack Kit solves this. It’s a complete Slack clone prototype built entirely with Cursor. Run npm run setup and you get a fully contextual workspace in seconds. Any industry. Any company size. Any use case. All interactive. All ready to demonstrate your product in the environment where it actually gets used.
Bringing your company’s context
The most powerful feature of Slack Kit isn’t visible in the UI. It’s the setup wizard that runs when you execute npm run setup. This single command transforms an empty prototype into a fully populated, realistic workspace in seconds.
The wizard asks ten questions: company name, description, industry, size, and logo path; your name, country, gender, and role; and your team’s nationalities. From those answers, it generates everything else.
Channels get auto-generated based on your industry. Tech companies get #engineering, #dev-ops, and #security. Finance companies get #compliance and #risk-management. Communication style gets inferred from company size and industry. Startups get casual messaging. Finance companies get formal tones. Team members get auto-generated based on the nationalities you provided, with randomized gender distribution, role assignments, and special attributes like emoji-heavy or verbose messaging. The system always includes “Rovo” as your AI assistant. Every channel gets conversation history with themes inferred from channel topics and your industry. File templates match your industry. API docs for tech. Compliance reports for finance.
The entire generation process happens in seconds. What would have taken hours of manual data entry happens instantly. The result feels authentic because it’s contextually aware of your industry, company size, and the information you provided.
Three-panel layout
Slack Kit replicates Slack’s proven three-panel interface structure. The left panel shows channels and direct messages. The center panel displays the conversation thread. The right panel provides contextual details. This layout feels familiar because it matches Slack’s design exactly. Smooth animations and natural transitions make the prototype feel like a production application, not a mockup.
Multiple themes
When you’re demonstrating your product in Slack, you often need to replicate certain user journeys in both light and dark modes to match the rest of the experience you’re showing. Having out-of-the-box themes helps with that. There are four distinct themes that you can switch between instantly. Two light themes, Solar Flare and Arctic Breeze, work perfectly for presentations and demos. Two dark themes, Midnight Express and Obsidian Dreams, reduce eye strain for extended use. The theme system uses CSS variables and Tailwind configuration for seamless transitions. Each theme provides a complete visual experience with carefully crafted color palettes, typography, and spacing.
Real-time message streaming
Slack Kit includes a real-time message streaming system that makes conversations feel alive. The system uses dual streaming to simulate how messages appear in a real Slack workspace.
Background streaming sends messages to random chats every 5-10 seconds with randomized timing. This creates the sense that conversations are happening across your workspace even when you’re not actively viewing them. Active chat streaming sends messages to the currently selected chat every 8-12 seconds, making the conversation you’re watching feel dynamic and engaging.
Smart throttling prevents unread message overload in the sidebar. When 40% or more chats have unread messages, streaming automatically stops. This prevents the interface from becoming overwhelming and matches how real Slack works when you have many active conversations.
Message content is not generic but contextual to your simulated company. Messages are contextually generated based on channel type, person traits, and your company context. A message in #engineering reads differently than one in #sales. A verbose team member generates longer messages. An emoji-heavy person includes more reactions. These details make each conversation feel authentic to your specific workspace.
History management caps each chat at 40 messages. Older messages get archived automatically, keeping conversations focused and preventing performance issues. This matches how real Slack handles long conversation threads.
The streaming system is what transforms Slack Kit from a static prototype into a living, breathing workspace that demonstrates how your product fits into an active team environment.
Rich emoji reactions
Communication in Slack Kit goes beyond simple text messages. You can react to messages with emoji to express agreement, celebrate wins, or acknowledge without cluttering the thread. The system supports the full range of emoji reactions with smooth animations. You can add new emoji reactions directly from the reaction picker. Multiple people can react to the same message, creating a realistic sense of engagement and making conversations feel alive.
In Slack, the chat thread is anchored to the bottom. When you add a new reaction emoji, it pushes the message stream up to accommodate the expanded reaction area. This behavior had to be handled carefully in the prototype to match Slack’s exact interaction pattern. The thread stays anchored while reactions expand naturally. It’s these small details that make the difference between a prototype that feels real and one that feels off.
Emoji statuses
Status communication happens through emoji statuses that appear next to your name throughout the interface. Set your status to communicate availability, mood, or current activity. It gives others context about your state without requiring a conversation. These are small signals that make the workspace feel alive.
Online and offline badges
Presence indicators show who’s currently active with online and offline badges. Green badges show who’s online. Gray badges show who’s offline. Yellow badges indicate away status. These badges appear in channel member lists, direct message conversations, and group direct messages, giving you a real-time sense of who’s available for collaboration.
The badges use real masks where the gaps behind the status dots show the background color. Hover fill and highlight fills work in a way that makes them look like real gaps. It’s a nifty workaround to get the visual appearance just right. This attention to detail ensures the badges look exactly like they do in the real Slack app.
Rich message composer
The message composer supports rich formatting, file attachments, and emoji. As you type, formatting options appear. You can drag and drop files directly into the composer. The composer feels responsive and polished, matching the quality of production messaging applications. It’s the kind of detail that makes stakeholders take your prototype seriously.
File embeds and previews
When files are shared in channels, Slack Kit generates rich previews with thumbnails, metadata, and download options. Images display inline. Documents show previews. Code files render with syntax highlighting. This makes file sharing feel integrated and natural, rather than requiring external downloads to understand what was shared.
Currently, five types of file embeds are supported out of the box: Loom, Figma, Confluence, Notion, and Jira. Each shows realistic thumbnails and metadata that match how these tools appear in Slack. You can always add more file embed types by adding more thumbnails to support even more types. This makes it easy to demonstrate how your product integrates with any file sharing service. The previews matter because they’re what people actually see when they use Slack.
Channel actions and management
Channel management happens through contextual actions accessible via right-click menus. You can mark channels as read, mute them, archive them, leave them, and perform other management tasks exactly as you would in Slack. These actions work seamlessly, providing a familiar experience that requires no learning curve. When you’re demonstrating workflows, these details matter. People expect things to work the way they do in real Slack.
Marking messages as read
Unread message management is handled through mark-as-read functionality. You can mark channels or entire conversations as read with a single click. In Slack, the mark as read action isn’t instant. There’s a subtle delay before the unread badge clears. We’ve simulated this behavior with a 300ms delay. When you click mark as read, the unread indicators update after a brief pause, matching the real Slack experience and giving you control over your attention and focus.
Having your own AI agent in chat
You can have your own AI assistant created based on your company context. We’ve shown this by creating a fake Merc AI as an example, but most companies nowadays have their own AI agent operating in Slack that can also be created as needed. The assistant appears as a bot in your workspace, understands your company context, and can help with information lookup, draft generation, meeting summaries, and task extraction. The AI assistant is company-native, meaning it understands your industry, your team structure, and your communication style. It’s not a generic assistant. It’s tailored to your specific workspace.
Third-party integrations and workflows
Slack Kit demonstrates how third-party integrations work through connectors, showing how workflows can trigger actions and operate on Slack as the surface. The Workday integration example shows a leave request workflow: when someone requests leave, their manager receives a message through Workday in Slack. This demonstrates how enterprise tools can integrate with Slack to surface notifications and actions directly in the conversation flow.
Anyone using Slack Kit can modify this connector to simulate any other workflow with actions. You can adapt it to show how your product integrates with Slack, how notifications appear, how approvals work, or how any enterprise workflow surfaces in Slack. The connector pattern makes it easy to demonstrate integrations with any third-party tool.
Download Slack Kit
Slack Kit is available as an open-source prototype. You can download it, fork it, and start tinkering with it right away. The repository includes everything you need to get started, including the setup wizard, all the components, and the theme system.
Make sure you go through the ReadMe.