{"type":"agent-native.clip.context","version":2,"webmcp":{"protocol":"WebMCP","scope":"page-local","tools":[{"name":"clips-get-context","title":"Get clip context","description":"Read clip metadata, readiness, transcript status, and the HTTP API URLs. This works without a browser.","inputSchema":{"type":"object","properties":{},"additionalProperties":false},"annotations":{"readOnlyHint":true,"untrustedContentHint":true}},{"name":"clips-get-transcript","title":"Get clip transcript","description":"Read bounded timestamped transcript segments. Use nextStartIndex to page through long transcripts without losing overlapping segments. For complete transcript text, follow sourceUrl to the HTTP transcript endpoint.","inputSchema":{"type":"object","properties":{"startMs":{"type":"number","minimum":0,"description":"Only return segments that overlap this start time."},"endMs":{"type":"number","minimum":0,"description":"Only return segments that overlap this end time."},"startIndex":{"type":"integer","minimum":0,"description":"Stable segment index for pagination; prefer nextStartIndex from the previous page."},"maxSegments":{"type":"integer","minimum":1,"maximum":50,"description":"Maximum number of transcript segments to return."}},"additionalProperties":false},"annotations":{"readOnlyHint":true,"untrustedContentHint":true}},{"name":"clips-get-frame","title":"Get clip frame","description":"Get a JPEG image URL for the clip at a requested video timestamp.","inputSchema":{"type":"object","properties":{"atMs":{"type":"number","minimum":0,"description":"Video timestamp in milliseconds."}},"required":["atMs"],"additionalProperties":false},"availability":"ready","annotations":{"readOnlyHint":true,"untrustedContentHint":true}}],"instructions":"For browser-independent access from any HTTP client, fetch agentContextUrl and use its apis.context, apis.transcript, and apis.frame URLs. For a complete transcript, use the HTTP apis.transcript URL. If this clip page is already open in a WebMCP-capable browser, list its page tools for bounded read-only access; clips-get-transcript may omit fullText or return a truncated result, and its sourceUrl points to the HTTP transcript. Use nextStartIndex for transcript pagination so overlapping segments are not lost.","http":{"schema_version":"v1","browserRequired":false,"tools":[{"name":"clips-get-context","title":"Get clip context","description":"Read clip metadata, readiness, transcript status, and the HTTP API URLs. This works without a browser.","inputSchema":{"type":"object","properties":{},"additionalProperties":false},"annotations":{"readOnlyHint":true,"untrustedContentHint":true},"parameters":{"type":"object","properties":{},"additionalProperties":false},"endpoint":"https://beta.clips.agent-native.com/api/agent-context.json?id=F6SlN9TdlK30","method":"GET","responseType":"application/json"},{"name":"clips-get-transcript","title":"Get clip transcript","description":"Read bounded timestamped transcript segments. Use nextStartIndex to page through long transcripts without losing overlapping segments. For complete transcript text, follow sourceUrl to the HTTP transcript endpoint.","inputSchema":{"type":"object","properties":{"startMs":{"type":"number","minimum":0,"description":"Only return segments that overlap this start time."},"endMs":{"type":"number","minimum":0,"description":"Only return segments that overlap this end time."},"startIndex":{"type":"integer","minimum":0,"description":"Stable segment index for pagination; prefer nextStartIndex from the previous page."},"maxSegments":{"type":"integer","minimum":1,"maximum":50,"description":"Maximum number of transcript segments to return."}},"additionalProperties":false},"annotations":{"readOnlyHint":true,"untrustedContentHint":true},"parameters":{"type":"object","properties":{"startMs":{"type":"number","minimum":0,"description":"Only return segments that overlap this start time."},"endMs":{"type":"number","minimum":0,"description":"Only return segments that overlap this end time."},"startIndex":{"type":"integer","minimum":0,"description":"Stable segment index for pagination; prefer nextStartIndex from the previous page."},"maxSegments":{"type":"integer","minimum":1,"maximum":50,"description":"Maximum number of transcript segments to return."}},"additionalProperties":false},"endpoint":"https://beta.clips.agent-native.com/api/agent-transcript.json?id=F6SlN9TdlK30","method":"GET","responseType":"application/json"},{"name":"clips-get-frame","title":"Get clip frame","description":"Get a JPEG image URL for the clip at a requested video timestamp.","inputSchema":{"type":"object","properties":{"atMs":{"type":"number","minimum":0,"description":"Video timestamp in milliseconds."}},"required":["atMs"],"additionalProperties":false},"availability":"ready","annotations":{"readOnlyHint":true,"untrustedContentHint":true},"parameters":{"type":"object","properties":{"atMs":{"type":"number","minimum":0,"description":"Video timestamp in milliseconds."}},"required":["atMs"],"additionalProperties":false},"endpoint":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs={atMs}","method":"GET","responseType":"image/jpeg"}]}},"instructions":["Use transcript.segments for timestamped spoken context.","Use the HTTP URLs in apis for browser-independent access. For complete transcript text, use apis.transcript. If this clip page is already open in a WebMCP-capable browser, list its read-only page tools for bounded access; WebMCP transcript results may omit fullText or be truncated, so follow sourceUrl for the complete transcript.","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":"F6SlN9TdlK30","title":"Better, more visual plans for Claude Code","description":"Steve created two open-source Claude Code skills: **visual plan** and **visual recap**. Visual plan turns implementation plans into interactive MDX with diagrams, API specs, schema changes, annotated code, and pan-and-zoom wireframes for review and iteration before coding. Visual recap presents completed agent work in the same visual format, supporting code review and pull request review.","publicPageUrl":"https://beta.clips.agent-native.com/share/F6SlN9TdlK30","sourceProvider":null,"thumbnailUrl":"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F88accb24040744d7b37c1182d4c3b963","animatedThumbnailUrl":null,"durationMs":79595,"duration":"80s","width":1080,"height":1080,"hasAudio":true,"hasCamera":false,"status":"ready","agentReadiness":{"state":"ready","retryAfterSeconds":null,"instruction":null},"createdAt":"2026-08-18T02:47:21.945Z","updatedAt":"2026-08-18T03:02:02.954Z"},"apis":{"context":{"method":"GET","url":"https://beta.clips.agent-native.com/api/agent-context.json?id=F6SlN9TdlK30"},"transcript":{"method":"GET","url":"https://beta.clips.agent-native.com/api/agent-transcript.json?id=F6SlN9TdlK30"},"frame":{"method":"GET","urlTemplate":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs={timestampMs}","query":{"atMs":"Video timestamp in milliseconds. The endpoint returns image/jpeg."}}},"transcript":{"status":"ready","language":"en","failureReason":null,"retryAfterSeconds":null,"fullText":"Plan mode in Claude Code is incredible, but I always find my eyes glazing over this huge Markdown essay in my terminal. I found I can make much better visual plans with reusable components, so I made a skill called Visual Plan. It generates plans as MDX with highly visual components, diagrams, interactive API specs, schema design changes, annotated code, and even pannable and zoomable wireframes.\n\nEvery UI lets you look at a wireframe first, comment on it, iterate, and then have the agent work. I found this to be a much more intuitive interface for me to reason about what the agent is doing. It's somewhat inspired by that post about how HTML is better than Markdown, but HTML can be slow and verbose to write, and it doesn't look good checked into a repo.\n\nIt’s really made me feel like humans and engineering are kind of entering this new abstraction phase where we reason about things at the plan level. As long as the plan is what we want, agents are getting more and more reliable at executing it—almost to the degree that we trust the C compiler to compile to assembly reliably. As long as the plan is good, we can increasingly trust agents to implement it as expected.\n\nI also made a skill for the reverse of this. I call it Visual Recap. After the agent works, it gives you a recap of everything it did. It's the same idea: wireframes, interactive API specs and diffs, schemas, annotated code, and so on.\n\nNow, when you're reviewing what the agent has done for you or looking at a pull request for somebody else's code, you can see a visual recap. It's all free and open source. You can find it on my GitHub. Let me know what you think.","segments":[{"startMs":0,"endMs":1800,"timestamp":"0:00","range":"0:00-0:01","text":"Plan mode in Claude code is incredible,"},{"startMs":1800,"endMs":3600,"timestamp":"0:01","range":"0:01-0:03","text":"but I always find my eyes glazing"},{"startMs":3600,"endMs":5400,"timestamp":"0:03","range":"0:03-0:05","text":"over this huge markdown essay in my"},{"startMs":5400,"endMs":7200,"timestamp":"0:05","range":"0:05-0:07","text":"terminal. And I found I can make"},{"startMs":7200,"endMs":9000,"timestamp":"0:07","range":"0:07-0:09","text":"much better visual plans with reusable components."},{"startMs":9000,"endMs":11245,"timestamp":"0:09","range":"0:09-0:11","text":"So I made a skill called visual"},{"startMs":11245,"endMs":13490,"timestamp":"0:11","range":"0:11-0:13","text":"plan. It generates plans as MDX with"},{"startMs":13490,"endMs":14452,"timestamp":"0:13","range":"0:13-0:14","text":"super visual components,"},{"startMs":14452,"endMs":16377,"timestamp":"0:14","range":"0:14-0:16","text":"diagrams, API specs that are interactive,"},{"startMs":16377,"endMs":17339,"timestamp":"0:16","range":"0:16-0:17","text":"schema design changes,"},{"startMs":17339,"endMs":19584,"timestamp":"0:17","range":"0:17-0:19","text":"annotated code, and even pan and zoomable"},{"startMs":19584,"endMs":21829,"timestamp":"0:19","range":"0:19-0:21","text":"wireframes. Every UI lets you look at"},{"startMs":21829,"endMs":22791,"timestamp":"0:21","range":"0:21-0:22","text":"a wireframe first,"},{"startMs":22791,"endMs":23753,"timestamp":"0:22","range":"0:22-0:23","text":"comment on it,"},{"startMs":23753,"endMs":26000,"timestamp":"0:23","range":"0:23-0:26","text":"iterate, and then have the agent work."},{"startMs":26000,"endMs":27842,"timestamp":"0:26","range":"0:26-0:27","text":"I found this to be a much"},{"startMs":27842,"endMs":29684,"timestamp":"0:27","range":"0:27-0:29","text":"more intuitive interface for me to reason"},{"startMs":29684,"endMs":31000,"timestamp":"0:29","range":"0:29-0:31","text":"about what the agent's doing."},{"startMs":31000,"endMs":32867,"timestamp":"0:31","range":"0:31-0:32","text":"It's somewhat inspired by that post about"},{"startMs":32867,"endMs":34467,"timestamp":"0:32","range":"0:32-0:34","text":"how HTML is better than markdown,"},{"startMs":34467,"endMs":36334,"timestamp":"0:34","range":"0:34-0:36","text":"but HTML can be slow and verbose"},{"startMs":36334,"endMs":38201,"timestamp":"0:36","range":"0:36-0:38","text":"to write. It doesn't look good checked"},{"startMs":38201,"endMs":39000,"timestamp":"0:38","range":"0:38-0:39","text":"into a repo."},{"startMs":39000,"endMs":41593,"timestamp":"0:39","range":"0:39-0:41","text":"And it's really made me feel like"},{"startMs":41593,"endMs":44186,"timestamp":"0:41","range":"0:41-0:44","text":"humans and engineering is kind of entering"},{"startMs":44186,"endMs":46779,"timestamp":"0:44","range":"0:44-0:46","text":"this new abstraction phase where we reason"},{"startMs":46779,"endMs":49000,"timestamp":"0:46","range":"0:46-0:49","text":"about things at the plan level."},{"startMs":49000,"endMs":50600,"timestamp":"0:49","range":"0:49-0:50","text":"As long as the plan's what we"},{"startMs":50600,"endMs":52200,"timestamp":"0:50","range":"0:50-0:52","text":"want, agents are getting more and more"},{"startMs":52200,"endMs":53343,"timestamp":"0:52","range":"0:52-0:53","text":"reliable at executing on that."},{"startMs":53343,"endMs":54943,"timestamp":"0:53","range":"0:53-0:54","text":"Almost to the degree to which we"},{"startMs":54943,"endMs":56543,"timestamp":"0:54","range":"0:54-0:56","text":"trust the C compiler to compile to"},{"startMs":56543,"endMs":57000,"timestamp":"0:56","range":"0:56-0:57","text":"assembly reliably."},{"startMs":57000,"endMs":58400,"timestamp":"0:57","range":"0:57-0:58","text":"As long as the plan is good,"},{"startMs":58400,"endMs":59800,"timestamp":"0:58","range":"0:58-0:59","text":"more and more we can trust the"},{"startMs":59800,"endMs":61000,"timestamp":"0:59","range":"0:59-1:01","text":"agents to implement it as expected."},{"startMs":61000,"endMs":62400,"timestamp":"1:01","range":"1:01-1:02","text":"I also made a skill for the"},{"startMs":62400,"endMs":63300,"timestamp":"1:02","range":"1:02-1:03","text":"reverse of this."},{"startMs":63300,"endMs":64000,"timestamp":"1:03","range":"1:03-1:04","text":"I call it visual recap."},{"startMs":64000,"endMs":65355,"timestamp":"1:04","range":"1:04-1:05","text":"What it can do is after the"},{"startMs":65355,"endMs":66710,"timestamp":"1:05","range":"1:05-1:06","text":"agent works, give you a recap of"},{"startMs":66710,"endMs":67567,"timestamp":"1:06","range":"1:06-1:07","text":"everything it did."},{"startMs":67567,"endMs":68424,"timestamp":"1:07","range":"1:07-1:08","text":"It's the same idea,"},{"startMs":68424,"endMs":69500,"timestamp":"1:08","range":"1:08-1:09","text":"wireframes, interactive API specs and diffs,"},{"startMs":69500,"endMs":69750,"timestamp":"1:09","range":"1:09-1:09","text":"schemas, annotated code,"},{"startMs":69750,"endMs":70000,"timestamp":"1:09","range":"1:09-1:10","text":"etc."},{"startMs":70000,"endMs":71167,"timestamp":"1:10","range":"1:10-1:11","text":"So now when you're reviewing what the"},{"startMs":71167,"endMs":72067,"timestamp":"1:11","range":"1:11-1:12","text":"agent has done for you,"},{"startMs":72067,"endMs":73234,"timestamp":"1:12","range":"1:12-1:13","text":"or looking at like a pull request"},{"startMs":73234,"endMs":74134,"timestamp":"1:13","range":"1:13-1:14","text":"for somebody else's code,"},{"startMs":74134,"endMs":75134,"timestamp":"1:14","range":"1:14-1:15","text":"you can see a visual recap."},{"startMs":75134,"endMs":76134,"timestamp":"1:15","range":"1:15-1:16","text":"It's all free and open source."},{"startMs":76134,"endMs":77301,"timestamp":"1:16","range":"1:16-1:17","text":"You can find it on my GitHub."},{"startMs":77301,"endMs":78000,"timestamp":"1:17","range":"1:17-1:18","text":"Let me know what you think."}],"segmentCount":54},"comments":[],"commentCount":0,"commentsTruncated":false,"reactions":[],"reactionCount":0,"reactionsTruncated":false,"chapters":[],"recommendedFrames":[{"atMs":0,"timestamp":"0:00","reason":"opening frame","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=0"},{"atMs":3600,"timestamp":"0:03","reason":"transcript: over this huge markdown essay in my","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=3600"},{"atMs":7200,"timestamp":"0:07","reason":"transcript: much better visual plans with reusable components.","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=7200"},{"atMs":11245,"timestamp":"0:11","reason":"transcript: plan. It generates plans as MDX with","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=11245"},{"atMs":14452,"timestamp":"0:14","reason":"transcript: diagrams, API specs that are interactive,","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=14452"},{"atMs":19584,"timestamp":"0:19","reason":"transcript: wireframes. Every UI lets you look at","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=19584"},{"atMs":22791,"timestamp":"0:22","reason":"transcript: comment on it,","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=22791"},{"atMs":26000,"timestamp":"0:26","reason":"transcript: I found this to be a much","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=26000"},{"atMs":29684,"timestamp":"0:29","reason":"transcript: about what the agent's doing.","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=29684"},{"atMs":32867,"timestamp":"0:32","reason":"transcript: how HTML is better than markdown,","url":"https://beta.clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=32867"}],"bugReport":null,"browserDiagnostics":null,"ctas":[]}