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
- 01Create and update interactive web apps
- 02Host apps and return live URLs
- 03Run app backend operations
- 04Share apps with role-based access
- 05Publish and search templates
- 06Manage routines and webhooks
Use cases
- 01Build a small web app from an AI client
- 02Update an existing hosted app
- 03Share an app with collaborators or viewers
- 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.
https://charm.ing/mcpclaude mcp add --transport http charming https://charm.ing/mcp{"mcpServers":{"charming":{"type":"http","url":"https://charm.ing/mcp"}}}Open in Cursor{"servers":{"charming":{"type":"http","url":"https://charm.ing/mcp"}}}Open in VS Code{"mcpServers":{"charming":{"type":"http","url":"https://charm.ing/mcp"}}}{"mcpServers":{"charming":{"serverUrl":"https://charm.ing/mcp"}}}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| Parameter | Type | Required | Description |
|---|---|---|---|
| module | string | Yes | ES 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. |
| ui | string | No | Frontend 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. |
| styles | string | No | Optional CSS for the rendered app |
| display_name | string | No | Optional display name override |
| description | string | Yes | Search-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 READMECharming 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
| Client | Endpoint |
|---|---|
| Claude, Claude Code, Cursor, Codex, Gemini CLI, and most MCP clients | https://charm.ing/mcp |
| ChatGPT | https://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.
| Tool | What it does |
|---|---|
create_app | Store 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_app | Edit an existing app by replacing its module/UI/styles/description or applying exact-string edits, with optimistic-concurrency versioning. |
get_app | Render an existing app inline (where the client supports it) and return its callable API operations and metadata. |
get_app_source | Return the persisted module, UI, and styles for an existing app plus its current version. |
list_apps | List the caller's apps plus apps shared with them, newest first, with each app's role, description, and capabilities. |
delete_app | Permanently 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_asset | Store a static asset (image, PDF, dataset) so app code stays small; readable back same-origin. |
rename_app | Change an app's URL slug. The old URL keeps working by redirecting. |
set_remixable | Mark an app remixable so visitors get their own editable copy. |
unset_remixable | Stop allowing remixes; existing remixes survive untouched. |
set_starter_prompt | Set or clear the prompt prefilled in the chat host when a visitor opens a shared app. |
query_app | Run a read-only backend operation inside an app module. |
mutate_app | Run a mutating backend operation inside an app module without editing code. |
submit_feedback | Record agent-authored feedback (bugs, enhancements, crash reports) about an app. |
list_feedback | List feedback rows for the caller's apps, newest first. |
set_handle | Change the signed-in user's handle (the first segment of their app URLs). |
share_app | Invite 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_app | Revoke access for any grantee, whether the invitation is still pending or already accepted. |
list_app_shares | List active and pending share invites for one of your apps. |
set_public | Make 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_public | Make a public app private again; anonymous visitors can no longer open it. |
set_template | Publish 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_template | Stop treating an app as a template: new visitors can no longer copy it, and any public listing is cleared. Existing copies survive. |
search_templates | Search 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_responses | Acknowledge feedback responses after the agent has processed them. |
cancel_app_build | Use this to cancel an accepted app build before it publishes. |
create_routine | Use this when the user wants an app op to run on its own, on a timer — no chat needs to be open. |
delete_routine | Use this to stop and remove a Routine. |
get_app_build | Use this to inspect an accepted app build without running or publishing it. |
list_feedback_responses | Fetch unread Charming staff responses to feedback submitted by this authenticated account. |
list_routines | Use this to see the caller's Routines across their apps. |
read_docs | Read Charming documentation without web access. |
update_routine | Use this to change a Routine's interval, or enable/disable it. |
create_webhook | Use this when an external service (Zapier, a payment provider, a partner backend) needs to call one of an app's ops directly. |
delete_webhook | Use this to remove a Webhook. |
list_webhooks | Use this to see the Webhooks on every app the caller can edit, with delivery state. |
update_webhook | Use 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.
| Kind | Artifact |
|---|---|
| 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
- Agent skill:
SKILL.md· coding-agent guide:AGENTS.md· Cursor rule:.cursor/rules/charming.mdc - Full authoring guide: usecharming.com/llms-full.txt
- Auth and pairing: usecharming.com/auth.md · limits: usecharming.com/pricing.md
- OpenAPI spec: charm.ing/.well-known/openapi.json
- Docs: usecharming.com/docs
Publisher
Published by Tambo.
Comments
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.