mcpField
C
Charming

Charming

远程服务
usecharming.comAI 与智能体7今天更新

关于 Charming

Charming 是托管式 MCP 服务,可让兼容 MCP 的 AI 客户端创建、托管和更新交互式 Web 应用。它返回可访问的应用 URL,并提供应用数据、共享、模板、定时例程和 Webhook 工具。

主要功能

  1. 01创建和更新交互式 Web 应用
  2. 02托管应用并返回在线 URL
  3. 03执行应用后端操作
  4. 04按角色共享应用
  5. 05发布和搜索模板
  6. 06管理例程与 Webhook

适用场景

  1. 01通过 AI 客户端构建小型 Web 应用
  2. 02更新已托管的应用
  3. 03与协作者或查看者共享应用
  4. 04安排应用操作或接收 Webhook 调用

MCP 相关

Charming 通过远程 MCP 端点提供 37 个工具,涵盖应用创建、编辑、托管和管理。MCP 客户端连接 https://charm.ing/mcp;ChatGPT 使用 https://charm.ing/mcp/chatgpt。

配置

远程服务无需本地安装。选择你使用的客户端,复制配置或使用一键安装。

服务地址https://charm.ing/mcp
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行;JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

21
参数类型必填说明
modulestring是应用后端的 ES 模块源代码。导出严格规范的 `manifest`,包含 `$schema: "https://charm.ing/schema/app-manifest/2026-07-31.json"`、`id` 和 `meta: { name, icon? }`。如果源代码其余部分符合规范,服务器可能会在创建时插入准确的 schema URL。未知的 manifest 键会被拒绝。要持久化任何状态,`capabilities.imports` 必须包含 "charming:storage/[email protected]"(否则 `env.storage` 未定义,每次读写都会抛出 `storage capability not granted`)。所有持久化都通过 `env.storage`,并遵循 Workers KV 语义:`get(key)`、`put(key, value)`、`delete(key)`、`list()`;`.set`/`.add`/`.write`/`.setItem`/`.removeItem` 不存在,调用会抛出 `TypeError: env.storage.<x> is not a function`。`env.storage` 直接存储兼容 JSON 的值;put 前不要调用 JSON.stringify,get 后不要调用 JSON.parse。所有持久化都使用 env.storage——它是 Claude/ChatGPT 中唯一可保留数据并跨设备同步的存储。请勿将应用数据或用户状态存入 localStorage/sessionStorage/IndexedDB:这些 API 在聊天宿主环境中为空,因此其中的数据会悄然消失(这是应用看似无法保存数据的最常见原因)。“charming:browser/[email protected]”功能(需通过认领解锁)可启用这些 API,但仅用于临时的 Web 专用缓存;用户期望保留的任何内容都应放在 env.storage 中。导出 `routes` 数组,其中包含唯一的 `op` 值和 `handler` 函数。规范路由字段为 `inputSchema`、`outputSchema` 和 `annotations`;`method` 默认值为 `POST`,`path` 默认值为 `/api/<op>`,输入默认使用封闭的空对象 schema,`public` 默认值为 true。当默认值不适用时,设置全部四个 MCP 注解提示;Charming 不会根据 HTTP 方法推断这些提示。默认 `fetch` 处理程序仅作为未匹配请求的回退,不可发现。使用敏感浏览器功能的应用必须在 `capabilities.imports` 中声明导入:“charming:browser/[email protected]”(getUserMedia 音频)、“charming:browser/[email protected]”(getUserMedia 视频)、“charming:browser/[email protected]”、“charming:browser/[email protected]”(读取剪贴板)、“charming:browser/[email protected]”(getDisplayMedia 屏幕共享)、“charming:browser/[email protected]”(Web MIDI,navigator.requestMIDIAccess)、“charming:browser/[email protected]”(设备方向/运动:DeviceOrientationEvent/DeviceMotionEvent + iOS requestPermission)、“charming:browser/[email protected]”(环境光,new AmbientLightSensor)或“charming:browser/[email protected]”(原生客户端存储——localStorage/sessionStorage/IndexedDB——仅限 Web);只有在应用被认领/通过身份验证后才会授予访问权限。要从后端代码调用外部 HTTPS API,请声明“charming:network/[email protected]”,并在 `manifest.permissions.server.fetch` 中列出每个准确的源;两者缺一不可,且仅限公共 API。对于需要 API 密钥的端点,声明“charming:secrets/[email protected]”以获取 `env.fetch`(仅限已认领的应用)——这是一个密封的出站 fetch,会在主机侧替换请求 HEADER 值中的 `{{secret:NAME}}` 引用,因此密钥不会进入应用源代码或沙箱;应用 OWNER 在控制面板的 `/app/<id>/secrets` 中设置值,Agent 只引用 NAME。切勿将 API 密钥嵌入源代码。要渲染远程图片,请在 `manifest.permissions.browser["img-src"]` 中列出每个准确的 https 源。要使图片能在任意宿主中渲染——独立模式、ChatGPT 以及 Claude 行内模式(它们注入的 CSP 会阻止跨源 `<img src>`)——请通过 `const src = await window.charming.images.load(remoteUrl)` 设置 src(此方法会通过 Charming 获取图片,并返回所有嵌入 CSP 均允许的 `data:` URL)。`window.charming.images.proxy(remoteUrl)` 会返回同源代理 URL,可在独立模式/ChatGPT 中使用,但不能在 Claude 行内模式中使用;应用可能被嵌入时,优先使用 `images.load(...)`。两者都会检查已声明的源;都不会绕过这些限制。
uistring否渲染到 #app 中的前端 JavaScript。#app 挂载点初始为空,因此 (a) 请先填充其 innerHTML,再绑定事件监听器;(b) 请通过 `window.charming.api('<manifest-id>').<opName>(input)` 调用操作(操作名称 = 方法名,会剥离 { ok, value } 封装 — 你只会收到 value,不会收到 ok),不要使用 `api.operation(name, params)`,也不要使用原始 fetch(),后者在 null-origin srcdoc iframe 中会失败。已登录调用者可通过 `window.charming.user` 同步获取(`{ id, handle?, name?, image? }`,匿名访客则为 `null`)— 请读取 `user.name` 来问候、标注归属或个性化,而不是让用户输入姓名。仅限公开字段(绝不使用 email);这只是便利信号,不是强制机制。最外层容器必须填满视口 — 将 `<main class="min-h-screen">`(或横跨全宽的 grid/flex 布局)用作根外壳。不要在根节点外包 `max-w-md`、`max-w-2xl` 或 `container mx-auto`:这些会将整个应用限制在狭窄的中央列,在 2K+ 显示器上留下宽阔空白边距 — 这是最显眼的“AI 生成应用”特征。如果视图以文本为主(笔记、文章、包含大量文字的表单),仅在内部包装器上限制阅读宽度,例如 `<main class="min-h-screen"><div class="mx-auto max-w-2xl">…</div></main>`。仪表盘、看板、表格、画布、图库和分栏视图应使用全宽。若要在 Agent 从另一个会话修改状态时实时更新,请注册 `window.charming.onStateChange((e) => { ... })`,并对 DOM 做精细更新,而不是清空 #app。规范示例请参阅 charming:app-guide 提示词。
stylesstring否渲染应用的可选 CSS
display_namestring否可选的显示名称覆盖值
descriptionstring是便于搜索的应用功能摘要,会通过 list_apps 提供,以便后续会话即使在 display_name 含义不明确时,也能将用户意图(例如“打开我的蛋白质追踪器”“记录食物”)与此应用匹配。请用 1–2 句话说明:(a) 应用追踪或执行的内容;(b) 支持的关键操作;(c) 用户可能使用的同义词或其他说法。示例:“追踪每日蛋白质摄入量。记录餐食、查看每周总量、设置每日目标。同义词:餐食、食物记录、营养追踪器、卡路里计数器。”最多 500 个字符。

详细介绍

Charming

Charming MCP 服务

Charming 是一个托管式 MCP 服务,可生成、托管并更新交互式 Web 应用。将它连接到任何兼容 MCP 的 AI 客户端,然后让它构建应用。几秒钟内即可获得一个可访问的实时 URL。

连接

客户端端点
Claude、Claude Code、Cursor、Codex、Gemini CLI 和大多数 MCP 客户端https://charm.ing/mcp
ChatGPThttps://charm.ing/mcp/chatgpt(通过 ChatGPT Apps 目录中的 Charming 条目一键连接;此粘贴字符串是开发者模式的备用方案)

大多数 MCP 客户端都可以使用此远程配置:

{
  "mcpServers": {
    "charming": {
      "url": "https://charm.ing/mcp",
      "type": "streamableHttp"
    }
  }
}

MCP 端点需要持有者令牌,而 OAuth 与动态客户端注册会自动完成令牌的初始化:支持此功能的客户端会显示一次性授权确认界面,无需粘贴 API 密钥。仅通过 HTTP 路径可匿名创建,无需令牌。身份验证指南:usecharming.com/auth.md。

如需各客户端专用的粘贴字符串和设置步骤,请参阅 usecharming.com/clients.txt。

入门提示词

连接 Charming 后,粘贴以下内容以开始构建会话:

Help me figure out what to build. Look at what you know about me and suggest 2-3 apps that fit, or ask me up to 3 short questions to find an idea.

Read https://usecharming.com/start.md then help me create my first app.

工具

Charming 提供 37 个工具。已连接的客户端会通过 tools/list 自动发现这些工具。

工具功能
create_app存储由 Agent 编写的模块(包含 manifest 和 routes),可选添加 UI 和 CSS,并以内嵌方式呈现。必须提供 description。向用户提供返回的、不含令牌的 shareUrl,绝不要提供仅供机器使用的 url。
update_app通过替换模块、UI、样式或描述,或应用精确字符串编辑来修改现有应用,并使用乐观并发版本控制。
get_app以内嵌方式呈现现有应用(客户端支持时),并返回其可调用的 API 操作和元数据。
get_app_source返回现有应用已持久化的模块、UI、样式及其当前版本。
list_apps按从新到旧的顺序列出调用者的应用及与其共享的应用,并显示每个应用的角色、描述和功能。
delete_app永久删除你拥有的应用。此操作不可撤销,且需要确认:在重新调用并传入 confirm: true 之前,操作会安全失败。传入 purge_storage: true 还会清除已存储的状态。
upload_asset存储静态资源(图片、PDF、数据集),以保持应用代码精简;可通过同源方式读取。
rename_app更改应用的 URL slug。旧 URL 会通过重定向继续生效。
set_remixable将应用设为可混编,让访问者获得自己的可编辑副本。
unset_remixable停止允许混编;现有混编副本不受影响。
set_starter_prompt设置或清除提示词;访问者打开共享应用时,该提示词会预填到聊天宿主中。
query_app在应用模块中运行只读后端操作。
mutate_app在不编辑代码的情况下,于应用模块中运行会更改数据的后端操作。
submit_feedback记录 Agent 编写的、关于应用的反馈(错误、增强建议、崩溃报告)。
list_feedback按从新到旧的顺序列出调用者应用的反馈条目。
set_handle更改已登录用户的 handle(其应用 URL 的第一段)。
share_app邀请他人使用应用,并将其设为 collaborator(默认)、end-user(可运行并写入数据,但不能编辑源代码)或 viewer(只读)。再次调用时,传入的角色会直接替换其当前角色。
unshare_app撤销任何受邀者的访问权限,无论邀请仍待接受还是已接受。
list_app_shares列出你某个应用的有效共享邀请和待处理共享邀请。
set_public将应用设为公开:任何拥有 URL 的人都无需登录即可打开应用,并可读取和写入共享数据。请提醒用户,所有匿名访问者共用同一个数据池,因此任何拥有 URL 的人都可以覆盖或清空数据。
unset_public将公开应用重新设为私有;匿名访问者将无法再打开它。
set_template将应用发布为模板,让任何打开其 URL 的人都获得全新副本,原应用保持不变。传入 listed: true 还会将其列入公开目录。省略 listed 则保持当前的列出状态不变。必须先认领该应用。
unset_template停止将应用作为模板:新访问者无法再复制它,任何公开目录条目也会被清除。现有副本不受影响。
search_templates按关键字搜索公开的 Charming 模板目录。调用 create_app 前,或用户询问有哪些模板时,请先在此处查找现有模板。每个搜索结果都包含一个 copyUrl,访问者无需登录即可打开它并创建独立副本。
acknowledge_feedback_responsesAgent 处理完反馈回复后,将其标记为已确认。
cancel_app_build用于在已接受的应用构建发布前取消它。
create_routine用户希望应用操作自行按定时计划运行且无需打开聊天时,使用此工具。
delete_routine用于停止并删除 Routine。
get_app_build用于检查已接受的应用构建,但不运行或发布它。
list_feedback_responses获取已通过身份验证的此账户提交的反馈所收到的、尚未阅读的 Charming 工作人员回复。
list_routines用于查看调用者在其各个应用中的 Routines。
read_docs无需访问 Web 即可阅读 Charming 文档。
update_routine用于更改 Routine 的 interval,或启用/停用它。
create_webhook外部服务(Zapier、支付服务提供商、合作伙伴后端)需要直接调用某个应用操作时,使用此工具。
delete_webhook用于移除 Webhook。
list_webhooks用于查看调用者有权编辑的所有应用中的 Webhook 及其传递状态。
update_webhook用于重命名 Webhook、启用/停用它,或轮换其密钥。

与编码 Agent 搭配使用

你在 Codex、Claude Code、Cursor 或其他 AI 编码 Agent 中工作吗?通过 npx skills add tambo-labs/charming-mcp 从 skills.sh 安装可选的 Charming 编写技能。该技能会安装编写指南;它不会连接 MCP 服务。

它会教 Agent 了解 Charming 的构建约定和工作流。技能文件本身是 SKILL.md;AGENTS.md 为任何 AI 编码 Agent 提供连接和编写说明。Codex 用户也可以改为安装随附的 Charming Codex 插件。

Cursor

Cursor 从 .cursor/rules/ 读取项目规则。将 .cursor/rules/charming.mdc 放入你的项目(或将其内容复制到旧版根目录 .cursorrules 中),这样每当你要求创建一个希望长期保留的应用时,Cursor Agent 就会调用 Charming(真实 URL、存储和内联渲染)。该规则指向已提供的文档;不会重复约定内容。

分发

此仓库是所有公开 Charming 集成包的权威来源。与平台无关的制品由人工编辑;平台适配器则根据这些制品生成,因此每项事实都只存在于一个文件中。

类型制品
与平台无关(编辑这些文件)canonical/facts.json、SKILL.md、AGENTS.md、.cursor/rules/charming.mdc、charming-icon.png
适配器(生成)plugins/cursor/charming、plugins/claude-code/charming、plugins/codex/charming、plugins/agent-plugins/charming(一个可移植的 Agent Plugins v1.0.0 包)、gemini-extension.json、GEMINI.md、三个市场目录
npm ci                                   # install ajv, the schema validator
node scripts/build-packages.mjs          # regenerate every adapter
node scripts/build-packages.mjs --check  # fail on drift (runs in CI)

这些适配器尚未发布;每个适配器的发布工作都单独跟踪。有关目录结构、漂移检查,以及 Charming 单体仓库如何提出对本仓库的更改,请参阅 DISTRIBUTION.md。

文档

发布者

由 Tambo 发布。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。