feat: 添加快速开始文档和更新导航链接 (#26)

Co-authored-by: hh.(SII) <[email protected]>

Author: zhangligei

src/app/(cn)/xyzen/navigation.ts

@@ -4,23 +4,25 @@ const navigation: Array<NavGroup> = [
   {
     title: 'Xyzen 玄藏',
     links: [
-      { title: '介绍', href: `/xyzen` }
+      { title: '介绍', href: `/xyzen` },
+      { title: '安装', href: `/xyzen/installation` },
+      { title: '快速开始', href: `/xyzen/quickstart` },
     ],
   },
   {
-    title: '用户指南',
+    title: '用户手册',
     links: [
       { title: '用户指南', href: `/xyzen/guidance` },
     ],
   },
   {
-    title: '部署与使用',
+    title: 'Self-Host',
     links: [
       { title: '部署与使用', href: `/xyzen/deploy` },
     ],
   },
   {
-    title: '贡献与开发',
+    title: 'Contribution',
     links: [
       { title: '贡献与开发', href: `/xyzen/dev` },
     ],

src/app/(cn)/xyzen/quickstart/page.mdx

@@ -0,0 +1,114 @@
+# 快速开始
+
+> 本节介绍了如何快速学会Xyzen去解决实际问题。请参阅每节中的图文内容以深入了解。
+
+
+
+## 1、AI聊天助手
+
+成功登录Xyzen平台，进入到如下界面：
+
+<div style={{display: 'flex', gap: '1px', justifyContent: 'center'}}>
+  <img src="https://storage.sciol.ac.cn/library/docs/开始新对话_night.png" alt="图片1" width="360"/>
+  <img src="https://storage.sciol.ac.cn/library/docs/发送你好_night.png" alt="图片2" width="360"/>
+</div>
+
+点击 `开始新对话` ，即可与聊天助手进行交互。
+
+## 2、模型上下文协议（MCP）工具调用
+
+**MCP工具调用是指在模型上下文中使用特定的工具或API来完成任务的过程**。以下是一个简单的示例，演示如何在Xyzen平台上添加并使用 `MCP工具`。
+
+### I.添加MCP服务
+
+点击聊天页面右上角的MCP图标
+
+<div align="center">
+  <img src="https://storage.sciol.ac.cn/library/docs/点击MCPlogo_night.png" alt="添加MCP图" width="700"/>
+  {/* <p><em>图1: Xyzen 聊天助手界面</em></p> */}
+</div>
+
+进入 `MCP Servers` 窗口，点击 `Add Server` 或者 `Add Your First Server`（如果是第一次在Xyzen平台添加MCP工具）
+
+<div align="center">
+  <img src="https://storage.sciol.ac.cn/library/docs/add_first_mcp.png" alt="添加MCP图" width="700"/>
+  {/* <p><em>图1: Xyzen 聊天助手界面</em></p> */}
+</div>
+
+依次添加 `Server Name` 、 `Description` （可选）和 `Server URL` ，点击右下角 `Add Server` 按钮，即可完成MCP服务的添加。其中 `Server URL` 为本地启动的Xyzen服务对应的端口+xyzen/mcp/mcptools。
+<Note>注意：mcptools对应的python脚本要置于Xyzen/service/handler/mcp目录下。</Note>
+
+<div style={{display: 'flex', gap: '1px', justifyContent: 'center'}}>
+  <img src="https://storage.sciol.ac.cn/library/docs/add_mcp_server_night.png" alt="添加MCP样例" width="360"/>
+  <img src="https://storage.sciol.ac.cn/library/docs/online_offline.png" alt="首个MCP工具" width="360"/>
+</div>
+绿色 `Online` 即为成功添加MCP工具（如test）；若为红色 `Offline` （如pytorch1），尝试点击右上角Refresh或刷新浏览器当前页面，如果刷新不能解决 `Offline`，建议检查端口号、路径名称、MCP工具脚本是否正确，重新添加`MCP server`。
+### II.调用MCP工具
+以较为简单的整型数加法为例展示如何调用已添加的MCP Server，点击页面右半栏左上角的`助手`→`+添加助手`，进入`添加新助手`窗口：
+<div style={{display:'flex', gap:'1px', justifyContent: 'center'}}>
+  <img src="https://storage.sciol.ac.cn/library/docs/添加助手_night.png" alt="添加助手" width="210"/>
+  <img src="https://storage.sciol.ac.cn/library/docs/加法求解器助手.png" alt="创建助手" width="330"/>
+  <img src="https://storage.sciol.ac.cn/library/docs/助手添加完成_night.png" alt="助手添加完成" width="210"/>
+  {/* <p><em>图1: Xyzen 聊天助手界面</em></p> */}
+</div>
+    输入`名称`（必填项）、`描述`、`系统提示`并勾选下方”连接的MCP服务器“中需要添加的 MCPtool，点击`创建助手`按钮，完成助手的创建。
+#### **与新助手聊天**
+返回助手页面，点击刚刚创建的助手"例如：加法求解器"进入聊天页面，在对话框中输入"计算 123 + 456"的指令，点击发送按钮：
+
+<div style={{display: 'flex', gap: '20px', justifyContent: 'center', alignItems: 'flex-start', flexWrap: 'wrap'}}>
+  <div style={{flex: 1, minWidth: '300px', maxWidth: '45%'}}>
+    <video width="100%" controls>
+      <source src="https://storage.sciol.ac.cn/library/docs/加法求解器_night.mov" type="video/mp4" />
+      您的浏览器不支持视频标签。
+    </video>
+    <p style={{textAlign: 'center', marginTop: '8px', fontSize: '14px', color: '#666'}}>
+      <em>默认MCP工具调用演示</em>
+    </p>
+  </div>
+  
+  <div style={{flex: 1, minWidth: '300px', maxWidth: '45%'}}>
+    <video width="100%" controls>
+      <source src="https://storage.sciol.ac.cn/library/docs/勾选MCP确认.mov" type="video/mp4" />
+      您的浏览器不支持视频标签。
+    </video>
+    <p style={{textAlign: 'center', marginTop: '8px', fontSize: '14px', color: '#666'}}>
+      <em>开启MCP工具使用确认功能</em>
+    </p>
+  </div>
+</div>
+
+{/*
+<StackedVideosLayout
+  title="MCP工具演示"
+  videos={[
+    {
+      src: "https://storage.sciol.ac.cn/library/docs/mcptool-计算加法.mov",
+      alt: "加法求解器"
+    }
+  ]}
+/>
+*/}
+#### **开启工具使用确认**
+如果你希望模型在调用MCP工具前进行确认，可以在聊天输入框的左上角点击盾牌图标。如下图所示：
+<div style={{display:'flex', gap: '1px', justifyContent: 'center'}}>
+  <img src="https://storage.sciol.ac.cn/library/docs/勾选MCP使用确认.png" alt="开启工具使用确认" width="400"/>
+  <img src="https://storage.sciol.ac.cn/library/docs/确认执行MCP工具.png" alt="开启工具使用确认_highlight" width="220"/>
+  <img src="https://storage.sciol.ac.cn/library/docs/MCP工具内部执行结果.png" alt="开启工具使用确认" width="160"/>
+  {/* <p><em>图1: Xyzen 聊天助手界面</em></p> */}
+</div>
+{/*
+<StackedVideosLayout
+  title="开启MCP工具使用确认功能"
+  videos={[
+    {
+      src: "https://storage.sciol.ac.cn/library/docs/勾选MCP工具确认.mov",
+      alt: "开启工具使用确认"
+    }
+  ]}
+/>
+*/}
+与直接开始聊天不同，此时模型会在调用MCP工具前请用户确认使用哪些MCP工具，点击 `确认执行` 即可调用某个或某些MCP工具完成指定任务，避免不同种类的MCP工具之间互相干扰，影响模型回答的效果。
+
+<Note>
+细心观察两个视频可以发现，开启 **MCP工具使用确认功能** 前后，工具的内部执行操作和结果是相同的。
+</Note>