MCP-X-web

---

🔥 限时福利：加群享 100 元生图生视频 Token

---

📸 产品预览

统一入口	内容精选
图片创作中心	视频创作中心

---

🎬 AIGC 视频案例 — MCP-X 视频工作台出品

以下视频均由 MCP-X 视频工作台全流程生成，从剧本编写、分镜设计、关键帧生成到最终成片，全程 AI 驱动。

🗡️ 仙剑奇侠传 ▶️ 点击观看视频 古风仙侠题材 · AI 剧本解析 · 多场景分镜 · 角色定妆照生成

⚡ 惊雷1号 ▶️ 点击观看视频 科幻动作题材 · AI 全流程制作 · 视频合成导出

💡 点击封面图跳转 GitHub 视频页面在线播放。也可访问 MCP-X 在线平台 体验完整的视频创作流程。

---

✨ 为什么选择 MCP-X？

🎬 全流程视频制作 从剧本到成片，AI 全程辅助 支持 Seedance 2.0 / Veo3 / 可灵 等	🖼️ 专业图像处理 文生图 / 图生图 / 局部编辑 多模型可选，满足各类创意需求	💻 AI 代码生成 对话式前端开发，实时预览 支持 React / Vue / HTML	🤖 智能对话 GPT / DeepSeek / Kimi 等 MCP 工具调用 + 知识库 RAG
🔧 MCP 市场 1000+ MCP 工具 一键配置，即插即用	🧠 Agent 市场 500+ 垂直智能体 开箱即用的行业解决方案	📚 企业知识库 私有文档智能检索 RAG 增强，精准问答	🌍 国际化 & 私有部署 中英双语界面 支持企业私有化部署

---

🎨 最新更新

v0.1.8 — 首页加载提速 · 画布缓存修复 · 隐私政策合规

• 🏠 首页加载体验优化：缩短刷新黑屏时间，首屏感知速度显著提升
  • 首页改为直接加载，去掉路由懒加载等待；HTML 内联骨架屏 + 预加载 hero.webp
  • 社区列表 sessionStorage 缓存，刷新后即时展示上次内容
  • 卡片按需懒加载、骨架占位替代全屏转圈；非视频模式不再预载 hero.mp4
• 🖼️ 图片编辑器 · 画布缓存修复：修复元素较多或生成视频后刷新，图片/视频无法加载的问题
  • 识别并过滤 volces / DashScope 等临时签名 URL，优先使用 OSS 永久链接与 base64
  • 刷新时从聊天记录合并补齐丢失的画布元素；localStorage 配额溢出时自动降级保存
  • 图片生成接口超时延长至 30 分钟；OSS 链接不再二次转 base64，避免误报失败
  • 媒体加载并发控制、视频串行恢复，避免多资源同时下载导致后续资源卡住
• 📜 隐私政策合规：补充 OAID、ANDROID ID、位置信息及 AdScope SDK 收集说明，满足华为 AppGallery 审核要求

v0.1.7 — 故事板模式 · Image 2 · 一键生成网页优化

• 🎬 视频工作台 · 故事板模式：全新上线专业故事板工作流
  • 使用 GPT Image 2 结合场景/角色参考图，按分镜文案生成多格故事板（人物、场景、运镜一图呈现）
  • 使用 Seedance 2.0 参考图模式将故事板转为视频，保持角色与场景一致性
  • 支持并发生成多镜头故事板、独立任务状态与失败重试
  • 当前平台内效果最优的视频创作链路：分镜可控 → 参考图生视频，兼顾质量与一致性
• 🖼️ 图像工作台 · GPT Image 2：全面接入 Image 2 大模型，文生图/图生图能力显著提升，现阶段平台最强图像模型
• 💻 应用构建 · 一键生成网页优化：优化 AI 生成网页的稳定性与预览体验，对话描述即可快速产出可编辑、可预览的完整页面

v0.1.6 — HTML 转 PPT 导出 & 应用构建增强

• 📊 HTML 转 PPT 导出：应用构建页新增「导出 PPT」功能，支持将 AI 生成的 HTML 幻灯片一键导出为 .pptx 文件
  • 背景与文字分离：截图作为背景图层，文字以独立文本框叠加，在 PowerPoint / WPS 中完全可编辑
  • 智能字体映射：自动识别中英文，映射到微软雅黑、宋体、Calibri 等系统字体，确保跨平台显示一致
  • 自动识别幻灯片结构：支持 section[data-title]、.slide、[data-slide] 等主流 PPT HTML 框架
  • 导出中显示全屏 Loading 遮罩，防止误操作
• 🔧 导出稳定性优化：修复多次导出时旧版脚本监听器残留导致页数翻倍的问题，通过版本号守卫 + 监听器引用管理彻底解决
• 💡 App Builder 体验：导出按钮仅在预览页面加载完成后可用，跨域预览自动提示

v0.1.5 — 视频链路与缓存体验优化

• 🆕 模型升级：支持最新 wan2.7 与 happy horse 视频模型，提升生成质量与风格覆盖
• 🎬 视频参数记忆：CreatorHub 与 ImageEditor 统一支持记住视频模型、分辨率、时长，下次进入自动恢复
• 🧭 画布加载提速：进入编辑器时优先恢复用户上次所在画布的本地缓存，并只异步加载当前画布消息
• 📱 9:16 占位框修复：视频生成占位符按比例展示，竖屏生成显示竖形预留框
• 🧱 画布优化：优化视频占位符与会话归档链路，避免异步初始化覆盖导致元素异常，并提升跨页面生成后回到画布的内容可追溯性
• 📚 文档补全：视频接口示例补充 audio / audioUrl 参数；导航栏 Skill 入口增加“即将上线”提示

v0.1.4 — Seedance 2.0 & 画布优化

• 🎬 Seedance 2.0 支持：视频生成能力新增 Seedance 2.0 模型，画质与动态表现大幅提升
• 🖼️ 画布视频首帧优化：修复刷新后视频封面偶尔不显示的问题
• 🔒 全局 401 拦截：所有 API 服务统一处理 Session 超时，自动跳转登录页
• 📋 粘贴 @标签自动关联：粘贴含 @图片N / @视频N 的文本时自动匹配画布媒体元素

v0.1.3 — 应用构建与预览

• 🍌 Nano Banana Pro 4K：图像能力新增高分辨率出图模型
• 🔒 HTTPS 预览代理：SSE 解析预览路径，同协议预览避免混合内容
• 🖼 跨域预览编辑：fetch + srcdoc 注入编辑器脚本，兼容跨域 dev 预览
• 📋 新建应用页：展示「我的应用」列表，可跳转构建页
• ✏️ 构建页体验：输入上限 8000 字，源代码 Tab 支持在线编辑

v0.1.2 — 文档 & 登录页升级

• 📚 文档全面升级，适配 OpenClaw（龙虾）接入
• 🔐 登录页全面重设计：玻璃拟态 + 动态光晕
• 🎬 图生视频增强：选中图片自动作为起始帧

v0.1.1 — 参考生视频

• 🎬 支持 @ 符号引用画布图片作为视频生成参考
• ✨ 界面全面优化

---

🌟 核心功能

🎬 1. AI 视频工作室（Video Studio）

支持：千问 / 即梦 / 可灵 / 海螺 / Seedance 2.0 / Veo3 / Runway 等

从剧本到成片的全流程 AI 视频制作：

功能	说明
故事板模式	GPT Image 2 生成多分镜故事板 → Seedance 2.0 参考图生视频，角色/场景一致、分镜可控，推荐高质量创作首选
剧本解析	AI 自动分析剧本，提取角色、场景、故事段落
分镜生成	智能生成专业分镜列表，含镜头运动、景别、关键帧
角色 & 场景	AI 生成角色定妆照和场景概念图，作为故事板与视频参考
视频生成	文生视频 / 图生视频 / 首尾帧插值 / 参考图模式
一键导出	浏览器端合并导出视频片段
资源库	IndexedDB 本地存储，角色/场景/视频资源复用

💬 2. AI 对话系统

支持：GPT / Gemini / DeepSeek / Kimi / 千问 等

• 多模型切换 · SSE 流式响应 · MCP 工具调用
• 网络搜索集成 · Agent 工作流人工介入 · 文件上传对话
• 企业知识库 RAG 增强检索

💻 3. 前端应用构建（App Builder）

类似 Bolt / Loveable 的 AI 前端构建体验

• 一键生成网页：自然语言描述需求，AI 快速生成完整网页并实时预览
• 对话式开发：支持多轮迭代修改布局、样式与交互
• 多框架：HTML / React / Vue / 静态网站
• 实时预览 · 可视化编辑 · 一键部署 · 代码下载 · HTML 导出 PPT

🖼️ 4. AI 图像编辑器

支持：千问 / Seed / Nano Banana / GPT Image 2 / Nano Banana Pro 4K 等

• GPT Image 2：平台现阶段最强图像模型，文生图/图生图质量领先
• 文生图 · 图生图 · 蒙版局部编辑
• 图生视频 · @ 符号参考生视频
• 多模型选择 · 多尺寸设置

🔧 5. MCP 服务市场 & Agent 市场

• 1000+ MCP 工具，按分类浏览、搜索、一键配置
• 500+ Agent 智能体，精选/最新/分类，开箱即用

---

🏢 企业级特性

特性	说明
🔐 安全认证	Token 认证体系 · 多租户架构 · 数据隔离
⚡ 高性能	SSE 流式响应 · IndexedDB 本地缓存 · 异步任务处理
🔌 开放集成	MCP 协议 · 多模型统一接口 · RESTful API
📊 企业管理	知识库 · 工作流编排 · 人工审批 · 用量计费
🌐 国际化	中英双语 · 支持私有化部署 · 数据合规

---

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 yarn

安装 & 运行

# 克隆项目
git clone https://github.com/TimeCyber/MCP-X-web.git
cd MCP-X-web

# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build

配置

在 src/config/index.ts 中修改 API 地址：

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ||
  (import.meta.env.PROD ? 'https://www.mcp-x.com/prod-api' : 'https://www.mcp-x.com/prod-api');

---

🛠 技术栈

类别	技术
前端框架	React 18 + TypeScript
构建工具	Vite 5
UI	Tailwind CSS + Ant Design
状态管理	Zustand + React Context
路由	React Router v6
HTTP	Axios
Markdown	react-markdown + remark-gfm
动画	Framer Motion
图标	Lucide React
本地存储	IndexedDB
视频处理	FFmpeg.wasm
文件压缩	JSZip

---

📁 项目结构

src/
├── components/      # 组件
│   ├── app/         # 应用构建
│   ├── chat/        # 聊天
│   ├── image-editor/# 图像编辑
│   ├── layout/      # 布局
│   ├── ui/          # 通用 UI
│   ├── video-gen/   # 视频生成
│   └── workflow/    # 工作流
├── config/          # 配置
├── contexts/        # React Context
├── hooks/           # 自定义 Hooks
├── i18n/            # 国际化
├── pages/           # 页面
├── services/        # API 服务
├── types/           # TypeScript 类型
└── utils/           # 工具函数

---

📖 相关文档

• 📋 系统 API 文档
• 🏗️ 前端构建功能说明

---

🚀 后端开源计划

项目	说明
当前状态	后端代码整理中，预计近期开源
开源条件	GitHub 达到 1000 ⭐ + 微信群真实开发者达 300 人
后端技术栈	Spring Boot 3.x · MySQL 8.0 · Redis · Docker & K8s
AI 集成	通义千问 · 即梦 · Seedance · Veo3 等

支持我们：⭐ Star 本项目 · 🔄 分享到技术社区 · 💬 参与讨论

---

📄 许可证

本项目采用 Apache License 2.0 开源协议，附加商业使用条款：

使用场景	是否免费
✅ 个人用户	免费
✅ 教育机构	免费
✅ 非营利组织	免费
✅ 20 人以下企业	免费
⚠️ 20 人及以上企业	需申请商业授权

📧 商业授权咨询：[email protected]  |  详见 LICENSE

---

🤝 联系我们

• 📮 提交 Issue
• 📧 邮件：[email protected]
• 💬 微信交流群：

---

📜 知识产权声明

⚠️ 本项目已注册软著，MCP-X 为注册商标。采用 Apache License 2.0 开源协议，保留所有商标和著作权。未经授权禁止商业使用，尊重知识产权，共同维护开源生态。