# @djangocfg/widget-mcp 中文文档

规范地址：https://npmcn.com/package/%40djangocfg/widget-mcp/

版本：0\.4\.31
npm 元数据更新时间：2026-11-05T12:18:10.916Z
中文译文更新时间：2026-11-12T12:13:18.410Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40djangocfg/widget-mcp
原文对照：https://npmcn.com/package/%40djangocfg/widget-mcp/?lang=original
项目主页：https://djangocfg.com/
源码仓库：https://github.com/markolofsen/django-cfg

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：171 kB，46 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：next \>=15\.0\.0，react ^19\.0\.0，react-dom ^19\.0\.0，lucide-react ^1\.68\.0，@djangocfg/api ^2\.1\.619，@djangocfg/i18n ^2\.1\.619，@djangocfg/ui-core ^2\.1\.619
- 首次发布：2026-10-23T03:58:45.407Z
- 最新版本发布：2026-11-05T12:18:10.747Z
- 近 30 天下载量：7495（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：33（近 12 个月 33 个）

## 中文简介

把一个AI助手连接到一个django-cfg MCP服务器上,使用用户自己的密钥;加上OAuth同意页面. 17个地方.

## 安装

```sh
npm install @djangocfg/widget-mcp
```

也可以使用：`pnpm add @djangocfg/widget-mcp`、`yarn add @djangocfg/widget-mcp`、`bun add @djangocfg/widget-mcp`

## README

# @djangocfg/ widget- mcp (英语)

在一个平面上连接一个 django-cfg MCP 服务器的 AI 助手 。 包裹 也持有服务器发送访问者的 OAuth 同意页 .

-   **由应用组成.** 家每应用程序为一瓦:克洛德,ChatGPT,Codex,双子座,Notion,Perplexity,Cursor,VS代码,LM Studio, 鹅和"其他应用". 打开一个应用程序列出每个有文件记录的连接方式(Claude:web和桌面连接器,和Claude Code).
-   **Claude (网络、桌面)、ChatGPT、Notion、Perfusity和Goose)** 以 URL 连接,并与 OAuth 签名.
-   **Claude Code, Codex, 双子座 CLI, Cursor, VS 代码和 LM 工作室** 获取登录用户的 API 键在命令或深链接中.
-   **其他应用程序** (Mistral, Copilot Studio, n8n, Zapier, Make):一个"其他应用程序"的屏幕,有阶梯 和每个字段的复制按钮(URL,名称,头名,密钥),以及"您的AI的复制设置指令".
-   **每个屏幕决定一个:** 家每应用程序为一瓦;每瓦打开应用程序的屏幕. `initialView` 直接打开; `locale` 覆盖主机语言.
-   **已签名访问者** 查看每个选项, 但在连接前签名 .
-   **17个地方.** 部件跟随活动 `@djangocfg/i18n` 语言.

货源已运出,无建设步骤.

## 安装

```bash
pnpm add @djangocfg/widget-mcp
```

主机需要:

-   `BaseApp` 与 `auth` 启用,所以 `useAuth` 工作和全球 `AuthDialog` 已挂载;
-   尾风 `@source` 结束 `widgets/*/src/**`,每个 django-cfg 主机 已经是了.

## 连接

在 django-cfg 主机上,密钥是签名用户自己的 django-cfg API 密钥. 不需要密钥代码 :

```tsx
import { McpConnect } from '@djangocfg/widget-mcp';

<McpConnect
  server={{ url: 'https://mcp.example.com/mcp/', alias: 'example', name: 'Example' }}
  copy={{ lede: 'Search the catalogue from your assistant.' }}
/>;
```

部件打开密钥 `@djangocfg/api` (单位:千美元)`useApiKey`时 `cfg/accounts/api-key` 钩子,在主机配置的客户端和认证上). 东道主有: **拥有** 密钥系统( MLS 和 Carapis 保存) `apps.api_keys`(a) 通过 `loadKey`数字 :

```tsx
import type { McpKeyLoader } from '@djangocfg/widget-mcp';

const loadKey: McpKeyLoader = async ({ token, signal }) => {
  const response = await fetch(`${API_URL}/api/keys/`, {
    headers: { Authorization: `Bearer ${token ?? ''}` },
    signal,
  });
  if (!response.ok) throw new Error(String(response.status));
  const { results } = await response.json();
  return results.find((row) => row.is_valid)?.plain_key ?? null;
};

<McpConnect server={server} loadKey={loadKey} keysUrl="https://my.example.com/api-keys" />;
```

| Prop | 什麽 |
| --- | --- |
| `server` | 可选的 每个字段默认来自主机 : `url` 是 API 主机 + `/cfg/mcp/`, (中文(简体) ), `alias` 财务报告和审定财务报表 `name` 来源于主机名. `url` 是 MCP 的终点. `alias` 是关键客户注册的. `name` 是连接器名称克劳德显示. |
| `loadKey` | 可选的 主机自己的密钥系统: 返回登录用户的密钥, 或 `null` 当帐户没有。 只为登录用户调用. 掷出出出道回想. 关闭它和密钥是用户的django-cfg API密钥. |
| `keysUrl` | 用户创建密钥的地方 。 显示时间 `loadKey` 返回时 `null`。 。 。 . |
| `createKey` | Mints a key and return its secret 1 次, 对于只保留散列的主机来说. 何时提供 `loadKey` 无. |
| `bare` | 隐藏内置标题, 对于已经显示一个主机( 设置 ) 。 铅会留下的. |
| `footer` | 面板和更新部分下的额外主机内容 . |
| `copy` | 覆盖捆绑字符串的任何子集. |

## 服务器提供的东西

准备好密钥后, 面板会获取 `<server url>/info/` (标题) `X-MCP-Access-Key`)并列出“此连接器可以”下的工具 (五行,后作"示N多". 同一数据出现在 `McpServer.info` (单位:千美元)`instructions`, (中文(简体) ), `tools`, (中文(简体) ), `resources`, (中文(简体) ), `prompts`; 解析为 `parseServerInfo`),然后:

-   以服务器指令和资源URI为结尾的“ AI 代理的复制提示”;
-   "其他客户端"JSON获得顶级 `instructions` 财务报告和审定财务报表 `resources` 旁边 `mcpServers` (条目本身没有变化).

无 `info` (older server, 失败的请求, 还没有按键 ) 没有显示, 输出就是它原样 。 自动服务器 主机不需要特殊类型 : pass `server={{ url, alias, name }}`· ; `resolveMcpServer` 来源于 API 主机,仅用于您省略的字段.

## 在设置中

```tsx
<SettingsDialog sections={[mcpSettingsSection()]} />
```

`mcpSettingsSection()` 返回区域 `@djangocfg/layouts` 设置对话框 。 它降落在 API 密钥旁边的平台组, 部件本身的线索是它的字幕, 用主机的语言 . `server` 默认为 API 主机 + `/cfg/mcp/`; 仅为另一个服务器通过选项。 只有一个后端 运行 django-cfg MCP 有东西连接,所以只添加到那里. 布局不依赖于 此部件: 主机通过区域 .

## 重新开放

当键为 django-cfg 时( 否) `loadKey`,没有 `createKey`),一个登录用户得到一个按钮 在小组之下: **重新开放**它说它断开每个助理 并给一个新的钥匙, 并请求确认。 确认已生成的呼叫 `useCfgAccountsApiKeyRegenerateCreate` (通过) `useApiKey().regenerate`);新密钥取代了面板命令中的密钥 片断. "最后一次更新"来自 `reissued_at`。关键是持久和可揭示的,所以 这不是"shown一次"。 带有自有密钥的主机不获得此节.

## 核准一名助理

`mcpSettingsSection()` 也是 OAuth 批准屏幕。 强哥的 `authorize` 发送浏览器到 `<site_url>/#settings/mcp?request=…`; 区域张贴签名 `request` 改为 `oauth/approve/` 对于已签名的用户,请在连接列表上方显示一个状态行并遵循 `redirect_to` 回到助手身边 无所问取. 嘉宾被派去报名并返回同一链接(`@djangocfg/layouts` ≥ 2.1.598.

## 出口

| 路径 | 什麽 |
| --- | --- |
| `.` | `McpConnect`, (中文(简体) ), `useMcpCopy`, (中文(简体) ), `MCP_DICTIONARIES`,助手标记,安装构建器 |
| `./install` | 建造者只有,没有反应: 命令,深链接, `mcpServersConfig`, (中文(简体) ), `MCP_KEY_HEADER` |
| `./marks` | 助手只标出: `ClaudeIcon`, (中文(简体) ), `ClaudeColorIcon`, (中文(简体) ), `OpenAIIcon`, (中文(简体) ), `CodexIcon`, (中文(简体) ), `CursorIcon`, (中文(简体) ), `VSCodeIcon`. Plain SVG,服务器安全,为主机自身的触发器. |

## 文档

-   [`@docs/`](https://npmcn.com/package/%40djangocfg/widget-mcp/@docs/README.md) 解释它是如何工作的.
-   故事书: `Widgets/Mcp/Connect` (签名、签名、无密钥、密钥出错、检查、 django-cfg 密钥、更新) 财务报告和审定财务报表 `Widgets/Mcp/Consent` (已就绪,发到,客户名长,链接无效,检查).
-   服务器侧面, 以及每名助手之后要做什么 : [`connect-assistants`](https://npmcn.com/django-cfg/src/django_cfg/modules/django_mcp/@docs/connect-assistants.md)。 。 。 .
-   [`CLAUDE.md`](https://npmcn.com/package/%40djangocfg/widget-mcp/CLAUDE.md) 列出容易破解的内容.

## 常见问题

### @djangocfg/widget-mcp 是什么？

把一个AI助手连接到一个django-cfg MCP服务器上,使用用户自己的密钥;加上OAuth同意页面\. 17个地方\.

### 如何安装 @djangocfg/widget-mcp？

在项目目录运行 npm install @djangocfg/widget-mcp，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（\>=15\.0\.0）、react（^19\.0\.0）、react-dom（^19\.0\.0）、lucide-react（^1\.68\.0）、@djangocfg/api（^2\.1\.619）、@djangocfg/i18n（^2\.1\.619）、@djangocfg/ui-core（^2\.1\.619）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @djangocfg/widget-mcp 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @djangocfg/widget-mcp 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @djangocfg/widget-mcp 可以商用吗？

@djangocfg/widget-mcp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @djangocfg/widget-mcp 的下载量有多少？

根据 npm 官方下载统计，@djangocfg/widget-mcp 在 2026/10/13 – 2026/11/11 这 30 天内被下载 7,495 次，日均约 250 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @djangocfg/widget-mcp 还在维护吗？

最新版本 0\.4\.31 发布于 2026/11/05（7 天前）；至今共发布 33 个版本，其中过去 12 个月发布了 33 个；首次发布于 2026/10/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。