From 9f2ab18759d07d51517c8a0cc402b0f4f503553e Mon Sep 17 00:00:00 2001
From: Michael B <michael@imick.io>
Date: Wed, 15 Jul 2026 17:42:29 -0400
Subject: [PATCH] feat(website): rewrite MCP FAQ, link URLs, and add Step 2
 server URL

Rewrite the MCP FAQ to nine Q&As (adds cost and local-ComfyUI entries,
drops the sign-in troubleshooting item) in both locales, and auto-link
http(s) URLs in FAQ answers instead of rendering them as plain text.

Give Setup Step 2 a copyable Comfy Cloud MCP server URL alongside the
docs button by splitting the feature card's single action into
independent copyable and link slots.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/blocks/FAQSplit01.vue      | 48 +++++++++-
 .../src/components/blocks/FeatureGrid01.vue   | 58 ++++++------
 apps/website/src/config/routes.ts             |  1 +
 apps/website/src/i18n/translations.ts         | 91 ++++++++++---------
 apps/website/src/templates/mcp/FAQSection.vue |  2 +-
 .../src/templates/mcp/SetupSection.vue        | 18 ++--
 6 files changed, 132 insertions(+), 86 deletions(-)

diff --git a/apps/website/src/components/blocks/FAQSplit01.vue b/apps/website/src/components/blocks/FAQSplit01.vue
index 6cc804df82..0e77483be1 100644
--- a/apps/website/src/components/blocks/FAQSplit01.vue
+++ b/apps/website/src/components/blocks/FAQSplit01.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
-import { reactive, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 
 type Faq = { id: string; question: string; answer: string }
 
@@ -9,6 +9,31 @@ const { faqs } = defineProps<{
   faqs: readonly Faq[]
 }>()
 
+type AnswerPart = { type: 'text' | 'link'; value: string }
+
+function parseAnswer(answer: string): AnswerPart[] {
+  const urlPattern = /https?:\/\/[\w\-./?=&#%~:@]+/g
+  const parts: AnswerPart[] = []
+  let lastIndex = 0
+  for (const match of answer.matchAll(urlPattern)) {
+    const start = match.index ?? 0
+    const url = match[0].replace(/[.,;:]+$/, '')
+    if (start > lastIndex) {
+      parts.push({ type: 'text', value: answer.slice(lastIndex, start) })
+    }
+    parts.push({ type: 'link', value: url })
+    lastIndex = start + url.length
+  }
+  if (lastIndex < answer.length) {
+    parts.push({ type: 'text', value: answer.slice(lastIndex) })
+  }
+  return parts
+}
+
+const parsedFaqs = computed(() =>
+  faqs.map((faq) => ({ ...faq, answerParts: parseAnswer(faq.answer) }))
+)
+
 const expanded = reactive<boolean[]>(faqs.map(() => false))
 
 watch(
@@ -40,7 +65,7 @@ function toggle(index: number) {
       <!-- Right FAQ list -->
       <div class="flex-1">
         <div
-          v-for="(faq, index) in faqs"
+          v-for="(faq, index) in parsedFaqs"
           :key="faq.id"
           class="border-b border-primary-comfy-canvas/20"
         >
@@ -83,8 +108,23 @@ function toggle(index: number) {
             :aria-labelledby="`faq-trigger-${faq.id}`"
             class="pb-6"
           >
-            <p class="text-sm whitespace-pre-line text-primary-comfy-canvas/70">
-              {{ faq.answer }}
+            <p
+              class="text-sm wrap-break-word whitespace-pre-line text-primary-comfy-canvas/70"
+            >
+              <template
+                v-for="(part, partIndex) in faq.answerParts"
+                :key="partIndex"
+              >
+                <a
+                  v-if="part.type === 'link'"
+                  :href="part.value"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-primary-comfy-yellow underline underline-offset-2 transition-opacity hover:opacity-70"
+                  >{{ part.value }}</a
+                >
+                <template v-else>{{ part.value }}</template>
+              </template>
             </p>
           </section>
         </div>
diff --git a/apps/website/src/components/blocks/FeatureGrid01.vue b/apps/website/src/components/blocks/FeatureGrid01.vue
index 8e1d83c97e..b246d3a5a9 100644
--- a/apps/website/src/components/blocks/FeatureGrid01.vue
+++ b/apps/website/src/components/blocks/FeatureGrid01.vue
@@ -8,23 +8,21 @@ import CopyableField from '@/components/ui/copyable-field/CopyableField.vue'
 
 import SectionHeader from '../common/SectionHeader.vue'
 
-type CardAction =
-  | {
-      type: 'link'
-      label: string
-      href: string
-      target?: '_blank'
-      icon?: Component
-      variant?: 'default' | 'outline'
-    }
-  | { type: 'code'; value: string }
+type CardLink = {
+  label: string
+  href: string
+  target?: '_blank'
+  icon?: Component
+  variant?: 'default' | 'outline'
+}
 
 export interface FeatureCard {
   id: string
   label?: string
   title: string
   description: string
-  action?: CardAction
+  copyable?: string
+  link?: CardLink
 }
 
 type ColumnCount = 2 | 3 | 4
@@ -91,28 +89,30 @@ const columnClass: Record<ColumnCount, string> = {
           {{ card.description }}
         </p>
 
-        <div v-if="card.action" class="mt-6">
-          <Button
-            v-if="card.action.type === 'link'"
-            as="a"
-            :href="card.action.href"
-            :target="card.action.target"
-            :rel="
-              card.action.target === '_blank'
-                ? 'noopener noreferrer'
-                : undefined
-            "
-            :variant="card.action.variant ?? 'outline'"
-            :append-icon="card.action.icon"
-          >
-            {{ card.action.label }}
-          </Button>
+        <div
+          v-if="card.copyable || card.link"
+          class="mt-6 flex flex-col items-start gap-4"
+        >
           <CopyableField
-            v-else
-            :value="card.action.value"
+            v-if="card.copyable"
+            class="w-full"
+            :value="card.copyable"
             :copy-label="copyLabel"
             :copied-label="copiedLabel"
           />
+          <Button
+            v-if="card.link"
+            as="a"
+            :href="card.link.href"
+            :target="card.link.target"
+            :rel="
+              card.link.target === '_blank' ? 'noopener noreferrer' : undefined
+            "
+            :variant="card.link.variant ?? 'outline'"
+            :append-icon="card.link.icon"
+          >
+            {{ card.link.label }}
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/website/src/config/routes.ts b/apps/website/src/config/routes.ts
index f36a2e02cf..1ca06e4e2c 100644
--- a/apps/website/src/config/routes.ts
+++ b/apps/website/src/config/routes.ts
@@ -76,6 +76,7 @@ export const externalLinks = {
   apiKeys: 'https://platform.comfy.org/profile/api-keys',
   blog: 'https://blog.comfy.org/',
   cloud: 'https://cloud.comfy.org',
+  cloudMcpServer: 'https://cloud.comfy.org/mcp',
   cloudStatus: 'https://status.comfy.org',
   discord: 'https://discord.com/invite/comfyorg',
   docs: 'https://docs.comfy.org/',
diff --git a/apps/website/src/i18n/translations.ts b/apps/website/src/i18n/translations.ts
index 8a961da3f0..c92770013d 100644
--- a/apps/website/src/i18n/translations.ts
+++ b/apps/website/src/i18n/translations.ts
@@ -1931,9 +1931,9 @@ const translations = {
     'zh-CN': '或手动添加'
   },
   'mcp.setup.step2.description': {
-    en: 'Prefer manual setup? Add Comfy Cloud as a custom connector with the MCP URL. The docs cover every client.',
+    en: 'Prefer manual setup? Add this URL as a custom connector or remote MCP server in any client, then sign in when prompted. The docs cover every client.',
     'zh-CN':
-      '想手动配置？用 MCP URL 将 Comfy Cloud 添加为自定义连接器。文档涵盖各类客户端。'
+      '想手动配置？在任意客户端中将此 URL 添加为自定义连接器或远程 MCP 服务器，然后在提示时登录。文档涵盖各类客户端。'
   },
   'mcp.setup.step2.cta': {
     en: 'COMFY CLOUD MCP DOCS',
@@ -1971,9 +1971,9 @@ const translations = {
     'zh-CN': '开放协议，\n任意客户端。'
   },
   'mcp.why.1.description': {
-    en: 'MCP is an open standard. Comfy works with any MCP-compatible agent — Claude Code, Claude Desktop, Cursor, and Codex. No proprietary lock-in.',
+    en: 'MCP is an open standard, so any MCP-compatible client can connect. Today Comfy supports Claude Code and Claude Desktop, with more clients coming.',
     'zh-CN':
-      'MCP 是开放标准。Comfy 可与任何兼容 MCP 的智能体协作——Claude Code、Claude Desktop、Cursor 和 Codex。没有专有锁定。'
+      'MCP 是开放标准，因此任何兼容 MCP 的客户端都能接入。目前 Comfy 支持 Claude Code 和 Claude Desktop，更多客户端即将推出。'
   },
   'mcp.why.2.title': {
     en: 'The full engine,\nnot a sandbox.',
@@ -2130,71 +2130,80 @@ const translations = {
     'zh-CN': '支持哪些客户端？'
   },
   'mcp.faq.1.a': {
-    en: 'Claude Code and Claude Desktop today, both signing in with OAuth. Support for more clients is coming.',
+    en: 'For Claude Code, Claude Desktop, or Codex, add https://cloud.comfy.org/mcp as a custom connector or remote MCP server in any client, then sign in when prompted.\nFor any other agents, you need to connect with an API key. Send the docs https://docs.comfy.org/agent-tools/cloud to your agent and it will figure out the installation for you.',
     'zh-CN':
-      '目前支持 Claude Code 和 Claude Desktop，均通过 OAuth 登录。更多客户端的支持即将推出。'
+      '对于 Claude Code、Claude Desktop 或 Codex，在任意客户端中将 https://cloud.comfy.org/mcp 添加为自定义连接器或远程 MCP 服务器，然后在提示时登录。\n对于其他智能体，你需要使用 API 密钥连接。将文档 https://docs.comfy.org/agent-tools/cloud 发送给你的智能体，它会为你完成安装。'
   },
   'mcp.faq.2.q': {
+    en: "What's the server URL?",
+    'zh-CN': '服务器 URL 是什么？'
+  },
+  'mcp.faq.2.a': {
+    en: 'https://cloud.comfy.org/mcp — add it as a custom connector or remote MCP server in any client, then sign in when prompted.',
+    'zh-CN':
+      'https://cloud.comfy.org/mcp——在任意客户端中将它添加为自定义连接器或远程 MCP 服务器，然后在提示时登录。'
+  },
+  'mcp.faq.3.q': {
     en: 'Do I need an API key?',
     'zh-CN': '我需要 API 密钥吗？'
   },
-  'mcp.faq.2.a': {
-    en: 'Not for Claude Code or Claude Desktop. They use OAuth. An API key is only needed for headless or CI setups with no browser.',
-    'zh-CN':
-      'Claude Code 和 Claude Desktop 不需要，它们使用 OAuth。仅在没有浏览器的无头或 CI 环境中才需要 API 密钥。'
-  },
-  'mcp.faq.3.q': {
-    en: 'Do the slash commands work in Claude Desktop?',
-    'zh-CN': '斜杠命令在 Claude Desktop 中可以使用吗？'
-  },
   'mcp.faq.3.a': {
-    en: 'No. They ship in the Claude Code plugin. Desktop connects to the same MCP server, so the tools work; just ask in plain language.',
+    en: 'Not for Claude Code, Claude Desktop, or Codex. You need a Comfy API key for Cursor, Hermes, and OpenClaw for now. Just copy https://docs.comfy.org/agent-tools/cloud and your agent will figure out the installation for you.',
     'zh-CN':
-      '不可以。斜杠命令包含在 Claude Code 插件中。Claude Desktop 连接的是同一个 MCP 服务器，因此工具可以正常使用；直接用自然语言提问即可。'
+      'Claude Code、Claude Desktop 和 Codex 不需要。Cursor、Hermes 和 OpenClaw 目前需要 Comfy API 密钥。只需复制 https://docs.comfy.org/agent-tools/cloud，你的智能体就会为你完成安装。'
   },
   'mcp.faq.4.q': {
-    en: "The sign-in didn't open a browser.",
-    'zh-CN': '登录时没有打开浏览器。'
+    en: 'Does it cost anything?',
+    'zh-CN': '需要付费吗？'
   },
   'mcp.faq.4.a': {
-    en: 'In Claude Code, run /mcp, select comfy-cloud, and choose Authenticate. In Claude Desktop, reopen the connector from Customize → Connectors.',
+    en: "Connecting is free with a Comfy account, and searching models, nodes, and templates doesn't cost credits. Running a generation uses Comfy Cloud credits and needs a subscription or credit balance. Your agent confirms with you before it spends.",
     'zh-CN':
-      '在 Claude Code 中，运行 /mcp，选择 comfy-cloud，然后选择 Authenticate（授权）。在 Claude Desktop 中，从“自定义 → 连接器”重新打开该连接器。'
+      '使用 Comfy 账户连接是免费的，搜索模型、节点和模板也不消耗积分。运行生成会使用 Comfy Cloud 积分，需要订阅或积分余额。智能体在消费前会先与你确认。'
   },
   'mcp.faq.5.q': {
-    en: 'How do I connect in Claude Code?',
-    'zh-CN': '如何在 Claude Code 中连接？'
+    en: 'Can I use it with my local ComfyUI?',
+    'zh-CN': '可以配合我的本地 ComfyUI 使用吗？'
   },
   'mcp.faq.5.a': {
-    en: 'Add the marketplace and install the comfy-cloud plugin, then run /mcp → comfy-cloud → Authenticate. It adds the connection and slash commands in one step.',
-    'zh-CN':
-      '添加插件市场并安装 comfy-cloud 插件，然后运行 /mcp → comfy-cloud → Authenticate（授权）。一步即可添加连接和斜杠命令。'
+    en: 'Coming soon. Today, to drive a local ComfyUI, you can use comfy-cli.',
+    'zh-CN': '即将推出。目前，若要操作本地 ComfyUI，你可以使用 comfy-cli。'
   },
   'mcp.faq.6.q': {
-    en: "What's the server URL for Claude Desktop?",
-    'zh-CN': 'Claude Desktop 的服务器 URL 是什么？'
-  },
-  'mcp.faq.6.a': {
-    en: 'Add a custom connector in Customize → Connectors pointing to https://cloud.comfy.org/mcp, then sign in when prompted.',
-    'zh-CN':
-      '在“自定义 → 连接器”中添加一个指向 https://cloud.comfy.org/mcp 的自定义连接器，然后在提示时登录。'
-  },
-  'mcp.faq.7.q': {
     en: 'What can my agent do once connected?',
     'zh-CN': '连接后我的智能体能做什么？'
   },
-  'mcp.faq.7.a': {
-    en: 'Generate images, video, audio, and 3D; search models, nodes, and templates; and run ComfyUI workflows, all from a chat.',
+  'mcp.faq.6.a': {
+    en: "• Generate images, video, audio, and 3D — including all open-source workflows and partner models like Seedance, GPT-Image, Nano Banana, and Kling\n• Build, edit, and run workflows; save and re-run workflows\n• Run and read in large batches\n• Search models, nodes, and template workflows\n• Read and execute shared workflow URLs\n• Upload and download assets for you\n\nEverything is now in natural language. No nodes, no downloads, no GPU, no node graphs if you don't want them.",
     'zh-CN':
-      '生成图像、视频、音频和 3D；搜索模型、节点和模板；并运行 ComfyUI 工作流——全部在对话中完成。'
+      '• 生成图像、视频、音频和 3D——包括所有开源工作流以及 Seedance、GPT-Image、Nano Banana 和 Kling 等合作伙伴模型\n• 构建、编辑和运行工作流；保存并重新运行工作流\n• 大批量运行和读取\n• 搜索模型、节点和模板工作流\n• 读取并执行分享的工作流链接\n• 为你上传和下载资产\n\n现在一切都用自然语言完成。如果你愿意，无需节点、无需下载、无需 GPU、无需节点图。'
+  },
+  'mcp.faq.7.q': {
+    en: 'Where do my outputs go?',
+    'zh-CN': '我的输出会保存到哪里？'
+  },
+  'mcp.faq.7.a': {
+    en: 'Into your Comfy Cloud asset library, so you can reuse, remix, and share them — and open any run on the canvas to keep editing. You can also ask your agent to donwload the assets to local for you.',
+    'zh-CN':
+      '保存到你的 Comfy Cloud 资产库，你可以复用、二次创作和分享——还能在画布上打开任意运行继续编辑。你也可以让智能体把资产下载到本地。'
   },
   'mcp.faq.8.q': {
+    en: 'Do slash commands work in Claude Desktop?',
+    'zh-CN': '斜杠命令在 Claude Desktop 中可以使用吗？'
+  },
+  'mcp.faq.8.a': {
+    en: 'No. They ship with the Claude Code comfy-cloud plugin. Desktop connects to the same MCP server, so every tool works; just ask in plain language.',
+    'zh-CN':
+      '不可以。斜杠命令随 Claude Code 的 comfy-cloud 插件一起提供。Claude Desktop 连接的是同一个 MCP 服务器，因此所有工具都能使用；直接用自然语言提问即可。'
+  },
+  'mcp.faq.9.q': {
     en: 'Is it generally available?',
     'zh-CN': '现已正式发布了吗？'
   },
-  'mcp.faq.8.a': {
-    en: 'Comfy Cloud MCP is in open beta and available to everyone.',
-    'zh-CN': 'Comfy Cloud MCP 目前处于公开测试阶段，所有人均可使用。'
+  'mcp.faq.9.a': {
+    en: 'Yes. Comfy Cloud MCP is in open beta and available to everyone with a Comfy account.',
+    'zh-CN':
+      '是的。Comfy Cloud MCP 目前处于公开测试阶段，任何拥有 Comfy 账户的人都可以使用。'
   },
 
   // SiteNav
diff --git a/apps/website/src/templates/mcp/FAQSection.vue b/apps/website/src/templates/mcp/FAQSection.vue
index 673dac106f..8aec525c8a 100644
--- a/apps/website/src/templates/mcp/FAQSection.vue
+++ b/apps/website/src/templates/mcp/FAQSection.vue
@@ -5,7 +5,7 @@ import { t } from '../../i18n/translations'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const faqNumbers = [1, 2, 3, 4, 5, 6, 7, 8] as const
+const faqNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9] as const
 
 const faqs = faqNumbers.map((n) => ({
   id: String(n),
diff --git a/apps/website/src/templates/mcp/SetupSection.vue b/apps/website/src/templates/mcp/SetupSection.vue
index de879581a3..d1ee2b92c5 100644
--- a/apps/website/src/templates/mcp/SetupSection.vue
+++ b/apps/website/src/templates/mcp/SetupSection.vue
@@ -15,21 +15,18 @@ const cards: FeatureCard[] = [
     label: t('mcp.setup.step1.label', locale),
     title: t('mcp.setup.step1.title', locale),
     description: t('mcp.setup.step1.description', locale),
-    action: {
-      type: 'code',
-      value: t('mcp.setup.step1.command', locale).replace(
-        '{url}',
-        externalLinks.docsMcp
-      )
-    }
+    copyable: t('mcp.setup.step1.command', locale).replace(
+      '{url}',
+      externalLinks.docsMcp
+    )
   },
   {
     id: 'step2',
     label: t('mcp.setup.step2.label', locale),
     title: t('mcp.setup.step2.title', locale),
     description: t('mcp.setup.step2.description', locale),
-    action: {
-      type: 'link',
+    copyable: externalLinks.cloudMcpServer,
+    link: {
       label: t('mcp.setup.step2.cta', locale),
       href: externalLinks.docsMcp,
       target: '_blank',
@@ -42,8 +39,7 @@ const cards: FeatureCard[] = [
     label: t('mcp.setup.step3.label', locale),
     title: t('mcp.setup.step3.title', locale),
     description: t('mcp.setup.step3.description', locale),
-    action: {
-      type: 'link',
+    link: {
       label: t('mcp.setup.step3.cta', locale),
       href: externalLinks.mcpSkills,
       target: '_blank',