{"type":"agent-native.clip.context","version":1,"instructions":["Use transcript.segments for timestamped spoken context.","This clip is readable as both text (transcript) and images (JPEG frames) — you can hear AND see it.","To SEE the screen, GET apis.frame.urlTemplate with atMs (returns image/jpeg). Start with recommendedFrames, then fetch additional frames around transcript timestamps that matter for the task.","If you cannot load an image from a URL, you will only have the transcript — tell the user to open the clip in an image-capable agent (ChatGPT, Claude Code, Cursor, Codex) or to upload a frame image directly so you can see it."],"clip":{"id":"YuM1nM1pcX3e","title":"Visual MDX Plans for APIs, UIs, and Flows","description":"I use the visual plan skill to generate dynamic, scan-friendly documentation for APIs, schemas, databases, and code. It also supports pre-coding plans with UI mockups, inline comments, and storyboard diagrams for user flows, plus GitHub Actions that post interactive visual recaps on pull requests. The open-source tools include installable skills, a local or hosted MDX plan viewer, and an agent-native framework that exposes actions as APIs, commands, agent tools, and user interfaces.","publicPageUrl":"https://clips.agent-native.com/share/YuM1nM1pcX3e","sourceProvider":null,"thumbnailUrl":"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F5953ffabf8734cae94c271ddf6f6dd1c","animatedThumbnailUrl":null,"durationMs":135581,"duration":"136s","width":1080,"height":1080,"hasAudio":true,"hasCamera":false,"status":"ready","agentReadiness":{"state":"ready","retryAfterSeconds":null,"instruction":null},"createdAt":"2026-08-18T02:48:02.712Z","updatedAt":"2026-08-18T03:01:14.999Z"},"apis":{"context":{"method":"GET","url":"https://clips.agent-native.com/api/agent-context.json?id=YuM1nM1pcX3e"},"transcript":{"method":"GET","url":"https://clips.agent-native.com/api/agent-transcript.json?id=YuM1nM1pcX3e"},"frame":{"method":"GET","urlTemplate":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs={timestampMs}","query":{"atMs":"Video timestamp in milliseconds. The endpoint returns image/jpeg."}}},"transcript":{"status":"ready","language":"en","failureReason":null,"retryAfterSeconds":null,"fullText":"When I'm working in a repository with not the best documentation, I like to use the visual plan skill to get real-time dynamic documentation generated for me that is rich in visual and easy to scan. All the APIs in a swagger-like API spec with their schemas, parameters, response types, as well as all the underlying schemas behind everything that we can visually explore, see what database they're in, see what all the fields are, and a bunch of other rich information. The visual plan skill uses MDX under the hood, so it's surprisingly efficient because it doesn't have to code all of this UI from scratch. It's using reusable components with JSX that you can even use in a notion style way. For instance, I really love this annotated code block, and the whole thing's open source, so you can tweak it any way you like. You can also use the skill to generate plans before you code, including UI mockups that you can comment on inline, and I also like to use this to diagram existing user flows, asking the AI to show me in a storyboard all the different paths and states for various flows, like a user sign up flow, versus having to just squint my eyes and just try and figure that out myself. There's also a GitHub action you can install, which can make it so Cloud or Codex can post a visual recap on every pull request so you can easily scan what exactly changed, including the UIs, APIs, and the most key code that updated with annotations, and you can open up the full recap in a new tab so you can explore it all interactively as well. This is all open source on my GitHub, including the skills you can install with a CLI that also gives you options to install the GitHub actions, as well as the visual MDX plan viewer application, which you can run locally, self-hosted, or there's a totally free hosted version you can use as well. This is built with the agent native framework, a framework I made from building so many apps like this, that makes it really easy to build applications where agents are first-class users of anything just like the UIs. It uses this action system where you define your logic as actions, and every action automatically becomes an API, a command, agent tool, and UI for users. So everything you build automatically is optimized for humans, agents, CLIs, and programmatic API access. There's a bunch of other apps I have here open source that you can try or fork and customize. I've linked to the stuff in my bio, and if you try any of this, I would love to hear your feedback. Come chat with me in Discord and share your feedback, requests, etc., or just reply in the comments. I'm rapidly making improvements from all the feedback I can get.","segments":[{"startMs":0,"endMs":2042,"timestamp":"0:00","range":"0:00-0:02","text":"When I'm working in a repository with"},{"startMs":2042,"endMs":3209,"timestamp":"0:02","range":"0:02-0:03","text":"not the best documentation,"},{"startMs":3209,"endMs":5251,"timestamp":"0:03","range":"0:03-0:05","text":"I like to use the visual plan"},{"startMs":5251,"endMs":7293,"timestamp":"0:05","range":"0:05-0:07","text":"skill to get real-time dynamic documentation generated"},{"startMs":7293,"endMs":9335,"timestamp":"0:07","range":"0:07-0:09","text":"for me that is rich in visual"},{"startMs":9335,"endMs":10500,"timestamp":"0:09","range":"0:09-0:10","text":"and easy to scan."},{"startMs":10500,"endMs":12935,"timestamp":"0:10","range":"0:10-0:12","text":"All the APIs in a swagger-like API"},{"startMs":12935,"endMs":14326,"timestamp":"0:12","range":"0:12-0:14","text":"spec with their schemas,"},{"startMs":14326,"endMs":15369,"timestamp":"0:14","range":"0:14-0:15","text":"parameters, response types,"},{"startMs":15369,"endMs":17804,"timestamp":"0:15","range":"0:15-0:17","text":"as well as all the underlying schemas"},{"startMs":17804,"endMs":20239,"timestamp":"0:17","range":"0:17-0:20","text":"behind everything that we can visually explore,"},{"startMs":20239,"endMs":21978,"timestamp":"0:20","range":"0:20-0:21","text":"see what database they're in,"},{"startMs":21978,"endMs":24065,"timestamp":"0:21","range":"0:21-0:24","text":"see what all the fields are,"},{"startMs":24065,"endMs":26500,"timestamp":"0:24","range":"0:24-0:26","text":"and a bunch of other rich information."},{"startMs":26500,"endMs":28740,"timestamp":"0:26","range":"0:26-0:28","text":"The visual plan skill uses MDX under"},{"startMs":28740,"endMs":30980,"timestamp":"0:28","range":"0:28-0:30","text":"the hood, so it's surprisingly efficient because"},{"startMs":30980,"endMs":33220,"timestamp":"0:30","range":"0:30-0:33","text":"it doesn't have to code all of"},{"startMs":33220,"endMs":34500,"timestamp":"0:33","range":"0:33-0:34","text":"this UI from scratch."},{"startMs":34500,"endMs":36469,"timestamp":"0:34","range":"0:34-0:36","text":"It's using reusable components with JSX that"},{"startMs":36469,"endMs":38438,"timestamp":"0:36","range":"0:36-0:38","text":"you can even use in a notion"},{"startMs":38438,"endMs":39000,"timestamp":"0:38","range":"0:38-0:39","text":"style way."},{"startMs":39000,"endMs":40313,"timestamp":"0:39","range":"0:39-0:40","text":"For instance, I really love this annotated"},{"startMs":40313,"endMs":41626,"timestamp":"0:40","range":"0:40-0:41","text":"code block, and the whole thing's open"},{"startMs":41626,"endMs":42939,"timestamp":"0:41","range":"0:41-0:42","text":"source, so you can tweak it any"},{"startMs":42939,"endMs":43500,"timestamp":"0:42","range":"0:42-0:43","text":"way you like."},{"startMs":43500,"endMs":45667,"timestamp":"0:43","range":"0:43-0:45","text":"You can also use the skill to"},{"startMs":45667,"endMs":47215,"timestamp":"0:45","range":"0:45-0:47","text":"generate plans before you code,"},{"startMs":47215,"endMs":49382,"timestamp":"0:47","range":"0:47-0:49","text":"including UI mockups that you can comment"},{"startMs":49382,"endMs":50000,"timestamp":"0:49","range":"0:49-0:50","text":"on inline,"},{"startMs":50000,"endMs":51784,"timestamp":"0:50","range":"0:50-0:51","text":"and I also like to use this"},{"startMs":51784,"endMs":53059,"timestamp":"0:51","range":"0:51-0:53","text":"to diagram existing user flows,"},{"startMs":53059,"endMs":54843,"timestamp":"0:53","range":"0:53-0:54","text":"asking the AI to show me in"},{"startMs":54843,"endMs":56627,"timestamp":"0:54","range":"0:54-0:56","text":"a storyboard all the different paths and"},{"startMs":56627,"endMs":57647,"timestamp":"0:56","range":"0:56-0:57","text":"states for various flows,"},{"startMs":57647,"endMs":59176,"timestamp":"0:57","range":"0:57-0:59","text":"like a user sign up flow,"},{"startMs":59176,"endMs":60960,"timestamp":"0:59","range":"0:59-1:00","text":"versus having to just squint my eyes"},{"startMs":60960,"endMs":62744,"timestamp":"1:00","range":"1:00-1:02","text":"and just try and figure that out"},{"startMs":62744,"endMs":63000,"timestamp":"1:02","range":"1:02-1:03","text":"myself."},{"startMs":63000,"endMs":65130,"timestamp":"1:03","range":"1:03-1:05","text":"There's also a GitHub action you can"},{"startMs":65130,"endMs":67260,"timestamp":"1:05","range":"1:05-1:07","text":"install, which can make it so Cloud"},{"startMs":67260,"endMs":69390,"timestamp":"1:07","range":"1:07-1:09","text":"or Codex can post a visual recap"},{"startMs":69390,"endMs":71520,"timestamp":"1:09","range":"1:09-1:11","text":"on every pull request so you can"},{"startMs":71520,"endMs":73042,"timestamp":"1:11","range":"1:11-1:13","text":"easily scan what exactly changed,"},{"startMs":73042,"endMs":73955,"timestamp":"1:13","range":"1:13-1:13","text":"including the UIs,"},{"startMs":73955,"endMs":76085,"timestamp":"1:13","range":"1:13-1:16","text":"APIs, and the most key code that"},{"startMs":76085,"endMs":77000,"timestamp":"1:16","range":"1:16-1:17","text":"updated with annotations,"},{"startMs":77000,"endMs":78333,"timestamp":"1:17","range":"1:17-1:18","text":"and you can open up the full"},{"startMs":78333,"endMs":79666,"timestamp":"1:18","range":"1:18-1:19","text":"recap in a new tab so you"},{"startMs":79666,"endMs":81000,"timestamp":"1:19","range":"1:19-1:21","text":"can explore it all interactively as well."},{"startMs":81000,"endMs":82944,"timestamp":"1:21","range":"1:21-1:22","text":"This is all open source on my"},{"startMs":82944,"endMs":84888,"timestamp":"1:22","range":"1:22-1:24","text":"GitHub, including the skills you can install"},{"startMs":84888,"endMs":86832,"timestamp":"1:24","range":"1:24-1:26","text":"with a CLI that also gives you"},{"startMs":86832,"endMs":88499,"timestamp":"1:26","range":"1:26-1:28","text":"options to install the GitHub actions,"},{"startMs":88499,"endMs":90443,"timestamp":"1:28","range":"1:28-1:30","text":"as well as the visual MDX plan"},{"startMs":90443,"endMs":92387,"timestamp":"1:30","range":"1:30-1:32","text":"viewer application, which you can run locally,"},{"startMs":92387,"endMs":94331,"timestamp":"1:32","range":"1:32-1:34","text":"self-hosted, or there's a totally free hosted"},{"startMs":94331,"endMs":96000,"timestamp":"1:34","range":"1:34-1:36","text":"version you can use as well."},{"startMs":96000,"endMs":97842,"timestamp":"1:36","range":"1:36-1:37","text":"This is built with the agent native"},{"startMs":97842,"endMs":99684,"timestamp":"1:37","range":"1:37-1:39","text":"framework, a framework I made from building"},{"startMs":99684,"endMs":101000,"timestamp":"1:39","range":"1:39-1:41","text":"so many apps like this,"},{"startMs":101000,"endMs":102842,"timestamp":"1:41","range":"1:41-1:42","text":"that makes it really easy to build"},{"startMs":102842,"endMs":104684,"timestamp":"1:42","range":"1:42-1:44","text":"applications where agents are first-class users of"},{"startMs":104684,"endMs":106000,"timestamp":"1:44","range":"1:44-1:46","text":"anything just like the UIs."},{"startMs":106000,"endMs":108074,"timestamp":"1:46","range":"1:46-1:48","text":"It uses this action system where you"},{"startMs":108074,"endMs":109555,"timestamp":"1:48","range":"1:48-1:49","text":"define your logic as actions,"},{"startMs":109555,"endMs":111629,"timestamp":"1:49","range":"1:49-1:51","text":"and every action automatically becomes an API,"},{"startMs":111629,"endMs":112814,"timestamp":"1:51","range":"1:51-1:52","text":"a command, agent tool,"},{"startMs":112814,"endMs":114000,"timestamp":"1:52","range":"1:52-1:54","text":"and UI for users."},{"startMs":114000,"endMs":116800,"timestamp":"1:54","range":"1:54-1:56","text":"So everything you build automatically is optimized"},{"startMs":116800,"endMs":118000,"timestamp":"1:56","range":"1:56-1:58","text":"for humans, agents,"},{"startMs":118000,"endMs":120000,"timestamp":"1:58","range":"1:58-2:00","text":"CLIs, and programmatic API access."},{"startMs":120000,"endMs":121842,"timestamp":"2:00","range":"2:00-2:01","text":"There's a bunch of other apps I"},{"startMs":121842,"endMs":123684,"timestamp":"2:01","range":"2:01-2:03","text":"have here open source that you can"},{"startMs":123684,"endMs":125000,"timestamp":"2:03","range":"2:03-2:05","text":"try or fork and customize."},{"startMs":125000,"endMs":127227,"timestamp":"2:05","range":"2:05-2:07","text":"I've linked to the stuff in my"},{"startMs":127227,"endMs":129454,"timestamp":"2:07","range":"2:07-2:09","text":"bio, and if you try any of"},{"startMs":129454,"endMs":131681,"timestamp":"2:09","range":"2:09-2:11","text":"this, I would love to hear your"},{"startMs":131681,"endMs":132000,"timestamp":"2:11","range":"2:11-2:12","text":"feedback."},{"startMs":132000,"endMs":133944,"timestamp":"2:12","range":"2:12-2:13","text":"Come chat with me in Discord and"},{"startMs":133944,"endMs":134844,"timestamp":"2:13","range":"2:13-2:14","text":"share your feedback,"},{"startMs":134844,"endMs":136750,"timestamp":"2:14","range":"2:14-2:16","text":"requests, etc., or just reply in the"},{"startMs":136750,"endMs":137000,"timestamp":"2:16","range":"2:16-2:17","text":"comments."},{"startMs":137000,"endMs":138273,"timestamp":"2:17","range":"2:17-2:18","text":"I'm rapidly making improvements from all the"},{"startMs":138273,"endMs":139000,"timestamp":"2:18","range":"2:18-2:19","text":"feedback I can get."}],"segmentCount":84},"comments":[],"commentCount":0,"commentsTruncated":false,"reactions":[],"reactionCount":0,"reactionsTruncated":false,"chapters":[],"recommendedFrames":[{"atMs":0,"timestamp":"0:00","reason":"opening frame","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=0"},{"atMs":5251,"timestamp":"0:05","reason":"transcript: skill to get real-time dynamic documentation generated","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=5251"},{"atMs":9335,"timestamp":"0:09","reason":"transcript: and easy to scan.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=9335"},{"atMs":12935,"timestamp":"0:12","reason":"transcript: spec with their schemas,","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=12935"},{"atMs":17804,"timestamp":"0:17","reason":"transcript: behind everything that we can visually explore,","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=17804"},{"atMs":21978,"timestamp":"0:21","reason":"transcript: see what all the fields are,","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=21978"},{"atMs":26500,"timestamp":"0:26","reason":"transcript: The visual plan skill uses MDX under","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=26500"},{"atMs":30980,"timestamp":"0:30","reason":"transcript: it doesn't have to code all of","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=30980"},{"atMs":34500,"timestamp":"0:34","reason":"transcript: It's using reusable components with JSX that","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=34500"},{"atMs":38438,"timestamp":"0:38","reason":"transcript: style way.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=YuM1nM1pcX3e&atMs=38438"}],"bugReport":null,"browserDiagnostics":null,"ctas":[]}