Prompt Typed, Then Generate — effect skill for AI agent flows
For AI agents: find the right skill in one call —
curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>"returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the how-to page.
A real task types into the prompt box, the Generate button is pressed, and the result starts to build.
- Type: Effect · AI agent flows
- Slug:
prompt-typed-then-generate - Status: live
- Publisher: Kapish Dima · remocn (community)
- License: MIT
- Source: https://remocn.dev/r/ai-prompt-flow.json
- Works in: Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- Requires: HyperFrames (npx hyperframes), Remotion, CapCut (by hand)
- Cost: Free — the take renders locally; generated footage, if any, bills by the model
What it does
Built on UI AI Prompt Flow by Kapish Dima (remocn), MIT. The write-up and recipes below are varg's.
Composer field with attachments, human-cadence typing, the button goes hover → press → loading, and the canvas begins to fill.
When: Open of almost every AI product launch: it shows what the product does in the first 3–5 s.
Watch out: Do not open with a logo and voiceover before the prompt; the typed task is the hook.
Timing: Typing 40–70 ms/char in bursts; button press 0.1/0.2 s; result starts ≤ 0.5 s after.
Also called: prompt box, AI prompt flow, type and generate
In HyperFrames
npx hyperframes add typed-prompt
npx hyperframes add ai-chat-reveal
In Remotion
// npx shadcn@latest add @remocn/ai-prompt-flow
// or @remocn/claude-chat / @remocn/chat-gpt for branded composers
In CapCut
Record the real prompt; speed typing 1.5–2×; zoom 170% on the composer while typing, release on Generate.
Ready-made components
- UI AI Prompt Flow (remocn): npx shadcn@latest add @remocn/ai-prompt-flow
- Typed Prompt (hyperframes): npx hyperframes add typed-prompt
- Claude Chat (remocn): npx shadcn@latest add @remocn/claude-chat
- AI Chat Reveal (hyperframes): npx hyperframes add ai-chat-reveal
Where this comes from
- Bohdan Motion: breakdown of the Claude Design launch video
- Bohdan Motion: breakdown of the ElevenLabs Flows launch video
- Bohdan Motion: breakdown of the Grok Build Mode launch video
Use when
- Open of almost every AI product launch: it shows what the product does in the first 3–5 s.
Not for
- Do not open with a logo and voiceover before the prompt; the typed task is the hook.
Install
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg - Codex:
npx skills add vargHQ/skills --skill varg-video-edit-library -a codex -y - Cursor:
npx skills add vargHQ/skills --skill varg-video-edit-library -a cursor -y
Example output
https://static.heygen.ai/hyperframes/templates/promoted/254fe4bd8a3f00c1e70ac5e38a1bce25060f7590/ai-chat-reveal/preview.mp4 — Preview of the AI Chat Reveal component that builds this take (credit: AI Chat Reveal · hyperframes, https://hyperframes.heygen.com/catalog/blocks/ai-chat-reveal)
More AI agent flows skills
- Answer Streams In: The assistant's reply arrives in uneven token bursts, the way a real model streams.
- Tool Calls as Status Rows: Each tool call appears as a row with an icon and label that goes spinner → check, building a visible plan.
- Nodes Wire Up on a Canvas: Nodes pop onto a canvas and connectors draw between them as the camera pulls back to show the whole pipeline.
- Beams Into the Agent Hub: Light pulses run along curved lines from tool icons into a central agent and back out to a result.
- Thinking… Shimmer Label: A muted "Thinking…" label with a moving shine shows the model working between prompt and answer.
- Parallel Agents Side by Side: Several agent cards work at once in lanes or an orbit, each with its own status, then merge into one result.
Run the generation on varg
varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg(skill + hosted MCP) - Codex, Cursor, Gemini CLI, OpenClaw:
npx skills add vargHQ/skills --skill varg-ai -a <agent> -y - Grok and any agent that reads SKILL.md:
npx skills add vargHQ/skills --skill varg-ai, or point it at the skill's SKILL.md - Claude.ai, ChatGPT, any MCP client: connect
https://mcp.varg.ai/mcp - API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt