Skip to content

Commit 9a0f4d6

Browse files
committed
docs: rewrite getting-started as 6-step tutorial, merge failover into model-mapping, merge metrics into logging page
1 parent 2649368 commit 9a0f4d6

4 files changed

Lines changed: 250 additions & 83 deletions

File tree

src/views/project/llm-simple-router/features/ModelMapping.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
11
<script setup lang="ts">
22
import ScreenShot from '../../../../components/ScreenShot.vue'
3+
import Mermaid from '../../../../components/Mermaid.vue'
34
import { computed } from 'vue'
45
import { useI18n } from 'vue-i18n'
56
const { locale } = useI18n()
67
const isZh = computed(() => locale.value === 'zh')
8+
9+
const mappingFlow = `flowchart LR
10+
A["客户端请求<br/>model: sonnet"] --> B{"调度层<br/>匹配时间窗口"}
11+
B -->|"命中规则"| C["映射到 glm-5.1<br/>Provider: 智谱"]
12+
B -->|"未命中"| D["返回 404<br/>无可用映射"]
13+
C --> E["可选: transform_rule<br/>修改请求参数"]
14+
E --> F["转发到 Provider"]
15+
F -->|"成功"| G["返回响应"]
16+
F -->|"失败"| H{"Failover?"}
17+
H -->|"有备用"| I["切换下一个<br/>Provider"]
18+
I --> E
19+
H -->|"无备用"| J["返回错误"]`
720
</script>
821

922
<template>
@@ -17,6 +30,8 @@ const isZh = computed(() => locale.value === 'zh')
1730
</code>
1831
</div>
1932

33+
<Mermaid :code="mappingFlow" />
34+
2035
<h2>调度层架构</h2>
2136
<p>v0.9.0 重构后,模型映射升级为 <strong>调度层</strong>(Scheduler),删除了轮询/随机策略,统一使用 <strong>Scheduled(分时段)</strong> 和 <strong>Failover(故障转移)</strong> 两种路由策略。</p>
2237
<table>
@@ -35,6 +50,17 @@ const isZh = computed(() => locale.value === 'zh')
3550
<li>针对不同 Provider 的格式差异做适配</li>
3651
</ul>
3752

53+
<h2>故障转移 (Failover)</h2>
54+
<p>为同一个客户端模型配置多条映射规则,路由策略均选择 Failover。Router 按配置顺序依次尝试,当前 Provider 失败时自动切换下一个:</p>
55+
<div class="not-prose my-4 rounded-lg border border-white/10 bg-surface-50 p-4">
56+
<code class="text-sm font-mono text-gray-300 block leading-loose">
57+
Provider A 失败 → 排除 A → Provider B 失败 → 排除 B<br>
58+
→ Provider C 成功 → 返回响应<br>
59+
→ 全部失败 → 返回最后一个错误
60+
</code>
61+
</div>
62+
<p>典型场景:主力供应商(如智谱)偶尔限流,自动切换到备用供应商(如 Moonshot),主力恢复后自动切回。</p>
63+
3864
<h2>可视化 Pipeline 编辑器</h2>
3965
<p><strong>MappingEntryEditor</strong> 组件以垂直 pipeline 形式展示单条映射链路:客户端模型 → 匹配规则 → 后端模型 → Provider,一目了然。</p>
4066
<ScreenShot src="/images/llm-simple-router/model_mapping.png" caption="模型映射 Pipeline 编辑器" />
@@ -86,6 +112,17 @@ const isZh = computed(() => locale.value === 'zh')
86112
<li>Adapt format differences between Providers</li>
87113
</ul>
88114

115+
<h2>Failover</h2>
116+
<p>Configure multiple mapping rules for the same client model, all with Failover strategy. Router tries Providers in configured order, auto-switching on failure:</p>
117+
<div class="not-prose my-4 rounded-lg border border-white/10 bg-surface-50 p-4">
118+
<code class="text-sm font-mono text-gray-300 block leading-loose">
119+
Provider A fails → Exclude A → Provider B fails → Exclude B<br>
120+
→ Provider C succeeds → Return response<br>
121+
→ All failed → Return last error
122+
</code>
123+
</div>
124+
<p>Typical scenario: Primary provider (e.g. Zhipu) hits rate limit → auto-switch to backup (e.g. Moonshot), returns to primary when recovered.</p>
125+
89126
<h2>Visual Pipeline Editor</h2>
90127
<p>The <strong>MappingEntryEditor</strong> component renders a single mapping chain as a vertical pipeline: Client Model → Match Rule → Backend Model → Provider — clear at a glance.</p>
91128
<ScreenShot src="/images/llm-simple-router/model_mapping.png" caption="Model Mapping Pipeline Editor" />

src/views/project/llm-simple-router/features/Providers.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ const isZh = computed(() => locale.value === 'zh')
3434
<p>每个 Provider 下的模型支持独立设置 <code>stream_timeout_ms</code>(流式响应超时时间)。超时后 Router 返回 408 错误,在映射配置页面可以直观看到各模型的超时 badge。详见 <router-link to="/project/llm-simple-router/guide/features/model-mapping">模型映射</router-link>。</p>
3535

3636
<h2>网络代理</h2>
37-
<p>Provider 级支持 SOCKS5 / HTTPS 代理配置。在 Provider 编辑弹窗中可设置代理类型、主机、端口和认证信息。详见 <router-link to="/project/llm-simple-router/guide/features/proxy">网络代理</router-link>。</p>
37+
<p>Provider 级别支持 SOCKS5 / HTTPS 代理。在 Provider 编辑弹窗中配置:</p>
38+
<ul>
39+
<li><strong>代理类型</strong>:SOCKS5 或 HTTPS</li>
40+
<li><strong>代理主机 / 端口</strong>:代理服务器地址</li>
41+
<li><strong>认证信息</strong>:用户名和密码(可选)</li>
42+
</ul>
43+
<p>适用场景:企业内网需通过代理访问外网 API,或使用 SOCKS5 代理访问受限区域。</p>
3844

3945
<h2>并发控制</h2>
4046
<p>每个 Provider 可独立配置并发数上限,支持固定值和自适应动态调整。详见 <router-link to="/project/llm-simple-router/guide/features/concurrency">并发控制</router-link>。</p>
@@ -66,7 +72,13 @@ const isZh = computed(() => locale.value === 'zh')
6672
<p>Each model under a Provider supports a custom <code>stream_timeout_ms</code> (streaming response timeout). On timeout the Router returns a 408 error. Timeout badges are displayed on the mapping config page. See <router-link to="/project/llm-simple-router/guide/features/model-mapping">Model Mapping</router-link>.</p>
6773

6874
<h2>Network Proxy</h2>
69-
<p>Per-Provider SOCKS5/HTTPS proxy configuration. Set proxy type, host, port, and authentication in the Provider edit dialog. See <router-link to="/project/llm-simple-router/guide/features/proxy">Network Proxy</router-link>.</p>
75+
<p>Per-Provider SOCKS5/HTTPS proxy — configure in the Provider edit dialog:</p>
76+
<ul>
77+
<li><strong>Proxy Type</strong>: SOCKS5 or HTTPS</li>
78+
<li><strong>Host / Port</strong>: Proxy server address</li>
79+
<li><strong>Authentication</strong>: Username and password (optional)</li>
80+
</ul>
81+
<p>Use cases: corporate networks requiring proxy for external APIs, or region-restricted API access via SOCKS5.</p>
7082

7183
<h2>Concurrency Control</h2>
7284
<p>Each Provider can have independent concurrency limits with fixed or adaptive modes. See <router-link to="/project/llm-simple-router/guide/features/concurrency">Concurrency Control</router-link>.</p>

src/views/project/llm-simple-router/getting-started/Index.vue

Lines changed: 99 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,96 +5,134 @@ import ScreenShot from '../../../../components/ScreenShot.vue'
55
import { useI18n } from 'vue-i18n'
66
const { locale } = useI18n()
77
const isZh = computed(() => locale.value === 'zh')
8+
9+
const shellAlias = `alias clode='\\
10+
export ANTHROPIC_AUTH_TOKEN="sk-router-你的密钥" && \\
11+
export ANTHROPIC_BASE_URL="http://127.0.0.1:9981" && \\
12+
claude'`
13+
14+
const settingsJson = `{
15+
"env": {
16+
"ANTHROPIC_AUTH_TOKEN": "sk-router-你的密钥",
17+
"ANTHROPIC_BASE_URL": "http://127.0.0.1:9981"
18+
}
19+
}`
20+
21+
const shellAliasEn = `alias clode='\\
22+
export ANTHROPIC_AUTH_TOKEN="sk-router-your-key" && \\
23+
export ANTHROPIC_BASE_URL="http://127.0.0.1:9981" && \\
24+
claude'`
25+
26+
const settingsJsonEn = `{
27+
"env": {
28+
"ANTHROPIC_AUTH_TOKEN": "sk-router-your-key",
29+
"ANTHROPIC_BASE_URL": "http://127.0.0.1:9981"
30+
}
31+
}`
832
</script>
933

1034
<template>
1135
<div class="prose prose-invert max-w-none">
1236
<template v-if="isZh">
13-
<h1>启动 Router</h1>
14-
15-
<h2>1. 安装并启动</h2>
16-
<p>
17-
启动后访问 <code>http://localhost:9981/admin</code>,首次进入 Setup 页面设置管理员密码。数据存储在 <code>~/.llm-simple-router/</code>。
18-
</p>
19-
20-
<h2>2. 添加 Provider</h2>
21-
<p>
22-
管理后台 &gt; Provider 页面 &gt; 添加 Provider。选择 Coding Plan 后会自动填写 Base URL,只需填入 API Key。
23-
</p>
24-
25-
<h2>3. 配置模型映射</h2>
26-
<p>
27-
核心概念:客户端请求携带模型名 A,Router 根据映射规则将其替换为后端 Provider 支持的模型名 B,然后转发请求:
28-
</p>
37+
<h1>快速上手</h1>
38+
<p class="text-lg text-gray-400">6 步完成配置,让 Claude Code 走 Router 代理。</p>
39+
40+
<h2>第 1 步:安装并启动</h2>
41+
<CodeBlock code="npx llm-simple-router" language="bash" />
42+
<p>启动后访问 <code>http://localhost:9981/admin</code>,首次进入 Setup 页面设置管理员密码。数据存储在 <code>~/.llm-simple-router/</code>。</p>
43+
<ScreenShot src="/images/llm-simple-router/dashboard.png" caption="Setup 完成后进入 Dashboard" />
44+
45+
<h2>第 2 步:添加供应商</h2>
46+
<p>管理后台 → <strong>Provider</strong> 页面 → 添加 Provider。选择 Coding Plan 后会自动填写 Base URL 和上下文窗口,只需填入 API Key。</p>
47+
<ScreenShot src="/images/llm-simple-router/provider_concurrency.png" caption="Provider 管理页面" />
48+
<p>支持的供应商:智谱(GLM 系列含 glm-5-turbo)、Moonshot(Kimi,256K 上下文)、Minimax、火山引擎、阿里云、腾讯云、OpenAI、Anthropic。</p>
49+
50+
<h2>第 3 步:配置模型映射</h2>
51+
<p>客户端使用 <strong>模型名 A</strong> 请求,Router 将其转换为后端供应商支持的 <strong>模型名 B</strong>:</p>
2952
<div class="not-prose my-4 rounded-lg border border-white/10 bg-surface-50 p-4">
30-
<code class="text-sm font-mono text-gray-300">
31-
Claude Code (模型 A) → Router (A → B) → Provider API (模型 B)
32-
</code>
53+
<code class="text-sm font-mono text-gray-300">Claude Code (模型 A) → Router (A → B) → Provider API (模型 B)</code>
3354
</div>
34-
35-
<p>Claude Code 未设置环境变量时,默认使用模型名 <code>opus</code>、<code>sonnet</code>、<code>haiku</code>。典型映射配置:</p>
55+
<p>Claude Code 默认使用模型名 <code>opus</code>、<code>sonnet</code>、<code>haiku</code>。典型配置:</p>
3656
<table>
37-
<thead>
38-
<tr><th>客户端模型</th><th>后端模型</th><th>供应商</th><th>时间窗口</th></tr>
39-
</thead>
57+
<thead><tr><th>客户端模型</th><th>后端模型</th><th>供应商</th><th>时间窗口</th></tr></thead>
4058
<tbody>
4159
<tr><td>opus</td><td>glm-5.1</td><td>智谱 Coding Plan</td><td>全天</td></tr>
4260
<tr><td>sonnet</td><td>glm-5.1</td><td>智谱 Coding Plan</td><td>全天</td></tr>
4361
<tr><td>haiku</td><td>glm-5-turbo</td><td>智谱 Coding Plan</td><td>全天</td></tr>
4462
</tbody>
4563
</table>
64+
<ScreenShot src="/images/llm-simple-router/model_mapping.png" caption="模型映射配置页面" />
65+
66+
<h2>第 4 步:设置并发限制</h2>
67+
<p>在 Provider 页面为每个供应商设置最大并发数。建议:智谱 Coding Plan 设为 5,其他按供应商 API 限制调整。启用自适应模式后 Router 自动优化。</p>
68+
69+
<h2>第 5 步:配置 Claude Code</h2>
70+
<p>在管理后台创建 Router API 密钥(<code>sk-router-xxx</code>),然后选择一种方式:</p>
71+
72+
<h3>方式一:Shell Alias(推荐)</h3>
73+
<p>在 <code>~/.zshrc</code> 或 <code>~/.bashrc</code> 中添加:</p>
74+
<CodeBlock :code="shellAlias" language="bash" />
4675

47-
<h2>4. 配置 Claude Code</h2>
48-
<p>在管理后台创建 Router API 密钥,然后选择一种方式配置。详见 <router-link to="/project/llm-simple-router/guide/config/claude-code">Claude Code 配置</router-link> 页面。</p>
76+
<h3>方式二:settings.json</h3>
77+
<p>在 <code>~/.claude/settings.json</code> 中添加:</p>
78+
<CodeBlock :code="settingsJson" language="json" />
4979

50-
<h2>5. 开始使用</h2>
80+
<p>详见 <router-link to="/project/llm-simple-router/guide/config/claude-code">Claude Code 配置</router-link>。</p>
81+
82+
<h2>第 6 步:验证</h2>
83+
<p>启动 Claude Code(如果用了 alias,执行 <code>clode</code>),发送一条消息。在管理后台 <router-link to="/project/llm-simple-router/guide/features/monitor">实时监控</router-link> 页面应能看到请求记录。</p>
84+
<p>如果遇到问题,查看 <router-link to="/project/llm-simple-router/guide/faq">常见问题</router-link>。</p>
5185
</template>
86+
5287
<template v-else>
53-
<h1>Starting the Router</h1>
54-
55-
<h2>1. Install &amp; Start</h2>
56-
<p>
57-
After starting, visit <code>http://localhost:9981/admin</code> and set up an admin password on first access. Data is stored in <code>~/.llm-simple-router/</code>.
58-
</p>
59-
60-
<h2>2. Add a Provider</h2>
61-
<p>
62-
Admin Panel &gt; Provider page &gt; Add Provider. Selecting a Coding Plan auto-fills the Base URL — just enter your API Key.
63-
</p>
64-
65-
<h2>3. Configure Model Mapping</h2>
66-
<p>
67-
Core concept: the client sends a request with model name A. Router replaces it with model name B supported by the backend Provider, then forwards the request:
68-
</p>
88+
<h1>Getting Started</h1>
89+
<p class="text-lg text-gray-400">6 steps to route Claude Code through Router.</p>
90+
91+
<h2>Step 1: Install &amp; Start</h2>
92+
<CodeBlock code="npx llm-simple-router" language="bash" />
93+
<p>After starting, visit <code>http://localhost:9981/admin</code>. First access goes to the Setup page to set an admin password. Data is stored in <code>~/.llm-simple-router/</code>.</p>
94+
<ScreenShot src="/images/llm-simple-router/dashboard.png" caption="Dashboard after Setup" />
95+
96+
<h2>Step 2: Add a Provider</h2>
97+
<p>Admin Panel → <strong>Provider</strong> page → Add Provider. Select a Coding Plan to auto-fill Base URL and context window — just enter your API Key.</p>
98+
<ScreenShot src="/images/llm-simple-router/provider_concurrency.png" caption="Provider Management" />
99+
<p>Supported providers: Zhipu (GLM series incl. glm-5-turbo), Moonshot (Kimi, 256K context), Minimax, Volcengine, Alibaba Cloud, Tencent Cloud, OpenAI, Anthropic.</p>
100+
101+
<h2>Step 3: Configure Model Mapping</h2>
102+
<p>Client sends <strong>model name A</strong>, Router maps it to <strong>model name B</strong> supported by the backend Provider:</p>
69103
<div class="not-prose my-4 rounded-lg border border-white/10 bg-surface-50 p-4">
70-
<code class="text-sm font-mono text-gray-300">
71-
Claude Code (Model A) → Router (A → B) → Provider API (Model B)
72-
</code>
104+
<code class="text-sm font-mono text-gray-300">Claude Code (Model A) → Router (A → B) → Provider API (Model B)</code>
73105
</div>
74-
75-
<p>When Claude Code has no environment variable set, it defaults to model names <code>opus</code>, <code>sonnet</code>, <code>haiku</code>. A typical mapping config:</p>
106+
<p>Claude Code defaults to model names <code>opus</code>, <code>sonnet</code>, <code>haiku</code>. A typical config:</p>
76107
<table>
77-
<thead>
78-
<tr><th>Client Model</th><th>Backend Model</th><th>Provider</th><th>Time Window</th></tr>
79-
</thead>
108+
<thead><tr><th>Client Model</th><th>Backend Model</th><th>Provider</th><th>Time Window</th></tr></thead>
80109
<tbody>
81110
<tr><td>opus</td><td>glm-5.1</td><td>Zhipu Coding Plan</td><td>All day</td></tr>
82111
<tr><td>sonnet</td><td>glm-5.1</td><td>Zhipu Coding Plan</td><td>All day</td></tr>
83112
<tr><td>haiku</td><td>glm-5-turbo</td><td>Zhipu Coding Plan</td><td>All day</td></tr>
84113
</tbody>
85114
</table>
115+
<ScreenShot src="/images/llm-simple-router/model_mapping.png" caption="Model Mapping Configuration" />
86116

87-
<h2>4. Configure Claude Code</h2>
88-
<p>Create a Router API key in the admin panel, then choose one setup method. See the <router-link to="/project/llm-simple-router/guide/config/claude-code">Claude Code Setup</router-link> page for details.</p>
117+
<h2>Step 4: Set Concurrency Limits</h2>
118+
<p>On the Provider page, set max concurrency per provider. Suggested: Zhipu Coding Plan 5, others per their API limits. Enable adaptive mode for auto-optimization.</p>
89119

90-
<h2>5. Start Using</h2>
91-
</template>
120+
<h2>Step 5: Configure Claude Code</h2>
121+
<p>Create a Router API key in Admin Panel (<code>sk-router-xxx</code>), then choose one method:</p>
122+
123+
<h3>Method 1: Shell Alias (Recommended)</h3>
124+
<p>Add to <code>~/.zshrc</code> or <code>~/.bashrc</code>:</p>
125+
<CodeBlock :code="shellAliasEn" language="bash" />
126+
127+
<h3>Method 2: settings.json</h3>
128+
<p>Add to <code>~/.claude/settings.json</code>:</p>
129+
<CodeBlock :code="settingsJsonEn" language="json" />
92130

93-
<!-- Shared components outside v-if -->
94-
<CodeBlock code="npx llm-simple-router" language="bash" />
95-
<ScreenShot src="/images/llm-simple-router/dashboard.png" caption="Dashboard" />
96-
<ScreenShot src="/images/llm-simple-router/provider_concurrency.png" caption="Provider Management & Concurrency Control" />
97-
<ScreenShot src="/images/llm-simple-router/model_mapping.png" caption="Model Mapping Configuration" />
98-
<CodeBlock code="# Method 1 (shell alias)&#10;clode&#10;&#10;# Method 2 (settings.json)&#10;claude" language="bash" />
131+
<p>See <router-link to="/project/llm-simple-router/guide/config/claude-code">Claude Code Setup</router-link> for details.</p>
132+
133+
<h2>Step 6: Verify</h2>
134+
<p>Start Claude Code (use <code>clode</code> if you set up the alias), send a message. Check the <router-link to="/project/llm-simple-router/guide/features/monitor">Live Monitor</router-link> page for the request.</p>
135+
<p>If issues arise, check the <router-link to="/project/llm-simple-router/guide/faq">FAQ</router-link>.</p>
136+
</template>
99137
</div>
100138
</template>

0 commit comments

Comments
 (0)