AI 代理程式已經解鎖了強大的用例，因此開發人員正在自動化複雜的工作流程。

但有時您只是想建立智慧的東西而不需要額外的複雜性，這可以使用無代理架構來實現。

今天，我們將了解它的含義、MCP 如何適應整個場景，以及如何使用帶有 Composio 伺服器的 CopilotKit（框架）來建立我們自己的無代理應用程式。

讓我們開始吧。

涵蓋哪些內容？

簡而言之，我們正在詳細介紹這些主題。

1. 什麼是無代理架構？

2. MCP及其核心元件的介紹。

3. 如何在三十分鐘內執行 Next.js + MCP 客戶端。

4. 建立工作記憶專案來管理來自 Linear 等工具的任務和專案。

5. 一些具有用例的真實範例。

注意： Copilotkit （用於建立 AI Copilots 的框架）最近推出了對 MCP 的內建支持，我們將在本指南中使用它。

為了讓事情變得簡單，我們將它連接到Composio ，它提供了具有內建身份驗證和最少設定的即用型 MCP 伺服器。

我們將涵蓋很多內容，讓我們開始吧。

1.什麼是無代理架構？

Agentless architecture是指前端（通常是 Web 或行動用戶端）直接與智慧後端（例如 MCP 伺服器）互動的系統設計，無需部署或維護自訂agent來管理狀態、工具或操作。

在 AI 應用程式的背景下，這意味著您的 React 前端可以將結構化的提示和上下文傳送到與 MCP 相容的伺服器。無需託管自己的 AI 代理即可接收智慧回應。

您無需編寫後端邏輯來處理工具、記憶體或操作（它們都是 MCP 的一部分），只需向現有的 MCP 伺服器發送請求，它就會為您處理智慧內容。

🧠 範例：React 應用中 AI 任務助手

假設您正在建立一個基於 React 的專案管理應用程式。

採用無代理架構：

• 您新增一個聊天框。

• 使用者類型： Create a new task for our launch checklist 。

• 您的應用程式將其轉送到像 CopilotKit 這樣的 MCP 伺服器。

• MCP 伺服器瞭解該請求，與您的工具（例如 Linear）連接，並回覆： Task Finalize Launch Assets has been created in the Marketing project.

所有這些都無需託管您自己的 AI 代理程式或編寫編排邏輯。它確實有效。

何時採用無代理模式，何時採用基於代理模式？

這取決於您的用例的複雜性。以下是一個快速比較：

|無代理架構 |基於代理的架構 |

|-------------------------------------------------------------------------------- |---------------------------------------------------------------- |

|易於設置，無需後端代理 |需要額外設置來託管和管理代理 |

|非常適合簡單的前端、靜態網站或快速演示 |最適合需要記憶體的複雜工作流程、工具或應用程式 |

|沒有內建內存，大多無狀態 |支援記憶、歷史和不斷發展的背景 |

|非常適合 AI 聊天 UI、助手或小助手 |非常適合開發代理、RPA 機器人和完全自主代理 |

|只需要存取 MCP 相容伺服器 |需要自己的後端或容器執行時 |

|只需部署前端即可輕鬆跨用戶擴展 |需要針對多個並發代理的後端擴展策略 |

我的建議是兩種都嘗試一下，看看哪一種有效。至少，你會了解與每個問題相關的潛在問題。

了解了Agentless架構之後，我們來快速了解MCP以及其核心元件。

2.MCP及其核心元件介紹。

模型上下文協議 (MCP)是一種新的開放協議，它標準化了應用程式向 LLM 提供上下文和工具的方式。

可以將其視為 AI 的通用連接器。 MCP 作為 Cursor 的插件系統，可讓您透過將 Agent 連接到各種資料來源和工具來擴展 Agent 的功能。

YouTube 上的版權歸於 Greg Isenburg

MCP 可協助您在 LLM 之上建立代理程式和複雜的工作流程。

例如，Obsidian 的 MCP 伺服器可協助 AI 助理搜尋和閱讀 Obsidian 保險庫中的筆記。

您的 AI 代理現在可以：

→ 透過 Gmail 發送電子郵件

→ 以線性方式建立任務

→ 在 Notion 中搜尋文件

→ 在 Slack 中發布訊息

→ 在 Salesforce 中更新記錄

所有這些都透過標準化介面發送自然語言指令來實現。

想想這對生產力意味著什麼。曾經需要在 5 個以上應用程式之間切換的任務現在可以在與代理的一次對話中完成。

從本質上講，MCP 遵循客戶端-伺服器架構，其中主機應用程式可以連接到多個伺服器。

感謝 ByteByteGo

核心元件。

以下是任何通用 MCP 伺服器的核心元件。

• MCP hosts - 想要透過 MCP 存取資料的應用程式，例如 Claude Desktop、Cursor、Windsurf 或 AI 工具。

• MCP Clients - 與 MCP 伺服器保持 1:1 連線的協定客戶端，充當通訊橋樑。

• MCP Servers - 輕量級程序，每個程序透過標準化模型上下文協議公開特定功能（如讀取文件、查詢資料庫...）。

• Local Data Sources - MCP 伺服器可以安全存取的電腦上的檔案、資料庫和服務。例如，瀏覽器自動化 MCP 伺服器需要存取您的瀏覽器才能運作。

• Remote Services - MCP 伺服器可以連接的外部 API 和基於雲端的系統。

如果您有興趣了解該架構，請查看官方文件。它涵蓋協定層、連接生命週期和錯誤處理以及整體實現。

我們將涵蓋所有內容，但如果您有興趣了解有關 MCP 的更多訊息，請查看以下兩個部落格：

• 什麼是模型上下文協定（MCP）？由 Builder.io 團隊打造

• MCP：它是什麼以及為什麼它重要 作者：Addy Osmani

3. 如何在三十分鐘內執行 Next.js + MCP 客戶端。

在本節中，我們將討論如何使用 CopilotKit 為您的 Next.js 專案新增 MCP 支援。

我們將整合 Copilotkit，它內建了對模型上下文協定 (MCP) 的支援。這將允許我們建立一個前端來直接連接到外部 MCP 相容伺服器。

如果您有興趣自己閱讀，請閱讀docs.copilotkit.ai/guides/model-context-protocol上的文件。你不想也沒關係；我將詳細解釋所有步驟和概念。

🎯 使用 CLI 的一行指令安裝 MCP 支持

如果您沒有現有的 Next.js 應用程式，則可以在終端機中使用npx create-next-app@latest命令建立一個。

專案準備好後，整合 MCP 支援的最快方法是使用CopilotKit CLI 。只需在終端機中執行以下命令。

npx copilotkit@latest init -m MCP

這個指令在後台做了很多事：

• 安裝所有必需的 CopilotKit 依賴項

• 設定一個可立即使用的接口，用於與 MCP 伺服器交互

• 新增元件以整合 MCP 並安裝 shadcn/ui 進行 UI 樣式設定

它將指導您安裝所需的軟體包，並建議您使用 Copilot Cloud 進行部署（無需額外設定）。

使用 CLI 安裝

它將驗證配置並檢測現有的 Next.js 應用程式是否有效。之後，您可以選擇default project或mcp demo （這是由 Copilotkit 團隊製作的展示專案）。

我已經嘗試使用 CLI，但在本指南的範圍內，我們將使用預設專案。

然後它會提示您安裝shadcn/ui以實現內建元件樣式。

因為我們使用的是React 19 ，它非常新。一些庫可能尚未正式支援它，並且 npm 可能會因為版本衝突而顯示錯誤（稱為peer dependency issues ）。

為了解決這個問題，CLI 建議使用--legacy-peer-deps ，它告訴 npm 忽略這些版本警告並繼續安裝。

這是一種通常可以很好地發揮作用的解決方法，特別是對於仍在獲得支援的較新 React 版本而言。

安裝shadcn ui

安裝完成後，您將看到已新增內容的摘要。

您可以使用npm run dev在本地啟動伺服器並導航到http://localhost:3000/copilotkit來查看您的 MCP 就緒前端。

📧 連接到 Gmail MCP 伺服器（演示）

您需要輸入您喜歡使用的 MCP 伺服器的 SSE URL。您可以在mcp.composio.dev找到 100 多個可用託管 MCP 伺服器的清單。

讓我們簡單檢查一下流程。我正在使用mcp.composio.dev/gmail上的 Gmail 伺服器。

複製您從 composio 伺服器頁面產生的 MCP 伺服器 URL，並將其貼上到頁面上的佔位符欄位（ Enter MCP server URL ）。這是很敏感的，僅供個人使用，所以我把它模糊了。

我已提示發送一封電子郵件至[email protected] ，主題為working demo of copilotkit mcp ，並在電子郵件正文中說明composio server works 。

它將呼叫適當的 MCP 伺服器（如果您有多個），並根據您的提示採取正確的操作。

由於沒有活動連接，它將首先建立一個（如上圖所示）。您需要透過複製瀏覽器中的 OAuth URL 進行身份驗證。

💡 最好先用虛擬帳戶進行測試，尤其是在實驗時。一旦您滿意，您就可以使用您的主帳戶自動執行操作。

您必須提供對伺服器的存取權限，以便它可以根據您的提示採取行動。

一旦您通過身份驗證，您將在瀏覽器中看到確認訊息。

您只需輸入done以便代理可以驗證活動連線。令我驚訝的是，它在發送電子郵件之前仍然要求批准，以確保您仍然擁有控制權。

獲得批准後，代理商將繼續發送電子郵件。

不知何故，它沒有提供主題，但我們收到了帶有適當正文回應的電子郵件。

耶！ 🎉 您現在已經使用 CopilotKit 完成了與 MCP 伺服器的端對端整合。

您可以對所有其他 MCP 伺服器執行相同操作並建立多步驟工作流程。

接下來：我們將從頭開始手動建立此流程，以便更好地理解底層元件。

🎯 從頭開始設定整個集成

讓我們從頭開始了解如何設定 CopilotKit 整合以使用 MCP 伺服器。這將幫助您了解端到端的架構和流程。

如果您已經有現有的 Next.js 專案，請跳至步驟 2。

步驟 1：使用 TypeScript 建立 Next.js 專案

如果您沒有前端，可以使用以下指令使用TypeScript和Tailwind CSS建立一個新的next.js專案。

npx create-next-app@latest 

您的專案結構將會是這樣的。我們將使用最新的 Next.js 版本以及 App Router。我加入了一些文件（根據我的風格偏好），這是我為每個專案所做的事情，所以這不是強制性的。

🧠 您可能會注意到沒有tailwind.config.js 。這是因為，使用Tailwind CSS V4 ，我們現在可以直接在 globals.css 中自訂樣式，並且新的 next.js 應用程式不再需要設定檔。

步驟 2：安裝 CopilotKit 套件並設定提供者。

安裝必要的 CopilotKit 套件。

npm install @copilotkit/react-core @copilotkit/react-ui

• @copilotkit/react-core提供核心上下文和邏輯，將您的 React 應用程式與 CopilotKit 後端和 MCP 伺服器連接起來。

• @copilotkit/react-ui提供現成的 UI 元件，例如<CopilotChat />以快速建立 AI 聊天或助理介面。

<CopilotKit>元件必須包裝應用程式中支援 Copilot 的部分。在大多數情況下，最好將其放置在整個應用程式周圍，例如app/layout.tsx 。

import type { Metadata } from 'next'
import './globals.css'

import '@copilotkit/react-ui/styles.css'
import './globals.css'
import { CopilotKit } from '@copilotkit/react-core'

export const metadata: Metadata = {
  title: 'CopilotKit MCP Demo',
  description: 'CopilotKit MCP Demo',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={
          'relative flex flex-col overflow-x-hidden font-sans antialiased'
        }
        suppressHydrationWarning
      >
        <CopilotKit publicApiKey="<replace_with_your_own>">
          {children}
        </CopilotKit>
      </body>
    </html>
  )
}

使用來自cloud.copilotkit.ai的 API 金鑰來取代<replace_with_your_own> 。如果您正在為生產而建置，它是免費的並且建議使用。

如果您有興趣使用 MCP 伺服器設定自託管執行時，請閱讀文件。

只需點擊“開始”，您就會找到一個公共 API 金鑰。

步驟 3：建立元件來設定 MCP 伺服器連接

現在我們將建立一個輔助元件，將您的應用程式連接到 MCP 伺服器。在src\components\McpServerManager.tsx建立一個新檔案。

'use client'

import { useCopilotChat } from '@copilotkit/react-core'
import { useEffect } from 'react'

function McpServerManager() {
  const { setMcpServers } = useCopilotChat()

  useEffect(() => {
    setMcpServers([
      {
        // Try a sample MCP server at https://mcp.composio.dev/
        endpoint: 'your_mcp_sse_url',
      },
    ])
  }, [setMcpServers])

  return null
}

export default McpServerManager

此McpServerManager元件將您的應用程式連接到 MCP 伺服器。

• 當元件載入（ useEffect執行）時，它會透過提供伺服器 URL 來告訴 CopilotKit 連接到哪個 MCP 伺服器。

• 元件本身不呈現任何內容（ return null ），它只是在背景建立連線。

它會將您的應用程式配置為在頁面載入時自動與您的 MCP 伺服器通訊。您只需要在endpoint屬性中設定用於工具存取的特定 MCP 端點（ your_mcp_sse_url ）。

第四步：新增聊天介面。

ChatInterface元件建立實際的聊天 UI 並確保聊天知道您想要連接的 MCP 伺服器。在src\components\ChatInterface.tsx建立一個新檔案。

'use client'

import { CopilotChat } from '@copilotkit/react-ui'
import McpServerManager from './McpServerManager'

export default function ChatInterface() {
  return (
    <div className="flex h-screen p-4">
      <McpServerManager />
      <CopilotChat
        instructions="You are a helpful assistant with access to MCP servers."
        className="w-full flex-grow rounded-lg"
      />
    </div>
  )
}

以下是對正在發生的事情的簡單解釋。

• McpServerManager在頁面載入時執行並告訴 CopilotKit 使用哪個 MCP 伺服器。

• CopilotChat顯示聊天框，用戶可以在其中與 AI 交談。

• 這些instructions告訴人工智慧它應該成為哪種助手。

步驟 5：可視化 MCP 工具呼叫（可選）。

若要監控助手觸發的工具呼叫，請新增ToolRenderer元件。這是完全可選的，但在開發過程中很有用。

在src\components\ToolRenderer.tsx建立一個新檔案。

'use client'

import {
  useCopilotAction,
  CatchAllActionRenderProps,
} from '@copilotkit/react-core'
import McpToolCall from './McpToolCall'

export function ToolRenderer() {
  useCopilotAction({
    /**
     * The asterisk (*) matches all tool calls
     */
    name: '*',
    render: ({ name, status, args, result }: CatchAllActionRenderProps<[]>) => (
      <McpToolCall status={status} name={name} args={args} result={result} />
    ),
  })
  return null
}

然後建立McpToolCall.tsx （在同一個components目錄下）。這將在可折疊的 UI 中顯示工具名稱、狀態、參數和結果。

它是一個可視化除錯元件，顯示工具呼叫的詳細訊息，例如助手嘗試執行的操作以及返回的結果。

/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'

import * as React from 'react'

interface ToolCallProps {
  status: 'complete' | 'inProgress' | 'executing'
  name?: string
  args?: any
  result?: any
}

export default function McpToolCall({
  status,
  name = '',
  args,
  result,
}: ToolCallProps) {
  const [isOpen, setIsOpen] = React.useState(false)

  const classes = {
    container:
      'bg-white rounded-xl overflow-hidden w-full border-2 border-gray-200 shadow-md transition-all duration-200 hover:shadow-xl my-1',
    header:
      'p-4 flex items-center cursor-pointer group bg-gray-50 border-b border-gray-200',
    title: 'text-gray-900 font-semibold overflow-hidden text-ellipsis',
    statusContainer: 'ml-auto flex items-center gap-2',
    statusText: 'text-xs text-gray-700 font-medium mr-1',
    content: 'px-5 pb-5 pt-3 text-gray-800 font-mono text-xs',
    section: 'mb-4',
    sectionTitle:
      'text-gray-700 text-xs uppercase tracking-wider mb-2 font-sans font-bold',
    codeBlock:
      'whitespace-pre-wrap max-h-[200px] overflow-auto text-gray-900 bg-gray-50 p-3 rounded border border-gray-200',
    chevron: {
      base: 'text-gray-700 mr-2 transition-transform duration-200',
      open: 'rotate-90',
      hover: 'group-hover:text-gray-900',
    },
    contentWrapper: {
      base: 'overflow-hidden transition-all duration-300 ease-in-out',
      open: 'max-h-[600px] opacity-100',
      closed: 'max-h-0 opacity-0',
    },
  }

  // Status indicator colors
  const statusColors = {
    complete: 'bg-emerald-500 shadow-emerald-500/40',
    inProgress: 'bg-amber-500 shadow-amber-500/40',
    executing: 'bg-blue-500 shadow-blue-500/40',
  }

  // Simplified format function
  const format = (content: any): React.ReactNode => {
    if (!content) return null
    return typeof content === 'object' ? (
      <span>{JSON.stringify(content, null, 2)}</span>
    ) : (
      <span>{String(content)}</span>
    )
  }

  const getStatusColor = () => {
    const baseColor = statusColors[status].split(' ')[0]
    const shadowColor = statusColors[status].split(' ')[1]
    return `${baseColor} ${status === 'inProgress' || status === 'executing' ? 'animate-pulse' : ''} shadow-[0_0_10px] ${shadowColor}`
  }

  return (
    <div className={classes.container}>
      <div className={classes.header} onClick={() => setIsOpen(!isOpen)}>
        <ChevronRight isOpen={isOpen} chevronClasses={classes.chevron} />
        <span className={classes.title}>{name || 'MCP Tool Call'}</span>
        <div className={classes.statusContainer}>
          <span className={classes.statusText}>
            {status === 'complete'
              ? 'Completed'
              : status === 'inProgress'
                ? 'In Progress'
                : 'Executing'}
          </span>
          <div className={`h-3 w-3 rounded-full ${getStatusColor()}`} />
        </div>
      </div>

      <div
        className={`${classes.contentWrapper.base} ${isOpen ? classes.contentWrapper.open : classes.contentWrapper.closed}`}
      >
        <div className={classes.content}>
          <div className={classes.section}>
            <div className={classes.sectionTitle}>Name</div>
            <pre className={classes.codeBlock}>{name}</pre>
          </div>
          {args && (
            <div className={classes.section}>
              <div className={classes.sectionTitle}>Parameters</div>
              <pre className={classes.codeBlock}>{format(args)}</pre>
            </div>
          )}

          {status === 'complete' && result && (
            <div className={classes.section}>
              <div className={classes.sectionTitle}>Result</div>
              <pre className={classes.codeBlock}>{format(result)}</pre>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

const ChevronRight = ({
  isOpen,
  chevronClasses,
}: {
  isOpen: boolean
  chevronClasses: any
}) => {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`${chevronClasses.base} ${isOpen ? chevronClasses.open : ''} ${chevronClasses.hover}`}
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="9 18 15 12 9 6"></polyline>
    </svg>
  )
}

步驟6：組合所有元件。

建立所有單獨的元件後，就該將它們全部組合在src/app/page.tsx下。

'use client'

import { CopilotChat } from '@copilotkit/react-ui'
import McpServerManager from '../components/McpServerManager'
import { ToolRenderer } from '../components/ToolRenderer'

export default function Page() {
  return (
    <div className="flex h-screen p-4">
      <McpServerManager />
      <CopilotChat
        instructions="You are a helpful assistant with access to MCP servers."
        className="w-full flex-grow rounded-lg"
      />
      <ToolRenderer />
    </div>
  )
}

恭喜！ 🎉 您的 CopilotKit 和 MCP 伺服器設定已準備就緒！

步驟 7：新增 MCP 伺服器端點

現在我們只需要新增端點 URL 即可連接到外部 MCP 伺服器。這是在McpServerManager元件內部透過使用endpoint屬性傳遞 URL 來完成的，如下所示。

setMcpServers([
  {
    // Try a sample MCP server at https://mcp.composio.dev/
    endpoint: 'your_mcp_sse_url',
  },
])

有兩種更簡單的方法可以立即連接到 100 多個 MCP 伺服器：

1) Composio - Composio 具有完全託管的伺服器，無需複雜的設置，並帶有內建的 Auth。支援超過 250 種工具，並提供 20,000 多個預先建置的 API 操作，無需編碼即可整合。

它還可以在本地或遠端操作。並提供更好的工具呼叫準確性，使AI代理能夠與整合應用程式順利互動。

這也意味著更少的停機時間和更少的維護問題。您可以在status.composio.dev/檢查狀態。

透過每個選項，您將找到活躍用戶總數、當前版本、最近更新的時間以及所有可用的操作。

您將找到使用TypeScript 、 Python安裝它的說明，並且它支援 Claude (MacOS)、Windsurf (MacOS) 和 Cursor 作為 MCP 主機。

2） Zapier - Zapier 支援超過8,000 個應用程式，但每小時只能進行 80 次工具呼叫，這可能是一個限制。

如果出現伺服器問題，只需使用其他選項。

🔧 MCP 伺服器故障排除

最簡單的方法是使用 Cursor 或 Claude 等用戶端（您只需要在 Cursor 中執行 npx 命令），然後您可以透過開啟聊天來測試工具呼叫。

如果您不確定您的 MCP 伺服器是否正常運作：

⚡ 直接在瀏覽器中開啟 MCP 伺服器 URL。如果它傳回資料流（通常是 JSON 行），則它正在運作。

⚡ 檢查瀏覽器的 DevTools 是否有網路或控制台錯誤。

⚡ 有時過時的連線可能會導致靜默故障，重新啟動開發伺服器可以解決此問題。

步驟 8：新增 MCP 端點並執行伺服器。

您可以使用npm run dev在 next.js 應用程式中執行伺服器。現在您應該可以看到聊天介面。

這個流程與上一個非常相似。我再次使用https://mcp.composio.dev/gmail上的 Gmail 伺服器來幫助您了解從頭開始設定和從 CLI 執行設定之間的結果差異。

新增端點後，只需提供提示，您將能夠看到工具呼叫，因為我們使用了ToolRenderer元件。

與以前一樣，它會請求批准並相應地發送電子郵件。我已確認電子郵件已成功發送到我的收件匣。

在下一節中，我們將舉出一個複雜的例子。

4. 建構工作記憶專案來管理來自 Linear 等工具的任務和專案。

讓我們研究一個工作記憶專案，它將教我們如何建立互動式、人工智慧聊天應用程式，並使用 MCP 和 CopilotKit 與 Linear 和 Slack 等外部工具連接。

涉及的技術棧：

• Next.js（應用程式路由器）+ TypeScript

• CopilotKit React 核心（狀態管理）

• CopilotKit React UI（AI聊天）

• Tailwind CSS （樣式）

• React Query （資料取得）

• Framer Motion （動畫）

• Radix UI （可存取元件）

• React Flow （視覺化流程圖）

在繼續之前，請確保您有Node.js （建議使用 LTS 版本）。

步驟 1：克隆並設定儲存庫。

為了簡單起見，我們將在 GitHub 上克隆copilotkit mcp 儲存庫。

git clone https://github.com/CopilotKit/copilotkit-mcp-demo.git

請使用npm install安裝相依性。

之後，我們需要在root目錄下建立一個.env檔。然後將您的OpenAI API 金鑰新增至.env檔。我已附上文件連結，以便於理解。

這將是命名約定。

OPENAI_API_KEY= YOUR_API_KEY

OpenAI API金鑰

您還需要將cloud.copilotkit.ai中的 API 金鑰放在.env檔中。如果您正在為生產而建置，它是免費的並且建議使用。

這將是命名約定。

NEXT_PUBLIC_COPILOT_CLOUD_API_KEY= YOUR_API_KEY

只需點擊“開始”，您就會找到一個公共 API 金鑰。

第 2 步：讓我們來看看專案結構。

專案結構如下。

• /src/app ：包含 Next.js 頁面、版面配置和全域樣式。

• /src/components ：包括可重複使用的 UI 元件和代理介面，如旅行、研究、聊天、地圖和側邊欄。

• /src/providers ：包裝用於管理代理狀態的全域狀態提供者。

• /src/lib ：包含實用功能和設定檔。

• /src/hooks ：用於可重複使用邏輯的自訂 React hooks。

• /src/contexts ：提供用於管理全域狀態的 React 上下文。

步驟 3：讓我們來了解程式碼庫。

我不會介紹每個元件的程式碼，否則這個部落格會太長，所以我會嘗試盡可能多地介紹所涉及的概念。請檢查repo並關註一切如何協同工作。

⚡ 1. 入口是src/app/layout.tsx ，它會匯入全域樣式，載入 Google 字體，然後將所有內容包裝在頂級<Providers>中。

⚡ 2. Providers（ src/providers/Providers.tsx ）是設定應用程式狀態、API 存取和伺服器配置的全域提供者的元件。

"use client";

import { CoAgentsProvider } from "@/components/coagents-provider";
import McpServerManager from "@/components/McpServerManager";
import { ToolRenderer } from "@/components/ToolRenderer";
import { useLocalStorage } from "@/hooks/use-local-storage";
import { CopilotKit } from "@copilotkit/react-core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React from "react";

export interface Config {
  endpoint: string;
  serverName: string;
}

export interface ConfigContextType {
  config: Config[];
  setConfig: (config: Config[]) => void;
}

const queryClient = new QueryClient();
export const ServerConfigsContext = React.createContext<
  ConfigContextType | undefined
>(undefined);
export default function Providers({ children }: { children: React.ReactNode }) {
  const [mcpConfig] = useLocalStorage("mcpConfig", []);
  const [config, setConfig] = React.useState<Config[]>(mcpConfig || []);

  return (
    <ServerConfigsContext.Provider value={{ config, setConfig }}>
      <QueryClientProvider client={queryClient}>
        <CopilotKit
          publicApiKey={process.env.NEXT_PUBLIC_COPILOT_CLOUD_API_KEY}
        >
          <McpServerManager configs={config} />
          <ToolRenderer />
          {/* <MCPToolCall /> */}
          <CoAgentsProvider>{children}</CoAgentsProvider>
        </CopilotKit>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </ServerConfigsContext.Provider>
  );
}

• ServerConfigsContext ：儲存已設定的「MCP」伺服器列表

• QueryClientProvider ：連接 React Query

• <CopilotKit> ：初始化 CopilotKit 執行階段（使用您的公用 API 金鑰）

• <McpServerManager> ：從上下文讀取設定並告訴 CopilotKit 使用哪些伺服器

• <ToolRenderer> ：捕獲所有 CopilotKit “工具呼叫” 並將其渲染為 MCPToolCall 卡

• <CoAgentsProvider> ：用於整理代理狀態的佔位符（目前僅透過子級傳遞）

⚡ 3. MCP 伺服器配置

• MCPConfigModal（ src/components/mcp-config-modal.tsx ）：一個允許您新增/刪除 SSE 或 stdio 伺服器、持久儲存到 localStorage、更新上下文和 CopilotKit 的模式。

• use-local-storage ( src\hooks\use-local-storage.tsx ) ：用於保存這些設定的鉤子

由於程式碼太長，因此我沒有將其包括在內。

⚡ 4. 聊天用戶介面

• ChatWindow（ src/components/chat-window.tsx ）只是@copilotkit/react-ui's <CopilotChat>的一個樣式包裝器

• 你通過了：

• 「指示」（告訴 AI 始終透過 MCP 伺服器並向其提供當前的待辦事項狀態）

• 標籤、圖示、旋轉/停止按鈕

"use client";
import { useTodo } from "@/contexts/TodoContext";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import { Loader2, RotateCw, SendIcon, Square } from "lucide-react";
import { FC } from "react";
import { Loader } from "./Loader";

export const ChatWindow: FC = () => {
  const { todos } = useTodo();
  return (
    <CopilotChat
      className="h-full flex flex-col"
      instructions={`Always use the MCP server to complete the task. You will be provided with a list of MCP servers. Use the appropriate MCP server to complete the task.
      To perform any actions over the todo task use the following data for manipulation ${JSON.stringify(
        todos
      )}`}
      labels={{
        title: "To-do Assistant",
        initial:
          "Hi! I'm your AI task assistant, powered by MCP servers that you can configure to help manage and break down your tasks. \n\nHow can I help you today?",
        placeholder: "Type your message here...",
        regenerateResponse: "Try another response",
      }}
      icons={{
        sendIcon: (
          <SendIcon className="w-4 h-4 hover:scale-110 transition-transform" />
        ),
        activityIcon: (
          <Loader
            texts={[
              "Thinking...",
              "Analyzing Your Query...",
              "Taking Action...",
            ]}
          />
        ),
        spinnerIcon: <Loader2 className="w-4 h-4 animate-spin" />,
        stopIcon: (
          <Square className="w-4 h-4 hover:text-red-500 transition-colors" />
        ),
        regenerateIcon: (
          <RotateCw className="w-4 h-4 hover:rotate-180 transition-transform duration-300" />
        ),
      }}
    />
  );
};

⚡ 5. 待辦事項狀態與操作

• TodoContext（ src/contexts/TodoContext.tsx ）保存記憶體中的待辦事項和子任務清單以及所有 CRUD/切換功能

• TodoApp（ src/components/Todo.tsx ）渲染用於新增/切換/刪除任務和子任務的 UI

• 在 TodoApp 內部，您還註冊了一組 useCopilotAction 鉤子（ADD_TASK、ADD_SUBTASK、COMPLETE_TASK 等）和一個用於 JSON 編碼清單的 useCopilotReadable。

當 AI 決定呼叫其中一個操作時，CopilotKit 將呼叫您的處理程序，以更新相同的 React 上下文。

⚡ 6. 視覺表現

• 視覺呈現（ src/components/VisualRepresentation.tsx ）

• 訂閱相同的待辦事項上下文

• 每當您的待辦事項發生變化時，請建立一組“節點”和“邊”

• 使用自訂 ParentNode/ChildNode 元件（ src/components/Nodes.tsx ）在 React Flow 中呈現樹狀視圖

• 點擊節點可切換對應的任務/子任務

⚡ 7. 工具呼叫

• ToolRenderer ( src/components/ToolRenderer.tsx ) 安裝通配符 useCopilotAction 監聽器

• 每次 CopilotKit 發出「工具呼叫」（即造訪 MCP 伺服器）時，您都會呈現一個 MCPToolCall 卡（ src/components/MCPToolCall.tsx ）來顯示狀態、錯誤/結果等。

⚡ 8. 畫布佈局

• Canvas（ src/components/canvas.tsx ）將所有內容拼接在一起：

• 左窗格：聊天視窗

• 主區域：兩張卡片並排（VisualRepresentation + TodoApp）

• 切換 MCPConfigModal 的「MCP 伺服器」按鈕

• 在底層，它也會呼叫 useCopilotChatSuggestions 來呈現 AI 驅動的建議

⚡ 9. UI 基元和實用程序

• src/components/ui/… – 基於基數的按鈕、卡片、對話方塊等，皆使用 Tailwind 設定樣式

• src/lib/utils.ts – 用於組合 Tailwind 類別的小型「cn」助手

• src/hooks – useLocalStorage、useIsMobile

🧠 流程摘要：

這是所有元件的流程。

1) 您透過模式設定一個或多個 MCP 伺服器 → 它們儲存在localStorage → 然後透過McpServerManager傳遞到 CopilotKit。

2) 您在聊天中輸入一則訊息 → CopilotKit 將其路由到 AI → AI 可以透過 MCP 伺服器「呼叫」您註冊的操作（如ADD_TASK ）。

3) 然後ToolRenderer視覺化每個工具呼叫 → 您的動作處理程序在 React 上下文中更新狀態 → TodoApp 和 VisualRepresentation 都使用新狀態重新渲染 → 您的聊天流程繼續。

我相信，如果你打開程式碼庫並了解流程，一切都會變得有意義。

步驟 4：最終演示

您可以使用npm run dev在本地執行伺服器，並在copilotkit-mcp-demo.vercel.app檢查即時演示應用程式。

{% cta https://github.com/CopilotKit/copilotkit-mcp-demo %} 星級 CopilotKit MCP 示範⭐️ {% endcta %}

5. 一些具有用例的真實範例。

掌握基礎知識後，您可以透過以下一些先進且富有創意的方法將 CopilotKit 與 MCP 結合使用，以建立無代理的強大工作流程。

我們可以使用 MCP 的可組合伺服器端點進行鏈工具互動。

✅ 跨 API 的多步驟工作流程自動化。

讓我們假設一個範例任務： Fetch unresolved Linear issues, summarize them and send a report to the team via Slack.

技術流程可能是：

• MCP Server 1 (Linear) ：使用Linear_get_linear_issue操作來取得線性中的問題。

• Local LLM (such as OpenAI) ：使用任何 API 總結問題標題和描述。

• MCP Server 2 (Slack) ：使用slack_message操作在定義的頻道中發布摘要。

您可以透過提示、工具和 MCP 伺服器定義多步驟工作流程。

✅ 語意程式碼審查助手。

我們可以用自訂邏輯建立一個簡單的程式碼審查助手。

讓我們假設一個範例任務： Review this PR using our frontend checklist and comment inline on unoptimized code.

技術流程可能是：

• GitHub MCP Server ：取得 PR 差異或檔案清單。

• Prompt Templates ：將清單規則載入為結構化提示。

• LLM (such as OpenAI) ：執行語意分析並產生內嵌回饋。

• GitHub MCP ：使用適當的動作（如post_comment_on_pull_request來發表評論。

✅ 情境 CRM 助手

我們可以建立根據過去的線索和對話歷史做出回應的助手。

讓我們假設一個範例任務： Find all unanswered emails from investors and suggest follow-ups based on the last threads.

技術流程可能是：

• Gmail MCP ：使用gmail_list_threads從 Gmail 取得線程清單。

• LLM + Context Chunking ：使用 OpenAI 函數呼叫總結最近的執行緒。

• Draft Reply ：透過 LLM 產生回覆。

• Gmail MCP ：使用gmail_send_email傳送草稿。

您可以使用 Notion 或 Airtable MCP 擴展此功能以記錄互動或加入提醒，例如： Remind me next week if no reply.

這些只是起點。 MCP 讓您可以完全透過提示（按照邏輯）自動化幾乎任何多工具工作流程。

許多開發人員認為整合 MCP 為時過早或過於複雜。希望 CopilotKit 的內建支援能夠證明這一點。

所以去創造一些瘋狂的東西吧。使其有用。讓世界看到當工作流程與環境相遇時會發生什麼。

祝你有美好的一天！直到下次:)

|您可以檢查
我在anmolbaranwal.com上工作。
感謝您的閱讀！ 🥰 | |

| --------- | -------- |

在Twitter上關注 CopilotKit 並打招呼，如果您想建立一些很酷的東西，請加入Discord社群。

{% 嵌入 https://dev.to/copilotkit %}

原文出處：https://dev.to/copilotkit/add-an-mcp-client-to-any-react-app-in-under-30-minutes-55gm