mcpField
C
Charming

Charming

Remote
usecharming.comAI & Agents7Updated today

About Charming

Charming is a hosted MCP server for creating, hosting, and updating interactive web apps from MCP-compatible AI clients. It returns live app URLs and includes tools for app data, sharing, templates, scheduled routines, and webhooks.

Key features

  1. 01Create and update interactive web apps
  2. 02Host apps and return live URLs
  3. 03Run app backend operations
  4. 04Share apps with role-based access
  5. 05Publish and search templates
  6. 06Manage routines and webhooks

Use cases

  1. 01Build a small web app from an AI client
  2. 02Update an existing hosted app
  3. 03Share an app with collaborators or viewers
  4. 04Schedule app operations or accept webhook calls

MCP support

Charming exposes 37 tools through remote MCP endpoints, including app creation, editing, hosting, and management. MCP clients connect at https://charm.ing/mcp; ChatGPT uses https://charm.ing/mcp/chatgpt.

Configuration

Remote servers need no local install. Pick your client, then copy the config or install in one click.

Endpointhttps://charm.ing/mcp
Copy install command
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.

Tools

21
ParameterTypeRequiredDescription
modulestringYesES module source for the app backend. Export a strict canonical `manifest` with `$schema: "https://charm.ing/schema/app-manifest/2026-07-31.json"`, `id`, and `meta: { name, icon? }`. The server may insert the exact schema URL on create when the rest of the source is canonical. Unknown manifest keys are rejected. To persist any state, `capabilities.imports` must include "charming:storage/[email protected]" (without it `env.storage` is undefined and every read/write throws `storage capability not granted`). All persistence goes through `env.storage` using Workers KV semantics — `get(key)`, `put(key, value)`, `delete(key)`, `list()`; `.set`/`.add`/`.write`/`.setItem`/`.removeItem` do not exist and throw `TypeError: env.storage.<x> is not a function`. env.storage stores JSON-compatible values directly; do not JSON.stringify before put or JSON.parse after get. Use env.storage for ALL persistence — it is the only storage that survives inside Claude/ChatGPT and syncs across devices. Do NOT keep app data or user state in localStorage/sessionStorage/IndexedDB: those APIs are empty inside chat hosts, so their data silently vanishes there (the most common cause of an app that appears not to save). The "charming:browser/[email protected]" capability (claim-gated) unlocks them but only for throwaway, web-only caching; anything the user expects to keep belongs in env.storage. Export a `routes` array with unique `op` values and `handler` functions. Canonical route fields are `inputSchema`, `outputSchema`, and `annotations`; `method` defaults to `POST`, `path` defaults to `/api/<op>`, input defaults to a closed empty-object schema, and `public` defaults to true. Set all four MCP annotation hints when their defaults do not fit; Charming does not infer them from the HTTP method. A default `fetch` handler is an unmatched-request fallback only and is not discoverable. Apps that use a sensitive browser capability must declare its import in `capabilities.imports` — "charming:browser/[email protected]" (getUserMedia audio), "charming:browser/[email protected]" (getUserMedia video), "charming:browser/[email protected]", "charming:browser/[email protected]" (reading the clipboard), "charming:browser/[email protected]" (getDisplayMedia screen share), "charming:browser/[email protected]" (Web MIDI, navigator.requestMIDIAccess), "charming:browser/[email protected]" (device orientation/motion: DeviceOrientationEvent/DeviceMotionEvent + iOS requestPermission), "charming:browser/[email protected]" (ambient light, new AmbientLightSensor), or "charming:browser/[email protected]" (native client storage — localStorage/sessionStorage/IndexedDB — web-only); access is granted only after the app is claimed/authenticated. To call external HTTPS APIs from backend code, declare "charming:network/[email protected]" and list each exact origin in `manifest.permissions.server.fetch`; both are required and public-only. For an endpoint that needs an API key, declare "charming:secrets/[email protected]" to get `env.fetch` (claimed apps only) — a sealed outbound fetch that substitutes `{{secret:NAME}}` references in request HEADER values host-side, so the key never enters app source or the sandbox; the app OWNER sets the value in the dashboard at `/app/<id>/secrets` and the agent only references the NAME. Never embed API keys in source. To render remote images, list each exact https origin in `manifest.permissions.browser["img-src"]`. To make an image render in ANY host — standalone, ChatGPT, AND Claude inline (their injected CSP blocks a cross-origin `<img src>`) — set the src from `const src = await window.charming.images.load(remoteUrl)` (it fetches through Charming and returns a `data:` URL every embed CSP allows). `window.charming.images.proxy(remoteUrl)` returns a same-origin proxy URL that works standalone/ChatGPT but NOT in Claude inline; prefer `images.load(...)` when the app may be embedded. Both enforce the declared origins; neither bypasses them.
uistringNoFrontend JavaScript rendered into #app. The #app mount point starts empty, so (a) populate its innerHTML before attaching event listeners, and (b) call operations as `window.charming.api('<manifest-id>').<opName>(input)` (operation name = method name, strips the { ok, value } envelope — you receive the value only, never ok) — not `api.operation(name, params)` and not raw fetch(), which fails in the null-origin srcdoc iframe. The signed-in caller is exposed synchronously as `window.charming.user` (`{ id, handle?, name?, image? }`, or `null` for an anonymous visitor) — read `user.name` to greet, attribute, or personalize, instead of asking the user to type their name. PUBLIC fields only (never email); it is a convenience signal, not enforcement. The outermost container MUST fill the viewport — use `<main class="min-h-screen">` (or a grid/flex layout that spans width) as the root shell. Do NOT wrap the root in `max-w-md`, `max-w-2xl`, or `container mx-auto`: those cap the entire app to a narrow central column with wide empty margins on 2K+ monitors — the loudest "AI-generated app" tell. If the view is text-heavy (a note, an article, a form with long prose), cap the reading measure on an INNER wrapper only, e.g. `<main class="min-h-screen"><div class="mx-auto max-w-2xl">…</div></main>`. Dashboards, kanban, tables, canvases, galleries, and split views should use the full width. For live updates when an agent mutates state from another session, register `window.charming.onStateChange((e) => { ... })` and update the DOM surgically rather than wiping #app. See the charming:app-guide prompt for a canonical example.
stylesstringNoOptional CSS for the rendered app
display_namestringNoOptional display name override
descriptionstringYesSearch-friendly summary of what this app does, surfaced by list_apps so a future session can match user intent (e.g. "open my protein tracker", "log food") to this app even when display_name is ambiguous. Write 1-2 sentences covering: (a) what the app tracks/does, (b) the key actions it supports, and (c) synonyms or alternative phrasings the user might say. Example: "Tracks daily protein intake. Log meals, view weekly totals, set a daily goal. Synonyms: meals, food log, nutrition tracker, calorie counter." Limit 500 characters.

Details

From the project README
Charming

Charming MCP Server

Charming is a hosted MCP server that generates, hosts, and updates interactive web apps. Connect it to any MCP-compatible AI client and ask it to build an app. You get back a live URL in seconds.

Connect

ClientEndpoint
Claude, Claude Code, Cursor, Codex, Gemini CLI, and most MCP clientshttps://charm.ing/mcp
ChatGPThttps://charm.ing/mcp/chatgpt (one-click via the Charming listing in the ChatGPT Apps directory; this paste-string is the Developer Mode fallback)

Most MCP clients can use this remote configuration:

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

The MCP endpoints require a bearer token, and OAuth with Dynamic Client Registration bootstraps one automatically: clients that support it show a one-time consent screen, with no API key to paste. Anonymous creation with no token is available on the HTTP path only. Auth guide: usecharming.com/auth.md.

For per-client paste-strings and setup steps, see usecharming.com/clients.txt.

Starter Prompt

Once Charming is connected, paste this to start a build session:

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.

Tools

Charming exposes 37 tools. Connected clients discover them automatically via tools/list.

ToolWhat it does
create_appStore an agent-authored module (a manifest plus routes) with optional UI and CSS, and render it inline. Requires a description. Give the user the returned token-free shareUrl, never the machine-only url.
update_appEdit an existing app by replacing its module/UI/styles/description or applying exact-string edits, with optimistic-concurrency versioning.
get_appRender an existing app inline (where the client supports it) and return its callable API operations and metadata.
get_app_sourceReturn the persisted module, UI, and styles for an existing app plus its current version.
list_appsList the caller's apps plus apps shared with them, newest first, with each app's role, description, and capabilities.
delete_appPermanently delete an app you own. Irreversible and confirmation-gated: it fails closed until re-invoked with confirm: true. Pass purge_storage: true to also wipe stored state.
upload_assetStore a static asset (image, PDF, dataset) so app code stays small; readable back same-origin.
rename_appChange an app's URL slug. The old URL keeps working by redirecting.
set_remixableMark an app remixable so visitors get their own editable copy.
unset_remixableStop allowing remixes; existing remixes survive untouched.
set_starter_promptSet or clear the prompt prefilled in the chat host when a visitor opens a shared app.
query_appRun a read-only backend operation inside an app module.
mutate_appRun a mutating backend operation inside an app module without editing code.
submit_feedbackRecord agent-authored feedback (bugs, enhancements, crash reports) about an app.
list_feedbackList feedback rows for the caller's apps, newest first.
set_handleChange the signed-in user's handle (the first segment of their app URLs).
share_appInvite someone to an app as collaborator (default), end-user (run and write data, cannot edit source), or viewer (read-only). Calling it again with a role changes their role in place.
unshare_appRevoke access for any grantee, whether the invitation is still pending or already accepted.
list_app_sharesList active and pending share invites for one of your apps.
set_publicMake an app public: anyone with the URL can open it with no login and read AND write its shared data. Warn the user that every anonymous visitor shares one data pool, so anyone with the URL can overwrite or wipe it.
unset_publicMake a public app private again; anonymous visitors can no longer open it.
set_templatePublish an app as a template so anyone opening its URL gets their own brand-new copy, leaving the original untouched. Pass listed: true to also list it in the public directory. Omitting listed leaves the current listing state alone. The app must be claimed first.
unset_templateStop treating an app as a template: new visitors can no longer copy it, and any public listing is cleared. Existing copies survive.
search_templatesSearch the public Charming template directory by keyword. Check here for an existing template before calling create_app, or when the user asks what templates exist. Each hit carries a copyUrl a visitor can open to mint their own independent copy with no login.
acknowledge_feedback_responsesAcknowledge feedback responses after the agent has processed them.
cancel_app_buildUse this to cancel an accepted app build before it publishes.
create_routineUse this when the user wants an app op to run on its own, on a timer — no chat needs to be open.
delete_routineUse this to stop and remove a Routine.
get_app_buildUse this to inspect an accepted app build without running or publishing it.
list_feedback_responsesFetch unread Charming staff responses to feedback submitted by this authenticated account.
list_routinesUse this to see the caller's Routines across their apps.
read_docsRead Charming documentation without web access.
update_routineUse this to change a Routine's interval, or enable/disable it.
create_webhookUse this when an external service (Zapier, a payment provider, a partner backend) needs to call one of an app's ops directly.
delete_webhookUse this to remove a Webhook.
list_webhooksUse this to see the Webhooks on every app the caller can edit, with delivery state.
update_webhookUse this to rename a Webhook, enable/disable it, or rotate its secret.

Use with a coding agent

Working in Codex, Claude Code, Cursor, or another AI coding agent? Install the optional Charming authoring skill from skills.sh with npx skills add tambo-labs/charming-mcp. This installs authoring guidance; it does not connect the MCP server.

It teaches the agent Charming's build contract and workflow. The skill itself is SKILL.md; AGENTS.md has connect and authoring instructions for any AI coding agent. Codex users can instead install the bundled Charming Codex plugin.

Cursor

Cursor reads project rules from .cursor/rules/. Drop .cursor/rules/charming.mdc into your project (or copy its body into a legacy root .cursorrules) and Cursor's agent will reach for Charming (real URL, storage, and inline rendering) whenever you ask for an app you want to keep. The rule points at the served docs; it does not duplicate the contract.

Distribution

This repository is the canonical source for every public Charming integration package. Platform-neutral artifacts are hand-edited; platform adapters are generated from them, so a fact lives in exactly one file.

KindArtifact
Platform-neutral (edit these)canonical/facts.json, SKILL.md, AGENTS.md, .cursor/rules/charming.mdc, charming-icon.png
Adapter (generated)plugins/cursor/charming, plugins/claude-code/charming, plugins/codex/charming, plugins/agent-plugins/charming (a portable Agent Plugins v1.0.0 package), gemini-extension.json, GEMINI.md, the three marketplace catalogs
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)

The adapters are not published yet; publishing each one is tracked separately. See DISTRIBUTION.md for the layout, the drift checks, and how the Charming monorepo proposes changes here.

Documentation

Publisher

Published by Tambo.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.