Graphics Tutorial: Installing MCP for ChatGPT/DeepSeek Web, from plugin to first local tool图文教程：给 ChatGPT / DeepSeek 网页版装上 MCP，从装插件到跑通第一个本地工具

Install Node.js 20 or later and execute node -v in the terminal to confirm that the version number can be output normally.

Install pnpm as a package manager (execute npm i -g pnpm), and subsequent repositories rely on it for faster loading.

Prepare a Chromium kernel browser (either Chrome or Edge) and load the extension in developer mode.

The machine also needs a working MCP service, choose an official sample server, run through the link before replacing it with its own business service.

Download the MCP SuperAssistant source code package (about 3.2 MB) from the "AI Plugins" section of this site and extract it to the working directory, for example, D:\projects\mcp-superassistant.

Execute pnpm install installation all dependencies in the repository root directory; this is the pnpm workspace project, the root directory can override the sub-package in one installation.

Enter the chrome-extension directory, execute the build command, and wait for the terminal output to be packaged.

Write down the path of the product directory (usually the chrome-mv3 directory under .output), and select it in the next step.

If the installation is stuck, you can execute npm config set registry https://registry.npmmirror.com to replace it with a domestic image and try again.

Type chrome://extensions in the address bar to open the extension management page and open the "Developer Mode" switch in the upper right corner.

Click "Load Unzipped Extensions" in the upper left corner and select the product catalog recorded in the second step.

After the toolbar loads successfully, an extended icon will appear; if you don't see it, tap the puzzle icon on the right side of the address bar to pin it to the toolbar.

Open the extension panel, fill in your MCP service address (usually a native HTTP or SSE endpoint), and save the settings.

Open the web version of ChatGPT or DeepSeek and log in, refresh the page once for the content script injection to take effect.

Describe the need in natural language in the conversation, for example by asking it to “list the files in my native project directory.”

If the model returns a tool call format, a clickable execution block automatically appears on the page.

Tap the execution block, and the extension will call the native MCP service to retrieve the real results.

The results are automatically inserted into the dialog box, and the model continues to answer based on the real data - you have completed the first step of the web version of the AI and the local program.

FAQ: If the page does not show an execution block, first confirm that the MCP service process is still alive, and then refresh the page to try again.

Register your own tools (such as checking the database, reading the internal interface, retrieving documents) on the MCP server, refresh the page after restarting the service, and the extension will pull the list of tools again.

First, access the read-only tool, confirm that the model call intention and parameters are in line with expectations, and then gradually open the write operation.

When opening multiple AI web pages at the same time, you can hang different service combinations for them to separate the permissions of "viewing data" and "changing data".