---
title: 'Explain Charming with a short video'
sidebar:
  hidden: true
---

Make me a short explainer video about how Charming works, made for me. Keep it under 90 seconds, show rather than tell, and end with where I should go next.

When Charming MCP tools are available, read any `https://charm.ing/docs/...` link below through `read_docs`, passing the portion after `/docs/` as `path`. For example, call `read_docs({ path: "concepts/how-charming-works.md" })`. Follow `next_offset` with the same path until it is null. You do not need browser access.

## When to offer this

Offer the video when someone is new to Charming, asks what it is or how it works, or has to explain it to someone else. Ask once, in one line:

> Want me to make a short video explaining how Charming works, tailored to you?

If they say no, drop it and help with what they asked.

## 1. Read the person

Decide who the video is for before you write a word of it.

- **Technical:** they write code, use a coding agent (Claude Code, Codex, Cursor), mention APIs, MCP, deploys, or databases. Show the mechanism: the module and manifest, `create_app` and `POST /app`, the stable URL, per-app storage, the MCP surface every app gets, and code export.
- **Non-technical:** they talk about tasks, not tools. Explain it like they are five: "you tell your AI what you want, it builds a little app, and the app has its own link that is still there tomorrow." No code, no protocol names, no jargon.
- **Unclear:** ask one question: "Should I keep it plain English, or show the technical details?"

Make it personal with what you already know from this conversation or your memory: their name, their work, the thing they were trying to do when Charming came up. Use their example app idea on screen if they have one. Do not invent facts about them. If you know nothing, pick an everyday example (a habit tracker, a team lunch poll, a reading list) and say it is an example.

## 2. Pick the story

Every video follows the same spine:

1. **The problem.** Apps an AI makes in chat vanish when the chat ends.
2. **The ask.** The person describes what they want to their AI.
3. **The app.** Charming hosts it at a real URL, with its own storage.
4. **It sticks around.** The same app opens in a browser, on a phone, and inside chat, and any agent can keep using and updating it.

Then add the two or three features that matter most to this person, and skip the rest. Each one needs a scene that shows it happening.

| Feature | Plain English | Technical | Read first |
| --- | --- | --- | --- |
| Storage | "It remembers what you put in it." | Per-app key-value and file storage through the `kv` and `assets` imports. | `capabilities/data-storage.md` |
| Names and URLs | "It has its own link you can bookmark." | Stable URL on create, `charm.ing/<handle>/<app-name>` once claimed. | `capabilities/app-names-and-urls.md` |
| Sharing | "Invite people, or keep it just for you." | Private by default, with collaborator, end-user, and viewer roles. | `capabilities/privacy-and-sharing.md` |
| Any agent | "Build it in one AI, keep using it from another." | Every app is an MCP server; same tools and HTTP API from any client. | `concepts/every-app-is-accessible-over-mcp.md` |
| Feedback | "Tap a button to report a bug; your AI fixes it." | Built-in feedback your agent reads back with `list_feedback`. | `capabilities/feedback.md` |
| Secrets | "It can use your accounts safely." | The sealed `fetch` from `charming:secrets/fetch@1.0` substitutes `{{secret:NAME}}` server-side. | `capabilities/secrets.md` |
| Templates | "Start from an app someone already made." | `search_templates`, copy links, and Listed Templates. | `capabilities/templates.md` |
| Own your code | "It is yours to take anywhere." | Export the full source at any time. | `capabilities/code-export.md` |
| Charming for Work | "Company access and controls." | Company access, audit history, and data controls. | `work.md` |

Read the page for each feature you pick, and check [Limits](https://charm.ing/docs/capabilities/limits.md) before you mention a number or a plan. Say only what those pages say.

## 3. Write the script

- 6 to 8 scenes, 60 to 90 seconds total, one idea per scene.
- At most 12 words on screen per scene, plus one caption line of narration.
- Show the real thing: a chat message being typed, an app appearing with its URL, the same app on a laptop and a phone, a value surviving a reload. Do not use bullet-point slides.
- Technical viewers get real snippets (a manifest, a `create_app` call, a `curl`). Non-technical viewers get pictures and their own words.
- Tell me the scene list in a few lines, then build it. Do not wait for approval unless I asked to review the script first.

## 4. Build the video

Build the video as one self-contained HTML page that plays like a video:

- A 16:9 stage that scales to fit the window, with scenes timed by JavaScript and animated with CSS transitions or the Web Animations API.
- Autoplay, a play and pause button, a progress bar I can click to seek, and a replay button at the end. Space toggles playback; the arrow keys move between scenes.
- Captions on by default. Under `prefers-reduced-motion`, use crossfades instead of movement.
- No external scripts, fonts, images, or CDN links. Draw everything with HTML, CSS, and inline SVG so the page works anywhere, including as a Charming app.
- Make it look designed, not generated: one accent color, a real type scale, generous space, no gradient blobs and no emoji as decoration. Read https://charm.ing/docs/prompts/design-an-app.md for the rest.

Show it where I can watch it now: an artifact or canvas if your client renders HTML, or a local file if you work in a terminal. If I ask for an `.mp4` and you can run a headless browser, record the page playing at 1920×1080 and give me the file.

## 5. End with deeper dives

The last scene names two or three next steps picked for me, not a generic list. After the video, repeat them as links:

- New to Charming: [Build your first app](https://charm.ing/docs/prompts/build-your-first-app.md)
- Wants it for other people: [Privacy and sharing](https://charm.ing/docs/capabilities/privacy-and-sharing.md) and [Build an app multiple people use](https://charm.ing/docs/guides/build-an-app-multiple-people-use.md)
- Works across several AI tools: [Connect any agent](https://charm.ing/docs/capabilities/connect-any-agent.md)
- Developer: [MCP starter guide](https://charm.ing/docs/build-mcp.md), [HTTP starter guide](https://charm.ing/docs/build-http.md), and the [full build reference](https://charm.ing/docs/llms-full.txt)
- Team or company: [How Charming for Work works](https://charm.ing/docs/work.md)

## 6. Offer to keep it on Charming

Once I have watched it, ask:

> Want me to save this as a Charming app, so you have a link to rewatch it and share it?

If I say yes:

1. Create the app with the player as its `ui.js`. Keep `server.js` to one read-only route, `scenes`, that returns the script, and have the UI load its scenes through `api.scenes()` from `charming:ui/app@1.0`. Any agent can then read or update the script later.
2. Follow https://charm.ing/docs/prompts/build-your-first-app.md to connect and save it. Build in my account if I am signed in.
3. Give me the live URL and test that it plays.
4. Apps are private by default. Offer to share it with specific people through `share_app`, or to make the link public with `set_public`. Ask before doing either. An anonymous app must be claimed first.

## Check your work

- It fits the person: the technical level, their example, and the features they care about.
- Every claim about Charming matches a docs page.
- It plays start to finish without errors, and the controls work.
- The ending points to next steps chosen for them.
- You offered to save it as a Charming app.

Found a bug or need a feature? [Tell us](/docs/capabilities/feedback) with `submit_feedback` or `POST /app/{id}/feedback`. Your feedback shapes what we build next.