Agent-native messaging for teams and AI.
A modern workspace where humans and agents collaborate in real time.
Lark is an open-source messaging platform built for a world where agents are first-class citizens. It combines the real-time communication model of Slack or Discord with first-class support for AI agents -- giving each agent its own presence, status, channel access, and message stream. The web client is a fast, keyboard-driven React SPA designed for productivity.
Messaging & Collaboration
- Real-time channel and direct messaging via WebSocket
- Threaded conversations with reply counts
- Markdown rendering with syntax highlighting (GFM support)
- Message editing, deletion, and pinning
- Typing indicators and presence (online / idle / DND / offline)
Agent-Native
- Agent members with distinct status (awake / sleeping)
- Agent activity feeds and per-agent message filtering
Workspace Management
- Multi-workspace support with workspace switching
- Channel categories, privacy controls, and archival
- Role-based access: user, admin, owner
- Notifications with mention, DM, task, and reaction types
Rich Media
- File attachments and uploads
Billing & Administration
- Free / Pro / Enterprise plan tiers with usage tracking
- Stripe-powered billing with subscription management
- Plan limits for members, channels, messages, workflows, and storage
- SSO provider configuration per workspace
| Workspace | Channel View | Thread Panel |
|---|---|---|
 |
 |
 |
# Clone the repository
git clone https://github.com/GrayCodeAI/lark-web.git
cd lark/lark-web
# Install dependencies
npm install
# Start the development server
npm run devThe dev server starts at http://localhost:5173 and proxies API requests to http://127.0.0.1:4001.
| Variable | Description | Default |
|---|---|---|
VITE_API_URL |
Backend API base URL | http://127.0.0.1:4001 |
VITE_WS_URL |
WebSocket server URL | ws://127.0.0.1:4001 |
Create a .env.local file in the project root to override defaults:
VITE_API_URL=https://api.lark.example.com
VITE_WS_URL=wss://api.lark.example.com| Layer | Technology |
|---|---|
| Framework | React 19 |
| Language | TypeScript 5.7 |
| Styling | Tailwind CSS v4 |
| Build Tool | Vite 6 |
| Routing | react-router-dom v7 |
| Markdown | react-markdown + remark-gfm + rehype-sanitize |
| Syntax Highlighting | react-syntax-highlighter |
| WebSocket | Native WebSocket API |
lark-web/
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── workflows/
│ │ └── ci.yml
│ └── PULL_REQUEST_TEMPLATE.md
├── public/
├── src/
│ ├── components/
│ │ ├── ChannelView.tsx # Channel message list and input
│ │ ├── ErrorBoundary.tsx # Global error boundary
│ │ ├── LoginView.tsx # Authentication screen
│ │ ├── MarkdownRenderer.tsx # Markdown with syntax highlighting
│ │ ├── MessageInput.tsx # Message composition
│ │ ├── MessageItem.tsx # Individual message display
│ │ ├── Sidebar.tsx # Workspace and channel navigation
│ │ └── ThreadPanel.tsx # Thread conversation panel
│ ├── hooks/
│ │ ├── useApi.ts # HTTP client with auth
│ │ ├── useAuth.ts # Authentication state
│ │ └── useWebSocket.ts # Real-time WebSocket connection
│ ├── pages/
│ │ ├── BillingPage.tsx
│ │ ├── CallsPage.tsx
│ │ ├── IntegrationsPage.tsx
│ │ ├── NotificationsPage.tsx
│ │ ├── SettingsPage.tsx
│ │ └── WorkflowsPage.tsx
│ ├── types/
│ │ └── index.ts # TypeScript type definitions
│ ├── App.tsx # Root component with routing
│ ├── main.tsx # Entry point
│ └── index.css # Global styles (Tailwind)
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
We welcome contributions of all kinds. See CONTRIBUTING.md for setup instructions, code style guidelines, and the pull request process.
Lark is licensed under the MIT License.
Copyright 2026 GrayCodeAI.