一个用于管理 Codex 配置、MCP 服务器、节点和项目的现代化桌面应用
Codex Mate 是一个基于 Tauri 2.0 + React + TypeScript 构建的桌面应用，旨在简化 Codex CLI 的配置管理。它提供了直观的图形界面来管理：
- 📝 配置文件编辑 - 可视化编辑
config.toml文件 - 🔌 MCP 服务器管理 - 管理 Model Context Protocol 服务器配置
- 🌐 节点管理 - 管理 AI 节点和凭据
- 📂 项目信任管理 - 控制项目的信任级别
- ⚙️ 系统设置 - 检测和管理 Codex CLI 安装
- 🎨 现代化 UI - 美观的界面设计，流畅的交互体验
- 🚀 高性能 - 基于 Tauri 构建，占用资源少，启动速度快
- 🔒 安全可靠 - Rust 后端保证安全性和稳定性
- 📱 响应式布局 - 适配不同屏幕尺寸
- 🛠️ 易于扩展 - 清晰的代码架构，易于添加新功能
- 🌍 跨平台 - 支持 Windows、macOS 和 Linux
| 配置编辑器 | MCP 管理 |
|---|---|
| 节点管理 | 项目管理 |
|---|---|
# 克隆仓库
git clone https://github.com/oddfar/Codex-Mate.git
# 进入项目目录
cd Codex-Mate
# 安装依赖
pnpm install# 启动开发服务器（仅前端）
pnpm dev
# 启动 Tauri 应用（前端 + 后端）
pnpm tauri dev# 构建应用
pnpm tauri build构建产物位于 src-tauri/target/release/bundle/ 目录。
Codex Mate/
├── src/ # 前端源码
│ ├── main.tsx # React 应用入口
│ ├── styles.css # 全局样式
│ ├── types.ts # TypeScript 类型定义
│ ├── config/ # 配置文件
│ │ └── menuConfig.tsx # 菜单配置
│ ├── hooks/ # 自定义 Hooks
│ │ └── index.ts # Hooks 集合
│ ├── utils/ # 工具函数
│ │ └── index.ts # 工具函数集合
│ └── ui/ # UI 组件
│ ├── App.tsx # 主应用组件
│ ├── components/ # 可复用组件
│ │ ├── Common.tsx # 通用组件
│ │ ├── Layout.tsx # 布局组件
│ │ ├── MainContent.tsx # 主内容区
│ │ └── Sidebar.tsx # 侧边栏
│ └── pages/ # 页面组件
│ ├── ConfigEditor.tsx # 配置编辑器
│ ├── Mcp.tsx # MCP 管理
│ ├── Nodes.tsx # 节点管理
│ ├── Projects.tsx # 项目管理
│ └── Settings.tsx # 设置
├── src-tauri/ # Tauri 后端
│ ├── src/
│ │ └── main.rs # Rust 主程序
│ ├── Cargo.toml # Rust 依赖
│ └── tauri.conf.json # Tauri 配置
├── index.html # HTML 入口
├── package.json # npm 配置
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置
- 框架: React 18.3
- 语言: TypeScript 5.5
- 构建工具: Vite 5.4
- 样式: CSS3 + CSS Variables
- 框架: Tauri 2.0
- 语言: Rust
- API: Tauri Commands
- 包管理器: pnpm
- 代码规范: TypeScript ESLint
- 版本控制: Git
- 直接编辑 Codex 配置文件
config.toml - 语法高亮和自动保存
- 一键重载配置
- 添加/编辑/删除 MCP 服务器
- 配置服务器命令和参数
- 管理环境变量
- 管理多个 AI 节点
- 切换当前激活节点
- 配置节点凭据（API Key）
- 支持各种 AI 提供商
- 管理项目信任级别
- 添加/编辑/删除项目配置
- 快速切换项目状态
- 检测 Codex CLI 安装状态
- 查看版本信息
- 快速访问安装文档
- 在
src/ui/pages/创建页面组件：
// src/ui/pages/NewFeature.tsx
import React from 'react'
import { invoke } from '@tauri-apps/api/core'
import { useAsyncAction } from '../../hooks'
export function NewFeature() {
const { loading, error, execute } = useAsyncAction()
const handleAction = async () => {
await execute(async () => {
await invoke('your_command')
}, '操作成功')
}
return (
<div className="card">
<div className="card-header">
<h3 className="card-title">新功能</h3>
</div>
{/* 你的内容 */}
</div>
)
}- 在
src/config/menuConfig.tsx注册菜单：
import { NewFeature } from '../ui/pages/NewFeature'
export const menuConfig: MenuItem[] = [
// ...现有菜单
{
id: 'new-feature',
label: '新功能',
component: NewFeature,
},
]修改 src/styles.css 中的 CSS 变量：
:root {
--primary-color: #0066cc;
--spacing-md: 16px;
--border-radius: 6px;
}在 src-tauri/src/main.rs 添加新命令：
#[tauri::command]
fn your_command(param: String) -> Result<String, String> {
// 你的逻辑
Ok("Success".to_string())
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![
your_command,
// ...其他命令
])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}更多开发指南请参考 QUICKSTART.md。
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
- 使用 TypeScript 进行类型检查
- 遵循 ESLint 规则
- 编写清晰的注释
- 保持代码简洁可读
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
- 项目地址：https://github.com/oddfar/Codex-Mate
- 问题反馈：Issues
- 支持多语言（国际化）
- 添加主题切换功能
- 集成终端功能
- 支持插件系统
- 云同步配置
- 自动更新功能
如果觉得这个项目有帮助，请给个 ⭐ Star 支持一下！
Made with ❤️ by oddfar