App Demo Videos

Organization

glifxyz

app-demo-videos

Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music. Use when: "make a demo video", "record a screencast", "I need a launch video for my startup", "hype trailer for my app", "product walkthrough", "feature tour", "explainer video", "turn my Loom into a polished demo", "show my app on a MacBook", "scroll through my dashboard and zoom in", "15-second TikTok ad for our best feature", "changelog video", "App Store preview video", "GIF for the README", "thumbnail for the launch video". NOT for: still graphics (use app-promo-materials), videos unrelated to the app (use audio-and-video), animating a single image (use audio-and-video).

Overview

Publisher	glifxyz
Repository	`glif-mcp-server`
Skill name	`app-demo-videos`
Stars	215
Forks	32
Bundled files	2
License	MIT
Links	Skill source Repository Homepage

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
2 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by glifxyz on GitHub. Read the source before you install it.

Installation

Install the App Demo Videos AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/glifxyz/glif-mcp-server/tree/main/skills/app-demo-videos
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/glifxyz/glif-mcp-server.git /tmp/glif-mcp-server
mkdir -p .claude/skills
cp -r /tmp/glif-mcp-server/skills/app-demo-videos .claude/skills/app-demo-videos

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable App Demo Videos in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads App Demo Videos on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so App Demo Videos is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Record the real app, then let Glif frame it in a video template. The user's explicit instructions come first, within host safety rules.

1. Plan the video

Agree on a short plan before recording:

Story: 3 to 6 beats, one feature or action each. Open with the most useful moment; social cuts need a hook in the first 3 seconds.
Length: 15 to 30 seconds for social and teasers, 30 to 90 for walkthroughs and explainers.
Template: pick one, or describe your own.
- Browser tour: the app in a clean browser window on a soft background, zooms on clicks, a caption per beat.
- Device composite: the real recording placed on a laptop or phone screen in a generated lifestyle scene. Glif tracks the screen if the camera moves.
- Social ad demo: vertical, 15 seconds, hook first, big captions, music.
- Narrated walkthrough: voiceover and captions over the browser tour.
- Explainer: animated slides in a chosen style, narrated, with short clips of the real app. Good for "how it works".
- Changelog video: release notes or a changelog URL turned into a short narrated update.
- App Store preview: real app footage only, 15 to 30 seconds, vertical. Check App Store Connect for current specs.
Outputs: 16:9 master at 1920×1080, plus a 9:16 1080×1920 cut if wanted, a poster image, a 1280×720 YouTube thumbnail or a README GIF.
Sound: voiceover script, voice (Glif can play samples to choose from, or clone a voice from a sample with the owner's consent), music mood (ducked under the voice), and optional click sounds synced to the cursor.
Captions: word-by-word highlight, simple lower thirds, or motion-graphic overlays with numbers and charts. Ask Glif for a still frame with a few font options first if the look matters.

Show the plan and wait for a yes. Video uses more credits than images.

2. Record the app

Use the user's own recording or Loom export if they have one. Otherwise:

Start the app locally and seed it with demo data. Never record real customer data, emails, tokens or keys.
Copy scripts/record-demo.mjs into the project's scratch space. Install Playwright if the project lacks it (npm i -D playwright and npx playwright install chromium), after checking with the user.
Replace the example beats with the planned steps. glideClick moves a visible cursor before clicking. smoothScroll scrolls gently. Leave about a second of stillness after each beat.
Run it with DEMO_URL=<local url> node record-demo.mjs. Add DEMO_MOBILE=1 for a phone layout. It prints each beat's time; keep those for captions.
Check the result, or pull frames with ffmpeg -ss <seconds> -i <file> -frames:v 1 frame.png. Re-record if something glitched.
If ffmpeg is installed, convert to MP4: ffmpeg -i in.webm -c:v libx264 -pix_fmt yuv420p -crf 18 demo-raw.mp4.

Keep recordings out of git, such as in recordings/ listed in .gitignore.

3. Send it to Glif

Upload each recording and the logo with upload_file: pass filename and kind: "video" (or "image"), then run the returned command with the real path. Attach the returned fileUrl values.

Call compose_project once with:

the chosen template, length and every output size
the beat list with timestamps and exact caption text, in quotes
the voiceover script, voice choice and music mood
brand colors (hex), logo and an intro or outro card (app name, one line, URL)
this rule: "Keep the app footage real. Frame, crop, zoom, speed up and caption it, but never regenerate or restyle the interface. Use a programmatic video template, such as Remotion, so captions and timing are exact."

Share the projectUrl. Follow the run with get_job_status, passing the jobId as job_id. A video can take several minutes; keep working on other things meanwhile. A pending status or timeout is not a reason to start another run.

4. Check and save

Download with curl -fsSL "<media url>" -o <path> into marketing/video/, or public/videos/ if the site embeds it. Check:

size, length and codec: ffprobe -v error -show_entries stream=codec_name,width,height:format=duration -of csv=p=0 <file>
caption spelling and timing against the beats
the interface looks like the real app

Fix problems in the same project by passing its project_id. Don't start a fresh run for a small fix. Useful follow-ups there: a 9:16 cut, 3 alternative 3-second openings to test, or a thumbnail.

To embed on the site:

html
<video src="/videos/demo.mp4" poster="/videos/demo-poster.jpg" autoplay muted loop playsinline width="1920" height="1080"></video>

For a README, a short MP4 works on GitHub. A GIF should stay under about 10 MB; ask Glif for one or make it locally with ffmpeg.

List the files you made. Posting or uploading to stores is the user's call.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

agents/openai.yaml1 KB
scripts/record-demo.mjs3 KB

Frequently asked questions

What does the App Demo Videos AI skill do?

Why use App Demo Videos on TypingMind?

Because you install it once and use it with any model. App Demo Videos is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install App Demo Videos in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/glifxyz/glif-mcp-server/tree/main/skills/app-demo-videos. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use App Demo Videos?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with App Demo Videos?

As many as you like. As long as a model supports skills, you can use App Demo Videos with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the App Demo Videos AI skill free?

Yes. It is published on GitHub by glifxyz under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Facetime

openclaw

OrganizationPopular

Inspect FaceTime internal stages, place an approved call to a configured owner handle, and request hangup through facetime_call.

Camsnap

Capture frames or clips from RTSP/ONVIF cameras and local webcams, including USB pan/tilt/zoom control.

Content Engine

Create platform-native content systems for X, LinkedIn, TikTok, YouTube, newsletters, and repurposed multi-platform campaigns. Use when the user wants social posts, threads, scripts, content…

Fal Ai Media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio…

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

1. Plan the video

2. Record the app

3. Send it to Glif

4. Check and save

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now