docs(pages): add MCP Server docs section (#262)

* docs: add MCP server docs section

* docs: address mcp review feedback

pages/src/i18n/en.ts

@@ -106,6 +106,7 @@ export const en: TranslationKeys = {
   'docs.review': 'ocr review',
   'docs.scan': 'ocr scan',
   'docs.viewer': 'ocr viewer',
+  'docs.mcp': 'MCP Server',
   'docs.env': 'Claude Code Integration',
   'docs.overviewTitle': 'Overview',
   'docs.overviewDesc': '(short <code>ocr</code>) is an AI-powered code review CLI tool.',
@@ -242,6 +243,24 @@ export const en: TranslationKeys = {
   'docs.viewerTitle': 'ocr viewer',
   'docs.viewerDesc': 'Starts a WebUI session viewer for browsing review session logs in a web interface.',
   'docs.viewerNote': 'After running, a local HTTP server starts providing a visual interface for browsing review session logs.',
+  'docs.mcpTitle': 'MCP Server',
+  'docs.mcpDesc': 'Open Code Review supports Model Context Protocol (MCP) servers, allowing the review agent to use external tools during code review via the stdio transport.',
+  'docs.mcpConfig': 'Configure MCP Servers',
+  'docs.mcpConfigLocation': 'MCP server configuration is stored in ~/.opencodereview/config.json.',
+  'docs.mcpDelete': 'Delete MCP Servers',
+  'docs.mcpFields': 'Configuration Fields',
+  'docs.mcpFieldCol': 'Field',
+  'docs.mcpRequiredCol': 'Required',
+  'docs.mcpDescCol': 'Description',
+  'docs.mcpYes': 'Yes',
+  'docs.mcpNo': 'No',
+  'docs.mcpFieldCommandDesc': 'The executable command to start the MCP server',
+  'docs.mcpFieldArgsDesc': 'Command-line arguments passed to the server',
+  'docs.mcpFieldEnvDesc': 'Environment variables in KEY=VALUE format',
+  'docs.mcpFieldToolsDesc': 'Allowed tool names; if empty, all tools from the server are available',
+  'docs.mcpFieldSetupDesc': 'A shell command to run before starting the server, such as building an index',
+  'docs.mcpNote': 'If an MCP tool name conflicts with a built-in tool, it will be skipped with a warning. The setup command has a 5-minute timeout.',
+  'docs.mcpExample': 'Example: Add CodeGraph for Code Structure Analysis',
   'docs.envTitle': 'Claude Code Integration',
   'docs.envDesc': 'If you are already a Claude Code user with the following environment variables configured, Open Code Review will recognize them automatically — no extra configuration needed:',
   'docs.envNote': 'You can also use <code>ocr config</code> to override or supplement these settings.',

pages/src/i18n/ja.ts

@@ -108,6 +108,7 @@ export const ja: TranslationKeys = {
   'docs.review': 'ocr review',
   'docs.scan': 'ocr scan',
   'docs.viewer': 'ocr viewer',
+  'docs.mcp': 'MCP Server',
   'docs.env': 'Claude Code 統合',
   'docs.overviewTitle': '概要',
   'docs.overviewDesc': '（略称 <code>ocr</code>）は AI 駆動のコードレビュー CLI ツールです。',
@@ -244,6 +245,24 @@ export const ja: TranslationKeys = {
   'docs.viewerTitle': 'ocr viewer',
   'docs.viewerDesc': 'WebUI セッションビューアーを起動し、Web インターフェースでレビューセッションログを閲覧します。',
   'docs.viewerNote': '実行後、ローカル HTTP サーバーが起動し、レビューセッションログを閲覧するためのビジュアルインターフェースを提供します。',
+  'docs.mcpTitle': 'MCP Server',
+  'docs.mcpDesc': 'Open Code Review は Model Context Protocol (MCP) サーバーをサポートしており、レビュー Agent が stdio transport 経由でコードレビュー中に外部ツールを使用できます。',
+  'docs.mcpConfig': 'MCP Server の設定',
+  'docs.mcpConfigLocation': 'MCP server の設定は ~/.opencodereview/config.json に保存されます。',
+  'docs.mcpDelete': 'MCP Server の削除',
+  'docs.mcpFields': '設定フィールド',
+  'docs.mcpFieldCol': 'フィールド',
+  'docs.mcpRequiredCol': '必須',
+  'docs.mcpDescCol': '説明',
+  'docs.mcpYes': 'はい',
+  'docs.mcpNo': 'いいえ',
+  'docs.mcpFieldCommandDesc': 'MCP server を起動する実行コマンド',
+  'docs.mcpFieldArgsDesc': 'server に渡すコマンドライン引数',
+  'docs.mcpFieldEnvDesc': 'KEY=VALUE 形式の環境変数',
+  'docs.mcpFieldToolsDesc': '許可するツール名。空の場合は server が提供するすべてのツールを使用できます',
+  'docs.mcpFieldSetupDesc': 'server 起動前に実行する shell コマンド。例：インデックスの構築',
+  'docs.mcpNote': 'MCP ツール名が組み込みツールと競合する場合、そのツールは警告付きでスキップされます。setup コマンドのタイムアウトは 5 分です。',
+  'docs.mcpExample': '例：CodeGraph を追加してコード構造を分析',
   'docs.envTitle': 'Claude Code 統合',
   'docs.envDesc': 'すでに Claude Code ユーザーで以下の環境変数を設定済みの場合、Open Code Review は自動的に認識します。追加設定は不要です：',
   'docs.envNote': '<code>ocr config</code> を使用してこれらの設定を上書きまたは補完することもできます。',

pages/src/i18n/zh.ts

@@ -108,6 +108,7 @@ export const zh: TranslationKeys = {
   'docs.review': 'ocr review',
   'docs.scan': 'ocr scan',
   'docs.viewer': 'ocr viewer',
+  'docs.mcp': 'MCP Server',
   'docs.env': 'Claude Code 集成',
   'docs.overviewTitle': '概览',
   'docs.overviewDesc': '（简称 <code>ocr</code>）是一款 AI 驱动的代码审查 CLI 工具。',
@@ -244,6 +245,24 @@ export const zh: TranslationKeys = {
   'docs.viewerTitle': 'ocr viewer',
   'docs.viewerDesc': '启动 WebUI 会话查看器，在 Web 界面中浏览审查会话日志。',
   'docs.viewerNote': '运行后将启动一个本地 HTTP 服务器，提供可视化界面浏览审查会话日志。',
+  'docs.mcpTitle': 'MCP Server',
+  'docs.mcpDesc': 'Open Code Review 支持 Model Context Protocol (MCP) 服务器，允许审查 Agent 通过 stdio transport 在代码审查过程中使用外部工具。',
+  'docs.mcpConfig': '配置 MCP Server',
+  'docs.mcpConfigLocation': 'MCP server 配置存储在 ~/.opencodereview/config.json。',
+  'docs.mcpDelete': '删除 MCP Server',
+  'docs.mcpFields': '配置字段',
+  'docs.mcpFieldCol': '字段',
+  'docs.mcpRequiredCol': '必填',
+  'docs.mcpDescCol': '描述',
+  'docs.mcpYes': '是',
+  'docs.mcpNo': '否',
+  'docs.mcpFieldCommandDesc': '用于启动 MCP server 的可执行命令',
+  'docs.mcpFieldArgsDesc': '传递给 server 的命令行参数',
+  'docs.mcpFieldEnvDesc': 'KEY=VALUE 格式的环境变量',
+  'docs.mcpFieldToolsDesc': '允许使用的工具名称；为空时可使用该 server 提供的全部工具',
+  'docs.mcpFieldSetupDesc': '启动 server 前运行的 shell 命令，例如构建索引',
+  'docs.mcpNote': '如果 MCP 工具名称与内置工具冲突，该工具将被跳过并显示警告。setup 命令的超时时间为 5 分钟。',
+  'docs.mcpExample': '示例：添加 CodeGraph 进行代码结构分析',
   'docs.envTitle': 'Claude Code 集成',
   'docs.envDesc': '如果您已经是 Claude Code 用户并配置了以下环境变量，Open Code Review 将自动识别——无需额外配置：',
   'docs.envNote': '您也可以使用 <code>ocr config</code> 覆盖或补充这些设置。',

pages/src/pages/DocsPage.tsx

@@ -60,6 +60,7 @@ const sectionDefs: Section[] = [
   { id: 'review', labelKey: 'docs.review' },
   { id: 'scan', labelKey: 'docs.scan' },
   { id: 'viewer', labelKey: 'docs.viewer' },
+  { id: 'mcp', labelKey: 'docs.mcp' },
   { id: 'env', labelKey: 'docs.env' },
 ];
 
@@ -188,6 +189,16 @@ const DocsPage: React.FC = () => {
   const subTitle: React.CSSProperties = { fontSize: 15, fontWeight: 600, color: '#FFFFFF', margin: '24px 0 8px 0', lineHeight: '24px', fontFamily };
   const desc: React.CSSProperties = { fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: '24px', margin: '0 0 12px 0', fontFamily };
   const sectionSpacing: React.CSSProperties = { marginBottom: 56, display: 'flex', flexDirection: 'column' as const, alignItems: 'stretch' };
+  const mcpAddCommands = `ocr config set mcp_servers.<name>.command <command>
+ocr config set mcp_servers.<name>.args '["arg1","arg2"]'
+ocr config set mcp_servers.<name>.tools '["tool_name"]'
+ocr config set mcp_servers.<name>.setup '<setup command>'
+ocr config set mcp_servers.<name>.env '["KEY=VALUE"]'`;
+  const mcpDeleteCommands = `ocr config unset mcp_servers.<name>`;
+  const mcpCodeGraphCommands = `ocr config set mcp_servers.codegraph.command codegraph
+ocr config set mcp_servers.codegraph.args '["serve","--mcp"]'
+ocr config set mcp_servers.codegraph.tools '["codegraph_explore"]'
+ocr config set mcp_servers.codegraph.setup 'codegraph init && codegraph index'`;
 
   return (
     <div style={{ minHeight: '100vh', background: '#000000', paddingTop: 72, fontFamily: 'PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif' }}>
@@ -588,6 +599,54 @@ const DocsPage: React.FC = () => {
               <p style={{ ...desc, marginTop: 12 }}>{t('docs.viewerNote')}</p>
             </section>
 
+            {/* ─── MCP Server ─── */}
+            <section id="mcp" style={{ ...sectionSpacing, scrollMarginTop: 100 }}>
+              <p style={sectionTitle}>{t('docs.mcpTitle')}</p>
+              <p style={desc}>{t('docs.mcpDesc')}</p>
+
+              <p style={subTitle}>{t('docs.mcpConfig')}</p>
+              <CodeBlock code={mcpAddCommands} onCopy={() => handleCopy(mcpAddCommands)} />
+              <p style={{ ...desc, marginTop: 12 }}>{t('docs.mcpConfigLocation')}</p>
+
+              <p style={subTitle}>{t('docs.mcpDelete')}</p>
+              <CodeBlock code={mcpDeleteCommands} onCopy={() => handleCopy(mcpDeleteCommands)} />
+
+              <p style={subTitle}>{t('docs.mcpFields')}</p>
+              <div style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch', border: '1px solid rgba(255,255,255,0.16)', borderRadius: 8, overflow: 'hidden', marginBottom: 16 }}>
+                <div style={{ display: 'flex', background: 'rgba(255,255,255,0.04)' }}>
+                  <div style={{ width: 140, flexShrink: 0, padding: '10px 12px' }}><span style={{ fontSize: 13, fontWeight: 500, color: 'rgba(255,255,255,0.6)' }}>{t('docs.mcpFieldCol')}</span></div>
+                  <div style={{ width: 100, flexShrink: 0, padding: '10px 12px' }}><span style={{ fontSize: 13, fontWeight: 500, color: 'rgba(255,255,255,0.6)' }}>{t('docs.mcpRequiredCol')}</span></div>
+                  <div style={{ flex: 1, padding: '10px 12px' }}><span style={{ fontSize: 13, fontWeight: 500, color: 'rgba(255,255,255,0.6)' }}>{t('docs.mcpDescCol')}</span></div>
+                </div>
+                {[
+                  ['command', t('docs.mcpYes'), t('docs.mcpFieldCommandDesc')],
+                  ['args', t('docs.mcpNo'), t('docs.mcpFieldArgsDesc')],
+                  ['tools', t('docs.mcpNo'), t('docs.mcpFieldToolsDesc')],
+                  ['setup', t('docs.mcpNo'), t('docs.mcpFieldSetupDesc')],
+                  ['env', t('docs.mcpNo'), t('docs.mcpFieldEnvDesc')],
+                ].map(([field, required, d], idx, arr) => (
+                  <div key={field} style={{ display: 'flex', borderBottom: idx < arr.length - 1 ? '1px solid rgba(255,255,255,0.16)' : 'none' }}>
+                    <div style={{ width: 140, flexShrink: 0, display: 'flex', alignItems: 'center', padding: '10px 12px' }}>
+                      <span style={{ fontSize: 12, fontFamily: 'Menlo, monospace', color: 'rgba(255,255,255,0.7)' }}>{field}</span>
+                    </div>
+                    <div style={{ width: 100, flexShrink: 0, display: 'flex', alignItems: 'center', padding: '10px 12px' }}>
+                      <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{required}</span>
+                    </div>
+                    <div style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '10px 12px' }}>
+                      <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{d}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <p style={{ ...desc, fontSize: 12 }}>
+                {t('docs.mcpNote')}
+              </p>
+
+              <p style={subTitle}>{t('docs.mcpExample')}</p>
+              <CodeBlock code={mcpCodeGraphCommands} onCopy={() => handleCopy(mcpCodeGraphCommands)} />
+            </section>
+
             {/* ─── Claude Code Integration ─── */}
             <section id="env" style={{ ...sectionSpacing, scrollMarginTop: 100 }}>
               <p style={sectionTitle}>{t('docs.envTitle')}</p>