308 lines
11 KiB
Vue
308 lines
11 KiB
Vue
<template>
|
||
<el-tour v-model="openTour">
|
||
<el-tour-step
|
||
:next-button-props="{ children: '开始' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>介绍</TourTitle>
|
||
</template>
|
||
<div style="display: flex; padding: 10px; padding-bottom: 20px;">
|
||
<div class="tour-common-text">
|
||
欢迎来到大模型与 mcp 的世界！
|
||
|
||
<br><br>
|
||
|
||
OpenMCP 将会助力你快速将任何奇思妙想开发成 mcp 服务器，通过接入大模型，让你的任何 idea 都可以快速落地。
|
||
|
||
<br><br>
|
||
|
||
倘若阁下是第一次使用 OpenMCP，请务必走完我们准备好的引导。
|
||
</div>
|
||
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
target="#connected-status-container"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>引导</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
这里会显示当前调试的 mcp 服务器的名称（缩写）和连接状态。只有当连接状态为「已连接」，调试工作才能开始。
|
||
|
||
|
||
<br><br>
|
||
|
||
OpenMCP 通过服务器名称对项目所的所有服务进行统一管理，请避免在同一个项目中使用相同的名称。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
target="#sidebar-connect"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步', onClick: () => router.push(baseUrl + 'connect') }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>连接</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
如果显示「未连接」或阁下想要更改连接参数或者连接方式，可以点击这里进入连接面板。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
:target="mcpClientAdapter.clients[0].connectionSettingRef"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
placement="right"
|
||
>
|
||
<template #header>
|
||
<TourTitle>连接</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
阁下可以在左侧面板选择与您心爱的 mcp 服务器进行连接的方式，并填入对应的连接参数。
|
||
|
||
<br><br>
|
||
|
||
对于 openmcp vscode/trae/cursor 插件端的用户，当您通过面板按钮进入 openmcp 的时候，默认就会选择 STDIO 作为连接方式，并根据你的上下文生成启动参数。
|
||
openmcp desktop 的用户可能就需要自己填写了。Anyway，这总比在你的好友电脑中植入 chrome 浏览器密码破解木马简单。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
:target="mcpClientAdapter.clients[0].connectionLogRef"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
placement="left"
|
||
>
|
||
<template #header>
|
||
<TourTitle>连接</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
连接响应会在这个地方打印出来，如果出现绿色背景的信息，代表连接成功。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
:target="mcpServerAddRef"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>调试</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
你可以点击最右侧的加号来添加额外的 mcp 服务器，让你当前正在调试的 agent 零成本快速获得额外的能力。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
target="#sidebar-debug"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步', onClick: () => router.push(baseUrl + 'debug') }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>调试</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
假设你已经成功连接了 mcp 服务器，那么点击调试按钮，你可以开始你的调试工作。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
:target="welcomeRef"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
placement="right"
|
||
>
|
||
<template #header>
|
||
<TourTitle>调试</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
我们目前提供了四种主要调试选项，「资源」、「提词」、「工具」分别和 MCP 协议中的 resources、prompts、tools 对应。
|
||
|
||
而「交互测试」则允许你直接将写好的 mcp 服务器放入大模型中直接做全链路测试，从而更加获取更加真实的反馈和数据，进而改进的你的 mcp 服务器。
|
||
|
||
<br><br>
|
||
|
||
基于我们在 agent 和 rl 方向的最佳实践，我们后续还会推出更多的调试和数据集聚合制作选项，请期待吧！
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
<el-tour-step
|
||
target="#sidebar-setting"
|
||
:prev-button-props="{ children: '上一步', onClick: () => router.push(baseUrl + 'debug') }"
|
||
:next-button-props="{ children: '下一步', onClick: () => router.push(baseUrl + 'setting') }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>设置</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
如果要进行交互测试，请不要忘记先配置你常用的大模型 API
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
:target="llmSettingRef"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
placement="right"
|
||
>
|
||
<template #header>
|
||
<TourTitle>设置</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
OpenMCP 目前支持所有支持 openai 接口规范的大模型，比如 deepseek，openai，kimi 等等。
|
||
本地部署的 ollama 也正在支持。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
target="#add-new-server-button"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>设置</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
如果需要添加自定义的大模型服务，请点击这里。比如火山云，阿里云，硅基流动等。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
target="#test-llm-button"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>设置</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
填写完成连接签名后，点击这里来测试 大模型服务是否可以访问。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
target="#save-llm-button"
|
||
:prev-button-props="{ children: '上一步' }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>设置</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
最后请不要忘记点击保存按钮，保存你的设置。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
:prev-button-props="{ children: '上一步', onClick: () => router.push(baseUrl + 'setting') }"
|
||
:next-button-props="{ children: '下一步' }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>🎉恭喜</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
🎉恭喜，我的朋友，现在的你已经是半个 mcp 专家了，请充好一杯咖啡，慢慢享用快乐的开发时间吧！
|
||
|
||
<br><br>
|
||
|
||
如果是插件用户，左侧面板的最下面「入门与帮助」有一些我们准备好的资料，希望能帮到阁下优雅地开发你的 mcp 服务器。
|
||
让我们一起把越来越多的 api 和 sdk 接入 大模型吧。
|
||
</div>
|
||
</el-tour-step>
|
||
|
||
|
||
<el-tour-step
|
||
:prev-button-props="{ children: '上一步', onClick: () => router.push(baseUrl + 'setting') }"
|
||
:next-button-props="{ children: '结束', onClick: () => finishTour() }"
|
||
:show-close="false"
|
||
>
|
||
<template #header>
|
||
<TourTitle>终章？</TourTitle>
|
||
</template>
|
||
<div class="tour-common-text">
|
||
<pre><code style="color: unset !important; background-color: unset !important;"
|
||
>(base) <span style="color: greenyellow">➜</span> <span style="color: #6AC2CF">.openmcp</span> <span style="color: #6BC34B">cat</span> <span style="color: #D357DB">KEY</span>
|
||
直面恐惧，创造未来
|
||
Face your fears, create the future
|
||
恐怖に直面し、未来を創り出</code></pre>
|
||
</div>
|
||
</el-tour-step>
|
||
</el-tour>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import TourTitle from './tour-title.vue';
|
||
|
||
import { useI18n } from 'vue-i18n';
|
||
import { useRouter } from 'vue-router';
|
||
import { welcomeRef } from '@/views/debug/welcome';
|
||
import { llmSettingRef } from '@/views/setting/api';
|
||
import { userHasReadGuide } from './tour';
|
||
import { setTour } from '@/hook/setting';
|
||
import { mcpClientAdapter } from '@/views/connect/core';
|
||
import { mcpServerAddRef } from '@/views/connect';
|
||
|
||
const openTour = ref(true);
|
||
|
||
const { t } = useI18n();
|
||
|
||
const router = useRouter();
|
||
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
|
||
function finishTour() {
|
||
openTour.value = false;
|
||
userHasReadGuide.value = true;
|
||
setTour();
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
.tour-common-text {
|
||
font-size: 1.0rem;
|
||
padding: 10px;
|
||
padding-bottom: 20px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tour-warning {
|
||
display: flex;
|
||
background-color: rgba(230, 162, 60, 0.5);
|
||
border-radius: .5em;
|
||
padding: 5px;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.tour-common-text code {
|
||
color: unset!important;
|
||
background-color: unset!important;
|
||
}
|
||
</style> |