关于 Charming
Charming 是托管式 MCP 服务,可让兼容 MCP 的 AI 客户端创建、托管和更新交互式 Web 应用。它返回可访问的应用 URL,并提供应用数据、共享、模板、定时例程和 Webhook 工具。
主要功能
- 01创建和更新交互式 Web 应用
- 02托管应用并返回在线 URL
- 03执行应用后端操作
- 04按角色共享应用
- 05发布和搜索模板
- 06管理例程与 Webhook
适用场景
- 01通过 AI 客户端构建小型 Web 应用
- 02更新已托管的应用
- 03与协作者或查看者共享应用
- 04安排应用操作或接收 Webhook 调用
MCP 相关
Charming 通过远程 MCP 端点提供 37 个工具,涵盖应用创建、编辑、托管和管理。MCP 客户端连接 https://charm.ing/mcp;ChatGPT 使用 https://charm.ing/mcp/chatgpt。
配置
远程服务无需本地安装。选择你使用的客户端,复制配置或使用一键安装。
https://charm.ing/mcpclaude mcp add --transport http charming https://charm.ing/mcp{"mcpServers":{"charming":{"type":"http","url":"https://charm.ing/mcp"}}}在 Cursor 中打开{"servers":{"charming":{"type":"http","url":"https://charm.ing/mcp"}}}在 VS Code 中打开{"mcpServers":{"charming":{"type":"http","url":"https://charm.ing/mcp"}}}{"mcpServers":{"charming":{"serverUrl":"https://charm.ing/mcp"}}}命令在终端中运行;JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。
工具
21| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| module | string | 是 | 应用后端的 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(...)`。两者都会检查已声明的源;都不会绕过这些限制。 |
| ui | string | 否 | 渲染到 #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 提示词。 |
| styles | string | 否 | 渲染应用的可选 CSS |
| display_name | string | 否 | 可选的显示名称覆盖值 |
| description | string | 是 | 便于搜索的应用功能摘要,会通过 list_apps 提供,以便后续会话即使在 display_name 含义不明确时,也能将用户意图(例如“打开我的蛋白质追踪器”“记录食物”)与此应用匹配。请用 1–2 句话说明:(a) 应用追踪或执行的内容;(b) 支持的关键操作;(c) 用户可能使用的同义词或其他说法。示例:“追踪每日蛋白质摄入量。记录餐食、查看每周总量、设置每日目标。同义词:餐食、食物记录、营养追踪器、卡路里计数器。”最多 500 个字符。 |
详细介绍
Charming MCP 服务
Charming 是一个托管式 MCP 服务,可生成、托管并更新交互式 Web 应用。将它连接到任何兼容 MCP 的 AI 客户端,然后让它构建应用。几秒钟内即可获得一个可访问的实时 URL。
连接
| 客户端 | 端点 |
|---|---|
| Claude、Claude Code、Cursor、Codex、Gemini CLI 和大多数 MCP 客户端 | https://charm.ing/mcp |
| ChatGPT | https://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_responses | Agent 处理完反馈回复后,将其标记为已确认。 |
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。
文档
- Agent 技能:
SKILL.md· 编码 Agent 指南:AGENTS.md· Cursor 规则:.cursor/rules/charming.mdc - 完整编写指南:usecharming.com/llms-full.txt
- 身份验证和配对:usecharming.com/auth.md · 限制:usecharming.com/pricing.md
- OpenAPI 规范:charm.ing/.well-known/openapi.json
- 文档:usecharming.com/docs
发布者
由 Tambo 发布。
评论
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。