🚀🚀 5分钟复刻腾讯元宝！从开发到打包的完整实践

前言：当红炸子鸡腾讯元宝

最近朋友圈被腾讯元宝 刷屏了！这款号称接入「满血版DeepSeek」的AI助手，上线3天就冲上App Store免费榜第一。作为技术人，我们不仅要会用，更要懂原理------今天就用阿里AI组件库，带大家5分钟实现一个精简版元宝核心功能！

灵魂拷问: 元宝在脉脉正式取代会议成为卷王之王到底在忙什么？

📌 本文适合：

想快速上手大模型应用开发的前端er

对腾讯元宝技术实现好奇的技术探秘者

需要将Web应用打包桌面客户端的同学

基本效果图: x.ant.design/docs/playgr...

对比元宝效果

🔧 技术选型

核心框架：阿里X-Agent组件库
打包工具：Nativefier（Electron封装利器）
模型服务：DeepSeek R1（略差于元宝模型）
构建工具：Rsbuild（比Webpack快10倍！）

🛠️ 实战开始

第一步：项目初始化

js 复制代码

// 1. 初始化项目
// 体验下字节的垃圾rspack是真的tm的快啊
// https://x.ant.design/docs/react/use-with-rsbuild-cn
bun create rsbuild

// 2. 安装依赖
bun install

// 3. 引入 @ant-design/x 修改App.tsx代码 代码借鉴antdX
bun add @ant-design/x

// 4. 启动项目 查看效果 对比下元宝的界面 已经就大差不差了
bun run dev

// 5. 申请一个apiKey 参考文章领取阿里免费的token
// https://x.ant.design/docs/react/model-use-qwen-cn

// 6. 增加 .env 文件 同时配置 rsbuild.config.ts 新增配置
source: {
  define: {
    // https://rsbuild.dev/zh/guide/advanced/env-vars
    // Uncaught ReferenceError: process is not defined
    'process.env.DASHSCOPE_API_KEY': JSON.stringify(
      process.env.DASHSCOPE_API_KEY,
    ),
  },
},

第二步：接入AI核心

ts 复制代码

// 修改App.tsx代码中的useXAgent方法
bun add openai
bun add @types/node -D

const client = new OpenAI({
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  // apiKey: process.env['DASHSCOPE_API_KEY'],
  apiKey: process.env.DASHSCOPE_API_KEY,
  // 危险操作 说明: https://x.ant.design/docs/react/dangerously-api-key-cn
  dangerouslyAllowBrowser: true,
});

const [agent] = useXAgent({
  request: async (info, callbacks) => {
    // 初始化OpenAI客户端（对接阿里魔改API）
    const client = new OpenAI({
      baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
      apiKey: '你的API_KEY', // 阿里免费领取
      dangerouslyAllowBrowser: true,
    });

    // 流式响应处理
    const stream = await client.chat.completions.create({
      model: 'deepseek-r1', // 与元宝同款模型
      messages: [{ role: 'user', content: message! }],
      stream: true
    });

    // 实时更新对话内容
    for await (const chunk of stream) {
      content += chunk.choices[0]?.delta?.content || '';
      onUpdate(content); // 前端实时渲染
    }
  }
});

第三步：测试效果

结论: 对比效果真的被元宝吊打，还是无脑推荐元宝！！！元宝实在是太好用了啊！

回答的狗屁不通，垃圾阿里！肯定是羡慕嫉妒元宝遥遥领先的地位，瞎回答

第四步：桌面端打包

js 复制代码

/ Electron
// Tauri

// Nativefier trae提供的解决方案
bun add nativefier -g
nativefier --name "元宝桌面版" "http://localhost:3000"
// 查看效果(如下图)

# 一键生成桌面应用（记得先启动本地服务）
nativefier --name "元宝桌面版" \
  --platform darwin \
  --width 1200 \
  --insecure \
  --internal-urls ".*?" \
  'http://localhost:3000'

📊 功能对比：元宝(遥遥领先) vs 豆包

🌟 未来展望（卷王之王路线图）

根据内部消息，元宝团队正在憋大招：

AI编程助手（对标GitHub Copilot cursor trae）
智能体商店 yuanqi.tencent.com/agent-shop 已遥遥领先豆包
生成式AI 应用创新引擎（对标 Coze dify）
多模态生成（文生图/图生文）
浏览器插件（流量新入口）

结语

虽然我们的简易版在UI体验上还不及元宝，但核心功能已完整复现！想体验真正的「满血版」？快去下载腾讯元宝APP吧～

🚀 彩蛋：在阿里组件库demo中搜索「元宝彩蛋」，可解锁隐藏Prompt！