🪄 OneUIToConnectThemAll
*一个UI将它们全部连接起来。*
“在分散通信的时代——一个统一它们的界面。”
______________________________________________________________________
🌍 Overhet项目
OneUIToConnectThemAll 是一个通用的界面，将Outlook，Teams，Slack（和其他通信平台）集成到一个直观的用户体验中。 应用程序使用 MCP服务器 （模型上下文协议）用于安全连接到外部平台API，并集中呈现所有数据。
✨ 主要特点
- 🔗 多平台集成： Outlook、团队、Slack en meer
- 🧠 AI 驱动的上下文管理： 自动摘要、分组和过滤对话
- 🪶 优雅的UI： 极简主义设计，完全可定制主题
- ⚙️ 基于MCP： 模型代理和外部服务之间的安全连接
- 📡 进一步： 使用新的连接器或 UI 模块轻松扩展
______________________________________________________________________
🧩 建筑
graph TD
UI[One UI] --> MCP1[MCP Connector: Outlook]
UI --> MCP2[MCP Connector: Teams]
UI --> MCP3[MCP Connector: Slack]
UI --> AI[Context Engine]
AI --> Storage[(Unified Cache)]
MCP1 --> API1[Outlook API]
MCP2 --> API2[Teams API]
MCP3 --> API3[Slack API]
Storage --> UI它是如何工作的：
- 一个UI 通过MCP连接器与不同平台进行通信
- MCP服务器 处理身份验证和 API 调用
- 上下文引擎 使用AI处理和分析消息
- 统一高速缓存 本地存储数据以便快速访问
- 所有信息都在一个连贯的界面中呈现
______________________________________________________________________
🛠️ 技术栈
前端
- 框架： Next.js 14与应用路由器
- UI库： 顺风CSS+Shadcn/ui
- 状态管理： 坚持不懈
- 主题： 自定义主题引擎满足暗/亮模式
后端和集成
- MCP协议： 平台集成模型上下文协议
- API客户端： Microsoft Graph API、Slack API、Teams API
- 身份验证： OAuth 2.0 适用于所有平台
- 缓存： lokale数据库的Redis（SQLite/PPostgreSQL）
人工智能与背景
- AI模型： 当地LLM的Claude API
- 上下文处理： LangChain用于对话分析
- 嵌入： 语义搜索和分组
______________________________________________________________________
📊 项目状态
✅ 状态： 第一阶段完成-基础准备就绪
路线图
第一阶段：基础（2025年第一季度）✅
- \[x\] 设置项目架构
- \[x\] 实现基本用户界面框架
- \[x\] 开发第一个MCP连接器（Slack）
- \[x\] 基本身份验证系统
第二阶段：核心功能（2025年第二季度）
- \[\]展望和团队MCP连接器en
- \[\]上下文引擎与人工智能集成
- \[\]统一消息接口
- \[ \] 搜索和过滤功能
第三阶段：增强（2025年第三季度）
- \[ \] 高级AI功能（总结，优先级）
- \[ \] 自定义主题和个性化
- \[ \] 通知系统
- \[ \] 性能优化
第四阶段：扩建（2025年第四季度）
- \[ \] 插件系统的新连接器
- \[\]移动伴侣应用程序
- \[\]企业功能
- \[\]社区市场
______________________________________________________________________
🚀 入门指南
先决条件
要参与这个项目，你需要：
- Node.js （v18 或更高）
- npm 的 pnpm
- Git
- mkcert （对于本地HTTPS证书 - 安装说明)
- 要集成的平台的 API 访问：
- 具有管理员权限的 Slack 工作区（Phase 1 需要） - Microsoft 365 帐户（适用于 Outlook/Teams - 第 2 阶段） - Claude API 密钥（可选，用于 AI 功能 - 第 3 阶段）
⚠️ 重要 ： Slack 需要 HTTPS 才能使用 OAuth。我们使用mkcert进行本地HTTPS开发！
安装
# Clone de repository
git clone https://github.com/Xiliath/OneUIToConnectThemAll.git
cd OneUIToConnectThemAll
# Installeer dependencies
npm install
# Setup HTTPS certificaten voor lokale ontwikkeling
# macOS/Linux:
npm run setup-https
# Windows:
npm run setup-https:windows
# Copy environment variabelen
cp .env.example .env
# Configureer je API keys in .env
# SLACK_CLIENT_ID=your_slack_client_id
# SLACK_CLIENT_SECRET=your_slack_client_secret
# SLACK_SIGNING_SECRET=your_slack_signing_secret
# SLACK_REDIRECT_URI=https://localhost:3000/api/auth/slack/callback
# NEXT_PUBLIC_APP_URL=https://localhost:3000
# Start development server (nu met HTTPS!)
npm run dev该应用程序现在可在 https://localhost:3000
注： 的 setup-https script 安装 mkcert 并生成本地 SSL 证书。您的浏览器会自动信任它！
Slack应用程序设置
要整合 Slack，您需要 Slack App：
第1步：配置Slack应用程序
- 转到 https://api.slack.com/apps
- Klik op“从头开始创建新应用程序”
- 为您的应用命名并选择工作区
- 转到“OAuth & Permissions”并在下面添加这些范围 用户令牌范围:
- channels:history - channels:read - chat:write - users:read - groups:read - groups:history
- 添加重定向URL：
https://localhost:3000/api/auth/slack/callback
- ⚠️ 重要 ： 使用精确 https://localhost:3000没有 http://!
- 复制 客户端ID, 客户端密钥，en 签名密码 到你
.env文件
步骤2：测试整合
- 请确保您的HTTPS证书已生成：
npm run setup-https - 启动去开发服务器：
npm run dev - 转到 https://localhost:3000
- Klik op“转到仪表板”
- 点击“连接Slack”
- 在 Slack 工作区中授权应用
- 您将被重定向到您可以查看频道的仪表板
注： 您的浏览器将信任HTTPS连接，因为mkcert安装了本地CA！
项目结构
OneUIToConnectThemAll/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ └── auth/ # OAuth handlers
│ ├── dashboard/ # Dashboard page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── ui/ # UI components (Button, Card, etc.)
│ ├── message-list.tsx # Message display
│ └── sidebar.tsx # Channel sidebar
├── lib/ # Utilities
│ ├── store.ts # Zustand state management
│ └── utils.ts # Helper functions
├── services/ # Business logic
│ ├── auth/ # OAuth service
│ └── mcp/ # MCP connectors
├── types/ # TypeScript types
│ └── index.ts # Type definitions
└── __tests__/ # Jest tests______________________________________________________________________
💡 用法
第一阶段特征
Slack集成：
- 启动去开发服务器满足
npm run dev - 转到 http://localhost:3000
- Klik op“转到仪表板”
- 点击“连接Slack”
- 在 Slack 工作区中授权应用
- 在统一界面中查看频道和消息
发展
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Lint code
npm run lintGebruik van de MCP连接器
import { slackConnector } from '@/services/mcp'
// Connect to Slack
slackConnector.setAccessToken('your-access-token')
await slackConnector.connect()
// Get channels
const channels = await slackConnector.getChannels()
// Get messages
const messages = await slackConnector.getMessages('channel-id', 50)
// Send message
const newMessage = await slackConnector.sendMessage('channel-id', 'Hello!')计划功能（Phase 2+）：
// Voorbeeld: Berichten ophalen van alle platforms
const messages = await oneUI.getUnifiedMessages({
platforms: ['slack', 'teams', 'outlook'],
timeRange: 'today',
filter: 'unread'
});
// Voorbeeld: AI-samenvatting van conversaties
const summary = await oneUI.summarizeThread(threadId, {
maxLength: 200,
style: 'concise'
});______________________________________________________________________
🔧 故障排除
HTTPS证书问题
问题： 浏览器显示“您的连接不是私有的”
- 解决方案 ： 跑
npm run setup-https安装mkcert并生成证书 - 请检查 mkcert 是否正确安装：
mkcert -version - 跑
mkcert -install安装本地CA - 安装 CA 后重新启动浏览器
问题： 启动时出现“ENOENT: no such file or directory”错误
- 解决方案 ： 您尚未生成 HTTPS 证书
- 跑
npm run setup-https（macOS/Linux）npm run setup-https:windows（Windows） - 检查文件是否存在于
certificates/目录
问题： 未找到mkcert命令
- 解决方案 ： 安装 mkcert ：
- macOS： brew install mkcert - Linux： 查看 mkcert安装指南 - 窗户： choco install mkcert 的 scoop install mkcert
Slack OAuth问题
问题： “redirect_uri无效”
- 解决方案 ： 检查您是否准确
https://localhost:3000/api/auth/slack/callback您 已 使用 - 请确保您使用的是HTTPS，而不是HTTP。
- 更改后重新启动 Next.js 服务器
.env
问题： OAuth 回调无法正常工作
- 解决方案 ：
- 确保 NEXT_PUBLIC_APP_URL 在 .env 已设置为 https://localhost:3000 - 检查浏览器控制台和服务器日志是否有错误 - 确认您的开发服务器正在运行 https://localhost:3000
问题： “无法连接”或“SSL协议错误”
- 解决方案 ：
- 检查证书是否已正确生成 certificates/ - Herstart je开发服务器 - 尝试清除浏览器缓存
用于生产
Voor生产部署（Vercel、Netlify等）：
- 使用您的生产域HTTPS URL
- 将Slack应用配置中的重定向URI更新到生产URL
- 更新
NEXT_PUBLIC_APP_URL在多变的环境中 - 您在生产中不需要mkcert证书（托管服务提供商管理HTTPS）
______________________________________________________________________
🤝 贡献
欢迎捐款！这个项目还处于早期阶段，有很大的投入空间。
如何贡献：
- 分叉 去仓库
- 创建 一个特征分支（
git checkout -b feature/AmazingFeature) - 提交 我变了(
git commit -m 'Add some AmazingFeature') - 推 分支机构（
git push origin feature/AmazingFeature) - 打开 一 Pull Request
开发指南
- 遵循现有的代码样式
- 写明确的提交消息
- 必要时更新文档
- 彻底测试您的代码
- 尊重隐私和安全最佳实践
欢迎帮助的地区：
- 🔌 MCP连接器开发
- 🎨 UI/UX设计
- 🧠 AI/ML集成
- 📚 文档
- 🧪 测试与质量保证
- 🌍 国际化
______________________________________________________________________
📜 许可证
本项目在MIT许可证下授权 - 查看 许可证 文件详情。
______________________________________________________________________
👤 作者
帕斯卡尔·范·奥斯滕布里奇
- github： @西利亚
______________________________________________________________________
🙏 致谢
- 谢谢 模型上下文协议 协议团队
- 受到统一沟通体验的需求的启发
- 所有未来的贡献者和早期采用者
______________________________________________________________________
📬 联系与支持
- 问题：
- 讨论：
______________________________________________________________________
⚡ 对统一通信充满热情
*星⭐ 如果你觉得这个项目有趣！*