zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: lm studio (#398)

Browse Source 
* docs(page): lm studio doc
* docs: update documentation and improve model section
This commit is contained in:
Simon
2026-04-04 01:15:41 +08:00
committed by GitHub
parent e290e2f67a
commit 9cc9edf17e
5 changed files with 177 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/website/AGENTS.md
View File

@@ -85,7 +85,7 @@ Uses wouter browser routing with base path for GitHub Pages deployment at `https
```tsx ```tsx
// main.tsx // main.tsx
<Router base="/page-agent"> <Router base="/page-agent">
<PagesRouter /> <PagesRouter />
</Router> </Router>
``` ```
@@ -109,6 +109,7 @@ Instead of `404.html` redirects, the build copies `index.html` into every route
2. Add route in `src/pages/docs/index.tsx` 2. Add route in `src/pages/docs/index.tsx`
3. Add navigation item in `src/pages/docs/Layout.tsx` 3. Add navigation item in `src/pages/docs/Layout.tsx`
4. Add path to `SPA_ROUTES` in `vite.config.js` 4. Add path to `SPA_ROUTES` in `vite.config.js`
5. Keep `<slug>` consistent across the folder name, import path, route path, sidebar link, and any related cross-links. If the public route changes, rename the folder too.
## Configuration Files ## Configuration Files

276
packages/website/src/pages/docs/features/models/page.tsx
View File

@@ -9,7 +9,6 @@ const BASELINE = new Set([
'claude-haiku-4.5', 'claude-haiku-4.5',
'gemini-3-flash', 'gemini-3-flash',
'deepseek-3.2', 'deepseek-3.2',
'qwen3.6-plus',
'qwen3.5-plus', 'qwen3.5-plus',
'qwen3.5-flash', 'qwen3.5-flash',
]) ])
@@ -23,7 +22,6 @@ const MODEL_GROUPS: Record<string, string[]> = {
'qwen3-coder-next', 'qwen3-coder-next',
'qwen-3-max', 'qwen-3-max',
'qwen-3-plus', 'qwen-3-plus',
'qwen3:14b (ollama)',
], ],
OpenAI: ['gpt-5.4', 'gpt-5.2', 'gpt-5.1', 'gpt-5', 'gpt-5-mini', 'gpt-4.1', 'gpt-4.1-mini'], OpenAI: ['gpt-5.4', 'gpt-5.2', 'gpt-5.1', 'gpt-5', 'gpt-5-mini', 'gpt-4.1', 'gpt-4.1-mini'],
DeepSeek: ['deepseek-3.2'], DeepSeek: ['deepseek-3.2'],
@@ -66,7 +64,6 @@ export default function Models() {
: 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.'} : 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.'}
</p> </p>
{/* Models Section */}
<section className="mb-10"> <section className="mb-10">
<Heading id="tested-models" className="text-2xl font-semibold mb-3"> <Heading id="tested-models" className="text-2xl font-semibold mb-3">
{isZh ? '已测试模型' : 'Tested Models'} {isZh ? '已测试模型' : 'Tested Models'}
@@ -89,9 +86,10 @@ export default function Models() {
</div> </div>
</section> </section>
{/* Tips Section */}
<section className="mb-10"> <section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '提示' : 'Tips'}</h2> <Heading id="tips" level={3}>
Tips
</Heading>
<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800"> <div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5"> <ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
<li> <li>
@@ -113,7 +111,6 @@ export default function Models() {
</div> </div>
</section> </section>
{/* Configuration Section */}
<section className="mb-10"> <section className="mb-10">
<Heading id="configuration">{isZh ? '配置方式' : 'Configuration'}</Heading> <Heading id="configuration">{isZh ? '配置方式' : 'Configuration'}</Heading>
<CodeEditor <CodeEditor
@@ -123,25 +120,50 @@ const pageAgent = new PageAgent({
apiKey: 'your-api-key', apiKey: 'your-api-key',
model: 'qwen3.5-plus' model: 'qwen3.5-plus'
}); });
// MiniMax
const pageAgent = new PageAgent({
baseURL: 'https://api.minimax.io/v1',
apiKey: 'your-minimax-api-key',
model: 'MiniMax-M2.7'
});
// Self-hosted models (e.g., Ollama) — no apiKey needed
const pageAgent = new PageAgent({
baseURL: 'http://localhost:11434/v1',
model: 'qwen3:14b'
});
`} `}
/> />
</section> </section>
{/* Free Testing API Section */} <section className="mb-10">
<Heading id="production-authentication" className="text-2xl font-semibold mb-4">
{isZh ? '🔐 生产环境鉴权' : '🔐 Production Authentication'}
</Heading>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
{isZh
? '如果你只是将它用作个人助手，可以直接连接你的 LLM 服务。'
: 'If you only use it as a personal assistant, you can connect to your LLM service directly.'}
</p>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
{isZh ? (
<>
如果你计划将它集成到你的 Web 应用中，建议搭建一个后端代理来转发 LLM 请求，并使用{' '}
<code>customFetch</code> 携带 Cookie 或其他鉴权信息：
</>
) : (
<>
If you plan to integrate it into your web app, it's better to have a backend proxy for
the LLM and use <code>customFetch</code> to authenticate the request with cookies or
other methods:
</>
)}
</p>
<CodeEditor
code={`const agent = new PageAgent({
baseURL: '/api/llm-proxy',
model: 'gpt-5.1',
customFetch: (url, init) =>
fetch(url, { ...init, credentials: 'include' }),
});`}
/>
<div className="mt-4 bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-4 rounded-r-lg">
<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
{isZh
? '⚠️ 永远不要把真实的 LLM API Key 提交到前端代码中'
: '⚠️ NEVER commit real LLM API keys to your frontend code'}
</p>
</div>
</section>
<section className="mb-10"> <section className="mb-10">
<Heading id="free-testing-api">{isZh ? '免费测试接口' : 'Free Testing API'}</Heading> <Heading id="free-testing-api">{isZh ? '免费测试接口' : 'Free Testing API'}</Heading>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4"> <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
@@ -185,113 +207,141 @@ const pageAgent = new PageAgent({
<CodeEditor <CodeEditor
code={`# qwen3.5-plus / qwen3.5-flash code={`# qwen3.5-plus / qwen3.5-flash
LLM_BASE_URL="https://page-ag-testing-ohftxirgbn.cn-shanghai.fcapp.run" LLM_BASE_URL="https://page-ag-testing-ohftxirgbn.cn-shanghai.fcapp.run"
LLM_MODEL_NAME="qwen3.5-plus" LLM_MODEL_NAME="qwen3.5-plus"`}
LLM_API_KEY="NA"`}
/> />
</div> </div>
</section> </section>
{/* Ollama Section */}
<section className="mb-10"> <section className="mb-10">
<Heading id="ollama">Ollama</Heading> <Heading id="local-runtimes">{isZh ? '本地运行时' : 'Local Runtimes'}</Heading>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4"> <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
{isZh {isZh
? '已在 Ollama 0.15 + qwen3:14b (RTX3090 24GB) 上测试通过。' ? '通过 Ollama、LM Studio 等本地 OpenAI-compatible 运行时接入 PageAgent，实现离线或局域网部署。'
: 'Tested on Ollama 0.15 with qwen3:14b (RTX3090 24GB).'} : 'Use local OpenAI-compatible runtimes such as Ollama and LM Studio with PageAgent for offline or LAN deployments.'}
</p> </p>
<CodeEditor
code={`LLM_BASE_URL="http://localhost:11434/v1"
LLM_API_KEY="NA"
LLM_MODEL_NAME="qwen3:14b"`}
/>
<div className="mt-4 p-4 bg-amber-50 dark:bg-amber-950/20 rounded-lg border border-amber-200 dark:border-amber-800">
<h3 className="font-semibold text-amber-900 dark:text-amber-200 mb-2">
{isZh ? '⚠️ 注意事项' : '⚠️ Important Notes'}
</h3>
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
<li>
{isZh
? '确保 OLLAMA_ORIGINS 设置为 * 以避免 403 错误'
: 'Add * to OLLAMA_ORIGINS to avoid 403 errors'}
</li>
<li>
{isZh
? '小于 10B 参数的模型通常效果不佳'
: 'Models smaller than 10B are unlikely to be strong enough'}
</li>
<li>{isZh ? '需要支持 tool_call 的模型' : 'Requires tool_call capable models'}</li>
<li>
{isZh
? '确保上下文长度大于输入 token 数，否则 Ollama 会静默截断 prompt。普通页面约需 15k token，随步骤增加。默认 4k 上下文长度无法正常工作'
: 'Ensure context length exceeds input tokens, or Ollama will silently truncate prompts. ~15k tokens for a typical page, increases with steps. Default 4k context length will NOT work'}
</li>
</ul>
</div>
<div className="mt-4"> <div className="space-y-10">
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-3"> <section>
{isZh ? '建议启动参数' : 'Recommended Startup'} <Heading id="requirements" level={3}>
</h3> Requirements
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> </Heading>
{isZh <div className="mt-4 p-5 bg-amber-50 dark:bg-amber-950/20 rounded-xl border border-amber-200 dark:border-amber-800">
? '启动 Ollama 时建议配置以下环境变量：扩大上下文窗口、允许跨域访问、监听所有网络接口。' <ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
: 'Start Ollama with these environment variables: larger context window, allow cross-origin access, and listen on all interfaces.'} <li>
</p> {isZh
? '务必打开 CORS，否则浏览器无法直接请求本地 LLM 服务。'
: 'Enable CORS, otherwise the browser cannot call your local LLM endpoint directly.'}
</li>
<li>
{isZh
? '将 context length 或 content length 至少设置为 8000。普通页面常常需要 15k token 左右，默认 4k 很容易被截断。'
: 'Set context length or content length to at least 8000. A typical page often needs around 15k tokens, so the default 4k usually truncates prompts.'}
</li>
<li>
{isZh ? '需要支持 tool_call 的模型。' : 'Use a model with tool_call support.'}
</li>
<li>
{isZh
? '小于 10B 参数的模型通常效果不佳。'
: 'Models smaller than 10B are usually not strong enough.'}
</li>
</ul>
</div>
</section>
<div className="space-y-2"> <section>
<p className="text-xs font-medium text-gray-500 dark:text-gray-400">macOS / Linux</p> <Heading id="local-configuration" level={3}>
{isZh ? '基础配置' : 'Basic Configuration'}
</Heading>
<CodeEditor <CodeEditor
code={`OLLAMA_CONTEXT_LENGTH=64000 OLLAMA_HOST=0.0.0.0:11434 OLLAMA_ORIGINS="*" ollama serve`} code={`// Local OpenAI-compatible runtime - no apiKey needed
/> const pageAgent = new PageAgent({
baseURL: 'http://localhost:11434/v1',
model: 'qwen3:14b'
});
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 pt-2"> // Or connect to LM Studio
Windows (PowerShell) const lmStudioAgent = new PageAgent({
baseURL: 'http://127.0.0.1:1234/v1',
model: 'qwen/qwen3.5-27b'
});
`}
/>
</section>
<section>
<Heading id="ollama" level={3}>
Ollama
</Heading>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '已在 Ollama 0.15 + qwen3:14b (RTX3090 24GB) 上测试通过。'
: 'Tested on Ollama 0.15 with qwen3:14b (RTX3090 24GB).'}
</p> </p>
<CodeEditor <CodeEditor
code={`$env:OLLAMA_CONTEXT_LENGTH=64000; $env:OLLAMA_HOST="0.0.0.0:11434"; $env:OLLAMA_ORIGINS="*"; ollama serve`} code={`LLM_BASE_URL="http://localhost:11434/v1"
LLM_MODEL_NAME="qwen3:14b"`}
/> />
</div> <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-950/20 rounded-lg border border-amber-200 dark:border-amber-800">
</div> <h3 className="font-semibold text-amber-900 dark:text-amber-200 mb-2">
</section> {isZh ? '⚠️ 注意事项' : '⚠️ Important Notes'}
</h3>
<p className="text-sm text-gray-700 dark:text-gray-300">
{isZh
? '如果浏览器侧请求失败，优先检查 Ollama 是否已按上面的要求开启 CORS。'
: 'If browser-side requests fail, check whether Ollama has CORS enabled as required above.'}
</p>
</div>
{/* Production Authentication */} <div className="mt-4">
<section className="mb-10"> <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<Heading id="production-authentication" className="text-2xl font-semibold mb-4"> {isZh ? '建议启动参数' : 'Recommended Startup'}
{isZh ? '🔐 生产环境鉴权' : '🔐 Production Authentication'} </h3>
</Heading> <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> {isZh
{isZh ? '启动 Ollama 时建议同时放大上下文窗口并开启跨域访问。'
? '如果你只是将它用作个人助手，可以直接连接你的 LLM 服务。' : 'When starting Ollama, increase the context window and enable cross-origin access.'}
: 'If you only use it as a personal assistant, you can connect to your LLM service directly.'} </p>
</p>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> <div className="space-y-2">
{isZh ? ( <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
<> macOS / Linux
如果你计划将它集成到你的 Web 应用中，建议搭建一个后端代理来转发 LLM 请求，并使用{' '} </p>
<code>customFetch</code> 携带 Cookie 或其他鉴权信息： <CodeEditor
</> code={`OLLAMA_CONTEXT_LENGTH=64000 OLLAMA_HOST=0.0.0.0:11434 OLLAMA_ORIGINS="*" ollama serve`}
) : ( />
<>
If you plan to integrate it into your web app, it's better to have a backend proxy for <p className="text-xs font-medium text-gray-500 dark:text-gray-400 pt-2">
the LLM and use <code>customFetch</code> to authenticate the request with cookies or Windows (PowerShell)
other methods: </p>
</> <CodeEditor
)} code={`$env:OLLAMA_CONTEXT_LENGTH=64000; $env:OLLAMA_HOST="0.0.0.0:11434"; $env:OLLAMA_ORIGINS="*"; ollama serve`}
</p> />
<CodeEditor </div>
code={`const agent = new PageAgent({ </div>
baseURL: '/api/llm-proxy', </section>
model: 'gpt-5.1',
customFetch: (url, init) => <section>
fetch(url, { ...init, credentials: 'include' }), <Heading id="lm-studio" level={3}>
});`} LM Studio
/> </Heading>
<div className="mt-4 bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-4 rounded-r-lg"> <CodeEditor
<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200"> code={`LLM_BASE_URL="http://127.0.0.1:1234/v1"
{isZh LLM_MODEL_NAME="qwen/qwen3.5-27b"`}
? '⚠️ 永远不要把真实的 LLM API Key 提交到前端代码中' />
: '⚠️ NEVER commit real LLM API keys to your frontend code'} <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-950/20 rounded-lg border border-amber-200 dark:border-amber-800">
</p> <h3 className="font-semibold text-amber-900 dark:text-amber-200 mb-2">
{isZh ? '⚠️ 注意事项' : '⚠️ Important Notes'}
</h3>
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
<li>
{isZh
? 'Agent 必须启用 disableNamedToolChoice，否则 tool_choice 参数会报错。'
: 'Enable disableNamedToolChoice in the agent config, otherwise the tool_choice parameter may fail.'}
</li>
</ul>
</div>
</section>
</div> </div>
</section> </section>
</div> </div>

8
packages/website/src/pages/docs/introduction/troubleshooting/page.tsx
View File

@@ -274,10 +274,12 @@ function ApiErrorsContent(isZh: boolean) {
code={`const agent = new PageAgent({ code={`const agent = new PageAgent({
// ... // ...
customFetch: async (url, init) => { customFetch: async (url, init) => {
const body = JSON.parse(init.body)
// Adapt parameters for your provider // Adapt parameters for your provider
delete body.stream_options const body = JSON.parse(init.body)
return fetch(url, { ...init, body: JSON.stringify(body) }) delete body.tool_choice
const bodyStr = JSON.stringify(body)
return fetch(url, { ...init, body: bodyStr })
}, },
})`} })`}
/> />

11
packages/website/src/pages/home/FeaturesSection.tsx
View File

@@ -16,12 +16,13 @@ const LLM_CLOUD: {
opacity: number opacity: number
}[] = [ }[] = [
{ name: 'OpenAI', color: '#10b981', x: 18, y: 22, size: 1.5, opacity: 1 }, { name: 'OpenAI', color: '#10b981', x: 18, y: 22, size: 1.5, opacity: 1 },
{ name: 'Claude', color: '#f97316', x: 62, y: 15, size: 1.35, opacity: 0.95 }, { name: 'Claude', color: '#f97316', x: 58, y: 15, size: 1.35, opacity: 0.95 },
{ name: 'Qwen', color: '#8b5cf6', x: 38, y: 50, size: 1.8, opacity: 0.9 }, { name: 'Qwen', color: '#8b5cf6', x: 35, y: 50, size: 1.8, opacity: 0.9 },
{ name: 'Gemini', color: '#3b82f6', x: 68, y: 48, size: 1.2, opacity: 0.85 }, { name: 'Gemini', color: '#3b82f6', x: 72, y: 48, size: 1.2, opacity: 0.85 },
{ name: 'DeepSeek', color: '#06b6d4', x: 10, y: 65, size: 1.1, opacity: 0.8 }, { name: 'DeepSeek', color: '#06b6d4', x: 13, y: 65, size: 1.1, opacity: 0.8 },
{ name: 'Grok', color: '#f43f5e', x: 52, y: 78, size: 1.0, opacity: 0.75 }, { name: 'Grok', color: '#f43f5e', x: 52, y: 78, size: 1.0, opacity: 0.75 },
{ name: 'Ollama', color: '#9ca3af', x: 82, y: 25, size: 1.1, opacity: 0.8 }, { name: 'Ollama', color: '#9ca3af', x: 84, y: 25, size: 1.1, opacity: 0.8 },
{ name: 'LM Studio', color: '#4338ca', x: 49, y: 36, size: 0.8, opacity: 0.9 },
{ name: 'Kimi', color: '#14b8a6', x: 30, y: 82, size: 0.85, opacity: 0.6 }, { name: 'Kimi', color: '#14b8a6', x: 30, y: 82, size: 0.85, opacity: 0.6 },
{ name: 'GLM', color: '#f59e0b', x: 70, y: 72, size: 0.85, opacity: 0.55 }, { name: 'GLM', color: '#f59e0b', x: 70, y: 72, size: 0.85, opacity: 0.55 },
{ name: 'LLaMA', color: '#60a5fa', x: 88, y: 70, size: 0.8, opacity: 0.45 }, { name: 'LLaMA', color: '#60a5fa', x: 88, y: 70, size: 0.8, opacity: 0.45 },

1
packages/website/vite.config.js
View File

@@ -26,6 +26,7 @@ const SPA_ROUTES = [
'docs/features/data-masking', 'docs/features/data-masking',
'docs/features/custom-instructions', 'docs/features/custom-instructions',
'docs/features/models', 'docs/features/models',
'docs/features/local-llms',
'docs/features/chrome-extension', 'docs/features/chrome-extension',
'docs/features/mcp-server', 'docs/features/mcp-server',
'docs/features/third-party-agent', 'docs/features/third-party-agent',