<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>AI – IMG.LY Blog</title><description>Posts tagged AI on the IMG.LY blog.</description><link>https://img.ly/blog/tag/ai/</link><language>en-us</language><image><url>https://img.ly/apple-touch-icon.png</url><title>AI – IMG.LY Blog</title><link>https://img.ly/blog/tag/ai/</link></image><atom:link href="https://img.ly/blog/tag/ai/rss.xml" rel="self" type="application/rss+xml"/><generator>Astro</generator><lastBuildDate>Tue, 09 Jun 2026 09:48:30 GMT</lastBuildDate><ttl>60</ttl><item><title>AI Design Agents and Creative Automation: How to Ship a Full Campaign Without a Designer</title><link>https://img.ly/blog/ai-design-agents-and-creative-automation-how-to-ship-a-full-campaign-without-a-designer/</link><guid isPermaLink="true">https://img.ly/blog/ai-design-agents-and-creative-automation-how-to-ship-a-full-campaign-without-a-designer/</guid><description>Most marketing workflows are fully automated now - except one. Design is still a handoff, a wait, a revision loop, and another wait. Here&apos;s how AI design agents are closing that gap, and how to run a full campaign production session without leaving a single conversation.</description><pubDate>Wed, 01 Apr 2026 10:14:03 GMT</pubDate><content:encoded>&lt;p&gt;You have your files, hooks, Google Ads data but still can’t actually launch a campaign because you have to go to a designer for the final assets.&lt;/p&gt;
&lt;p&gt;That gap is exactly where campaign momentum dies. Not at the strategy stage or in copy but at the last mile, when everything is ready except the thing people will actually see.&lt;/p&gt;
&lt;p&gt;Luckily, it no longer has to.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://img.ly/blog/content/media/2026/05/AI-first.mp4&quot; controls&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;the-ai-marketing-stack-has-a-design-shaped-hole-in-it&quot;&gt;The AI Marketing Stack Has a Design-Shaped Hole in It&lt;/h2&gt;
&lt;p&gt;Most marketing workflows have been quietly transformed over the last two years. Copy generation, audience segmentation, keyword research, performance analysis - all of it runs faster now, with less manual input. A solo marketer can do what used to require a team. Except for one part.&lt;/p&gt;
&lt;p&gt;Design hasn’t moved. The workflow is still: write a brief, hand it to a designer, wait, review, revise, wait again. Then do the same thing in three more formats because the 1:1 you approved doesn’t fit Stories, Display, or LinkedIn. That loop can take days. And it doesn’t matter how good your AI-generated copy is if it’s sitting in a doc waiting for someone to have bandwidth.&lt;/p&gt;
&lt;p&gt;This isn’t a resourcing problem. Hiring more designers doesn’t fix the structural issue; it just adds capacity to a fundamentally slow process. The problem is that the tools built for design weren’t designed for the workflow a modern marketer actually runs. They expect a designer at the keyboard. They don’t expect a marketer with a campaign brief and a conversation window.&lt;/p&gt;
&lt;p&gt;The result: campaigns that are otherwise fully automated still stall before they ship. The bottleneck moved from copy to creative. And most teams haven’t noticed yet, because design delays feel normal. They’ve always been there.&lt;/p&gt;
&lt;h2 id=&quot;what-an-ai-design-agent-actually-changes&quot;&gt;What an AI Design Agent Actually Changes&lt;/h2&gt;
&lt;p&gt;An AI design agent is an autonomous AI system, not a prompt-response tool. It plans, reasons, and executes design tasks independently. Given a goal, it breaks that goal into steps, uses the tools available to it, retains context across the session, and can self-correct when the output isn’t right. That’s the category: a system that drives the workflow rather than waiting for instruction at each step.&lt;/p&gt;
&lt;p&gt;Most design agents deliver speed. The handoff that used to take days can happen in minutes. But the output is still a deliverable: a file you receive, use as-is, or move somewhere else. Most operate inside existing tools or generate assets you work with elsewhere. The speed is real, the editability usually isn’t. If something needs to change, you’re back to prompting from scratch.&lt;/p&gt;
&lt;p&gt;CoDesign sits differently. It doesn’t hand you a finished asset. It gives you a working starting point on a real canvas. Layers, text boxes, placeholders - real assets you can continue to work with, in the same conversation, without leaving the session.&lt;/p&gt;
&lt;p&gt;Brand consistency gets handled at the foundation. Load your brand kit once, including colors, fonts, logo, and layout rules, and every output that session respects those constraints. You’re not eyeballing hex codes or hoping the font looks right. The rules are applied from the start, not checked at the end.&lt;/p&gt;
&lt;p&gt;Multi-format adaptation is where the time savings become concrete. A campaign that runs across Instagram, Google Display, LinkedIn, and print doesn’t produce four separate briefs and four separate rounds of designer revisions. You describe the formats you need, and the agent adapts the work. The campaign stays consistent across all of them.&lt;/p&gt;
&lt;p&gt;The biggest shift isn’t speed, though that’s real. It’s that you stay in creative control throughout. There’s no handoff moment where you lose the thread and have to re-explain the brief to someone else. The context lives in the conversation.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://img.ly/blog/content/media/2026/05/01-delegate-catalogue-design--1-.mp4&quot; controls&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;how-to-run-a-campaign-production-session-with-codesign&quot;&gt;How to Run a Campaign Production Session with CoDesign&lt;/h2&gt;
&lt;p&gt;This is the actual sequence. Walk through it once and the workflow becomes repeatable.&lt;/p&gt;
&lt;p&gt;1.&lt;strong&gt;Start with the brief.&lt;/strong&gt; Open CoDesign and describe the campaign in plain language. Audience, objective, platform, tone, any constraints. The more specific you are here, the less iteration you’ll need later. Treat it like briefing a senior designer who hasn’t worked with your brand before.&lt;/p&gt;
&lt;p&gt;2.&lt;strong&gt;Generate copy variations before you open the canvas.&lt;/strong&gt; Use whichever AI writing tool you already work with — ChatGPT, Claude, or whatever is in your stack — to produce multiple copy directions: headline hooks, body copy, CTAs. Get four or five versions per element. Copy and design are separate steps that feed into each other. Having real options ready before you start the design session means CoDesign has something specific to work with, not a blank brief waiting to be interpreted.&lt;/p&gt;
&lt;p&gt;3.&lt;strong&gt;Feed the brief to the AI design companion.&lt;/strong&gt; With copy variations ready, ask CoDesign to generate initial ad designs. Describe the format, the hierarchy you want, any layout preferences. You’ll get structured, editable designs on the canvas. Not a rendered image, but a working starting point with real layers.&lt;/p&gt;
&lt;p&gt;4.&lt;strong&gt;Apply your brand kit.&lt;/strong&gt; If you haven’t already, load your brand assets: logo, color palette, type system, approved imagery. The agent applies these rules to the designs. Every output from this point respects your brand standards automatically.&lt;/p&gt;
&lt;p&gt;5.&lt;strong&gt;Adapt across formats.&lt;/strong&gt; Tell the agent which formats you need. The social variant, the display variant, the vertical for Stories, the square for feed. Watch the layouts adapt to each context, maintaining the campaign idea and brand consistency across dimensions. If the hierarchy needs adjusting for a specific format, describe what’s not working and the agent fixes it in conversation.&lt;/p&gt;
&lt;p&gt;6.&lt;strong&gt;Refine in conversation.&lt;/strong&gt; This is where the canvas-based approach earns its value. You’re not generating new versions from scratch. You’re iterating on what’s already there, in the same session. “Move the logo to the bottom right. Try the headline in the lighter weight. Swap this layout for something with more white space.” Each exchange builds on the last, so the conversation stays grounded in what’s on the canvas rather than starting over from a new prompt.&lt;/p&gt;
&lt;p&gt;7.&lt;strong&gt;Export and ship.&lt;/strong&gt; When the designs are approved, export in the formats your media plan requires. The session context lives with the file, so if something needs to change post-launch, you’re not starting from zero.&lt;/p&gt;
&lt;p&gt;One honest note: the quality of the output is proportional to the quality of the brief. Vague prompts produce generic starting points. Teams that invest two minutes in a specific, structured brief consistently get more usable first outputs than teams that describe the campaign in one sentence and expect the agent to fill in the gaps.&lt;/p&gt;
&lt;h2 id=&quot;this-is-what-closing-the-loop-actually-looks-like&quot;&gt;This Is What Closing the Loop Actually Looks Like&lt;/h2&gt;
&lt;p&gt;Design agents don’t replace designers. They remove the bottleneck that sits between strategy and execution.&lt;/p&gt;
&lt;p&gt;The marketer who used to wait three days for ad assets can now produce a full campaign set in a single session. The designer who spent half their week on format resizes and small-copy tweaks can spend that time on the work that genuinely requires their judgment. That means brand-defining creative, campaign concepts, and anything where taste and experience are the actual input.&lt;/p&gt;
&lt;p&gt;It was never about willingness to collaborate. The tools just didn’t allow for anything else. Every design change, no matter how small, had to go through a handoff. A headline adjustment on a banner resize does not need a creative director. A resize from 1:1 to 9:16 does not need a brief, a Slack message, and a 48-hour turnaround.&lt;/p&gt;
&lt;p&gt;Thanks to design agents conversation shifts. It moves from “can you make this” to “how should this look.” And that’s a way more interesting conversation.&lt;/p&gt;
&lt;p&gt;Interested in trying IMG.LY CoDesign? &lt;a href=&quot;https://img.ly/forms/contact-sales&quot;&gt;Reach out&lt;/a&gt; to our team.&lt;/p&gt;</content:encoded><dc:creator>Klaudia</dc:creator><media:content url="https://blog.img.ly/2026/04/page-1-export.png" medium="image"/><category>AI</category><category>Insights</category><category>Creative Workflows</category><category>Creative Automation</category></item><item><title>What Is an AI Design Agent?</title><link>https://img.ly/blog/what-is-a-design-agent/</link><guid isPermaLink="true">https://img.ly/blog/what-is-a-design-agent/</guid><description>&quot;Design agent&quot; is being used to mean two completely different things right now. Here&apos;s what it actually is - and why the distinction matters for creative teams and non-designers in 2026. </description><pubDate>Mon, 30 Mar 2026 04:52:01 GMT</pubDate><content:encoded>&lt;p&gt;The phrase “design agent” is being used in two completely different ways right now, and the confusion is worth clearing up before either meaning becomes the default. Search for it today and you’ll mostly find AI design agencies - services firms that use AI in their process. That’s a reasonable business, but it has nothing to do with what this article is about.&lt;/p&gt;
&lt;p&gt;The second meaning, a design agent as a category of AI tool, is the one that matters for product builders, developers, and creative teams trying to understand where AI-assisted design is actually going. That’s what we’re defining here: what it is, how it works, how it differs from tools you already know, and why the distinction matters if you’re building or evaluating creative software in 2026.&lt;/p&gt;
&lt;h2 id=&quot;first-what-an-ai-design-agent-is-not&quot;&gt;First, What an AI Design Agent Is Not&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;An AI design agency.&lt;/strong&gt; This is a services firm that uses AI tools in its creative process. It’s a completely different category - a service, not a tool - and it’s the most common result you’ll find when you search “design agent” right now.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;An AI image generator.&lt;/strong&gt; Midjourney, DALL-E, and similar tools produce images from text prompts. They generate a single output from a single instruction.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;An AI feature inside a design tool.&lt;/strong&gt; Figma’s AI suggestions, auto-layout assistance, and background removal are AI features. They augment a manual workflow making specific tasks faster.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;A design automation pipeline.&lt;/strong&gt; Server-side systems that batch-generate assets from templates are automation, not agency. They’re fast and scalable, but they don’t converse, can’t interpret an ambiguous brief, and don’t refine their output in response to feedback. The confusion here is understandable: modern automation systems use AI models internally and can produce polished, varied-looking results that are easy to mistake for something more intelligent. But give one an ambiguous brief and it either fails or produces something technically correct that misses the point entirely. Give a design agent the same brief and it asks a question. That distinction - executing a fixed process versus reasoning about intent - is what separates the two categories.&lt;/p&gt;
&lt;p&gt;The distinction matters because “design agent” is becoming a meaningful category term, and what it actually describes is different enough from all of the above that collapsing the distinctions creates real confusion, both for people evaluating tools and for people building products.&lt;/p&gt;
&lt;h2 id=&quot;ai-design-agent---a-working-definition&quot;&gt;AI Design Agent - a Working Definition&lt;/h2&gt;
&lt;p&gt;There is no settled definition of an AI design agent yet, the term is still early. Based on what we see in the tools that genuinely deliver on the promise, three properties distinguish a real design agent from something that merely resembles one:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;1. Autonomy.&lt;/strong&gt; The agent takes multi-step actions without requiring a human instruction at each step. Given “create a five-page product catalog in a Scandinavian minimal style,” it works out the layout, typography, and image placement independently and produces the result.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;2. Conversational interface.&lt;/strong&gt; The agent communicates in natural language. It can ask clarifying questions, explain what it’s done, and accept follow-up instructions. The interaction feels like briefing a designer, not operating software.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;3. Refinement loop.&lt;/strong&gt; The agent takes feedback across multiple conversation turns: “make the typography lighter,” “apply the brand’s warm color palette”, and updates the design accordingly. This iterative loop is what separates a design agent from a one-shot generation tool.&lt;/p&gt;
&lt;p&gt;A tool that has all three of these properties is a design agent. A tool that has one or two is something else; probably useful, but in a different category.&lt;/p&gt;
&lt;h2 id=&quot;how-an-ai-design-agent-works-in-practice&quot;&gt;How an AI Design Agent Works in Practice&lt;/h2&gt;
&lt;p&gt;&lt;video src=&quot;https://img.ly/blog/content/media/2026/03/01-delegate-catalogue-design--1--1.mp4&quot; controls&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;An abstract definition only takes you so far. Here’s what a fully implemented design agent workflow actually looks like, drawn from a real demo of IMG.LY CoDesign.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 1.&lt;/strong&gt; The user opens CoDesign. The agent interface - a chat panel - sits alongside the canvas. They’re in the same window.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 2.&lt;/strong&gt; The user types a brief: &lt;em&gt;“Here’s a CSV of five products from our furniture brand. Generate one landscape catalog page per product — two-column grid, full-bleed photo left, typography-led layout right. Clean, minimal. Think Hay, Muuto, Frama.”&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 3.&lt;/strong&gt; The agent processes the brief, the data, and any brand context it has access to. It generates a five-page catalog in the editor: product names, descriptions, prices, photo placeholders, layout structure consistent across all five pages.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 4.&lt;/strong&gt; The user reviews the output and follows up in the chat: &lt;em&gt;“Nice. Pre-fill the photo placeholders with black-and-white product photography, soft contrast.”&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 5.&lt;/strong&gt; The agent updates the design. The user manually adjusts one headline, corrects a price, and exports.&lt;/p&gt;
&lt;p&gt;The full workflow, from brief to print-ready output, took minutes rather than hours. The user never left the tool. The agent handled all structural and stylistic decisions. The human handled final judgment and small corrections.&lt;/p&gt;
&lt;p&gt;But generating layouts from a brief is only part of what a design agent can do. In the same chat interface, the agent can build functional decision-making tools directly inside the editor. Ask it to create a Color Themes panel, and it produces a working component: five named presets, each one applying a complete color theme across the entire design in a single click. The user doesn’t switch to a settings screen or manually update individual elements. The agent has built the control they need, right where they need it, as part of the same conversation. That’s a meaningfully different capability: not just producing a designed output, but constructing the tools that let the user make better decisions about that output as they finalize it.&lt;/p&gt;
&lt;h2 id=&quot;design-agents-vs-related-tools&quot;&gt;Design Agents vs. Related Tools&lt;/h2&gt;
&lt;p&gt;This table is meant as a fair comparison, each column represents how these tool categories actually behave today:&lt;/p&gt;















































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Capability&lt;/th&gt;&lt;th&gt;AI Image Generator&lt;/th&gt;&lt;th&gt;AI Design Features&lt;/th&gt;&lt;th&gt;Design Agent&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Takes a brief&lt;/td&gt;&lt;td&gt;Prompt only&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Produces editable layouts&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Partial&lt;/td&gt;&lt;td&gt;Depends on a tool&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Multi-step autonomy&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Conversational refinement&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Limited&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Brand / context awareness&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Partial&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Iterative across a session&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;The pattern here isn’t that design agents are better at everything - it’s that they operate at a different level of the workflow. Image generators and AI design features are task-level tools. A design agent is a workflow-level tool.&lt;/p&gt;
&lt;h2 id=&quot;the-autonomy-slider-why-human-control-still-matters&quot;&gt;The Autonomy Slider: Why Human Control Still Matters&lt;/h2&gt;
&lt;p&gt;One of the most important design decisions when building or evaluating a design agent is how much autonomy the AI exercises by default.&lt;/p&gt;
&lt;p&gt;Full autonomy is fast. The agent makes all decisions and presents a finished output. But it can produce results that don’t match the user’s actual intent, especially when the brief is ambiguous or the stakes are high.&lt;/p&gt;
&lt;p&gt;Minimal autonomy is safe. The agent only suggests, the human decides everything. But at that point, you’ve lost much of the value of having an agent in the first place.&lt;/p&gt;
&lt;p&gt;The best implementations give users what you might call an &lt;strong&gt;autonomy slider&lt;/strong&gt;: the ability to let the agent run with full independence on some tasks, take targeted direction on others, and step aside entirely when the user wants to edit manually. The right level of autonomy depends on the task and the user’s confidence, not a fixed setting applied uniformly across every interaction.&lt;/p&gt;
&lt;p&gt;For any design agent, this means the interface needs to let the user reach in and adjust manually, mid-workflow, without losing what the agent has already done. The agent and the editor have to exist in the same environment. Separate windows with an export step between them break the loop entirely.&lt;/p&gt;
&lt;h2 id=&quot;where-ai-design-agents-create-the-most-value&quot;&gt;Where AI Design Agents Create the Most Value&lt;/h2&gt;
&lt;p&gt;Not every creative workflow benefits equally from an AI agent. The scenarios where design agents consistently create the most value tend to fall into three categories:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;High-volume, high-variation creative production.&lt;/strong&gt; Marketing teams producing dozens of ad variants, e-commerce teams generating product imagery at scale, publishers creating template-based content in bulk. A team can brief the agent once: brand colors, copy, format specs, and get 40 properly formatted variants back in the time it would have taken to manually produce three, each one consistent with the last.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Non-designer users who need professional results.&lt;/strong&gt; Not everyone who needs to produce a designed output is a designer. Marketers, retailers, operations teams, small business owners - they know what they want but don’t have the tools or time to build it manually. A design agent gives them a way in that doesn’t require either.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Expert designers who want to explore faster.&lt;/strong&gt; Experienced designers using the agent to generate starting points, explore multiple directions quickly, or offload the time-consuming production work while retaining full control over the final result. A designer can spend 20 minutes reviewing six distinct layout directions the agent generated from a single brief, rather than a full afternoon building each one from scratch.&lt;/p&gt;
&lt;p&gt;These aren’t exhaustive categories, but they represent the use cases where the workflow-level shift actually changes what’s possible, not just what’s faster.&lt;/p&gt;
&lt;h2 id=&quot;a-different-kind-of-design-tool&quot;&gt;A Different Kind of Design Tool&lt;/h2&gt;
&lt;p&gt;A design agent makes creative work faster and more accessible. For designers who want to explore more directions in less time, and for non-designers who have always known what they wanted but lacked the tools to build it.&lt;/p&gt;
&lt;p&gt;That’s what IMG.LY Codesign is built around. It’s in early access now, inside a fully featured design editor - &lt;a href=&quot;https://img.ly/forms/contact-sales&quot;&gt;get in touch&lt;/a&gt; for early access.&lt;/p&gt;</content:encoded><dc:creator>Klaudia</dc:creator><media:content url="https://blog.img.ly/2026/03/what-s-a-design-agent.png" medium="image"/><category>AI</category><category>Insights</category></item><item><title>Vibe Design Tools Compared</title><link>https://img.ly/blog/vibe-design-tools-compared/</link><guid isPermaLink="true">https://img.ly/blog/vibe-design-tools-compared/</guid><description>Vibe design lets you describe what you want and get a polished result. But not all vibe design tools produce the same kind of output, and that difference shapes everything downstream. Here&apos;s how Stitch, Figma Make, Lovart, Adobe Firefly Boards, Canva Magic Studio and    IMG.LY CoDesign compare. </description><pubDate>Sun, 29 Mar 2026 03:51:56 GMT</pubDate><content:encoded>&lt;p&gt;Vibe coding gave non-technical people the ability to build software by describing what they wanted. The same shift is now happening with &lt;a href=&quot;https://img.ly/blog/what-is-vibe-design/&quot;&gt;vibe design&lt;/a&gt;. For the first time, a marketer, a retailer, or a small business owner can create a professional design exactly to their specification just by explaining it to an AI. No design skills required. No external tool. No waiting for a designer to become available.&lt;/p&gt;
&lt;p&gt;This article compares four tools leading that shift - what they do well, where they differ, and how to choose between them.&lt;/p&gt;
&lt;h2 id=&quot;tools-built-for-creators&quot;&gt;Tools Built for Creators&lt;/h2&gt;
&lt;p&gt;These tools represent the current state of standalone vibe design software. Each is genuinely good at what it does. The differences come down to what kind of work they’re built for.&lt;/p&gt;
&lt;h3 id=&quot;google-stitch&quot;&gt;Google Stitch&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://stitch.withgoogle.com&quot;&gt;Google Stitch&lt;/a&gt; is an AI-native design canvas from Google Labs, launched for public beta in early 2026. It accepts text, voice, images, and code as input and produces high-fidelity UI designs and interactive prototypes on an infinite canvas. Its design agent can reason across an entire project rather than just the current frame - a meaningful step beyond tools that only operate on one screen at a time.&lt;/p&gt;
&lt;p&gt;Stitch introduces a DESIGN.md file format for exporting and importing design rules across tools, and it connects to Cursor, Claude Code, and Gemini CLI via an MCP server. It’s available free during beta with monthly generation limits, and it’s clearly aimed at UI/UX designers and developers building product interfaces - not marketing or graphic design work.&lt;/p&gt;
&lt;h3 id=&quot;figma-make&quot;&gt;Figma Make&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://figma.com/make&quot;&gt;Figma Make&lt;/a&gt; takes natural language prompts or existing Figma designs and produces working prototypes and web apps - functional code, not just mockups, with optional Supabase backend integration. Because it lives inside Figma, it has access to your existing design libraries, component systems, and tokens from the start.&lt;/p&gt;
&lt;p&gt;It’s best understood as a rapid ideation and prototyping tool. It generates interactive, working outputs fast, but the code benefits from developer review before going to production. It’s distinct from Figma Sites, which handles actual publishing. AI credits are required for usage.&lt;/p&gt;
&lt;h3 id=&quot;lovart&quot;&gt;Lovart&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://lovart.ai&quot;&gt;Lovart&lt;/a&gt; is a standalone AI design agent founded by a former ByteDance senior product director. Its scope goes well beyond graphic asset creation: from a single prompt, it can generate brand identity systems, UI mockups, video content, packaging designs, and full marketing campaigns. It uses a proprietary MCoT (Mind Chain of Thought) reasoning engine designed to mimic how a creative director thinks - analyzing business context, target audience, and brand requirements, not just aesthetic style.&lt;/p&gt;
&lt;p&gt;Its infinite canvas continuously analyzes all assets present to maintain visual consistency across an entire project, and outputs are compatible with Figma, Photoshop, and After Effects. Lovart is positioned for marketing creatives, solo designers, and small creative teams who need to produce full campaigns without a large agency.&lt;/p&gt;
&lt;h3 id=&quot;adobe-firefly-boards&quot;&gt;Adobe Firefly Boards&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://firefly.adobe.com&quot;&gt;Adobe Firefly Boards&lt;/a&gt; is Adobe’s AI-first collaborative ideation canvas, built for creative professionals who need to move quickly from inspiration to concept. It lives inside the Adobe Firefly web app and mobile apps (iOS and Android), and syncs with Creative Cloud so work can move from moodboard to production without switching platforms.&lt;/p&gt;
&lt;p&gt;The core of Boards is an infinite multimedia canvas where you bring in text prompts, reference images, video clips, and Adobe Stock assets, then generate across all of them at once. What makes it unusual is the model breadth: Boards gives you access to Adobe’s own Firefly models alongside partner models from Runway, Pika, Luma AI, Google Veo, Black Forest Labs, and others—all inside the same workspace. Outputs are images, video clips, text overlays, and assembled mood boards or storyboards, and every generated asset carries Content Credentials that automatically record which AI model produced it.&lt;/p&gt;
&lt;h3 id=&quot;canva-magic-studio&quot;&gt;Canva Magic Studio&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.canva.com/magic/&quot;&gt;Canva Magic Studio&lt;/a&gt; is a suite of more than 15 AI-powered tools embedded directly into the Canva editor on web, mobile, and desktop. It’s not a separate app—if you’re already a Canva user, you’re already inside Magic Studio.&lt;/p&gt;
&lt;p&gt;The suite covers writing, image generation, video creation, format switching, and multi-language translation, all accepting text prompts, uploaded media, documents, and existing canvas elements as input. Brand Kit integration is what distinguishes it from more isolated AI generation tools: when you generate a design through Magic Design, it pulls from your saved Brand Kit—logo, colors, fonts—rather than producing something generically styled. That keeps AI-generated output on-brand without manual cleanup.&lt;/p&gt;
&lt;p&gt;The trade-off is structural. Canva outputs are flat exports within a consumer-grade editor, not structured design objects you can manipulate at the element level. Generations are fast and on-brand, but the editing ceiling is Canva’s editor—for users who need granular creative control or complex asset structures, that’s a real constraint, not just a preference.&lt;/p&gt;
&lt;h3 id=&quot;imgly-codesign&quot;&gt;IMG.LY CoDesign&lt;/h3&gt;
&lt;p&gt;IMG.LY CoDesign is AI-powered design companion built for creators and teams producing marketing materials, branded content, social assets, and multi-format campaigns. What sets it apart from other standalone tools is how it treats AI output: every element CoDesign generates is a structured, editable design object on the canvas - not a flat image to export and rebuild elsewhere. Move a headline, swap a font, resize a block, change a color - directly in the same tool that generated it.&lt;/p&gt;
&lt;p&gt;The agent and the editor aren’t two modes. They’re the same tool. You can prompt a direction, refine it in conversation, and take over the canvas directly at any point - without switching tools, exporting, or starting over. CoDesign also goes beyond the canvas: ask it to build a brand panel, a form-based template, or a custom configurator, and it builds that too - directly inside the editor, from the same prompt interface.&lt;/p&gt;
&lt;p&gt;Here is a quick demo to showcase what IMG.LY CoDesign can do.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://img.ly/blog/content/media/2026/03/AI-first.mp4&quot; controls&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;vibe-design-tools-at-a-glance&quot;&gt;Vibe Design Tools at a Glance&lt;/h2&gt;































































































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Google Stitch&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Figma Make&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Lovart&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Adobe Firefly Boards&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Canva Magic Studio&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;IMG.LY CoDesign&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Primary use&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;UI/UX design from prompts&lt;/td&gt;&lt;td&gt;Prompt-to-prototype / app&lt;/td&gt;&lt;td&gt;Full campaign and brand creation&lt;/td&gt;&lt;td&gt;AI-first concepting and moodboarding&lt;/td&gt;&lt;td&gt;AI design generation inside Canva editor&lt;/td&gt;&lt;td&gt;AI-assisted design for creators and teams&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Where it lives&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Google (standalone web app)&lt;/td&gt;&lt;td&gt;Inside Figma&lt;/td&gt;&lt;td&gt;Lovart (standalone)&lt;/td&gt;&lt;td&gt;Adobe Firefly web + mobile; syncs with Creative Cloud&lt;/td&gt;&lt;td&gt;Inside Canva (web, mobile, desktop)&lt;/td&gt;&lt;td&gt;IMG.LY&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Input types&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Text, voice, images, code&lt;/td&gt;&lt;td&gt;Text, existing Figma designs&lt;/td&gt;&lt;td&gt;Text, images, brand briefs&lt;/td&gt;&lt;td&gt;Text, images, video, Adobe Stock assets&lt;/td&gt;&lt;td&gt;Text, images, video, documents, existing design elements&lt;/td&gt;&lt;td&gt;Text, images, CSV, brand kits&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Output type&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;UI designs and prototypes&lt;/td&gt;&lt;td&gt;Interactive prototypes and web apps&lt;/td&gt;&lt;td&gt;Brand assets, campaigns, video, packaging&lt;/td&gt;&lt;td&gt;Images, video, text overlays, mood boards, storyboards&lt;/td&gt;&lt;td&gt;Images, video, presentations, styled text, format-converted designs&lt;/td&gt;&lt;td&gt;Editable multi-page designs, videos, animations&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Output format&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Flat / exportable&lt;/td&gt;&lt;td&gt;Code / exportable&lt;/td&gt;&lt;td&gt;Flat / exportable&lt;/td&gt;&lt;td&gt;Flat / exportable; Content Credentials attached&lt;/td&gt;&lt;td&gt;Flat / exportable within Canva editor&lt;/td&gt;&lt;td&gt;Structured editable objects on canvas&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Brand context&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Manual per session&lt;/td&gt;&lt;td&gt;Via Figma design system&lt;/td&gt;&lt;td&gt;Canvas-aware within session&lt;/td&gt;&lt;td&gt;Enterprise Custom Models; personal library import&lt;/td&gt;&lt;td&gt;Brand Kit applied automatically at generation&lt;/td&gt;&lt;td&gt;Loaded at session start&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;In-chat UI generation&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Multi-model AI&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes (Runway, Pika, Luma, Google Veo, BFL, and more)&lt;/td&gt;&lt;td&gt;No (Dream Lab uses Leonardo.ai Phoenix)&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Best for&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Product designers, developers&lt;/td&gt;&lt;td&gt;Product teams in Figma ecosystem&lt;/td&gt;&lt;td&gt;Marketing creatives, solo designers&lt;/td&gt;&lt;td&gt;Creative professionals doing concepting and ideation&lt;/td&gt;&lt;td&gt;Non-designers and content teams needing fast, on-brand output&lt;/td&gt;&lt;td&gt;Creators and teams needing editable AI-generated design&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;For a detailed breakdown of how Canva Magic Studio compares to CoDesign specifically, see &lt;a href=&quot;https://img.ly/imgly-codesign-vs-canva-magic-studio&quot;&gt;Canva Magic Studio vs. CoDesign&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;how-to-choose&quot;&gt;How to Choose&lt;/h2&gt;
&lt;p&gt;The criteria here aren’t about feature counts. They’re about the kind of work you’re doing.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Choose Google Stitch if&lt;/strong&gt; you’re a product designer or developer building UI and want an AI agent that reasons across your whole project, not just individual screens. It’s the most technically connected of the six—MCP server, code input, DESIGN.md export—and it’s clearly built for product interface work.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Choose Figma Make if&lt;/strong&gt; you’re already in the Figma ecosystem and want to go from prompt to working prototype fast. It inherits your design system automatically, which removes a lot of setup friction, and it outputs functional code rather than static designs.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Choose Lovart if&lt;/strong&gt; you need to produce full creative campaigns—brand identity, packaging, video, marketing assets—from a single prompt. Its MCoT reasoning engine and canvas-level consistency analysis make it particularly strong for high-volume marketing creative work.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Choose Adobe Firefly Boards if&lt;/strong&gt; you’re a creative professional working inside the Adobe ecosystem who needs to generate and align on large volumes of visual concepts before moving them into production. It’s the right call for designers, photographers, and creative directors doing serious concepting work that will ultimately land in Photoshop, Premiere, or Illustrator.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Choose Canva Magic Studio if&lt;/strong&gt; you need fast, on-brand creative output and your users aren’t designers. Magic Studio’s Brand Kit integration means generated designs pull from your saved colors, fonts, and logos automatically—no cleanup, no manual adjustment. It’s not the tool for pixel-level creative control, but for marketing teams and content creators producing high volumes across multiple formats and channels, that’s rarely the priority.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Choose CoDesign if&lt;/strong&gt; you need AI-generated output you can actually edit. Every element lands on the canvas as a structured design object—headline, image block, color field—not a flat export. That matters when the brief changes, the brand needs adjusting, or the output needs to become ten variations rather than one. For creators and teams producing branded content at scale, that editability is the difference between a starting point and a finished asset.&lt;/p&gt;
&lt;p&gt;CoDesign is in early access. Be among the first to prompt a direction and walk away with a design you can actually use. &lt;a href=&quot;https://img.ly/forms/contact-sales&quot;&gt;Talk to our team&lt;/a&gt; to learn more.&lt;/p&gt;</content:encoded><dc:creator>Klaudia</dc:creator><media:content url="https://blog.img.ly/2026/03/vibedesign-tool-comparison-1.png" medium="image"/><category>AI</category><category>Insights</category></item><item><title>What Is Vibe Design? The Definitive Guide for Product Builders, Designers, and Creative Teams</title><link>https://img.ly/blog/what-is-vibe-design/</link><guid isPermaLink="true">https://img.ly/blog/what-is-vibe-design/</guid><description>Vibe design just got a name - but the shift it describes has been building for years. Here&apos;s what it actually means, where it came from, and what it means if you&apos;re building a product where users create things.</description><pubDate>Fri, 20 Mar 2026 17:23:51 GMT</pubDate><content:encoded>&lt;h2 id=&quot;vibe-design---a-concept-that-just-got-a-name&quot;&gt;Vibe Design - A Concept That Just Got a Name&lt;/h2&gt;
&lt;p&gt;Creative work has always involved describing an idea and having someone skilled make it real. Vibe design follows the same principle — except the “someone” is AI, ready whenever you are, no brief needed. You describe what you want through text, images, brand assets, or sketches, and the AI generates the design. You direct the process; the tool handles the making.&lt;/p&gt;
&lt;p&gt;The term itself is not new but was brought into mainstream use in early 2026 by Google via their &lt;a href=&quot;https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/&quot;&gt;Stitch announcement&lt;/a&gt;, and within a day it was appearing across The Register, CNBC, and TechRadar. The practice it describes had been building for well over a year — in Figma’s AI features, in generative design tools, in the growing number of products letting users create from a prompt rather than from a toolbox.&lt;/p&gt;
&lt;p&gt;Today, we’ll define what vibe design actually is, traces where the idea came from, and explains what it means for people building products.&lt;/p&gt;
&lt;h2 id=&quot;where-the-term-comes-from-vibe-codings-design-sibling&quot;&gt;Where the Term Comes From: Vibe Coding’s Design Sibling&lt;/h2&gt;
&lt;p&gt;To understand vibe design, it helps to start with the concept it’s directly descended from: vibe coding.&lt;/p&gt;
&lt;p&gt;Former Director of AI at Tesla and co-founder of OpenAI, &lt;a href=&quot;https://x.com/karpathy/status/1886192184808149383&quot;&gt;Andrej Karpathy coined “vibe coding” in early 2025&lt;/a&gt; to describe a shift in how developers work with AI-generated code. The idea: instead of writing implementation yourself, you describe what you want in natural language and an AI writes the code. The developer’s role shifts from implementation to direction. You stop thinking about &lt;em&gt;how&lt;/em&gt; things are built and focus entirely on &lt;em&gt;what&lt;/em&gt; you want to create.&lt;/p&gt;
&lt;p&gt;Vibe design is the same shift applied to visual creation. Instead of opening a design tool and manually placing elements, adjusting colors, choosing fonts and spacing, you describe what you want — in words, or by uploading a reference image, a photo, a sketch, a brand kit — and the design takes shape. The phrase “vibe coding design” captures this lineage neatly: it’s the same intent-first principle, moved from engineering into the visual layer.&lt;/p&gt;
&lt;p&gt;The underlying movement had been gathering momentum since AI image generators went mainstream, accelerating rapidly as tools like Figma Make, Lovart, and now Google Stitch brought the concept directly into design workflows. The label arrived late to a trend that had already changed how a lot of creative work gets done.&lt;/p&gt;
&lt;h2 id=&quot;what-vibe-design-actually-means-a-working-definition&quot;&gt;What Vibe Design Actually Means: A Working Definition&lt;/h2&gt;
&lt;p&gt;Here is a working definition that holds up across tools and use cases:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Vibe design is a creative workflow in which the primary input is intent — described in natural language or visual references — rather than manual manipulation of design tools. The designer’s role becomes one of direction, curation, and refinement rather than construction.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Three things define a genuine vibe design workflow:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;1. Intent-first input.&lt;/strong&gt; The starting point is a brief, a description, a reference image, or a combination — not a blank canvas and a toolbox. You’re communicating what you want, not building it.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;2. Generative execution.&lt;/strong&gt; An AI interprets that intent and produces a designed output — a layout, a color scheme, a complete page, a set of variations. The construction step is handled by the system.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;3. Human refinement in the loop.&lt;/strong&gt; The human stays involved throughout — approving directions, adjusting outputs, steering away from things that don’t work. The AI handles execution; the human handles judgment.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;What vibe design is not:&lt;/strong&gt; it’s not simply using an AI image generator to produce pictures. Image generation is one possible input &lt;em&gt;into&lt;/em&gt; a vibe design workflow, not the workflow itself. Vibe design produces editable, structured design outputs — layouts, components, documents, campaigns — not static images. The output is something you can work with, not just something you can look at.&lt;/p&gt;
&lt;h2 id=&quot;how-it-differs-from-ai-assisted-design&quot;&gt;How It Differs from AI-Assisted Design&lt;/h2&gt;
&lt;p&gt;“AI-assisted design” has covered a lot of ground over the past few years: autocomplete for design tokens, background removal, content generation within a layout. These are useful additions to a manual workflow. But in all of them, the designer still drives — AI is a tool called on for specific tasks while the human remains in the seat.&lt;/p&gt;
&lt;p&gt;Vibe design flips the ratio. The AI drives the initial creation; the human steers and refines. It’s a different relationship with the tool, not a faster version of the same one.&lt;/p&gt;
&lt;p&gt;The distinction matters because it changes three things:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;What skills are most useful.&lt;/strong&gt; Writing clear, directed prompts and making fast curatorial judgments matters more than knowing every keyboard shortcut.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;What the workflow looks like.&lt;/strong&gt; You’re reviewing and steering outputs rather than constructing from scratch.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;What software is relevant.&lt;/strong&gt; Vibe design tools are built around a different interaction model than tools built to accelerate traditional manual design.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;vibe-design-in-practice-three-scenarios&quot;&gt;Vibe Design in Practice: Three Scenarios&lt;/h2&gt;
&lt;p&gt;The best way to make this concrete is to show what an AI design workflow built around vibe design actually looks like. These three scenarios cover the range of contexts where it’s becoming relevant.&lt;/p&gt;
&lt;h3 id=&quot;scenario-1-a-marketing-team-no-designer-available&quot;&gt;Scenario 1: A Marketing Team, No Designer Available&lt;/h3&gt;
&lt;p&gt;A marketing manager at a mid-sized e-commerce brand needs a product launch campaign for social media. There’s no designer available this week — they’re tied up on a bigger project.&lt;/p&gt;
&lt;p&gt;She opens the creative tool embedded in their marketing platform, uploads the product photo and the brand guidelines, and types: &lt;em&gt;“Create a campaign for our summer collection — clean, minimal, white space heavy, headline-driven.”&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;She receives a set of formatted, brand-consistent assets sized for each social channel. The layouts are on-brand. The typography follows the guidelines she uploaded. She adjusts the headline copy on two of the assets and swaps one background color. The whole thing takes 12 minutes.&lt;/p&gt;
&lt;p&gt;No design skills required. No third-party tool. No waiting for a designer to become available. The campaign goes out on schedule.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://img.ly/blog/content/media/2026/03/4-UI-panel-color-themer.mp4&quot; controls&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h3 id=&quot;scenario-2-a-designer-exploring-variations&quot;&gt;Scenario 2: A Designer Exploring Variations&lt;/h3&gt;
&lt;p&gt;A senior designer is working on a brand campaign for a luxury lifestyle client. She’s settled on a layout she likes, but she can’t land on the right color direction — everything she’s tried manually feels either too cold or too safe, and exporting variations to compare them side by side is eating time she doesn’t have.&lt;/p&gt;
&lt;p&gt;Instead, she types a single instruction into the agent chat: &lt;em&gt;“Add a panel on the left with five color theme presets I can click to instantly apply to my design.”&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;The agent builds the panel directly inside the editor. Five named presets — Warm Sand, Midnight, Rose Quartz, Forest, Slate Blue — each applying a complete color theme across the entire design in one click: backgrounds, accents, headings, body text, all updated together. She works through all five in under a minute and finds the direction she was looking for without typing another prompt.&lt;/p&gt;
&lt;p&gt;The variation-exploration workflow, at its most useful, doesn’t just produce more outputs — it builds the tools you need to make the decision faster.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://img.ly/blog/content/media/2026/03/01-delegate-catalogue-design--1-.mp4&quot; controls&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h3 id=&quot;scenario-3-a-product-team-embedding-creative-capability&quot;&gt;Scenario 3: A Product Team Embedding Creative Capability&lt;/h3&gt;
&lt;p&gt;A print-on-demand platform serves retailers and small brands who need to produce product catalogues regularly but don’t have in-house design resource. One of their customers — a retailer for a furniture brand — opens the editor, pastes a CSV of five products into the agent chat, and describes the layout style she wants: two-column landscape, typography-led, minimal, referencing the aesthetic of Hay, Muuto, and Frama.&lt;/p&gt;
&lt;p&gt;The agent generates a complete five-page catalogue inside the editor — one page per product, consistent layout throughout, with product names, descriptions, prices, and photo placeholders already in place. She follows up in plain language: &lt;em&gt;“Pre-fill the photo placeholders with elegant product photography, make them black and white, soft contrast.”&lt;/em&gt; The agent updates all five pages. She adjusts one headline manually and exports.&lt;/p&gt;
&lt;h2 id=&quot;the-vibe-design-tools-shaping-the-space-right-now&quot;&gt;The Vibe Design Tools Shaping the Space Right Now&lt;/h2&gt;
&lt;p&gt;Several tools are explicitly built around this workflow.&lt;/p&gt;



































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Tool&lt;/th&gt;&lt;th&gt;What it does&lt;/th&gt;&lt;th&gt;Where the agent lives&lt;/th&gt;&lt;th&gt;Best for&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Google Stitch&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Voice and text prompts to UI design&lt;/td&gt;&lt;td&gt;Google’s standalone tool&lt;/td&gt;&lt;td&gt;UI/UX designers, developers&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Figma Make&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Prompt to prototype inside Figma&lt;/td&gt;&lt;td&gt;Inside Figma (standalone)&lt;/td&gt;&lt;td&gt;Product designers working in Figma&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Lovart&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;AI design agent for graphic creation&lt;/td&gt;&lt;td&gt;Lovart’s standalone platform&lt;/td&gt;&lt;td&gt;Marketing creatives, solo designers&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;IMG.LY&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Design companion for all types of design works and tasks&lt;/td&gt;&lt;td&gt;IMG.LY Codesign studio&lt;/td&gt;&lt;td&gt;Designers, marketers, brand owners&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;&lt;strong&gt;Google Stitch&lt;/strong&gt; is built around the idea that UI design should start with a conversation. You describe a screen — its purpose, the actions it needs to support, the general feel — and Stitch produces an interface design you can refine. It’s aimed at developers and UI/UX designers who want to move faster in the early stages of building a product interface. Where it works well is in getting from a rough idea to a structured screen layout without having to make every decision from scratch.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Figma Make&lt;/strong&gt; extends the environment that product designers already work in. Because it lives inside Figma, it has access to your existing components, tokens, and design system. The prompt-to-prototype workflow is useful for designers who want to explore how a brief might translate into a working layout without manually composing every frame. Its biggest advantage is that the output lands directly in a space where a full design team can take over.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Lovart&lt;/strong&gt; is focused on graphic and campaign creation rather than UI or product design. It’s built for the kind of work that marketing creatives and solo designers do a lot of — producing visual assets for social, campaigns, brand activations. The emphasis is on speed and aesthetic quality for graphic outputs rather than on structured, component-based design systems.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;IMG.LY&lt;/strong&gt; brings a design companion together with manual canvas edits - each element created by AI can be manually moved, changed, or adapted. It maintains brand and template context throughout the generation process, redefining the meaning of templates - from simple asset with placeholders, to true brand guideliness. Excels at number of import and export options, making a great options for true graphic and asset designs.&lt;/p&gt;
&lt;h2 id=&quot;where-vibe-design-has-limits&quot;&gt;Where Vibe Design Has Limits&lt;/h2&gt;
&lt;p&gt;Vibe design works well when there’s something to work from — a reference image, a brand kit, an existing visual direction. When there’s genuinely nothing to draw from, outputs tend toward the generic. A completely new brand identity with no existing visual language is a poor fit for a vibe design workflow; that kind of work still benefits from the deliberate, decision-by-decision process of traditional design.&lt;/p&gt;
&lt;p&gt;It’s also less suited to accessibility-critical UI, where precise specification — contrast ratios, touch targets, interaction states — matters more than mood or aesthetic direction. A generated layout might look right without being accessible, and catching that requires careful manual review.&lt;/p&gt;
&lt;p&gt;Finally, the more technically constrained the brief, the more refinement the output will need. Vibe design compresses the path to a starting point; it doesn’t always compress the path to a final, production-ready output. Teams that go in expecting to iterate will get more out of it than teams that expect to export and ship.&lt;/p&gt;
&lt;h2 id=&quot;the-human-element-vibe-design-is-not-autonomous-design&quot;&gt;The Human Element: Vibe Design Is Not Autonomous Design&lt;/h2&gt;
&lt;p&gt;A common concern about vibe design workflows is that they reduce the role of skill and judgment in creative work. The evidence so far points the other way.&lt;/p&gt;
&lt;p&gt;The most effective workflows keep the human firmly in control of direction, curation, and final judgment. The AI generates; the human decides what’s good, what fits the brief, what needs to change. Removing that layer doesn’t improve outcomes — it just produces more output with no quality filter.&lt;/p&gt;
&lt;p&gt;What changes is not &lt;em&gt;whether&lt;/em&gt; human judgment matters, but &lt;em&gt;at which stage&lt;/em&gt; it matters most. In a traditional design workflow, judgment is exercised continuously — at every click, every color choice, every alignment decision. In a vibe design workflow, judgment operates at a higher level: Is this the right direction? Does this match the intent? What needs to change?&lt;/p&gt;
&lt;p&gt;The craft is still there. The instruments are different.&lt;/p&gt;
&lt;h2 id=&quot;a-shift-thats-already-underway&quot;&gt;A Shift That’s Already Underway&lt;/h2&gt;
&lt;p&gt;Vibe design isn’t a trend arriving from the future. It’s a name for a shift that’s been building for several years and just became visible enough to label properly.&lt;/p&gt;
&lt;p&gt;The creative AI tools exist. The workflows are being adopted. The user expectation is forming. Naming the practice in 2026 didn’t create the movement — it just gave it a shared vocabulary that makes it easier to talk about and build toward.&lt;/p&gt;
&lt;p&gt;If what you’re looking for is a balance between manual control of the output and power of AI generation, IMG.LY Codesign might be the right fit for you. &lt;a href=&quot;https://img.ly/forms/contact-sales&quot;&gt;Talk to our team&lt;/a&gt; to see how it can fit inside your stack.&lt;/p&gt;</content:encoded><dc:creator>Klaudia</dc:creator><media:content url="https://blog.img.ly/2026/03/vibedesign-tools-ai.jpg" medium="image"/><category>AI</category><category>Agent Skills</category><category>Insights</category></item><item><title>CE.SDK v1.69 Release Notes</title><link>https://img.ly/blog/creative-editor-sdk-v-1-69-0-release-notes/</link><guid isPermaLink="true">https://img.ly/blog/creative-editor-sdk-v-1-69-0-release-notes/</guid><description>Agent Skills turns your AI coding assistant into a CE.SDK expert. Ship editors in minutes, not days — plus Starter Kits, PPTX import, and video editor updates.</description><pubDate>Fri, 27 Feb 2026 18:29:53 GMT</pubDate><content:encoded>&lt;p&gt;&lt;strong&gt;v1.69 is the biggest developer experience release we’ve shipped.&lt;/strong&gt; &lt;em&gt;Agent Skills&lt;/em&gt; collapse the time from idea to working editor from days to under a minute. Production-ready &lt;em&gt;Starter Kits&lt;/em&gt; eliminate days of boilerplate setup. &lt;em&gt;PPTX and Canva Importer&lt;/em&gt; lets users bring their existing designs directly into your editor. And a comprehensive video overhaul across Web, iOS, and Android closes the gap between CE.SDK and native professional editing apps.&lt;/p&gt;
&lt;p&gt;Let’s dive in!&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;introducing-imgly-agent-skills-for-cesdk&quot;&gt;Introducing IMG.LY Agent Skills for CE.SDK&lt;/h2&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/agent-skill-design-editor-photo-editor-video-whitelabel-sdk.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The biggest change to CE.SDK’s developer experience since launch.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;AI agents have changed how developers build. With Agent &lt;em&gt;Skills&lt;/em&gt;, CE.SDK works natively with your AI agent.&lt;/p&gt;
&lt;p&gt;Install the plugin for Claude Code or Cursor and your AI coding agent becomes a CE.SDK expert with bundled access to guides, API references, and starter kits across 10 web frameworks. No external services, no MCP servers, no context-switching.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;What your developers can now do:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;/cesdk:build&lt;/code&gt;&lt;/strong&gt; — Describe a use case in plain language. The agent detects the framework, pulls the right starter kit, and scaffolds a working project autonomously.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;/cesdk:explain&lt;/code&gt;&lt;/strong&gt; — Ask any CE.SDK implementation question and get answers adapted to the specific framework and experience level.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;/cesdk:docs-[framework]&lt;/code&gt;&lt;/strong&gt; — Retrieve guides and API references directly from the IDE, without leaving the editor.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1776px) 1776px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1776&quot; height=&quot;1073&quot; src=&quot;https://img.ly/_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_12CM98.webp&quot; srcset=&quot;/_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_cxfWW.webp 640w, /_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_Z2mwpJi.webp 750w, /_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_ZsXQRr.webp 828w, /_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_Z1sPy8p.webp 1080w, /_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_Z1B7SY3.webp 1280w, /_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_2wKax1.webp 1668w, /_astro/build-photo-editor-video-editor-with-claude-codex-ai-chatgpt-1_12CM98.webp 1776w&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;For your product, this means:&lt;/strong&gt; developers prototype in minutes, not days. Non-technical team members can now build and extend functional editors independently. And onboarding new engineers to CE.SDK shrinks from a multi-day ramp to a single session.&lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://img.ly/blog/img-ly-agent-skills-web/&quot;&gt;Quick Start &amp;#x26; Full Announcement&lt;/a&gt;&lt;br&gt;
→ &lt;a href=&quot;https://img.ly/docs/cesdk/js/get-started/agent-skills-f7g8h9/?ref=img.ly&quot;&gt;Explore Agent Skills Documentation&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;launch-in-minutes-with-production-ready-starter-kits-for-web&quot;&gt;Launch in Minutes with Production-Ready Starter Kits for Web&lt;/h2&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/starterkits-web-photo-editor-video-editor-design-sdk.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Previously, getting CE.SDK running in a real product meant adapting complex demo projects: stripping features, adjusting architecture, and undoing assumptions baked into example code.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Starter Kits replace all of that with pre-configured, production-ready editor UIs.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Specialized kits for Photo, Video, and Design editors are scoped, clean, and immediately deployable. Each kit starts with a focused feature set. You explicitly opt in to what you need, so your UI stays performant and your users don’t see capabilities they can’t use.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;For your product, this means:&lt;/strong&gt; a functional, shippable editor in minutes rather than days of setup. Clean architecture from day one, without accumulating technical debt.&lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://img.ly/docs/cesdk/js/get-started/vanilla-js/quickstart-yef23s/&quot;&gt;Explore Starter Kit Documentation&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;let-users-bring-their-pptx--canva-designs-to-cesdk&quot;&gt;Let Users Bring Their PPTX &amp;#x26; Canva Designs to CE.SDK&lt;/h2&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/pptx-canva-importer-import-canva-designs.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Some customers don’t start from scratch. They have existing creative assets locked inside PowerPoint and Canva — and until now, bringing those into CE.SDK required manual recreation.&lt;/p&gt;
&lt;p&gt;The new PPTX Importer removes that barrier.&lt;/p&gt;
&lt;p&gt;Users can import native PowerPoint files or export &lt;strong&gt;Canva designs&lt;/strong&gt; as PPTX and bring them directly into your CE.SDK-powered editor, with layouts, elements, and structure intact.&lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://img.ly/showcases/cesdk/pptx-template-import/web&quot;&gt;Try the PPTX Import Demo&lt;/a&gt;&lt;br&gt;
→ &lt;a href=&quot;https://www.npmjs.com/package/@imgly/pptx-importer&quot;&gt;View PPTX npm&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;professional-grade-video-editing-across-platforms&quot;&gt;Professional-Grade Video Editing Across Platforms&lt;/h2&gt;
&lt;p&gt;This release expands CE.SDK’s video features across web &amp;#x26; mobile platforms.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Control Video Speed (iOS &amp;#x26; Android)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/slow-speed-on-reel-tiktok-videos-sdk.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Users can now adjust the playback speed of video and audio clips via a dedicated Speed UI. This has been one of the most-requested mobile features and is now available on both platforms.&lt;br&gt;
→ &lt;a href=&quot;https://img.ly/docs/cesdk/ios/create-video/control-daba54/#playback-speed&quot;&gt;View Video Speed Documentation iOS&lt;/a&gt;&lt;br&gt;
→ &lt;a href=&quot;https://img.ly/docs/cesdk/android/create-video/control-daba54/#playback-speed&quot;&gt;View Video Speed Documentation Android&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Create Video Groups in the Timeline (Web)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/group-timeline-tracks.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Multiple clips can now be combined into a single manageable unit with synchronized timing, trimming, and a unified timeline representation.&lt;/p&gt;
&lt;p&gt;This enables complex, multi-layer content production and speeds up the design process.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Video Timeline Now Grows Automatically (Web)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/growing-timeline.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;The timeline now automatically adjusts its height based on content. Manual track configuration is gone, and complex projects are easier to pick up for your new users.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Use a Clutter-Free iOS Timeline (iOS)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1480px) 1480px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1480&quot; height=&quot;643&quot; src=&quot;https://img.ly/_astro/cleaner-timeline-ios_Z2dSo4V.webp&quot; srcset=&quot;/_astro/cleaner-timeline-ios_Z1WUXrE.webp 640w, /_astro/cleaner-timeline-ios_oyW7s.webp 750w, /_astro/cleaner-timeline-ios_ZIo5JJ.webp 828w, /_astro/cleaner-timeline-ios_Z2rAzq6.webp 1080w, /_astro/cleaner-timeline-ios_clzDW.webp 1280w, /_astro/cleaner-timeline-ios_Z2dSo4V.webp 1480w&quot;&gt;&lt;/p&gt;
&lt;p&gt;Non-video tracks now show a single thumbnail per clip, reducing clutter in multi-layer timelines on your iOS app.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;full-changelog&quot;&gt;Full Changelog&lt;/h2&gt;
&lt;p&gt;See all technical details, breaking changes, and performance improvements in the &lt;a href=&quot;https://img.ly/docs/cesdk/changelog/v1-69-0/&quot;&gt;v1.69.0 Changelog.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Thank you for building with IMG.LY.&lt;/em&gt;&lt;/p&gt;</content:encoded><dc:creator>Neslihan</dc:creator><media:content url="https://blog.img.ly/2026/02/creative-editor-sdk-v169-imgly-whitelabel-design-editor-video-editor-react.jpg" medium="image"/><category>Release Notes</category><category>CE.SDK</category><category>Agent Skills</category><category>Agentic Development</category><category>AI</category><category>Starter Kits</category></item><item><title>Introducing IMG.LY Agent Skills</title><link>https://img.ly/blog/img-ly-agent-skills-web/</link><guid isPermaLink="true">https://img.ly/blog/img-ly-agent-skills-web/</guid><description>Inject CE.SDK expertise into your IDE with Agent Skills—turning AI assistants into autonomous implementation partners, building editors in minutes.</description><pubDate>Mon, 16 Feb 2026 18:54:06 GMT</pubDate><content:encoded>&lt;p&gt;&lt;strong&gt;TL;DR&lt;/strong&gt;&lt;br&gt;
We are moving beyond static documentation. &lt;em&gt;IMG.LY Agent Skills&lt;/em&gt; is a specialized intelligence layer that transforms AI coding assistants (Claude Code, Cursor, Windsurf) into CE.SDK implementation experts. Instead of mapping APIs manually, you now inject our full SDK expertise directly into your IDE and coding agent.&lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://img.ly/docs/cesdk/js/get-started/agent-skills-f7g8h9/&quot;&gt;Explore Agent Skill Documentation&lt;/a&gt;&lt;br&gt;
→ &lt;a href=&quot;https://github.com/imgly/agent-skills&quot;&gt;Access Agent Skills GitHub Repository&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;the-quick-start-paradox&quot;&gt;The “Quick Start” Paradox&lt;/h2&gt;
&lt;p&gt;In our recent analysis of client integrations, a consistent pattern emerged: even with a high-performance SDK, the “Time to First Edit” is often delayed by research. Developers spend a significant portion of their initial integration time context-switching between their IDE and documentation, manually mapping complex API hierarchies to their specific framework.&lt;/p&gt;
&lt;p&gt;We figured: You don’t just need better documentation; you need an &lt;strong&gt;expert partner&lt;/strong&gt; who is already inside your codebase.&lt;/p&gt;
&lt;h2 id=&quot;the-solution-imgly-agent-skills-for-web&quot;&gt;The Solution: IMG.LY Agent Skills for Web&lt;/h2&gt;
&lt;p&gt;We are moving beyond static documentation. Today, we are launching &lt;strong&gt;IMG.LY Agent Skills&lt;/strong&gt;, a specialized intelligence layer that transforms AI coding assistants like Claude Code, Cursor, and Gemini into CE.SDK implementation experts.&lt;/p&gt;
&lt;p&gt;Instead of searching for answers, you now give your agent our complete SDK knowledge with a single command.&lt;/p&gt;
&lt;h2 id=&quot;how-it-works-your-autonomous-implementation-partner&quot;&gt;How It Works: Your Autonomous Implementation Partner&lt;/h2&gt;
&lt;p&gt;By injecting versioned, live documentation and framework-specific starter kits directly into your agent’s context window, we’ve created three adaptive paths to launch:&lt;/p&gt;
&lt;h3 id=&quot;1-the-explain-path&quot;&gt;1. The Explain Path&lt;/h3&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/0-explain-skill.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Architecture is complex. The Explain Skill acts as a digital implementation partner that adapts to you. It can provide a technical deep-dive on the export pipeline for a Senior Dev or a high-level summary for a Product Manager—in any language and at any level of detail.&lt;/p&gt;
&lt;h3 id=&quot;2-the-build-path&quot;&gt;&lt;strong&gt;2. The Build Path&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;&lt;video src=&quot;https://blog.img.ly/2026/02/1-build-skill.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Command your agent to “Add a photo editor to my React app.” The agent autonomously detects your environment, pulls the correct starter kit, and handles the boilerplate. It doesn’t just show you code; it builds the foundation for you.&lt;/p&gt;
&lt;h3 id=&quot;3-the-docs-path&quot;&gt;&lt;strong&gt;3. The Docs Path&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;Stop the tab-switching. Your agent retrieves versioned API references offline, keeping your focus entirely within the terminal or IDE.&lt;/p&gt;
&lt;h2 id=&quot;the-shift-to-autonomous-engineering&quot;&gt;The Shift to Autonomous Engineering&lt;/h2&gt;
&lt;p&gt;This release marks a strategic shift for IMG.LY. We believe the next era of software development isn’t about “better documentation,” but about &lt;strong&gt;Portable Expertise&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;By providing that AI with a “skill” rather than a manual, we are empowering teams to move from a multi-month build cycle to a 30-second scaffold.&lt;/p&gt;
&lt;h2 id=&quot;supported-frameworks&quot;&gt;Supported Frameworks&lt;/h2&gt;
&lt;p&gt;The initial Web release supports 10 frameworks out of the box:&lt;br&gt;
&lt;strong&gt;React · Vue.js · Svelte · Angular · Next.js · Nuxt.js · SvelteKit · Electron · Node.js · Vanilla JS&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;get-started&quot;&gt;Get Started&lt;/h2&gt;
&lt;p&gt;Run the command:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;bash&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;npx&lt;/span&gt;&lt;span&gt; skills&lt;/span&gt;&lt;span&gt; add&lt;/span&gt;&lt;span&gt; imgly/agent-skills&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;em&gt;For example&lt;/em&gt;, &lt;strong&gt;Claude Code&lt;/strong&gt; users, can run:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;bash&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;claude&lt;/span&gt;&lt;span&gt; plugin&lt;/span&gt;&lt;span&gt; marketplace&lt;/span&gt;&lt;span&gt; add&lt;/span&gt;&lt;span&gt; imgly/agent-skills&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;claude&lt;/span&gt;&lt;span&gt; plugin&lt;/span&gt;&lt;span&gt; install&lt;/span&gt;&lt;span&gt; cesdk@imgly&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;→ &lt;a href=&quot;https://img.ly/docs/cesdk/js/get-started/agent-skills-f7g8h9/&quot;&gt;Explore the full Agent Skill Documentation&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The “editor of your dreams” is now a conversation away.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;Join 3,000+ creative professionals who get early access to new features and updates—&lt;/strong&gt;&lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Neslihan</dc:creator><media:content url="https://blog.img.ly/2026/02/Build-Design-Video-Photo-Editor-With-AI-Agent-sdk-imgly-2.jpg" medium="image"/><category>AI</category><category>CE.SDK</category></item><item><title>Build in a Day: AI Video Clipping with CE.SDK</title><link>https://img.ly/blog/build-in-a-day-ai-video-clipping-with-ce-sdk/</link><guid isPermaLink="true">https://img.ly/blog/build-in-a-day-ai-video-clipping-with-ce-sdk/</guid><description>Build a client-side AI video editor that turns long videos into short highlights using CE.SDK and AI.</description><pubDate>Thu, 05 Feb 2026 12:17:28 GMT</pubDate><content:encoded>&lt;h2 id=&quot;introduction&quot;&gt;Introduction&lt;/h2&gt;
&lt;p&gt;We built a video shortener in a single day using Claude Code and CE.SDK. It extracts 3-4 short clips from long-form video, handles transcription, identifies the best moments via AI, detects speakers, and outputs vertical/horizontal/square formats—all running in the browser.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Features:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Extracts 3-4 clips per video (highlights, summaries, or cleaned-up edits)&lt;/li&gt;
&lt;li&gt;Outputs 9:16 (vertical), 16:9 (landscape), or 1:1 (square)&lt;/li&gt;
&lt;li&gt;Detects speakers and maps them to faces with user confirmation&lt;/li&gt;
&lt;li&gt;Auto-crops to follow the active speaker&lt;/li&gt;
&lt;li&gt;Adds captions and text hooks&lt;/li&gt;
&lt;li&gt;Non-destructive: change aspect ratio or template without re-processing&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Best suited for:&lt;/strong&gt; Videos with speech/dialogue (podcasts, interviews, presentations, vlogs)&lt;/p&gt;
&lt;h2 id=&quot;why-client-side&quot;&gt;Why Client-Side?&lt;/h2&gt;
&lt;p&gt;CE.SDK’s CreativeEngine runs in the browser via WebAssembly. Video decoding, timeline manipulation, effects, and preview all happen on the user’s device.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Benefits:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;No upload/download wait — edits preview instantly&lt;/li&gt;
&lt;li&gt;Non-destructive — switch aspect ratio or template without rendering&lt;/li&gt;
&lt;li&gt;Lower infrastructure costs — your costs don’t scale with video length or user count&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;tech-stack&quot;&gt;Tech Stack&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Frontend:&lt;/strong&gt; Next.js + React&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Video Engine:&lt;/strong&gt; CE.SDK (CreativeEngine)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Transcription:&lt;/strong&gt; ElevenLabs Scribe v2&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;AI Analysis:&lt;/strong&gt; Google Gemini&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;architecture-overview&quot;&gt;Architecture Overview&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;High-Level Flow&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;AI Video Shortener&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 818px) 818px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;818&quot; height=&quot;841&quot; src=&quot;https://img.ly/_astro/ai-video-processing-build-a-video-shortener_20dJmS.webp&quot; srcset=&quot;/_astro/ai-video-processing-build-a-video-shortener_1wQnGV.webp 640w, /_astro/ai-video-processing-build-a-video-shortener_Z2vwzkB.webp 750w, /_astro/ai-video-processing-build-a-video-shortener_20dJmS.webp 818w&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Required API Keys&lt;/strong&gt;&lt;/p&gt;

























&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Service&lt;/th&gt;&lt;th&gt;Purpose&lt;/th&gt;&lt;th&gt;Environment Variable&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;CE.SDK&lt;/td&gt;&lt;td&gt;Video editing engine&lt;/td&gt;&lt;td&gt;&lt;code&gt;NEXT_PUBLIC_CESDK_LICENSE&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ElevenLabs&lt;/td&gt;&lt;td&gt;Speech-to-text transcription&lt;/td&gt;&lt;td&gt;&lt;code&gt;ELEVENLABS_API_KEY&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Gemini (via OpenRouter or direct)&lt;/td&gt;&lt;td&gt;AI highlight detection&lt;/td&gt;&lt;td&gt;&lt;code&gt;OPENROUTER_API_KEY&lt;/code&gt; or &lt;code&gt;GEMINI_API_KEY&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;h2 id=&quot;setting-up-cesdk&quot;&gt;Setting Up CE.SDK&lt;/h2&gt;
&lt;h3 id=&quot;what-is-cesdk&quot;&gt;What is CE.SDK?&lt;/h3&gt;
&lt;p&gt;CE.SDK (CreativeEngine SDK) is a browser-based engine for video, image, and design editing—a programmable video editor you can embed in your app.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Key Concepts:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Engine:&lt;/strong&gt; The runtime that manages the editing session&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Scene:&lt;/strong&gt; The document/project containing all elements&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Blocks:&lt;/strong&gt; Individual elements (video clips, text, shapes, audio)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Timeline:&lt;/strong&gt; Time-based arrangement of blocks for video editing&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;installation&quot;&gt;Installation&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;bash&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;npm&lt;/span&gt;&lt;span&gt; install&lt;/span&gt;&lt;span&gt; @cesdk/cesdk-js&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;initializing-the-creativeengine&quot;&gt;Initializing the CreativeEngine&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;import&lt;/span&gt;&lt;span&gt; CreativeEngine &lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt; &apos;@cesdk/cesdk-js&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; engine&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; CreativeEngine.&lt;/span&gt;&lt;span&gt;init&lt;/span&gt;&lt;span&gt;({&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  license: process.env.&lt;/span&gt;&lt;span&gt;NEXT_PUBLIC_CESDK_LICENSE&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Create a video scene&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; scene&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.scene.&lt;/span&gt;&lt;span&gt;createVideo&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Get the page (timeline container)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; pages&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.scene.&lt;/span&gt;&lt;span&gt;getPages&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; page&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; pages[&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;];&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Configure page dimensions for your target aspect ratio&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setWidth&lt;/span&gt;&lt;span&gt;(page, &lt;/span&gt;&lt;span&gt;1080&lt;/span&gt;&lt;span&gt;); &lt;/span&gt;&lt;span&gt;// 9:16 vertical&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setHeight&lt;/span&gt;&lt;span&gt;(page, &lt;/span&gt;&lt;span&gt;1920&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;uploading-video-to-cesdk&quot;&gt;Uploading Video to CE.SDK&lt;/h3&gt;
&lt;p&gt;CE.SDK works with video through a fill-based system. The graphic block is the container, while the video fill holds the actual media source and playback properties.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Create a video block&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; videoBlock&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;create&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;graphic&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; videoFill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;createFill&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;video&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Set the video source&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setString&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  videoFill,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &apos;fill/video/fileURI&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  videoUrl &lt;/span&gt;&lt;span&gt;// Can be a blob URL or remote URL&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Apply fill to block&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setFill&lt;/span&gt;&lt;span&gt;(videoBlock, videoFill);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Add to timeline&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;appendChild&lt;/span&gt;&lt;span&gt;(page, videoBlock);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;extracting-audio-for-transcription&quot;&gt;Extracting Audio for Transcription&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Configure audio-only export&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; mimeType&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; &apos;audio/mp4&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Export just the audio track&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; audioBlob&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt;(page, mimeType, {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  targetWidth: &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  targetHeight: &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// audioBlob can now be sent to transcription API&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Setting both dimensions to 0 tells CE.SDK to skip video encoding entirely, making this export much faster than exporting the full video.&lt;/p&gt;
&lt;h3 id=&quot;getting-video-metadata&quot;&gt;Getting Video Metadata&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Get video duration&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; duration&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getDuration&lt;/span&gt;&lt;span&gt;(videoBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Get dimensions from the fill&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; videoFill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getFill&lt;/span&gt;&lt;span&gt;(videoBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; sourceWidth&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getSourceWidth&lt;/span&gt;&lt;span&gt;(videoFill);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; sourceHeight&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getSourceHeight&lt;/span&gt;&lt;span&gt;(videoFill);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;console.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;`Video: ${&lt;/span&gt;&lt;span&gt;sourceWidth&lt;/span&gt;&lt;span&gt;}x${&lt;/span&gt;&lt;span&gt;sourceHeight&lt;/span&gt;&lt;span&gt;}, ${&lt;/span&gt;&lt;span&gt;duration&lt;/span&gt;&lt;span&gt;}s`&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;ai-powered-transcription--highlight-detection&quot;&gt;AI-Powered Transcription &amp;#x26; Highlight Detection&lt;/h2&gt;
&lt;h3 id=&quot;the-pipeline&quot;&gt;The Pipeline&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Audio → Transcription:&lt;/strong&gt; Send extracted audio to ElevenLabs Scribe&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Transcription → Analysis:&lt;/strong&gt; Feed word-level transcript to Gemini&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Analysis → Timestamps:&lt;/strong&gt; Map AI suggestions back to precise video times&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;transcription-with-speaker-diarization&quot;&gt;Transcription with Speaker Diarization&lt;/h3&gt;
&lt;p&gt;ElevenLabs Scribe v2 provides:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Word-level timestamps (start/end time for each word)&lt;/li&gt;
&lt;li&gt;Speaker diarization (which speaker said what)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The output is a structured transcript where each word has a precise timestamp, enabling frame-accurate editing.&lt;/p&gt;
&lt;h3 id=&quot;ai-highlight-detection-with-gemini&quot;&gt;AI Highlight Detection with Gemini&lt;/h3&gt;
&lt;p&gt;The prompt structure matters. Here’s what works:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;plaintext&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;You are analyzing a video transcript to identify segments for short-form content.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;TRANSCRIPT:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;[Word-by-word transcript with timestamps]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;TASK:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Identify 3-4 segments that work as standalone short videos. For each segment:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;1. Find the exact starting and ending words&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;2. Ensure clean sentence boundaries (no mid-sentence cuts)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;3. Aim for 30-60 second segments&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;OUTPUT FORMAT (JSON):&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;{&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &quot;concepts&quot;: [&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &quot;id&quot;: &quot;concept_1&quot;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &quot;title&quot;: &quot;Hook title&quot;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &quot;description&quot;: &quot;Why this segment works as a standalone clip&quot;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &quot;trimmed_text&quot;: &quot;The exact transcript text to keep...&quot;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &quot;estimated_duration_seconds&quot;: 45&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  ]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;CRITERIA FOR SELECTION:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;- Strong hooks (surprising statements, questions, bold claims)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;- Complete thoughts (don&apos;t cut mid-explanation)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;- Emotional peaks (humor, insight, controversy)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;- Standalone value (makes sense without context)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Before finalizing each segment, ask: &quot;If someone started watching here,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;would they understand what&apos;s being discussed?&quot;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;mapping-back-to-timestamps&quot;&gt;Mapping Back to Timestamps&lt;/h3&gt;
&lt;p&gt;Once Gemini returns the &lt;code&gt;trimmed_text&lt;/code&gt;, we match it against our word-level transcript to find exact timestamps:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;plaintext&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;AI returns:     &quot;The secret to success is actually quite simple...&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Transcript has: [{ word: &quot;The&quot;, start: 45.2 }, { word: &quot;secret&quot;, start: 45.4 }, ...]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Result:         Trim video from 45.2s to 52.8s&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This text-matching approach is more reliable than asking the AI to output timestamps directly. LLMs can hallucinate timestamps or miscalculate offsets, but they’re excellent at identifying the right words—so we let the transcript data provide the ground truth for timing.&lt;/p&gt;
&lt;h2 id=&quot;working-with-the-cesdk-timeline&quot;&gt;Working with the CE.SDK Timeline&lt;/h2&gt;
&lt;h3 id=&quot;understanding-blocks&quot;&gt;Understanding Blocks&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Video/Image content&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; graphic&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;create&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;graphic&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Audio track&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; audio&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;create&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;audio&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Text overlay&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; text&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;create&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;text&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Each block can be positioned on the timeline&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setTimeOffset&lt;/span&gt;&lt;span&gt;(block, startTimeInSeconds);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setDuration&lt;/span&gt;&lt;span&gt;(block, durationInSeconds);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;manipulating-trim-points&quot;&gt;Manipulating Trim Points&lt;/h3&gt;
&lt;p&gt;Trimming controls which portion of the source media is shown:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; videoFill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getFill&lt;/span&gt;&lt;span&gt;(videoBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Set where in the source video to start (in seconds)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setTrimOffset&lt;/span&gt;&lt;span&gt;(videoFill, &lt;/span&gt;&lt;span&gt;45.2&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Set how long to play from that point&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setTrimLength&lt;/span&gt;&lt;span&gt;(videoFill, &lt;/span&gt;&lt;span&gt;30.0&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Also update the block&apos;s duration to match&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setDuration&lt;/span&gt;&lt;span&gt;(videoBlock, &lt;/span&gt;&lt;span&gt;30.0&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;working-with-fills-and-their-timing&quot;&gt;Working with Fills and Their Timing&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Get the fill (contains the actual media)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; fill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getFill&lt;/span&gt;&lt;span&gt;(block);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Fills have their own timing properties&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; trimStart&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getTrimOffset&lt;/span&gt;&lt;span&gt;(fill);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; trimDuration&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getTrimLength&lt;/span&gt;&lt;span&gt;(fill);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// The block&apos;s duration should typically match the fill&apos;s trim length&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setDuration&lt;/span&gt;&lt;span&gt;(block, trimDuration);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Think of the fill as the media source (which part of the original video to use) and the block as the timeline placement (when and how long it appears). Both need to be updated together for clean edits.&lt;/p&gt;
&lt;h3 id=&quot;creating-time-based-edits-from-transcript-words&quot;&gt;Creating Time-Based Edits from Transcript Words&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;typescript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;interface&lt;/span&gt;&lt;span&gt; TranscriptWord&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  word&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  start&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  end&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  speaker_id&lt;/span&gt;&lt;span&gt;?:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; applyTranscriptTrim&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; CreativeEngine&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  videoBlock&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  words&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; TranscriptWord&lt;/span&gt;&lt;span&gt;[]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;) {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  if&lt;/span&gt;&lt;span&gt; (words.&lt;/span&gt;&lt;span&gt;length&lt;/span&gt;&lt;span&gt; ===&lt;/span&gt;&lt;span&gt; 0&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; startTime&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; words[&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;].start;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; endTime&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; words[words.&lt;/span&gt;&lt;span&gt;length&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt; 1&lt;/span&gt;&lt;span&gt;].end;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; duration&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; endTime &lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt; startTime;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; fill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getFill&lt;/span&gt;&lt;span&gt;(videoBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine.block.&lt;/span&gt;&lt;span&gt;setTrimOffset&lt;/span&gt;&lt;span&gt;(fill, startTime);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine.block.&lt;/span&gt;&lt;span&gt;setTrimLength&lt;/span&gt;&lt;span&gt;(fill, duration);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine.block.&lt;/span&gt;&lt;span&gt;setDuration&lt;/span&gt;&lt;span&gt;(videoBlock, duration);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;generating-speaker-thumbnails&quot;&gt;Generating Speaker Thumbnails&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;typescript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;async&lt;/span&gt;&lt;span&gt; function&lt;/span&gt;&lt;span&gt; generateSpeakerThumbnail&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; CreativeEngine&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  videoBlock&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  timestampSeconds&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  size&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; 128&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; Promise&lt;/span&gt;&lt;span&gt;&amp;#x3C;&lt;/span&gt;&lt;span&gt;string&lt;/span&gt;&lt;span&gt;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; fill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getFill&lt;/span&gt;&lt;span&gt;(videoBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  // Seek to the specific timestamp&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine.block.&lt;/span&gt;&lt;span&gt;setTrimOffset&lt;/span&gt;&lt;span&gt;(fill, timestampSeconds);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  engine.block.&lt;/span&gt;&lt;span&gt;setTrimLength&lt;/span&gt;&lt;span&gt;(fill, &lt;/span&gt;&lt;span&gt;0.1&lt;/span&gt;&lt;span&gt;); &lt;/span&gt;&lt;span&gt;// Just a single frame&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  // Export as image&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; blob&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt;(videoBlock, &lt;/span&gt;&lt;span&gt;&apos;image/jpeg&apos;&lt;/span&gt;&lt;span&gt;, {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    targetWidth: size,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    targetHeight: size,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  });&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  return&lt;/span&gt;&lt;span&gt; URL&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;createObjectURL&lt;/span&gt;&lt;span&gt;(blob);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We sample multiple timestamps throughout each speaker’s talk time to show different facial angles and expressions—this helps users identify the right person even if they’re looking away or mid-gesture in one frame.&lt;/p&gt;
&lt;h2 id=&quot;speaker-detection--face-tracking&quot;&gt;Speaker Detection &amp;#x26; Face Tracking&lt;/h2&gt;
&lt;h3 id=&quot;why-semi-automatic&quot;&gt;Why Semi-Automatic?&lt;/h3&gt;
&lt;p&gt;Fully automatic speaker detection fails often enough that we added a confirmation step. Users verify detected faces against speaker names from the transcript—takes a few seconds and prevents bad crops on the entire video.&lt;/p&gt;
&lt;h3 id=&quot;how-it-works&quot;&gt;How It Works&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;Sample frames throughout the video&lt;/li&gt;
&lt;li&gt;Detect &amp;#x26; cluster faces using face-api.js (runs in browser, no server needed)&lt;/li&gt;
&lt;li&gt;User confirms speaker identities via thumbnails&lt;/li&gt;
&lt;li&gt;Correlate with transcript diarization to map speakers → face locations&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;This gives us verified speaker-to-face mapping for dynamic cropping and picture-in-picture layouts.&lt;/p&gt;
&lt;h2 id=&quot;multi-speaker-templates--dynamic-switching&quot;&gt;Multi-Speaker Templates &amp;#x26; Dynamic Switching&lt;/h2&gt;
&lt;h3 id=&quot;the-concept&quot;&gt;The Concept&lt;/h3&gt;
&lt;p&gt;When a video has multiple speakers, we can create layouts that show:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The active speaker prominently&lt;/li&gt;
&lt;li&gt;Other speakers in smaller picture-in-picture views&lt;/li&gt;
&lt;li&gt;Dynamic switching as the conversation flows&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;creating-picture-in-picture-with-cesdk&quot;&gt;Creating Picture-in-Picture with CE.SDK&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Duplicate the video block for each speaker slot&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; pipBlock&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;duplicate&lt;/span&gt;&lt;span&gt;(originalVideoBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Position and size the PiP&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setWidth&lt;/span&gt;&lt;span&gt;(pipBlock, &lt;/span&gt;&lt;span&gt;200&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setHeight&lt;/span&gt;&lt;span&gt;(pipBlock, &lt;/span&gt;&lt;span&gt;200&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setPositionX&lt;/span&gt;&lt;span&gt;(pipBlock, &lt;/span&gt;&lt;span&gt;20&lt;/span&gt;&lt;span&gt;); &lt;/span&gt;&lt;span&gt;// 20px from left&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setPositionY&lt;/span&gt;&lt;span&gt;(pipBlock, &lt;/span&gt;&lt;span&gt;20&lt;/span&gt;&lt;span&gt;); &lt;/span&gt;&lt;span&gt;// 20px from top&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Enable cropping&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setClipped&lt;/span&gt;&lt;span&gt;(pipBlock, &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setContentFillMode&lt;/span&gt;&lt;span&gt;(pipBlock, &lt;/span&gt;&lt;span&gt;&apos;Cover&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;key-technique-muting-duplicate-audio&quot;&gt;Key Technique: Muting Duplicate Audio&lt;/h3&gt;
&lt;p&gt;When duplicating video blocks for multi-speaker layouts, each copy has its own audio track. We must mute all but one. The &lt;code&gt;setMuted&lt;/code&gt; API operates on the video fill, not the block itself:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// For each speaker slot after the first, mute the video fill&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;if&lt;/span&gt;&lt;span&gt; (slotIndex &lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;span&gt; 0&lt;/span&gt;&lt;span&gt;) {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; videoFill&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;getFill&lt;/span&gt;&lt;span&gt;(duplicatedBlock);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  if&lt;/span&gt;&lt;span&gt; (videoFill) {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    engine.block.&lt;/span&gt;&lt;span&gt;setMuted&lt;/span&gt;&lt;span&gt;(videoFill, &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;dynamic-speaker-switching&quot;&gt;Dynamic Speaker Switching&lt;/h3&gt;
&lt;p&gt;As the active speaker changes throughout the video, we:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Detect which speaker is talking (from transcript diarization)&lt;/li&gt;
&lt;li&gt;Swap speaker positions in the template&lt;/li&gt;
&lt;li&gt;Keep the active speaker in the prominent position&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The layout updates automatically as the conversation switches between speakers. We apply different trim offsets to each duplicated block based on the transcript timing—so the main speaker slot shows the person currently talking while PiP slots show the listeners.&lt;/p&gt;
&lt;h2 id=&quot;preview-playback--export&quot;&gt;Preview, Playback &amp;#x26; Export&lt;/h2&gt;
&lt;h3 id=&quot;setting-up-the-canvas&quot;&gt;Setting Up the Canvas&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; container&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; document.&lt;/span&gt;&lt;span&gt;getElementById&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;cesdk-canvas&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.element.&lt;/span&gt;&lt;span&gt;attachTo&lt;/span&gt;&lt;span&gt;(container);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;playback-controls&quot;&gt;Playback Controls&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.player.&lt;/span&gt;&lt;span&gt;play&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.player.&lt;/span&gt;&lt;span&gt;pause&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.player.&lt;/span&gt;&lt;span&gt;setPlaybackTime&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;30.5&lt;/span&gt;&lt;span&gt;); &lt;/span&gt;&lt;span&gt;// seek to 30.5 seconds&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; currentTime&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.player.&lt;/span&gt;&lt;span&gt;getPlaybackTime&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; isPlaying&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.player.&lt;/span&gt;&lt;span&gt;isPlaying&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;syncing-ui-state&quot;&gt;Syncing UI State&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.player.&lt;/span&gt;&lt;span&gt;onPlaybackTimeChanged&lt;/span&gt;&lt;span&gt;(() &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; time&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.player.&lt;/span&gt;&lt;span&gt;getPlaybackTime&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  updateTimeDisplay&lt;/span&gt;&lt;span&gt;(time);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  updateProgressBar&lt;/span&gt;&lt;span&gt;(time &lt;/span&gt;&lt;span&gt;/&lt;/span&gt;&lt;span&gt; totalDuration);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.player.&lt;/span&gt;&lt;span&gt;onPlaybackStateChanged&lt;/span&gt;&lt;span&gt;(() &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  updatePlayButton&lt;/span&gt;&lt;span&gt;(engine.player.&lt;/span&gt;&lt;span&gt;isPlaying&lt;/span&gt;&lt;span&gt;());&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;export-options&quot;&gt;Export Options&lt;/h3&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; exportOptions&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  targetWidth: &lt;/span&gt;&lt;span&gt;1080&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  targetHeight: &lt;/span&gt;&lt;span&gt;1920&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  framerate: &lt;/span&gt;&lt;span&gt;30&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  videoBitrate: &lt;/span&gt;&lt;span&gt;8_000_000&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// 8 Mbps&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;};&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; blob&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  page,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &apos;video/mp4&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  exportOptions,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  (&lt;/span&gt;&lt;span&gt;progress&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; updateProgressBar&lt;/span&gt;&lt;span&gt;(progress &lt;/span&gt;&lt;span&gt;*&lt;/span&gt;&lt;span&gt; 100&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Trigger download&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; url&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; URL&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;createObjectURL&lt;/span&gt;&lt;span&gt;(blob);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; a&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; document.&lt;/span&gt;&lt;span&gt;createElement&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;a&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;a.href &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; url;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;a.download &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &apos;shortened-video.mp4&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;a.&lt;/span&gt;&lt;span&gt;click&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;For longer videos, consider showing estimated time remaining or allowing background export. Browser export is single-threaded and blocks the tab—a 5-minute export of a 60-second clip isn’t unusual on average hardware, so user feedback is critical.&lt;/p&gt;
&lt;h2 id=&quot;the-finished-app&quot;&gt;The Finished App&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;The user flow:&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Upload&lt;/strong&gt; → Drop a long-form video into the browser&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Configure&lt;/strong&gt; → Pick output mode (highlights/summary/cleanup) and aspect ratio (9:16, 16:9, 1:1)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Verify speakers&lt;/strong&gt; → Match detected faces to transcript speaker names&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Review clips&lt;/strong&gt; → Browse the 3-4 AI-suggested segments, adjust if needed&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Choose template&lt;/strong&gt; → Solo speaker, sidecar, stacked, etc.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Preview&lt;/strong&gt; → Scrub through the timeline, see exactly what you’ll get&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Export&lt;/strong&gt; → Download the final video directly from the browser&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;whats-next&quot;&gt;What’s Next&lt;/h2&gt;
&lt;h3 id=&quot;ideas-for-extension&quot;&gt;Ideas for Extension&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Caption style controls:&lt;/strong&gt; Custom fonts, animations, and positioning for subtitles&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;B-roll insertion:&lt;/strong&gt; Automatically add relevant stock footage&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Music &amp;#x26; sound effects:&lt;/strong&gt; AI-selected background audio&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Brand templates:&lt;/strong&gt; Custom overlays, intros, outros&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Batch processing:&lt;/strong&gt; Process multiple videos in sequence&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;taking-it-server-side&quot;&gt;Taking It Server-Side&lt;/h3&gt;
&lt;p&gt;Client-side processing for large files strains browser memory, and users must keep the tab open during export. A hybrid approach works better for production—upload in the background while users edit, then render on a server. You can also offload just the export step—let users build their edits in the browser, then send the CE.SDK scene JSON to your backend for faster, background rendering.&lt;/p&gt;
&lt;p&gt;CE.SDK runs server-side with the same API. For batch processing, background jobs, or offloading rendering from user devices, see the &lt;a href=&quot;https://img.ly/docs/cesdk/renderer/cesdk-renderer-overview-7f3e9a/&quot;&gt;CE.SDK Renderer&lt;/a&gt; for creative automation.&lt;/p&gt;
&lt;h2 id=&quot;resources&quot;&gt;Resources&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://img.ly/docs/cesdk/&quot;&gt;CE.SDK Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://img.ly/docs/cesdk/node/create-video-c41a08/&quot;&gt;CE.SDK Video Editing Guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/imgly/videoclipper&quot;&gt;GitHub: Video Shortener Source&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://elevenlabs.io/docs/api-reference&quot;&gt;ElevenLabs API Docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://ai.google.dev/gemini-api/docs&quot;&gt;Gemini API Docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;p&gt;Made by &lt;a href=&quot;https://img.ly/&quot;&gt;IMG.LY&lt;/a&gt; with &lt;a href=&quot;https://img.ly/products/creative-sdk&quot;&gt;CE.SDK&lt;/a&gt;&lt;/p&gt;</content:encoded><dc:creator>Eray</dc:creator><media:content url="https://blog.img.ly/2026/01/Gemini_Generated_Image_qj8gi7qj8gi7qj8g.png" medium="image"/><category>AI</category><category>Insights</category><category>Video Editing</category></item><item><title>From Prompt to Editor: Running CE.SDK Inside ChatGPT with the Apps SDK</title><link>https://img.ly/blog/from-prompt-to-editor-running-ce-sdk-inside-chatgpt-with-the-apps-sdk/</link><guid isPermaLink="true">https://img.ly/blog/from-prompt-to-editor-running-ce-sdk-inside-chatgpt-with-the-apps-sdk/</guid><description>We built a technical demo running CE.SDK directly inside ChatGPT using MCP, showing how AI chats can open real, interactive editors. It highlights strict MCP contracts, visual-first UX, and how chat becomes a coordination layer for doing creative work.</description><pubDate>Fri, 19 Dec 2025 15:43:16 GMT</pubDate><content:encoded>&lt;p&gt;With the new ChatGPT Apps SDK and Model Context Protocol (MCP), chat interfaces are starting to look less like Q&amp;#x26;A tools and more like places where work actually happens. To explore what that means for creative workflows, we built a small technical demo: &lt;a href=&quot;https://github.com/imgly/cesdk-web-examples/tree/main/cookbooks-chatgpt-app&quot;&gt;&lt;strong&gt;CE.SDK running directly inside ChatGPT&lt;/strong&gt;.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;From a user’s perspective, the flow is almost trivial. You ask ChatGPT for something like an ecommerce template. ChatGPT searches our template catalog, selects a matching design, and opens it instantly in a fully interactive CE.SDK editor — right inside the chat interface. What looks like a preview is, in fact, a real editor loaded with a real template scene.&lt;/p&gt;
&lt;p&gt;This isn’t meant as a product announcement. It’s a technical proof of concept showing how creative SDKs can plug directly into AI-native interfaces.&lt;/p&gt;
&lt;h2 id=&quot;cesdk-as-a-chatgpt-app&quot;&gt;CE.SDK as a ChatGPT App&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.youtube.com/embed/AoDqUNVLLJ4?feature=oembed&quot;&gt;https://www.youtube.com/embed/AoDqUNVLLJ4?feature=oembed&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The integration is built around a custom MCP server that exposes CE.SDK to ChatGPT as a tool. The server speaks OpenAI’s JSON-RPC–style MCP and implements the standard lifecycle methods (&lt;code&gt;initialize&lt;/code&gt;, &lt;code&gt;tools.list&lt;/code&gt;, &lt;code&gt;tools.call&lt;/code&gt;, &lt;code&gt;resources.read&lt;/code&gt;). It knows about our premium template catalog and emits structured payloads that the frontend understands.&lt;/p&gt;
&lt;p&gt;On the client side, a Next.js app listens to tool output events streamed from ChatGPT, renders CE.SDK widgets, and hydrates them with the payloads returned by the tool — such as a scene URL, placeholder values, or export permissions. Templates are loaded via CE.SDK’s Template API, either from a URL or from a serialized scene string.&lt;/p&gt;
&lt;p&gt;Under the hood, the stack is fairly conventional:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Next.js 15 (App Router)&lt;/li&gt;
&lt;li&gt;CE.SDK Web / CreativeEngine&lt;/li&gt;
&lt;li&gt;A custom MCP handler to normalize JSON-RPC&lt;/li&gt;
&lt;li&gt;Vercel for hosting&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;What’s new is not the technology itself, but the context in which it runs.&lt;/p&gt;
&lt;h2 id=&quot;working-with-mcp-in-practice&quot;&gt;Working with MCP in Practice&lt;/h2&gt;
&lt;p&gt;The hardest part of the demo wasn’t CE.SDK — it was MCP.&lt;/p&gt;
&lt;p&gt;OpenAI’s MCP implementation is extremely strict. Even the smallest schema mismatch can trigger the infamous “TaskGroup 424” error, usually without any hint as to what went wrong. In many cases, the HTTP response is technically successful, but the JSON structure doesn’t match the expected schema closely enough.&lt;/p&gt;
&lt;p&gt;The key lesson here is to treat MCP responses as hard contracts:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Validate every response against a schema (for example with zod).&lt;/li&gt;
&lt;li&gt;Mirror OpenAI’s field names exactly, even for empty or optional capabilities.&lt;/li&gt;
&lt;li&gt;Assume that a 424 almost always means “your JSON shape is wrong”.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Another important insight was how critical visual context is in chat-based tools. If your MCP responses don’t include thumbnails or preview images, ChatGPT will often fall back to rendering links. For creative tools, that immediately breaks the experience. In a chat UI, visuals aren’t an enhancement — they &lt;em&gt;are&lt;/em&gt; the interface.&lt;/p&gt;
&lt;p&gt;State handling also requires a shift in mindset. ChatGPT can replay tool calls, and each prompt effectively creates a new widget instance. You can’t rely on mutating an existing editor. The frontend needs to be idempotent: load scenes from serialized state first, then apply changes. Every tool call should be treated as a fresh render.&lt;/p&gt;
&lt;h2 id=&quot;why-this-pattern-matters&quot;&gt;Why This Pattern Matters&lt;/h2&gt;
&lt;p&gt;This demo points to a broader change in how creative software may be accessed. Chat becomes a coordination layer, not just a conversational one. Instead of explaining how something could be designed, the AI opens the actual editor and lets the user continue from there.&lt;/p&gt;
&lt;p&gt;For CE.SDK, this fits naturally. Editors become embeddable capabilities rather than standalone applications, and AI systems become the entry point into creative workflows. Prompting turns into doing.&lt;/p&gt;
&lt;h2 id=&quot;beyond-openai-the-mcp-ui-standard&quot;&gt;Beyond OpenAI: The MCP UI Standard&lt;/h2&gt;
&lt;p&gt;Although this demo uses OpenAI’s MCP, the architecture maps cleanly to the new MCP UI standard recently introduced by Anthropic. That standard aims to make tool definitions and UI rendering more consistent across models and platforms.&lt;/p&gt;
&lt;p&gt;Because this integration already separates tool logic from UI rendering and relies on structured, explicit payloads, transferring it to Anthropic’s MCP UI model is conceptually straightforward. CE.SDK can act as a reusable creative surface across ChatGPT, Claude, and future AI app ecosystems.&lt;/p&gt;
&lt;p&gt;You can read more about Anthropic’s MCP UI direction here:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://blog.modelcontextprotocol.io/posts/2025-11-21-mcp-apps/&quot;&gt;https://blog.modelcontextprotocol.io/posts/2025-11-21-mcp-apps/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This demo is intentionally small and technical, but it highlights a meaningful shift: AI systems that don’t just describe creative outcomes, but open the tools to actually create them.&lt;/p&gt;</content:encoded><dc:creator>Jan</dc:creator><dc:creator>Sven</dc:creator><media:content url="https://blog.img.ly/2025/12/chatgpt-open-design-editor-tempalte.jpg" medium="image"/><category>AI</category><category>MCP</category><category>CE.SDK</category></item><item><title>Animate Between Images - AI-Native Video Workflows with CE.SDK and Veo 3</title><link>https://img.ly/blog/animate-between-images-ai-native-video-workflows-with-ce-sdk-and-veo-3/</link><guid isPermaLink="true">https://img.ly/blog/animate-between-images-ai-native-video-workflows-with-ce-sdk-and-veo-3/</guid><description>See how we integrated Veo 3.1 into CE.SDK to animate between images in seconds. With generation times as low as 9 s, this demo shows how easily you can embed AI-native workflows from stills to smooth video clips directly inside your Creative Editor.</description><pubDate>Wed, 22 Oct 2025 14:10:31 GMT</pubDate><content:encoded>&lt;p&gt;With the release of &lt;a href=&quot;https://aistudio.google.com/models/veo-3&quot;&gt;&lt;strong&gt;Veo 3.1&lt;/strong&gt;,&lt;/a&gt; we wanted to show just how effortless it is to embed generative AI capabilities directly into creative workflows. In this quick demo, we integrated Veo 3 into &lt;strong&gt;CreativeEditor SDK (CE.SDK)&lt;/strong&gt; enabling users to &lt;strong&gt;animate between two still images&lt;/strong&gt; in just a few clicks.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/ai-launch/IMG-LY-CE-SDK-veo-3-1-video-design-editor-sdk.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h3 id=&quot;from-still-images-to-motion&quot;&gt;From Still Images to Motion&lt;/h3&gt;
&lt;p&gt;In our demo, we start with two images of the same person, one wearing a hat, the other without. Inside the editor, users simply select both images, click the &lt;strong&gt;AI context button&lt;/strong&gt;, and choose &lt;strong&gt;“Animate between images.”&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The images are loaded into a side panel where users can optionally add a &lt;strong&gt;text prompt&lt;/strong&gt; to guide the transition. Once generated, the resulting short video is placed directly on the canvas ready for editing, compositing, or export.&lt;/p&gt;
&lt;p&gt;What’s particularly impressive is the &lt;strong&gt;generation speed&lt;/strong&gt;. In this example, Veo 3.1 produced a smooth &lt;strong&gt;8-second transition in just 9 seconds&lt;/strong&gt; a major improvement compared to earlier versions. This speed makes iterative creative workflows feel fluid and responsive, bridging the gap between prompt-driven generation and real-time editing.&lt;/p&gt;
&lt;h3 id=&quot;try-it-out&quot;&gt;Try It Out&lt;/h3&gt;
&lt;p&gt;&lt;img alt=&quot;Try out Veo 3.1&amp;#39;s magic in CE.SDK.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1312px) 1312px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1312&quot; height=&quot;310&quot; src=&quot;https://img.ly/_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_Z2d7vDi.webp&quot; srcset=&quot;/_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_z0ja6.webp 640w, /_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_Z1ivUdP.webp 750w, /_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_Zs5oeI.webp 828w, /_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_ZkhHeU.webp 1080w, /_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_Z20tepT.webp 1280w, /_astro/veo-fal-ai-video-editor-sdk-ce_sdk-imgly_Z2d7vDi.webp 1312w&quot;&gt;&lt;/p&gt;
&lt;p&gt;You can check out the implementation on &lt;a href=&quot;https://github.com/imgly/plugins/blob/main/examples/ai/src/pages/Veo31Example.tsx&quot;&gt;GitHub&lt;/a&gt; and give Veo 3.1 a spin inside your CE.SDK instance (sign up for a &lt;a href=&quot;https://img.ly/forms/free-trial&quot;&gt;free trial&lt;/a&gt; if you haven’t already).&lt;/p&gt;
&lt;h3 id=&quot;a-glimpse-of-ai-native-editing&quot;&gt;A Glimpse of AI-Native Editing&lt;/h3&gt;
&lt;p&gt;This simple feature highlights how easy it is to make your editor &lt;strong&gt;AI-native,&lt;/strong&gt; combining traditional editing tools with generative intelligence.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Practical use cases include:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;E-commerce&lt;/strong&gt;&lt;br&gt;
Show products “in action” or animate between styles and configurations.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Marketing&lt;/strong&gt;&lt;br&gt;
Create quick product reveal animations from static assets.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Content creation&lt;/strong&gt;&lt;br&gt;
Generate short motion clips or “tween” between creative scenes.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;And if users want longer clips, they can simply &lt;strong&gt;add another 8-second track&lt;/strong&gt; and &lt;strong&gt;transition seamlessly&lt;/strong&gt; into the next.&lt;/p&gt;
&lt;h3 id=&quot;the-future-of-creative-workflows&quot;&gt;The Future of Creative Workflows&lt;/h3&gt;
&lt;p&gt;With Veo 3 integrated, CE.SDK becomes a powerful playground for AI-driven creativity from image-to-video to scene interpolation and contextual animation.&lt;/p&gt;
&lt;p&gt;We already empowered over 600 innovative startups, government entities, and Fortune 500 companies to add powerful design, video, and photo editing workflows to their products. &lt;a href=&quot;https://img.ly/forms/contact-sales?ref=img.ly&quot;&gt;Get in touch&lt;/a&gt;, to see how we can do the same for you.&lt;/p&gt;</content:encoded><dc:creator>Jan</dc:creator><dc:creator>Marcin</dc:creator><media:content url="https://blog.img.ly/2025/10/veo-3_1-creative-editor-sdk-video-editor-imgly-2.jpg" medium="image"/><category>AI</category><category>Video Editing</category><category>Image2Video</category></item><item><title>What is Visual Prompting?</title><link>https://img.ly/blog/what-is-visual-prompting/</link><guid isPermaLink="true">https://img.ly/blog/what-is-visual-prompting/</guid><description>Visual Prompting is a new way to guide AI using visual input instead of just text. By composing layouts with images, annotations, and design cues directly on the canvas, creators can prompt AI more intuitively. Learn how IMG.LY’s CE.SDK brings this paradigm to life.</description><pubDate>Tue, 29 Jul 2025 13:06:11 GMT</pubDate><content:encoded>&lt;h2 id=&quot;a-new-paradigm-for-creative-ai-built-by-imgly&quot;&gt;A New Paradigm for Creative AI, Built by IMG.LY&lt;/h2&gt;
&lt;p&gt;To say it’s trite to refer to the impact of AI in this or that domain as disruptive or groundbreaking would be an understatement. Yet, few areas have been as profoundly affected as the creative process. With just a text prompt, anyone can produce stunning images, remix visual styles, and explore design possibilities at a scale and speed never seen before. AI has inserted itself so quickly into this process that its gone from curious novelty to an essential part of the creator toolchain.&lt;/p&gt;
&lt;p&gt;The more serious adoption we see, however, the more key limitations of today’s AI tooling come into focus: &lt;strong&gt;the prompt itself&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Text alone, for all its expressive power, struggles to capture the essence of visual intent. Most creative work doesn’t begin with a sentence it begins with a sketch, a layout, a mood board, or an arrangement of elements. Visual ideas are shared by pointing, placing, showing.&lt;/p&gt;
&lt;p&gt;At &lt;strong&gt;IMG.LY&lt;/strong&gt;, we have begun to think about better ways to direct AI for visual generation, the term we use is Visual Prompting.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Visual Prompting: the practice of composing a visual scene or layout as input for a generative model.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Instead of describing what you want with paragraphs of text, you show it directly using a canvas of images, text, spatial cues, and annotations. This visual composition then becomes the prompt for the AI to generate new content in return. It’s a more natural, intuitive, and powerful way to collaborate with AI, especially when integrated directly into the creative process.&lt;/p&gt;
&lt;h2 id=&quot;problem-the-chat-disconnect&quot;&gt;Problem: the Chat Disconnect&lt;/h2&gt;
&lt;p&gt;The current generation of AI tools has largely been shaped by language-first interfaces. Whether it’s ChatGPT for writing or Midjourney for image generation, the assumption is the same: the user will type a descriptive prompt, and the AI will generate a result based on it.&lt;/p&gt;
&lt;p&gt;But when it comes to &lt;strong&gt;design&lt;/strong&gt;, this workflow quickly runs into friction. Visual ideas are inherently spatial and non-linear. Trying to express layout, balance, mood, or specific spatial relationships through text can feel like trying to describe a painting over the phone. It’s possible but unnecessarily cumbersome.&lt;/p&gt;
&lt;p&gt;A designer might want to:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Indicate that a certain area in the image should be blue.&lt;/li&gt;
&lt;li&gt;Replace a background with a texture sample.&lt;/li&gt;
&lt;li&gt;Position a character precisely in a composition.&lt;/li&gt;
&lt;li&gt;Annotate which parts of a scene to preserve or modify.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;All of these are difficult to express fluently in text. But they’re &lt;strong&gt;effortless&lt;/strong&gt; in a visual interface. The truth is: &lt;strong&gt;an image is worth more than a thousand words when prompting an image.&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;what-is-visual-prompting&quot;&gt;What Is Visual Prompting?&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Visual Prompting&lt;/strong&gt; is a multimodal approach to generative AI, where the &lt;strong&gt;input to the model is not just text, but a full visual composition&lt;/strong&gt;: images, text, annotations, and layout.&lt;/p&gt;
&lt;p&gt;Rather than prompting AI in isolation, the user builds their intent on a canvas. This might include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Reference images that communicate mood or style.&lt;/li&gt;
&lt;li&gt;Text blocks indicating desired copy or instructions.&lt;/li&gt;
&lt;li&gt;Annotations pointing to specific areas with notes like “make this glow” or “replace this object.”&lt;/li&gt;
&lt;li&gt;Spatial composition: where elements are arranged meaningfully to convey intent.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The visual prompt is then interpreted by a multimodal model such as OpenAI’s &lt;code&gt;gpt-image-1&lt;/code&gt; to generate new visual content that reflects not only the textual description, but also the visual context.&lt;/p&gt;
&lt;h2 id=&quot;how-visual-prompting-works-in-cesdk&quot;&gt;How Visual Prompting Works in CE.SDK&lt;/h2&gt;
&lt;p&gt;About time for an example. As part of our recent AI released &lt;a href=&quot;https://img.ly/showcases/cesdk/ai-editor/web?mode=Design&quot;&gt;we demoed how to use OpenAIs &lt;code&gt;gpt-image-1&lt;/code&gt; model&lt;/a&gt; to build visual prompting into &lt;strong&gt;CreativeEditor SDK (CE.SDK)&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Here’s what the process looks like inside CE.SDK:&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/visualprompt_05.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Compose Visually:&lt;/strong&gt; The user creates a layout with reference content, uploaded images, icons, color schemes, design elements, placeholder text, and annotations. This composition represents the “prompt” in visual form.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Add AI Layers:&lt;/strong&gt; With a single click, the user can trigger image generation using CE.SDK’s built-in AI plugin. The plugin sends the visual context (alongside any optional text input) to a multimodal model capable of interpreting both.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Refine and Iterate:&lt;/strong&gt; Users can adjust the layout, reposition elements, change annotations, or layer in new references, then prompt again. Because the canvas is interactive and editable, the feedback loop is tight.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Build Up Complexity:&lt;/strong&gt; Over time, users can layer generated images with manually designed components or other generated outputs, creating rich compositions that blend AI creativity with human direction.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;This workflow turns the traditional prompt/response cycle into a &lt;strong&gt;conversation between the designer and the model&lt;/strong&gt;, with the canvas acting as the shared language.&lt;/p&gt;
&lt;h2 id=&quot;who-is-visual-prompting-for&quot;&gt;Who Is Visual Prompting For?&lt;/h2&gt;
&lt;p&gt;The use cases for Visual Prompting extend across industries:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Creative teams&lt;/strong&gt; can go from reference to generation in seconds, iterating visually instead of wrangling prompts.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Marketing teams&lt;/strong&gt; can generate regionalized or personalized creative variants from a shared layout.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Product designers&lt;/strong&gt; can prototype in context, turning layouts into realistic screens without leaving the editor.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Storytellers and content creators&lt;/strong&gt; can use annotated sketches to generate detailed illustrations or scene variations.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;E-commerce platforms&lt;/strong&gt; can give sellers the power to visually customize their brand materials with AI assistance.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;In every case, Visual Prompting replaces friction with flow and text-based prompting with something more expressive, more reliable, and more fun.&lt;/p&gt;
&lt;h2 id=&quot;built-for-this-multimodal-models-and-cesdks-plugin-system&quot;&gt;Built for This: Multimodal Models and CE.SDK’s Plugin System&lt;/h2&gt;
&lt;p&gt;Visual Prompting is only possible because of two parallel advancements:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Multimodal AI models&lt;/strong&gt;, such as OpenAI’s &lt;code&gt;gpt-image-1&lt;/code&gt;, that can interpret both images and text, understand spatial relationships, and respond to annotated cues.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;A flexible, composable editor SDK&lt;/strong&gt; like CE.SDK, which enables the construction of visual prompts on a live canvas, and makes it easy to integrate AI models directly into the design flow.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Our SDK was built from the ground up to support &lt;strong&gt;AI-first creative workflows&lt;/strong&gt;. Its plugin architecture allows you to add any model or API, image generation, video generation, captioning, text rewriting and use it natively inside the editor without the need to switch tools or copy/paste.&lt;/p&gt;
&lt;p&gt;Generative AI’s full potential is only unlocked when it is embedded directly into the tools creatives use not siloed in chatbots or separate interfaces. Visual Prompting allows that embedding to go even deeper, aligning the &lt;strong&gt;mode of input (visual)&lt;/strong&gt; with the &lt;strong&gt;desired output (visual)&lt;/strong&gt;.&lt;/p&gt;
&lt;h3 id=&quot;explore-it-yourself&quot;&gt;Explore It Yourself&lt;/h3&gt;
&lt;p&gt;🎨 Try out Visual Prompting in our &lt;a href=&quot;https://img.ly/showcases/cesdk/ai-editor/web?mode=Design&quot;&gt;AI Editor demo&lt;/a&gt;&lt;br&gt;
📘 &lt;a href=&quot;https://img.ly/docs/cesdk/js/user-interface/ai-integration/integrate-8e906c/&quot;&gt;Learn How to Integrate AI into CE.SDK&lt;/a&gt;&lt;br&gt;
💬 &lt;a href=&quot;https://img.ly/forms/contact-sales&quot;&gt;Contact Us&lt;/a&gt; to Bring Visual Prompting to Your Product&lt;/p&gt;</content:encoded><dc:creator>Jan</dc:creator><media:content url="https://blog.img.ly/2025/07/cesdk-2025-07-25T12_20_58.735Z--1-.png" medium="image"/><category>AI</category><category>CE.SDK</category><category>Creativity</category><category>Creative Workflows</category></item><item><title>Vibe-Engineering: When AI Does All the Coding, What Do We Actually Do?</title><link>https://img.ly/blog/vibe-engineering-when-ai-does-all-the-coding-what-do-we-actually-do/</link><guid isPermaLink="true">https://img.ly/blog/vibe-engineering-when-ai-does-all-the-coding-what-do-we-actually-do/</guid><description>When AI handles the coding, our value shifts to orchestrating, reasoning, and adapting. Guiding the process, not writing code.</description><pubDate>Mon, 07 Jul 2025 09:51:05 GMT</pubDate><content:encoded>&lt;p&gt;This isn’t an article about AI replacing engineers, it’s about discovering what (software) engineering will become when freed from the mechanics of coding itself.&lt;/p&gt;
&lt;p&gt;Vibe-Coding, and Vibe-Engineering are omnipresent in my social feeds these days. As with every new trend, it’s hard to judge what really works and what is pure marketing hype. But the central question nagged at me: if AI really can do all the coding, what exactly are we humans supposed to do?&lt;/p&gt;
&lt;p&gt;Therefore, I wanted to find out for myself. I didn’t want to build just a &lt;em&gt;Hello World&lt;/em&gt; example, so I pulled an old idea out of the closet and dusted it off.&lt;/p&gt;
&lt;h2 id=&quot;the-experiment-ai-agents-code-humans-curate&quot;&gt;The Experiment: AI Agents Code, Humans Curate&lt;/h2&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1536px) 1536px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1536&quot; height=&quot;1024&quot; src=&quot;https://img.ly/_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_2ur6G6.webp&quot; srcset=&quot;/_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_mGF6X.webp 640w, /_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_ZqNENu.webp 750w, /_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_Z11NS9X.webp 828w, /_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_Z2mk1A6.webp 1080w, /_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_1UT4RJ.webp 1280w, /_astro/20250705_1708_Human-Robot-Coding-Collaboration_remix_01jzdj1by9ebmaxjtmw6z04z8q--1-_2ur6G6.webp 1536w&quot;&gt;&lt;/p&gt;
&lt;p&gt;For some time, I had considered porting our &lt;a href=&quot;https://github.com/imgly/background-removal-js&quot;&gt;IMG.LY background removal library&lt;/a&gt; from JavaScript to other platforms using Rust. However, I had postponed this side project due to the anticipated effort involved. This seemed like the perfect project to discover what my role would be in a world where AI does the heavy lifting. To pull it off, I self-imposed only one strict rule:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Hands off the code!&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Every commit, every fix, every feature would be handled by an AI coding agent. My role? Being the curator, formulating my intent, reviewing, play-testing, and guiding the agent with feedback.&lt;/p&gt;
&lt;p&gt;The agent should be the sole coder, from start to finish.&lt;/p&gt;
&lt;p&gt;This was a true hands-off experiment: could an AI build an entire Rust library if I never touched the code?&lt;/p&gt;
&lt;p&gt;Is it really something new? After years of handing off development to teammates as a CTO or teaching students, this didn’t feel completely different.&lt;/p&gt;
&lt;p&gt;So, what happens when you &lt;strong&gt;let an AI do all the coding&lt;/strong&gt;, and you just review and give feedback? What does it actually mean to be a human in this new paradigm?&lt;/p&gt;
&lt;p&gt;The result is baffling and gives a glimpse of what we as engineers can expect for the future.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;10,000+ lines of production-ready code. Authored by AI, orchestrated by a human.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Seeing is believing? Then explore the results and judge for yourself at &lt;a href=&quot;https://github.com/imgly/background-removal-rs/tree/v0.2.0&quot;&gt;github.com/imgly/background-removal-rs&lt;/a&gt;.&lt;br&gt;
I open-sourced the full code and the agent rules used during this experience.&lt;/p&gt;
&lt;p&gt;Here’s what I learned: vibe-engineering an entire Rust library with a coding agent CLI as my only pair programmer.&lt;/p&gt;
&lt;p&gt;On a quick note, I chose to use Claude Code with Opus 4 and Sonnet 4, as I was already familiar with them and had achieved the best results so far. The costs were kept in check by using a Claude Max Account, which at the time is around ~€100.&lt;/p&gt;
&lt;h3 id=&quot;the-general-workflow-that-emerged&quot;&gt;The General Workflow That Emerged&lt;/h3&gt;
&lt;p&gt;After some initial time to get used to working with an AI agent, I realized that the workflow follows pretty closely a typical software engineering flow, but with an important twist that answers our central question: what do humans actually do when AI codes? While most people focus on the &lt;code&gt;code writing&lt;/code&gt; part, I discovered that the &lt;code&gt;quality assurance&lt;/code&gt; part becomes the human’s primary domain. In my experiments, I realized that to keep the code intact over time, this QA phase is essential—and this is where humans truly shine. Most interestingly, with the right rules and prompting, we can let the agent do the heavy lifting here, too.&lt;/p&gt;
&lt;p&gt;Here’s how the collaboration actually worked in practice:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Getting Started&lt;/strong&gt;&lt;br&gt;
The project began with me setting up the environment and configuring timeouts for long-running tasks—because AI agents need time to compile Rust code and run extensive test suites. Together, the AI and I created a &lt;code&gt;CLAUDE.md&lt;/code&gt; file with coding standards and rules (you can see the &lt;a href=&quot;https://github.com/imgly/background-removal-rs/tree/main/.claude/rules&quot;&gt;actual rules we used&lt;/a&gt;). We also wrote project requirements documents collaboratively, with me providing the vision and the AI helping structure the technical details.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Development Dance&lt;/strong&gt;&lt;br&gt;
Once we got rolling, a natural rhythm emerged. I’d describe what I wanted—something like “add support for different image formats with color profile preservation.” The AI would then create a detailed implementation plan, breaking down the work into manageable chunks. I’d review this plan, often tweaking the approach or scope, then give the green light.&lt;/p&gt;
&lt;p&gt;What happened next was fascinating: the AI would write the code, run correctness checks, update all the tests (unit tests, documentation tests, end-to-end tests), run the linter, analyze coverage, and even update documentation and examples. Sometimes it would run performance benchmarks without me asking—the overzealous builder at work.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;My New Role: The Quality Guardian&lt;/strong&gt;&lt;br&gt;
My job became verifying that the intent was met and the API actually made sense. I’d play-test the functionality, try to break it in ways a real user might, and provide feedback. When something worked well, I’d document what we learned for future development. The AI would then write tests to lock in that new functionality, ensuring we never accidentally broke what was working.&lt;/p&gt;
&lt;p&gt;This cycle repeated for every feature, with the AI handling the heavy lifting while I focused on direction, quality, and user experience.&lt;/p&gt;
&lt;p&gt;The interesting part was that the more I got used to the workflow, the more I handed off to the agent. The validation and general experience had to be largely influenced or orchestrated by me, but building, testing, and even updating documentation could be delegated. In the beginning, I started just building things, but the more we built, the more the AI agent failed to keep existing functionality intact. With those small context windows, it’s kind of understandable after all.&lt;/p&gt;
&lt;h3 id=&quot;quality-assurance--knowledge-capturing-matters-more-than-ever&quot;&gt;Quality Assurance &amp;#x26; Knowledge Capturing Matters More Than Ever&lt;/h3&gt;
&lt;p&gt;As engineers, we know that at some points we cannot grasp every influence of our code changes on the whole code base anymore. Therefore, we use tests and tooling to help us keep our sanity.&lt;/p&gt;
&lt;p&gt;The good thing is that the Rust and Cargo toolchains are exceptionally high quality when it comes to providing the right tooling also for agents.&lt;/p&gt;
&lt;p&gt;Due to its lack of long-term context and limited knowledge of all the library’s capabilities, the tests and verification mechanisms become crucial. While these &lt;em&gt;are&lt;/em&gt; part of the context, they’re not stored in the agent’s memory but baked into the codebase itself. With the tests and the tooling being available to the agent, it will still make mistakes, as I do, but they can effectively &lt;code&gt;auto-heal&lt;/code&gt; or &lt;code&gt;auto-correct&lt;/code&gt; their own mistakes with the provided feedback.&lt;/p&gt;
&lt;p&gt;I can only advise being even stricter with QA from the very beginning.&lt;/p&gt;
&lt;p&gt;Another thing that became apparent very quickly is that, unlike a human colleague with lots of context and a good memory, agents &lt;em&gt;still&lt;/em&gt; need significant help to remember things to avoid rediscovering the same information repeatedly. This revealed another crucial human role: &lt;code&gt;context engineering&lt;/code&gt; becomes critically important. As such, we engineers become the keepers of institutional knowledge, the ones that help the agent remember what worked and what didn’t. I would describe it as &lt;code&gt;knowledge capture&lt;/code&gt;, for lack of a better term.&lt;/p&gt;
&lt;h2 id=&quot;tips--tricks&quot;&gt;Tips &amp;#x26; Tricks&lt;/h2&gt;
&lt;h3 id=&quot;ai-is-eager-resourceful-and-has-memory-like-a-sieve&quot;&gt;AI Is Eager, Resourceful, and Has Memory Like a Sieve&lt;/h3&gt;
&lt;p&gt;Here are the key insights I gained from building the library with an AI coding agent:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Code that works:&lt;/strong&gt; This might seem obvious, but it wasn’t clear to me if the library would ever be usable or publishable, but it is. The AI proved it could deliver production-ready code.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Time Effectiveness:&lt;/strong&gt; While creating the library took around 3 weeks, don’t let this fool you. Most of the time, the agent worked alone, and I only had to check in once in a while to review and give feedback. Iteration cycles and rewriting still take time. So I wouldn’t say development was faster than if I did it myself, but much more scalable and effective with my own time. Here’s what I actually spent my time on: reviewing architectural decisions, ensuring the API made sense, and play-testing the final product.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Stamina:&lt;/strong&gt; The agent never complained, even when fixing 400+ warnings after setting the linter to pedantic—it pushed through. The AI powered through hundreds of warnings, even clustering them and suggesting which to fix first. To be fair, most humans would have either gone crazy or aborted the effort claiming “it’s good enough.” This revealed something important: as humans, we don’t need to be the ones grinding through tedious tasks anymore.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Overzealous Builder:&lt;/strong&gt; The agent often built more than I asked for. Scoping and clear implementation plans were essential. This taught me that one of the key human roles is setting boundaries and maintaining focus.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Premature “Done”:&lt;/strong&gt; Sometimes the agent claimed it was finished but left code mocked or incomplete. I learned to always ask, “Is there anything left to implement?” Quality assurance becomes fundamentally a human responsibility.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Old Knowledge:&lt;/strong&gt; The AI sometimes relied on outdated library knowledge. I had to remind it to check the latest docs and version of dependencies, but when asked, it searched the web, GitHub, crates.io, etc., and gathered all necessary information for using a library. Humans become the validators of information freshness.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Forgetting and Compaction:&lt;/strong&gt; Larger features grow outside the context window, so the agent would “compact” context, sometimes forgetting important details. Forcing it to write implementation plans in markdown files helps maintain flow and allows better resuming and bookkeeping. We humans become the keepers of long-term project memory.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Helps Establishing Rules:&lt;/strong&gt; While working with the agent, I saw repeating patterns like it forgetting how to check, build, and test the application, or best practices like using &lt;code&gt;git worktrees&lt;/code&gt;. I started adding new rules to &lt;code&gt;Claude.md&lt;/code&gt; by myself at first, but quickly realized that the agent is far better at formulating and adding new rules if I asked it to. The human role evolved into being the pattern recognizer and rule creator.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Doesn’t Always Obey the Rules:&lt;/strong&gt; Most of the time, the rules are followed, but occasionally it doesn’t follow them and forgets to automatically run all tests. This reinforced that humans must remain the final guardians of process and quality.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Code Deletion:&lt;/strong&gt; Occasionally, the AI “fixed” issues by removing important code paths. Solution: Insist on never removing functionality without discussion, and build a robust test suite. We become the protectors of existing functionality.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Process Management:&lt;/strong&gt; The AI struggled with background processes, understanding when to run things in the background, and keeping track of what it started. For example, starting a web server via &lt;a href=&quot;https://docs.anthropic.com/en/docs/agents-and-tools/tool-use/bash-tool&quot;&gt;&lt;code&gt;Bash&lt;/code&gt;&lt;/a&gt; (see &lt;a href=&quot;https://docs.anthropic.com/en/docs/agents-and-tools/tool-use/bash-tool&quot;&gt;Claude Code Bash tool docs&lt;/a&gt;), and then trying to use a &lt;a href=&quot;https://github.com/microsoft/playwright&quot;&gt;&lt;code&gt;playwright&lt;/code&gt; tool&lt;/a&gt; (see also &lt;a href=&quot;https://github.com/microsoft/playwright-mcp&quot;&gt;playwright-mcp&lt;/a&gt;) to access this server was blocked by these issues. Complex orchestration remains a distinctly human skill.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Overly Agreeable:&lt;/strong&gt; Too often, it seems to just agree with whatever I said. For the future, I wish agents wouldn’t be so obedient. This highlighted that humans need to be the challengers and devil’s advocates in the process.&lt;/p&gt;
&lt;h3 id=&quot;further-remarks&quot;&gt;Further Remarks&lt;/h3&gt;
&lt;p&gt;After three weeks of this experiment, the patterns became clear. Here’s what I learned about the human role in AI-assisted development:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Ensure Verify&lt;/strong&gt;, &lt;strong&gt;and Self-Correct:&lt;/strong&gt; Always ask the AI to check, format, lint, test, and benchmark its work. Your job becomes quality orchestration, not quality execution.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Always Plan First:&lt;/strong&gt; Insist on a clear implementation plan before coding begins. Humans excel at high-level architectural thinking and breaking down complex problems.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Write It Down:&lt;/strong&gt; Let an agent keep notes, todos, and open issues in markdown files. Ideally in the repository itself. Don’t rely on the AI’s memory. We become the institutional memory keepers.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Scope Features:&lt;/strong&gt; Break tasks into small, manageable pieces. Feature scoping and boundary setting become a core human skill.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Test Suite is King:&lt;/strong&gt; A robust test suite prevents accidental “fixes” that remove functionality. Humans become the guardians of existing behavior.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Stay Involved:&lt;/strong&gt; Fast iteration and discussion with the AI is crucial. Don’t go fully hands-off. Active curation and guidance remain essential.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;So, what do humans actually do when AI does all the coding?&lt;/p&gt;
&lt;p&gt;To answer that, let’s look at what AI agents are today:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Agents are super-talented, overly obedient coding assistants with lots of stamina and endless potential.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;They’re fast, never complain, and iterate like champs. But they need your guidance, structure, and a healthy dose of skepticism.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;In the end, the best results come from a true partnership: you plan and guide—the AI builds, fixes, and learns.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;If you follow these concepts, then&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“Vibe engineering is a highly engaging experience.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;And if you’re wondering: yes, I’d do it again. But next time, I’ll make sure the AI writes everything down too, and I’ll put even more effort into validating and securing new features as soon as they’re play-tested and verified. The human role isn’t disappearing—it’s evolving into something more strategic and impactful.&lt;/p&gt;
&lt;p&gt;Through this experiment, I’ve identified three fundamental shifts that define what engineering becomes in an AI-assisted world:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;From Execution to Orchestration&lt;/strong&gt;&lt;br&gt;
We’re no longer the ones typing code—we’re the conductors. Our new skills revolve around prompting (framing tasks so AI understands our intent), directing workflows (knowing when to use AI versus human judgment), and tool fluency (combining different AI tools to create something greater than their parts).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;From Knowledge to Reasoning&lt;/strong&gt;&lt;br&gt;
AI can recall facts and syntax better than any human ever could. But what matters now is our ability to interpret, contextualize, and make sense of uncertainty—something current AI still struggles with. We become the ones who ask “why” and “what if” rather than just “how.”&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;From Repetition to Adaptation&lt;/strong&gt;&lt;br&gt;
Skills rooted in routine are increasingly automated. The enduring value lies in adaptive thinking, problem-framing, and reinventing approaches when the usual patterns don’t apply. We’re the ones who recognize when something feels off, even if we can’t immediately articulate why.&lt;/p&gt;
&lt;h2 id=&quot;afterthought&quot;&gt;Afterthought&lt;/h2&gt;
&lt;p&gt;During this experiment, I saw that the agent repeated similar tasks over and over again. One thing that struck me was looking up documentation. Whenever something with a third-party library didn’t pan out, it started web-searching for info and guides about the library. It rarely started out with reading the Rust docs first, so I had to tell it to use the Rust docs. Therefore, I assume that providing quick access via tools to guides, docs, API references, and examples will spare me some roundtrips, time, and tokens and accelerate the process. I know that there are tools like &lt;a href=&quot;https://context7.com/&quot;&gt;context7&lt;/a&gt;, but it seems to be focused on JavaScript. At least for the Rust ecosystem, the docs are centralized and standardized and can even be used locally. A tool to access those quickly and find things in them would be highly beneficial.&lt;/p&gt;
&lt;p&gt;Additionally, for coding projects, there are typical steps to follow to verify if the code is sound. It’s probably also best to provide specific tools or workflows to follow these steps exactly. Rules already help with this, though.&lt;/p&gt;
&lt;p&gt;Last but not least, a natural next step would be for an agent to analyze its history periodically and provide new memory entries (rules) based on that to reduce repetition and common mistakes. For more details, see the &lt;a href=&quot;https://img.ly/blog/vibe-engineering-when-ai-does-all-the-coding-what-do-we-actually-do/#appendix-most-used-prompts&quot;&gt;&lt;em&gt;Appendix: Most used prompts&lt;/em&gt;&lt;/a&gt; section, where I analyzed the top 10 most common prompts to help agents proactively develop useful rules.&lt;/p&gt;
&lt;p&gt;If you’re curious about improvements, I’ve put together a &lt;a href=&quot;https://img.ly/blog/vibe-engineering-when-ai-does-all-the-coding-what-do-we-actually-do/#appendix&quot;&gt;&lt;em&gt;wishlist for Claude Code&lt;/em&gt;&lt;/a&gt; that would make the agent even more useful.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;try-it-yourself&quot;&gt;Try It Yourself&lt;/h2&gt;
&lt;p&gt;If you want to experience the results of vibe-engineering firsthand:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;bash&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;# Clone and explore the codebase&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; clone&lt;/span&gt;&lt;span&gt; https://github.com/imgly/background-removal-rs.git&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; checkout&lt;/span&gt;&lt;span&gt; --tag&lt;/span&gt;&lt;span&gt; v0.2.0&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;# Or install the CLI directly&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;cargo&lt;/span&gt;&lt;span&gt; install&lt;/span&gt;&lt;span&gt; --git&lt;/span&gt;&lt;span&gt; https://github.com/imgly/background-removal-rs.git&lt;/span&gt;&lt;span&gt; --tag&lt;/span&gt;&lt;span&gt; v0.2.0&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Remember: every line of code in this library was written by AI while I played the role of curator, architect, and quality guardian. Judge for yourself whether this new paradigm produces production-ready results.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;appendix&quot;&gt;Appendix&lt;/h2&gt;
&lt;h3 id=&quot;appendix-claude-code-wishlist&quot;&gt;Appendix: Claude Code Wishlist&lt;/h3&gt;
&lt;p&gt;During the experiment, I encountered some issues whose resolution would improve the agent.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Project-scoped history (not global).&lt;/li&gt;
&lt;li&gt;Project-scoped todos (not global).&lt;/li&gt;
&lt;li&gt;Project-scoped implementation plans (not global).&lt;/li&gt;
&lt;li&gt;Customizable &lt;code&gt;/compact&lt;/code&gt; prompt or choose other compact strategies.&lt;/li&gt;
&lt;li&gt;Improved handling of background processes.&lt;/li&gt;
&lt;li&gt;History analytics with memory proposal.&lt;/li&gt;
&lt;li&gt;Code-specific predefined &lt;code&gt;Code and Validate&lt;/code&gt; workflows.&lt;/li&gt;
&lt;li&gt;Allow forking of multiple agents from a single point in the session history to create multiple trials with the same intent and context.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;appendix-most-used-prompts&quot;&gt;Appendix: Most Used Prompts&lt;/h3&gt;
&lt;p&gt;Claude code stores the history under &lt;code&gt;~/.claude/history&lt;/code&gt; as json formats. I asked claude code to read them in and categorize the most used prompts.&lt;/p&gt;



































































































































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;#&lt;/th&gt;&lt;th&gt;Category&lt;/th&gt;&lt;th&gt;% Usage (Count)&lt;/th&gt;&lt;th&gt;Description / Examples&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Other/Specific Instructions&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;19.5%&lt;/td&gt;&lt;td&gt;Technical specs, detailed requirements&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “Relax the success metrics”, “Use tensor data directly as alpha channel”&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Questions&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;12.7%&lt;/td&gt;&lt;td&gt;Status checks, clarifications&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “What’s next?”, “How can I test it myself?”, “Do we have any mock implementations?“&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Implementation Requests&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;11.1%&lt;/td&gt;&lt;td&gt;Direct build/create requests&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “Create a PRD for Rust port”, “Make ONNX Runtime injectable”&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Simple Responses&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;10.0%&lt;/td&gt;&lt;td&gt;Short confirmations, approvals&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “ok”, “go for it”, specific technical choices&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Continuation Commands&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;8.4%&lt;/td&gt;&lt;td&gt;Requests to proceed&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “go on” (59 times)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;&lt;strong&gt;File Operations&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;8.3%&lt;/td&gt;&lt;td&gt;File management&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “Write this into PRD.md”, “Move packages into crates directory”&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Context Summaries&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;8.3%&lt;/td&gt;&lt;td&gt;Session continuation due to context limits&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “This session is being continued from a previous conversation…“&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Analysis/Review Requests&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;7.7%&lt;/td&gt;&lt;td&gt;Requests to analyze/review&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “Analyze my background removal project”, “Check the preprocessing”&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Bug Fix/Issue Resolution&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;4.4%&lt;/td&gt;&lt;td&gt;Problem identification/fixes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “You mix up release and debug”, “This is wrong”&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Testing&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;3.8%&lt;/td&gt;&lt;td&gt;Running/validating tests&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;em&gt;e.g.&lt;/em&gt;: “Test images are incorrect”, “Rerun comparison tests”&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;h3 id=&quot;appendix-claude-code-settings&quot;&gt;Appendix: Claude Code Settings&lt;/h3&gt;
&lt;p&gt;In real-world projects, the default timeout of two minutes is not enough. I bumped the timeouts to the maximum values to allow execution of unit tests, E2E tests, benchmarks, and long-running tasks.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;BASH_DEFAULT_TIMEOUT_MS&lt;/code&gt;: Sets the default timeout (in milliseconds) for long-running bash commands.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;BASH_MAX_TIMEOUT_MS&lt;/code&gt;: Specifies the maximum timeout (in milliseconds) that can be set for bash commands.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;BASH_MAX_OUTPUT_LENGTH&lt;/code&gt;: Limits the maximum number of characters in bash outputs before they are truncated in the middle.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;CLAUDE_BASH_MAINTAIN_PROJECT_WORKING_DIR&lt;/code&gt;: Ensures the working directory is reset to the original after each Bash command.&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;json&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;{&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &quot;env&quot;&lt;/span&gt;&lt;span&gt;: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &quot;CLAUDE_BASH_MAINTAIN_PROJECT_WORKING_DIR&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;true&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &quot;BASH_MAX_TIMEOUT_MS&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;3600000&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &quot;BASH_DEFAULT_TIMEOUT_MS&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;3600000&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &quot;MCP_TIMEOUT&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;3600000&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &quot;MCP_TOOL_TIMEOUT&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;3600000&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;library-capabilities&quot;&gt;Library Capabilities&lt;/h3&gt;
&lt;p&gt;High-performance Rust library for AI-powered background removal with hardware acceleration, built for&lt;br&gt;
production scale and developer productivity.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Performance Highlights&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Hardware acceleration: CUDA (NVIDIA), CoreML (Apple Silicon), CPU fallback&lt;/li&gt;
&lt;li&gt;Sub-second processing on modern hardware (100-1200ms depending on image size)&lt;/li&gt;
&lt;li&gt;Memory efficient with optimized threading and session reuse&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Key Features&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;AI Models &amp;#x26; Quality&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Multiple state-of-the-art models (ISNet, BiRefNet)&lt;/li&gt;
&lt;li&gt;FP16/FP32 precision variants for performance vs. quality&lt;/li&gt;
&lt;li&gt;Portrait-optimized and general-purpose models&lt;/li&gt;
&lt;li&gt;Custom model support via ONNX models from &lt;a href=&quot;https://huggingface.co/&quot;&gt;Hugging Face&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Format and Color Profile Support&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Input: JPEG, PNG, WebP, TIFF, BMP with ICC color profile preservation&lt;/li&gt;
&lt;li&gt;Output: PNG (transparency), JPEG, WebP, TIFF, raw RGBA8&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Integration Patterns&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;One-liner API for simple use cases&lt;/li&gt;
&lt;li&gt;Session-based processing for batch operations&lt;/li&gt;
&lt;li&gt;Stream processing from any AsyncRead source&lt;/li&gt;
&lt;li&gt;CLI tool for standalone usage and pipeline integration&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Architecture &amp;#x26; Platforms&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Dual Backend System&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;ONNX Runtime: Maximum performance, GPU acceleration&lt;/li&gt;
&lt;li&gt;Tract: Pure Rust, zero external dependencies&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Platform Support&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;macOS: Apple Silicon + Intel with CoreML acceleration&lt;/li&gt;
&lt;li&gt;Linux/Windows: NVIDIA CUDA + CPU fallback&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Developer Experience&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Modern Rust Ecosystem&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Async/await native support&lt;/li&gt;
&lt;li&gt;Comprehensive documentation and examples&lt;/li&gt;
&lt;li&gt;Zero-warning policy with extensive testing&lt;/li&gt;
&lt;li&gt;Structured tracing for production observability&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;CLI Capabilities&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Batch processing with recursive directory support&lt;/li&gt;
&lt;li&gt;Model management (download, cache, clear)&lt;/li&gt;
&lt;li&gt;Provider diagnostics and performance monitoring&lt;/li&gt;
&lt;li&gt;Pipeline-friendly with stdin/stdout support&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;3,000+ creative professionals get early access to new features and updates—don’t miss out, and&lt;/strong&gt; &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;to our newsletter.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Daniel</dc:creator><media:content url="https://blog.img.ly/2025/07/20250705_1708_Human-Robot-Collaboration_remix_01jzdj0cdxeacs9y9rbhsn04yy.png" medium="image"/><category>AI</category><category>Vibe Coding</category></item><item><title>IMG.LY x AI</title><link>https://img.ly/blog/img-ly-x-ai-future-of-ai-powered-creative-workflows/</link><guid isPermaLink="true">https://img.ly/blog/img-ly-x-ai-future-of-ai-powered-creative-workflows/</guid><description>Shaping the Future of Creative Workflows</description><pubDate>Mon, 30 Jun 2025 13:18:14 GMT</pubDate><content:encoded>&lt;p&gt;Over the past two years, one question has consistently emerged in conversations with customers: “What about AI?”&lt;br&gt;
While AI promises to disrupt many industries, it remains difficult to grasp how this technology will reshape creative workflows.&lt;/p&gt;
&lt;p&gt;Our customers look to us for guidance: What is IMG.LY’s vision? How will our SDK help them harness this wave of innovation?&lt;br&gt;
Last month, we took our first significant step by launching an &lt;a href=&quot;https://img.ly/use-cases/ai-editor&quot;&gt;initial suite of generative AI-powered features for our web SDK&lt;/a&gt;. We’ve embedded these tools deeply into photo, video, and design editing workflows and the response from customers and prospects was overwhelmingly positive.&lt;/p&gt;
&lt;p&gt;And this is just the beginning. An immense opportunity lies ahead for both IMG.LY and our customers to drive transformation in the creative domain through our SDK. In this post, I want to share our vision for the future of creative tools powered by AI and our SDK.&lt;/p&gt;
&lt;p&gt;Going forward, we’re focusing on three central goals:&lt;/p&gt;
&lt;h3 id=&quot;1-deep-integration-of-ai-capabilities-into-editing-workflows&quot;&gt;1. Deep Integration of AI Capabilities into Editing Workflows&lt;/h3&gt;
&lt;p&gt;The pace of AI innovation continues to be remarkably fast. New models and configurations emerge almost daily, some as APIs, others open-sourced on platforms like Hugging Face. While some offer generalist features, others provide specialized, industry-specific capabilities, such as automatically obscuring license plates, blurring faces or replacing skies for property exteriors.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The true value of these AI tools emerges not in isolation, but when they’re seamlessly combined within existing workflows&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;That’s why we built a &lt;strong&gt;plugin system&lt;/strong&gt; for CE.SDK.&lt;br&gt;
The CE.SDK plugin system has fundamentally changed how quickly we, and our customers, can integrate new capabilities. We’ve created a way to bring AI models and agents directly into connected workflows within the editor, making AI feel native rather than bolted on.&lt;/p&gt;
&lt;p&gt;A recent example is &lt;a href=&quot;https://img.ly/blog/ai-first-visual-editor-for-gpt-4o-image-gen/&quot;&gt;our integration of OpenAI’s gpt-image-1 API&lt;/a&gt;, which we implemented in just a few days after its release. We used it to build a visual prompting workflow that takes into account all elements of a page, text, images, and annotations, to generate results based on the complete layout context.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/visualprompt_05.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;These early successes are encouraging us to ship even faster and bring new features to our customers.&lt;/p&gt;
&lt;p&gt;We’re now partnering with &lt;a href=&quot;https://fal.ai/&quot;&gt;fal.ai&lt;/a&gt; to provide a nearly out-of-the-box experience to use any new generative AI model through their platform (more on this soon). Fal.ai excels at speed—when exciting new models emerge, they offer API access within days. This partnership ensures our users can quickly access new AI capabilities with minimal effort. More partnerships and integrations are on the horizon, bringing world-class AI APIs with intuitive interfaces directly into the editor.&lt;/p&gt;
&lt;h3 id=&quot;2-enabling-ai-agents-as-creative-collaborators&quot;&gt;2. Enabling AI Agents as Creative Collaborators&lt;/h3&gt;
&lt;p&gt;AI agents, like humans, leverage tools to accomplish tasks efficiently. CE.SDK occupies a unique position as a highly adaptable, multi-platform technology for editing various media types—including a fully documented headless version that’s perfect for programmatic control.&lt;/p&gt;
&lt;p&gt;Thanks to CE.SDK’s fully documented API and headless architecture, AI agents can be created to navigate and operate the editor programmatically. This opens the door to agents that act as powerful scaffolders:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Generating initial designs and layouts based on brief descriptions&lt;/li&gt;
&lt;li&gt;Automatically aligning content with brand guidelines&lt;/li&gt;
&lt;li&gt;Transforming static designs into dynamic videos with a single command&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://img.ly/blog/how-to-build-a-short-video-generator-using-ce-sdk-2/&quot;&gt;Creating engaging short video content from prompts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Adapting existing designs to new formats and dimensions&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Crucially, everything an AI agent creates remains &lt;strong&gt;fully editable&lt;/strong&gt; by human users. You can refine, add nuance, and perfect the results through collaboration. AI provides the scaffolding, humans remain the tastemakers, adding the creative spark that makes designs truly exceptional.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/shortyroll.mp4&quot; controls loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h3 id=&quot;3-ai-powered-sdk-configuration-and-customization&quot;&gt;3. AI-Powered SDK Configuration and Customization&lt;/h3&gt;
&lt;p&gt;AI agents are already actively involved in building, refining, and optimizing software tools—a trend that’s accelerating rapidly. This shift directly impacts developer experience and points to an exciting future where our SDK serves not just human developers, but AI agents as well.&lt;/p&gt;
&lt;p&gt;To facilitate this interaction, we’ve already taken steps like making our documentation available in LLM-friendly formats. But this is just the beginning of our journey toward radically improving the experience for both developers and AI agents.&lt;/p&gt;
&lt;p&gt;Our ultimate goal is conversational configuration. Imagine describing your requirements in plain language, and having an AI agent handle the rest:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Configuring the SDK’s visual aesthetics to match your brand&lt;/li&gt;
&lt;li&gt;Setting up custom functionality and workflows&lt;/li&gt;
&lt;li&gt;Integrating media libraries and plugins&lt;/li&gt;
&lt;li&gt;Optimizing performance for specific use cases&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This isn’t just about making development faster. It’s about democratizing access to powerful creative tools, allowing anyone to build sophisticated editing experiences—regardless of technical expertise.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/vibe-coding-design-ads-visuals-editor.mp4&quot; controls loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;looking-forward&quot;&gt;Looking Forward&lt;/h2&gt;
&lt;p&gt;We believe that AI collaboration represents a transformative shift in creative technology, empowering users and developers to achieve extraordinary outcomes. At IMG.LY, we’re committed to being at the forefront of this exciting journey. Our vision extends beyond simply adding AI features, we’re reimagining how creative tools are built, configured, and used in an AI-augmented world.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Stay ahead with us: &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;subscribe&lt;/a&gt; to our newsletter for exclusive updates.&lt;/p&gt;</content:encoded><dc:creator>Eray</dc:creator><media:content url="https://blog.img.ly/2025/06/creative-editor-sdk-1-53--1-.png" medium="image"/><category>AI</category><category>Company</category></item><item><title>AI-first Visual Editor using GPT-4o’s gpt-image-1 Model</title><link>https://img.ly/blog/ai-first-visual-editor-for-gpt-4o-image-gen/</link><guid isPermaLink="true">https://img.ly/blog/ai-first-visual-editor-for-gpt-4o-image-gen/</guid><description>We embedded OpenAI’s gpt-image-1 API into our CreativeEditor SDK, enabling users to generate and refine images directly in their creative workflow—no tool switching. This brings multimodal AI into real-world design tasks with seamless prompting, editing, and visual iteration.</description><pubDate>Mon, 05 May 2025 20:58:07 GMT</pubDate><content:encoded>&lt;h2 id=&quot;what-we-built&quot;&gt;What We Built&lt;/h2&gt;
&lt;p&gt;We integrated OpenAI’s new &lt;code&gt;gpt-image-1&lt;/code&gt; API (from GPT-4o) directly into our fully functional visual editor, &lt;strong&gt;CreativeEditor SDK (CE.SDK)&lt;/strong&gt;, enabling generation, editing, and refinement of images without ever leaving your creative workflow.&lt;/p&gt;
&lt;div class=&quot;cta-button-wrapper&quot;&gt;&lt;a href=&quot;https://cdn.img.ly/demo/gpt-image-1/v1/&quot; target=&quot;_blank&quot; class=&quot;cta-button&quot;&gt;Open AI Editor Demo Page&lt;/a&gt;&lt;/div&gt;
&lt;h3 id=&quot;from-simple-image-generation-to-visual-prompting-on-a-canvas&quot;&gt;From Simple Image Generation to Visual Prompting on a Canvas&lt;/h3&gt;
&lt;p&gt;Inside the editor, users can now:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Generate Images&lt;/strong&gt;&lt;br&gt;
Use prompts to generate images from scratch.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Generate Images from Visual Prompts&lt;/strong&gt;&lt;br&gt;
Turn full compositions—images, text, and annotations—into fresh visual content. Just select your page and let AI handle the rest, as shown in the video.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/visualprompt_05.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Reimagine Images &amp;#x26; Text&lt;/strong&gt;&lt;br&gt;
Edit existing images and text with prompts to iterate faster and create &lt;strong&gt;variants&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/variants_02.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Create Incredible Compositions&lt;/strong&gt;&lt;br&gt;
Combine generated and uploaded images into complex compositions.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-ai/combine.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Each step builds on the last, evolving from basic generation into true visual prompting powered by multiple input modes, all within one canvas. Check out the live demo &lt;a href=&quot;https://cdn.img.ly/demo/gpt-image-1/v1/index.rc6.html&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;how-we-built-it&quot;&gt;How We Built It&lt;/h2&gt;
&lt;p&gt;We built this integration using our &lt;strong&gt;CE.SDK&lt;/strong&gt; and its flexible &lt;strong&gt;plugin&lt;/strong&gt; system, designed from the ground up to support AI-first creative workflows.&lt;/p&gt;
&lt;p&gt;This approach lets developers plug in any model or API—text, image, video, or audio—and run them all in one seamless editing flow. Whether you’re using OpenAI, Stability, or an in-house model, CE.SDK gives you the tools to bring it into the visual workflow natively.&lt;/p&gt;
&lt;p&gt;🔗 Check out our &lt;a href=&quot;https://img.ly/use-cases/ai-editor&quot;&gt;AI Editor&lt;/a&gt;.&lt;br&gt;
📘 Learn how to &lt;a href=&quot;https://img.ly/docs/cesdk/js/user-interface/ai-integration-5aa356/&quot;&gt;integrate AI into CE.SDK&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;why-this-matters&quot;&gt;Why This Matters&lt;/h2&gt;
&lt;p&gt;Generative AI’s full potential isn’t unlocked by prompting alone, it’s unlocked when embedded into real-world creative workflows.&lt;/p&gt;
&lt;p&gt;Designers, marketers, and content teams don’t just need outputs; they need &lt;strong&gt;control&lt;/strong&gt;, &lt;strong&gt;iteration&lt;/strong&gt;, and &lt;strong&gt;context&lt;/strong&gt;. By bringing AI directly into the canvas where assets are created and edited, we turn generative models into tools for actual production, not just ideation.&lt;/p&gt;
&lt;p&gt;This shift enables:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Creative work in context&lt;/strong&gt;: No switching between ChatGPT and design tools.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Real-time augmentation&lt;/strong&gt;: Prompt, edit, refine &lt;em&gt;in place&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Scalable content generation&lt;/strong&gt;: Automate localization, personalization, and variants.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Multimodal orchestration&lt;/strong&gt;: Use visuals, layouts, and annotations as inputs.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;It’s a step toward making multimodal AI usable for &lt;strong&gt;real design workflows&lt;/strong&gt;, not just concept generation.&lt;/p&gt;
&lt;h2 id=&quot;integration--feedback&quot;&gt;Integration &amp;#x26; Feedback&lt;/h2&gt;
&lt;p&gt;This linked demo is &lt;strong&gt;rate-limited&lt;/strong&gt;, if you would like to test more extensively or if you are interested in giving the AI editor a spin inside your own app, you can get started with our &lt;a href=&quot;https://img.ly/docs/cesdk/js/user-interface/ai-integration-5aa356/&quot;&gt;documentation&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;We’d love your feedback, any thoughts, questions, and ideas are welcome!&lt;br&gt;
&lt;a href=&quot;mailto:ai@img.ly&quot;&gt;Reach out&lt;/a&gt; to us.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;3,000+ creative professionals gain early access to new features and updates—don’t miss out, and&lt;/strong&gt; &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;to our newsletter.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Eray</dc:creator><media:content url="https://blog.img.ly/2025/05/cesdk-2025-05-12T08_58_58.284Z.png" medium="image"/><category>AI</category><category>gpt-4o</category></item><item><title>OpenAI GPT-4o Image Generation (gpt-image-1) API: A Complete Guide for Creative Workflows for 2025</title><link>https://img.ly/blog/openai-gpt-4o-image-generation-api-gpt-image-1-a-complete-guide-for-creative-workflows-for-2025/</link><guid isPermaLink="true">https://img.ly/blog/openai-gpt-4o-image-generation-api-gpt-image-1-a-complete-guide-for-creative-workflows-for-2025/</guid><description>Learn how to integrate OpenAI’s gpt-image-1 API into modern creative applications. This complete 2025 guide covers technical setup, CE.SDK integration, prompt engineering, and tips for building real multimodal creative workflows.</description><pubDate>Mon, 28 Apr 2025 07:55:48 GMT</pubDate><content:encoded>&lt;h2 id=&quot;update-ai-first-visual-editing&quot;&gt;Update: AI-first Visual Editing&lt;/h2&gt;
&lt;p&gt;A day after the release of the &lt;code&gt;gpt-image-1&lt;/code&gt; API, we took it for a spin and integrated it into CreativeEditor SDK. Users can now generate images, create variants and use the canvas to compose visual prompts with our design editor. See it in action:&lt;/p&gt;
&lt;div class=&quot;cta-button-wrapper&quot;&gt;&lt;a href=&quot;https://cdn.img.ly/demo/gpt-image-1/v1/&quot; target=&quot;_blank&quot; class=&quot;cta-button&quot;&gt;Open AI Editor Demo Page&lt;/a&gt;&lt;/div&gt;
&lt;h2 id=&quot;introduction&quot;&gt;Introduction&lt;/h2&gt;
&lt;p&gt;The release of OpenAI’s &lt;code&gt;gpt-image-1&lt;/code&gt; model signals a pivotal shift in the creative developer landscape—one that moves beyond static, one-shot image generation and toward a more dynamic, multimodal interaction model. Until recently, most image APIs followed a predictable pattern: submit a prompt, receive a finished image. The process was useful, but flat. What’s changing now is not just image quality or style fidelity, but the shape of the workflow itself. With &lt;code&gt;gpt-image-1&lt;/code&gt;, built on the GPT-4o foundation, developers can start designing creative tools that feel conversational and iterative. This evolution invites a new kind of interface where prompting, tweaking, and refining happen inside the canvas, not outside of it.&lt;/p&gt;
&lt;p&gt;For teams building creative editing experience into their app, this moment coincides with the release of &lt;a href=&quot;https://img.ly/showcases/cesdk/ai-editor/web&quot;&gt;IMG.LY’s AI Editor SDK&lt;/a&gt;, a powerful, fully integrated toolkit designed for generative workflows. The SDK is already equipped to support interactive image generation, contextual editing, and multimodal inputs, and you can try it today through &lt;a href=&quot;https://img.ly/showcases/cesdk&quot;&gt;this live demo&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This guide is a comprehensive introduction to the &lt;code&gt;gpt-image-1&lt;/code&gt; API, but it also goes further. It’s not just about wiring up an endpoint, it’s about rethinking what image generation means in a user-centric product.&lt;/p&gt;
&lt;p&gt;From prompt handling to interactive iteration, we’ll walk through how to design creative cycles, not just outputs. This guide explores how to make that shift, how to go from generating images to integrating &lt;code&gt;gpt-image-1&lt;/code&gt; into real creative cycles, where AI becomes a tool that bends to user intent, not the other way around.&lt;/p&gt;
&lt;h2 id=&quot;overview-of-gpt-image-1&quot;&gt;Overview of &lt;code&gt;gpt-image-1&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;OpenAI’s &lt;code&gt;gpt-image-1&lt;/code&gt; model, released in April 2025, is the latest evolution in the company’s generative image lineup and marks a turning point in how developers approach visual creation inside applications. Built on the same multimodal foundation as GPT-4o, this model allows applications to move beyond one-shot static generation and instead build toward more conversational, iterative image workflows.&lt;/p&gt;
&lt;h3 id=&quot;model-architecture-and-capabilities&quot;&gt;Model Architecture and Capabilities&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;gpt-image-1&lt;/code&gt; is rooted in GPT-4o’s ability to understand and generate across modalities. It is designed to produce high-resolution images—up to 4096×4096 pixels—based on natural language prompts. The model handles complex scenes with more fidelity than previous iterations and provides improved consistency in how it interprets detailed descriptions. This is particularly relevant for tools that need reliability when turning prompt inputs into design elements.&lt;/p&gt;
&lt;h3 id=&quot;parameter-control&quot;&gt;Parameter Control&lt;/h3&gt;
&lt;p&gt;Developers working with &lt;code&gt;gpt-image-1&lt;/code&gt; have access to a streamlined set of parameters, here is a subset of the most important ones:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;prompt&lt;/code&gt;: The primary text input describing the desired image.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;size&lt;/code&gt;: Choose between “1024x1024”, “1024x1536” (portrait), “1536x1024” (landscape), or “auto” (default, based on prompt).&lt;/li&gt;
&lt;li&gt;&lt;code&gt;n&lt;/code&gt;: Number of images to generate (default is 1).&lt;/li&gt;
&lt;li&gt;&lt;code&gt;response_format&lt;/code&gt;: Always returns &lt;code&gt;b64_json&lt;/code&gt;. URL outputs are not supported.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Unlike DALL·E 3, &lt;code&gt;gpt-image-1&lt;/code&gt; does not accept &lt;code&gt;style&lt;/code&gt; modifiers or &lt;code&gt;quality&lt;/code&gt; settings. It is designed for straightforward, high-fidelity image creation driven purely by the text prompt and size selection.&lt;/p&gt;
&lt;p&gt;Full documentation of these options is available via &lt;a href=&quot;https://platform.openai.com/docs/guides/images/usage&quot;&gt;OpenAI’s official guide&lt;/a&gt;.&lt;/p&gt;
&lt;h3 id=&quot;style-and-use-case-alignment&quot;&gt;Style and Use Case Alignment&lt;/h3&gt;
&lt;p&gt;By supporting a wide range of stylistic templates, &lt;code&gt;gpt-image-1&lt;/code&gt; positions itself as a flexible backend for everything from marketing collateral to storyboarding tools. The output can be tailored to suit technical illustrations, concept art, or even photorealistic renderings, allowing developers to map visual outputs more directly to brand or product requirements.&lt;/p&gt;
&lt;h3 id=&quot;limitations-and-future-direction&quot;&gt;Limitations and Future Direction&lt;/h3&gt;
&lt;p&gt;As of April 2025, &lt;code&gt;gpt-image-1&lt;/code&gt; supports only one image per request and does not offer fine-grained image editing or inpainting. However, its tight coupling with GPT-4o suggests that future iterations may embrace persistent context, conversational refinement, or even integrated image-plus-text exchanges within the same session. For developers building editors or multimodal workflows, the current model lays a strong foundation for these future capabilities.&lt;/p&gt;
&lt;h2 id=&quot;api-setup-and-usage&quot;&gt;API Setup and Usage&lt;/h2&gt;
&lt;h3 id=&quot;21-get-access&quot;&gt;2.1 Get Access&lt;/h3&gt;
&lt;p&gt;To start using &lt;code&gt;gpt-image-1&lt;/code&gt;, developers must first register for access via the OpenAI platform at &lt;a href=&quot;https://platform.openai.com/&quot;&gt;platform.openai.com&lt;/a&gt;. Access requires an API key, which is tied to your OpenAI account and associated usage limits based on your billing tier. Be sure to confirm that your account is approved for image generation, as availability may differ by region and subscription level. Once authenticated, keys can be created in your dashboard and stored securely in your server or development environment.&lt;/p&gt;
&lt;h3 id=&quot;22-first-image-generation-nodejs-example&quot;&gt;2.2 First Image Generation (Node.js Example)&lt;/h3&gt;
&lt;p&gt;The image generation API for &lt;code&gt;gpt-image-1&lt;/code&gt; can be used directly via OpenAI’s official Node.js client. Below is a complete example showing how to send a prompt and receive an image URL in response:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;import&lt;/span&gt;&lt;span&gt; OpenAI &lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt; &apos;openai&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;import&lt;/span&gt;&lt;span&gt; fs &lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt; &apos;fs&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; openai&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; new&lt;/span&gt;&lt;span&gt; OpenAI&lt;/span&gt;&lt;span&gt;({&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  apiKey: process.env.&lt;/span&gt;&lt;span&gt;OPENAI_API_KEY&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// make sure this is securely set&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;async&lt;/span&gt;&lt;span&gt; function&lt;/span&gt;&lt;span&gt; generateImage&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  try&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    const&lt;/span&gt;&lt;span&gt; prompt&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; `&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    A studio ghibli style illustration of a cyberpunk girl holding a butterfly on her finger.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    `&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    const&lt;/span&gt;&lt;span&gt; result&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; openai.images.&lt;/span&gt;&lt;span&gt;generate&lt;/span&gt;&lt;span&gt;({&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      model: &lt;/span&gt;&lt;span&gt;&apos;gpt-image-1&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      prompt,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      size: &lt;/span&gt;&lt;span&gt;&apos;1024x1024&apos;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// or &quot;1024x1536&quot;, &quot;1536x1024&quot;, or &quot;auto&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    });&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    const&lt;/span&gt;&lt;span&gt; image_base64&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; result.data[&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;].b64_json;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    const&lt;/span&gt;&lt;span&gt; image_bytes&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; Buffer.&lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt;(image_base64, &lt;/span&gt;&lt;span&gt;&apos;base64&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    fs.&lt;/span&gt;&lt;span&gt;writeFileSync&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;butterfly.png&apos;&lt;/span&gt;&lt;span&gt;, image_bytes);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    console.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Image saved as butterfly.png&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  } &lt;/span&gt;&lt;span&gt;catch&lt;/span&gt;&lt;span&gt; (err) {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    console.&lt;/span&gt;&lt;span&gt;error&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Error generating image:&apos;&lt;/span&gt;&lt;span&gt;, err);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;generateImage&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Remember that all outputs from &lt;code&gt;gpt-image-1&lt;/code&gt; are delivered as base64-encoded JSON. Developers should decode this data for display, storage, or further processing within their applications. For complete parameter options and examples, consult the &lt;a href=&quot;https://platform.openai.com/docs/guides/images&quot;&gt;OpenAI Images API guide&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;integrating-with-cesdk&quot;&gt;Integrating with CE.SDK&lt;/h2&gt;
&lt;p&gt;Embedding &lt;code&gt;gpt-image-1&lt;/code&gt; into a creative editor like CE.SDK is about more than just piping an image into a canvas. It reshapes how users interact with content creation, bridging manual design work and AI-driven generation within the same editing environment. Rather than operating as a standalone prompt generator, &lt;code&gt;gpt-image-1&lt;/code&gt; becomes a continuous creative partner inside your editor. For in in-depth technical guide on how to integrate &lt;code&gt;gpt-image-1&lt;/code&gt; stay tuned for our upcoming tutorial, &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;sign up to our newsletter&lt;/a&gt; to be notified when it goes live.&lt;/p&gt;
&lt;h3 id=&quot;embedding-image-generation-in-a-creative-editing-workflow&quot;&gt;Embedding Image Generation in a Creative Editing Workflow&lt;/h3&gt;
&lt;p&gt;The natural entry point for &lt;code&gt;gpt-image-1&lt;/code&gt; inside CE.SDK is through a dual-mode experience: offering users the option to start either from scratch or from existing context. In “from scratch” mode, a user might open a blank scene and initiate an image generation by writing a prompt for example, “Create a vibrant festival scene at sunset.” The result appears directly on the canvas, immediately editable like any other design element.&lt;/p&gt;
&lt;p&gt;Where &lt;code&gt;gpt-image-1&lt;/code&gt; shows its real potential is in “in-context editing.” Here, users interact with existing content—a background, a product shot, or a decorative element and trigger AI enhancements based on that visual context. A user might select an image of a bird, as in the example below and ask for variants, initiate a background swap, or request a change like adding more birds in a conversational interface embedded in the editor. Because CE.SDK treats generated images as first-class canvas elements, context such as positioning, layering, and cropping is preserved throughout the process.&lt;/p&gt;
&lt;p&gt;Let’s see what this might look like in practice. We positioned an image of a single bird on our canvas, opening the AI context menu we can now manipulate that image in place using the OpenAI API:&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 940px) 940px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;940&quot; height=&quot;560&quot; src=&quot;https://img.ly/_astro/Screenshot-2025-04-25-at-16.23.20_1AbrtF.webp&quot; srcset=&quot;/_astro/Screenshot-2025-04-25-at-16.23.20_Z1575S9.webp 640w, /_astro/Screenshot-2025-04-25-at-16.23.20_ys06S.webp 750w, /_astro/Screenshot-2025-04-25-at-16.23.20_Z1EQsbT.webp 828w, /_astro/Screenshot-2025-04-25-at-16.23.20_1AbrtF.webp 940w&quot;&gt;&lt;/p&gt;
&lt;p&gt;We edit the image and prompt the API to add more birds:&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1104px) 1104px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1104&quot; height=&quot;638&quot; src=&quot;https://img.ly/_astro/Screenshot-2025-04-25-at-11.19.07_Z25Ctb.webp&quot; srcset=&quot;/_astro/Screenshot-2025-04-25-at-11.19.07_Z1F7wOz.webp 640w, /_astro/Screenshot-2025-04-25-at-11.19.07_TIGxo.webp 750w, /_astro/Screenshot-2025-04-25-at-11.19.07_ab33d.webp 828w, /_astro/Screenshot-2025-04-25-at-11.19.07_1t9at7.webp 1080w, /_astro/Screenshot-2025-04-25-at-11.19.07_Z25Ctb.webp 1104w&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1056px) 1056px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1056&quot; height=&quot;548&quot; src=&quot;https://img.ly/_astro/Screenshot-2025-04-25-at-11.19.31_1AbzqX.webp&quot; srcset=&quot;/_astro/Screenshot-2025-04-25-at-11.19.31_2tR7u4.webp 640w, /_astro/Screenshot-2025-04-25-at-11.19.31_Z1mkOlX.webp 750w, /_astro/Screenshot-2025-04-25-at-11.19.31_YB1k2.webp 828w, /_astro/Screenshot-2025-04-25-at-11.19.31_1AbzqX.webp 1056w&quot;&gt;&lt;/p&gt;
&lt;p&gt;We see that the model correctly identified the type of bird in the picture (seagull) and filled it in with a swarm of flying seagulls.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 1130px) 1130px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;1130&quot; height=&quot;622&quot; src=&quot;https://img.ly/_astro/Screenshot-2025-04-25-at-11.35.50_ZmbWJt.webp&quot; srcset=&quot;/_astro/Screenshot-2025-04-25-at-11.35.50_cDB31.webp 640w, /_astro/Screenshot-2025-04-25-at-11.35.50_1IhS4i.webp 750w, /_astro/Screenshot-2025-04-25-at-11.35.50_1U1mW3.webp 828w, /_astro/Screenshot-2025-04-25-at-11.35.50_ZmpbYH.webp 1080w, /_astro/Screenshot-2025-04-25-at-11.35.50_ZmbWJt.webp 1130w&quot;&gt;&lt;/p&gt;
&lt;p&gt;We can now continue to work with the image, overlaying filters, changing the texture, cropping etc.&lt;/p&gt;
&lt;h3 id=&quot;switching-between-manual-edits-and-ai-powered-enhancements&quot;&gt;Switching Between Manual Edits and AI-Powered Enhancements&lt;/h3&gt;
&lt;p&gt;A critical design principle when integrating &lt;code&gt;gpt-image-1&lt;/code&gt; is giving users freedom to toggle between manual edits and AI suggestions. Manual edits should always remain possible after generation, e.g. cropping, masking, compositing while users can also seamlessly prompt &lt;code&gt;gpt-image-1&lt;/code&gt; for additional changes without losing prior work. Think of variant generation as a branch: a user picks a generated image and creates “forks” by asking for alternate styles, different lighting, or new thematic elements.&lt;/p&gt;
&lt;p&gt;In this setup, the generated image serves as a stable node in the creative graph, while edits and regenerations can attach contextually. This workflow minimizes user frustration by avoiding the “start over” penalty typical of isolated generation APIs. It also opens up more complex creative behaviors, like blending user-drawn sketches with AI-augmented refinements, or iteratively developing an asset library around a consistent visual theme.&lt;/p&gt;
&lt;p&gt;An upcoming in-depth tutorial will walk through implementing this multimodal workflow step-by-step, but the key takeaway is that &lt;code&gt;gpt-image-1&lt;/code&gt; shines brightest when it is embedded into a creative loop—not treated as a black-box generator, but as an interactive, iterative design companion.&lt;/p&gt;
&lt;h2 id=&quot;prompt-engineering-tips&quot;&gt;Prompt Engineering Tips&lt;/h2&gt;
&lt;p&gt;One of the most overlooked but critical factors in successful image generation is prompt design. With &lt;code&gt;gpt-image-1&lt;/code&gt;, prompt engineering isn’t just about describing an image—it’s about steering the model toward intent, tone, composition, and usability. Because the model is capable of rendering complex scenes and a wide range of styles, thoughtful phrasing and contextual hints can dramatically affect the outcome.&lt;/p&gt;
&lt;h3 id=&quot;writing-for-visual-intent&quot;&gt;Writing for Visual Intent&lt;/h3&gt;
&lt;p&gt;Start by clarifying what the image is supposed to communicate. Are you looking for atmosphere, action, product detail, or narrative clarity? A prompt like “a city skyline at night” is a starting point, but it leaves too much to chance. Adding elements like “view from a rooftop bar, with glowing signage and overcast haze” gives the model anchors for both composition and mood.&lt;/p&gt;
&lt;h3 id=&quot;leveraging-artistic-language&quot;&gt;Leveraging Artistic Language&lt;/h3&gt;
&lt;p&gt;You can further refine outputs by referencing mediums or artistic schools. Prompts that include terms like “in watercolor style,” “oil painting,” ”80s anime aesthetic,” or “studio photography” help the model lock onto a particular visual identity. These cues not only improve stylistic fidelity but also align the output with specific brand or genre expectations, which is especially important for products with a defined look and feel.&lt;/p&gt;
&lt;h3 id=&quot;creating-consistency-in-branded-outputs&quot;&gt;Creating Consistency in Branded Outputs&lt;/h3&gt;
&lt;p&gt;When generating a set of related images, such as social media creatives, campaign assets, or UI visuals, consistency becomes more important than variety. To achieve this, structure prompts with repeatable patterns and include brand elements such as color palettes, motifs, or reference characters. While &lt;code&gt;gpt-image-1&lt;/code&gt; doesn’t yet support persistent memory across requests, consistency can be enforced by prompting with the same style terms, layout descriptions, and constraints. Teams working within CE.SDK can even pair prompt templates with locked canvas layers to preserve composition between generations.&lt;/p&gt;
&lt;p&gt;Ultimately, good prompt engineering is not about verbosity but about clarity and constraint. It’s less like writing poetry and more like drafting a product spec. The best prompts are focused, directive, and give the model just enough creative freedom within clear boundaries. However, effective prompting should not burden the user. In practice, the interface should abstract most of the complexity away. Users can be guided toward better outputs through simple UI choices—selecting predefined styles, choosing themes, or adjusting mood settings—while the system dynamically enhances and augments their input behind the scenes. By managing the technical depth invisibly, you enable a creative process that feels intuitive and powerful without ever making prompt engineering the center of the user experience.&lt;/p&gt;
&lt;h2 id=&quot;real-world-use-cases&quot;&gt;Real-World Use Cases&lt;/h2&gt;
&lt;p&gt;The versatility of &lt;code&gt;gpt-image-1&lt;/code&gt; makes it especially impactful across a variety of industries where visual content creation is either a core product feature or a major operational need. Beyond isolated image generation, the model supports workflows that demand contextual awareness, brand consistency, and iterative refinement, key ingredients for modern digital products.&lt;/p&gt;
&lt;h3 id=&quot;web-to-print&quot;&gt;Web-to-Print&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://img.ly/use-cases/web-to-print-design-tool&quot;&gt;In web-to-print applications&lt;/a&gt;, customers expect to customize marketing materials, event invitations, signage, or packaging with minimal friction. By integrating &lt;code&gt;gpt-image-1&lt;/code&gt;, developers can offer template-driven personalization where users simply select a theme or enter a few keywords, and receive ready-to-edit visual assets. Combined with CE.SDK’s layout and editing capabilities, this enables a highly interactive experience where generated backgrounds, graphical elements, or themed illustrations can be dynamically placed into editable templates.&lt;/p&gt;
&lt;h3 id=&quot;social-media-marketing-and-martech&quot;&gt;Social Media Marketing and MarTech&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://img.ly/industries/marketing-tech&quot;&gt;Marketing teams rely on high-frequency content creation&lt;/a&gt;, often needing visually consistent, campaign-specific assets. &lt;code&gt;gpt-image-1&lt;/code&gt; can assist by automating the generation of background scenes, promotional visuals, and thematic graphics based on campaign briefs. Brands can define style presets aligned with their visual identity, making it easy for marketing teams to produce “on-brand” assets without heavy design overhead. Integrating image generation directly into campaign builders or social scheduling tools amplifies speed without sacrificing quality.&lt;/p&gt;
&lt;h3 id=&quot;digital-asset-management-dam&quot;&gt;Digital Asset Management (DAM)&lt;/h3&gt;
&lt;p&gt;Asset libraries often suffer from gaps: missing variants, seasonal versions, or content tailored to different demographics. &lt;a href=&quot;https://img.ly/industries/digital-asset-management&quot;&gt;DAM systems&lt;/a&gt; can integrate &lt;code&gt;gpt-image-1&lt;/code&gt; to extend asset catalogs dynamically. Instead of manually commissioning variations, users can generate alternative backgrounds, localize visuals with region-specific elements, or adjust brand visuals for different markets—all from a single master file. With CE.SDK handling structured editing, teams maintain asset consistency while boosting creative flexibility.&lt;/p&gt;
&lt;h3 id=&quot;e-commerce&quot;&gt;E-Commerce&lt;/h3&gt;
&lt;p&gt;Product visualization remains a huge &lt;a href=&quot;https://img.ly/industries/e-commerce&quot;&gt;challenge in e-commerce&lt;/a&gt;, especially for smaller retailers. &lt;code&gt;gpt-image-1&lt;/code&gt; can be used to automatically create product lifestyle imagery, context backgrounds, or thematic campaigns without expensive photo shoots. For example, a single shoe photograph can be placed into a generated “urban,” “sporty,” or “luxury” background, customized according to target audiences. When tightly integrated into e-commerce platforms, this enables faster product launches, A/B tested visuals, and localized campaigns at scale.&lt;/p&gt;
&lt;h3 id=&quot;e-learning&quot;&gt;E-Learning&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://img.ly/industries/e-learning&quot;&gt;Educational platforms&lt;/a&gt; can harness &lt;code&gt;gpt-image-1&lt;/code&gt; to generate explanatory diagrams, thematic illustrations, or scene-based visual storytelling assets. Instead of relying solely on static stock imagery, teachers, course designers, or even learners themselves can prompt the generation of custom visuals aligned with the curriculum. When embedded into authoring tools, this approach accelerates content creation and enables more engaging, visually enriched learning experiences tailored to specific topics and age groups.&lt;/p&gt;
&lt;h2 id=&quot;cost-optimization&quot;&gt;Cost Optimization&lt;/h2&gt;
&lt;p&gt;While &lt;code&gt;gpt-image-1&lt;/code&gt; opens up impressive creative possibilities, it also introduces new cost considerations that developers and product teams must plan for carefully. Since image generation typically incurs higher API costs than text-based operations, structuring workflows efficiently becomes critical, especially at scale.&lt;/p&gt;
&lt;h3 id=&quot;balancing-price-quality-and-resolution&quot;&gt;Balancing Price, Quality, and Resolution&lt;/h3&gt;
&lt;p&gt;The cost of generating an image with &lt;code&gt;gpt-image-1&lt;/code&gt; depends significantly on both the requested resolution and the selected quality setting. Higher resolutions like 4096×4096 produce sharper, more detailed results, but they also consume more compute resources-and therefore cost more. For many use cases, especially for previews, lower resolutions such as 1024×1024 or 2048×2048 strike an excellent balance between visual fidelity and API efficiency. Reserving the highest quality settings for final exports or premium workflows can help manage overall spend without compromising user experience.&lt;/p&gt;
&lt;h3 id=&quot;image-reuse-and-smart-upscaling&quot;&gt;Image Reuse and Smart Upscaling&lt;/h3&gt;
&lt;p&gt;One practical cost-saving approach is to design workflows that encourage image reuse. Instead of regenerating similar images for every small variation, applications can create high-quality master images and allow users to crop, edit, or layer additional design elements dynamically. Integrating smart upscaling techniques-for instance, using specialized image enhancement libraries after initial generation-also allows teams to work with smaller base images without sacrificing end-user quality.&lt;/p&gt;
&lt;h3 id=&quot;rate-limits-and-batching-strategies&quot;&gt;Rate Limits and Batching Strategies&lt;/h3&gt;
&lt;p&gt;Every call to &lt;code&gt;gpt-image-1&lt;/code&gt; counts toward your usage quota, and OpenAI imposes rate limits depending on account tier. To optimize performance and cost, it’s helpful to batch generation requests thoughtfully where possible-for instance, combining multiple prompts into structured queues or allowing users to preview low-res draft versions before finalizing a high-res render. Building this logic into your app’s generation flow not only controls expenses but also improves perceived responsiveness, an important UX factor for creative applications.&lt;/p&gt;
&lt;p&gt;By considering cost optimization as an early design constraint rather than a late-stage patch, developers can build scalable, sustainable creative tools powered by &lt;code&gt;gpt-image-1&lt;/code&gt;.&lt;/p&gt;
&lt;h2 id=&quot;bonus-starter-kit-repo&quot;&gt;Bonus: Starter Kit Repo&lt;/h2&gt;
&lt;p&gt;We are currently in the process of integrating the new GPT-4o-powered &lt;code&gt;gpt-image-1&lt;/code&gt; model into CE.SDK. As part of this effort, we are preparing a comprehensive Starter Kit will showcase a complete with CE.SDK integration, real-time prompt input, image generation workflows, and best practices for building an AI-powered creative editor.&lt;/p&gt;
&lt;p&gt;Both a public GitHub repository and a live demo will be made available soon. If you want to be notified when the Starter Kit launches, you can subscribe to updates &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This Starter Kit is designed to help developers move beyond simple image generation into building full creative cycles, where users can generate, edit, refine, and remix visuals seamlessly inside the editor.&lt;/p&gt;
&lt;h2 id=&quot;faqs&quot;&gt;FAQs&lt;/h2&gt;

&lt;p&gt;Choosing to work with &lt;code&gt;gpt-image-1&lt;/code&gt; raises a number of practical and strategic questions. Below, we address the most common topics for teams evaluating the model for integration into creative workflows.&lt;/p&gt;
&lt;h3 id=&quot;how-is-gpt-image-1-different-from-dalle-3&quot;&gt;How is &lt;code&gt;gpt-image-1&lt;/code&gt; different from DALL·E 3?&lt;/h3&gt;
&lt;p&gt;While DALL·E 3 and &lt;code&gt;gpt-image-1&lt;/code&gt; both translate text prompts into images, the underlying architecture and integration paths are different. &lt;code&gt;gpt-image-1&lt;/code&gt; is built on GPT-4o’s multimodal framework, making it better suited for future conversational and iterative workflows. It also offers support for a wider range of styles, higher resolutions up to 4096×4096 pixels, and is positioned for deeper integration into dynamic user experiences rather than one-off generation tasks.&lt;/p&gt;
&lt;h3 id=&quot;can-you-fine-tune-or-train-gpt-image-1&quot;&gt;Can you fine-tune or train &lt;code&gt;gpt-image-1&lt;/code&gt;?&lt;/h3&gt;
&lt;p&gt;As of April 2025, OpenAI does not allow fine-tuning of &lt;code&gt;gpt-image-1&lt;/code&gt;. The model is optimized for broad creative use cases out of the box. Developers seeking more control typically customize the user-facing prompt engineering or combine outputs with structured editing tools like CE.SDK to achieve brand or project-specific consistency.&lt;/p&gt;
&lt;h3 id=&quot;is-offline-support-available&quot;&gt;Is offline support available?&lt;/h3&gt;
&lt;p&gt;Currently, &lt;code&gt;gpt-image-1&lt;/code&gt; requires access to OpenAI’s cloud APIs. There is no offline inference mode or local deployment option. Teams requiring strict data residency, offline workflows, or private model hosting should consider hybrid architectures where images are generated securely via backend services and then edited locally using embedded tools like CE.SDK.&lt;/p&gt;
&lt;h3 id=&quot;what-about-copyright-and-licensing&quot;&gt;What about copyright and licensing?&lt;/h3&gt;
&lt;p&gt;Images generated by &lt;code&gt;gpt-image-1&lt;/code&gt; can be used commercially according to OpenAI’s &lt;a href=&quot;https://openai.com/en-GB/policies/usage-policies/&quot;&gt;usage policies&lt;/a&gt;, but developers are encouraged to review the latest terms. Outputs are not directly copyrighted by OpenAI or the user, and responsibility for ensuring compliance with branding, likeness, or content standards typically falls on the developer or platform operator. When deploying generation features to end-users, it is good practice to provide clear terms of use and, if needed, additional moderation or review layers.&lt;/p&gt;
&lt;p&gt;By addressing these considerations early, teams can integrate &lt;code&gt;gpt-image-1&lt;/code&gt; more effectively and responsibly into creative products and workflows.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;gpt-image-1&lt;/code&gt; offers developers a significant opportunity to rethink what image generation can mean inside creative applications. It is not simply a tool for producing pictures on command, but a foundation for building interactive, iterative design workflows where users stay in control of the creative process. When combined with CE.SDK, it becomes even easier to move from static outputs to living, editable canvases that support real-world design needs. As we continue to integrate GPT-4o capabilities, the next wave of creative tooling will be about more than prompting images-it will be about shaping truly collaborative creative environments. Now is the time to start experimenting, iterating, and reimagining the user experience around this new generation of multimodal AI.&lt;/p&gt;</content:encoded><dc:creator>Jan</dc:creator><media:content url="https://blog.img.ly/2025/04/GPT-Image-1-ultimate-guide.jpg" medium="image"/><category>AI</category><category>Creative Workflows</category><category>gpt-4o</category></item><item><title>How OpenAI&apos;s Upcoming GPT-4o Image Generation API Will Change Creative Workflows</title><link>https://img.ly/blog/open-ai-gpt-4o-image-generation-api-will-change-creative-workflows/</link><guid isPermaLink="true">https://img.ly/blog/open-ai-gpt-4o-image-generation-api-will-change-creative-workflows/</guid><description>OpenAI’s GPT-4o enables real-time, interactive image generation. Instead of one-off prompts, users can refine visuals through conversation. This unlocks new UX patterns like editable outputs and character persistence. IMG.LY’s CE.SDK makes GPT-4o easy to integrate into your editor.</description><pubDate>Mon, 14 Apr 2025 10:51:53 GMT</pubDate><content:encoded>&lt;p&gt;If you’ve been working with image-generation APIs over the past year, you’ve probably gotten used to a certain flow: send a prompt, wait a few seconds, and get a flat image back. It’s a one-shot deal. Useful? Definitely. But not exactly interactive. That’s what will change with OpenAI’s upcoming GPT-4o image-generation capabilities.&lt;br&gt;
IMG.LY, which recently &lt;a href=&quot;https://img.ly/use-cases/ai-editor&quot;&gt;released a suite of AI features for its design editor&lt;/a&gt;, is eagerly awaiting the release to expand how users can interact with AI-driven creativity even further.&lt;/p&gt;
&lt;h2 id=&quot;update-ai-first-visual-editing&quot;&gt;Update: AI-first Visual Editing&lt;/h2&gt;
&lt;p&gt;A day after the release of the &lt;code&gt;gpt-image-1&lt;/code&gt; API, we put the UX principles outlined in this post into practice and integrated it into CreativeEditor SDK. Users can now generate images, create variants and use the canvas to compose visual prompts with our design editor. See it in action:&lt;/p&gt;
&lt;div class=&quot;cta-button-wrapper&quot;&gt;&lt;a href=&quot;https://cdn.img.ly/demo/gpt-image-1/v1/&quot; target=&quot;_blank&quot; class=&quot;cta-button&quot;&gt;Open AI Editor Demo Page&lt;/a&gt;&lt;/div&gt;
&lt;h2 id=&quot;gpt-4o-beyond-the-prompt-to-image-pipeline&quot;&gt;GPT-4o: Beyond the Prompt-to-Image Pipeline&lt;/h2&gt;
&lt;p&gt;GPT-4o isn’t just another version of DALL·E. It represents a shift in how developers will integrate AI into creative applications. While DALL·E 3 is powerful it is also somewhat siloed (you send a prompt, you get an image), GPT-4o looks like it will be part of a much more dynamic, conversational model one that accepts both text and image inputs, and could soon generate visual content in context, on the fly, and as part of a back-and-forth user interaction.&lt;/p&gt;
&lt;p&gt;If you’ve used ChatGPT recently, you’ve already seen glimpses of this. You can drop an image into the chat, ask GPT to describe or edit it, and get a response that feels fluid and visual. Developers should expect the API version to follow a similar pattern. It likely won’t just be a &lt;code&gt;/generate-image&lt;/code&gt; endpoint. Instead, we may be looking at an extension of the &lt;code&gt;chat/completions&lt;/code&gt; endpoint that handles multimodal messages. That changes the way you integrate this capability into your application. Rather than simply placing an image generation step in your pipeline, you will have to build your app’s UX around this new user flow. This comes with its own set of unique challenges.&lt;/p&gt;
&lt;h3 id=&quot;rethinking-the-interface-prompting-as-a-conversation&quot;&gt;Rethinking the Interface: Prompting as a Conversation&lt;/h3&gt;
&lt;p&gt;So what does this mean if you’re planning to integrate multi-modal image generation into your own product? For starters, you’ll probably need to rethink how users initiate and refine prompts. In the DALL·E flow, you might offer a text box with a few style dropdowns and call it a day. But in a GPT-4o world, your UI needs to support image inputs, persistent context, and dynamic editing, image gen becomes more like a conversation than a command.&lt;/p&gt;
&lt;p&gt;This is where the rubber meets the road. The tools that will benefit most from GPT-4o aren’t static generators but interactive editors. Think collaborative design apps, video editors with generative overlays, or product customizers that let users sketch or upload a photo and then iterate with AI. Put differently, the model output isn’t the endpoint but rather a checkpoint in the creation process.&lt;/p&gt;
&lt;h3 id=&quot;a-typical-iteration-cycle-in-a-multimodal-workflow&quot;&gt;A Typical Iteration Cycle in a Multimodal Workflow&lt;/h3&gt;
&lt;p&gt;Here’s a rough sketch of a workflow we might be seeing more of: The user starts with a prompt and an image, maybe a rough sketch or collage created inside an editor, a product photo, or a UI frame. GPT-4o returns a generated image based on that input. The user then edits or annotates the result, maybe adds new prompt text for refinement, and resubmits that combination to further develop the output. &lt;strong&gt;This cycle might loop several times&lt;/strong&gt;: generate, tweak, refine, regenerate.&lt;/p&gt;
&lt;p&gt;That’s a fundamentally different interaction model from past AI tooling. It’s less about one-off generation and more about a guided creative journey, where the user is in dialogue with the model. The result: better alignment with the original intent, more control, and more usable creative outputs.&lt;/p&gt;
&lt;p&gt;There is an additional, more subjective benefit to this kind of workflow: it gives the user a sense of autonomy again; they are back in the driver’s seat and less at the whim of an inscrutable machine. In many contexts, that makes a difference. Most notably, as we discussed in our white paper on &lt;a href=&quot;https://img.ly/white-papers&quot;&gt;print personalization&lt;/a&gt;, the psychological benefit of personalization lies to a large extent in the investment, the sense of ownership that comes about when you create something. “Make it yours” is the common tagline attached to personalization campaigns in e-commerce. That only works if the user exerts more control over the output than iterating over a set of prompts.&lt;/p&gt;
&lt;p&gt;The most pithy encapsulation of this paradigm that I have heard is &lt;strong&gt;Humans on top, AI on tap&lt;/strong&gt;.&lt;/p&gt;
&lt;h3 id=&quot;persistent-elements-and-visual-consistency&quot;&gt;Persistent Elements and Visual Consistency&lt;/h3&gt;
&lt;p&gt;One particularly interesting frontier here is character and object persistence. If a user defines a character early in the workflow, either via prompt, image, or a combination, they’ll increasingly expect that character to appear consistently across assets. Think of it as visual continuity, whether you’re generating scenes in a story, slides in a deck, or frames in a video.&lt;/p&gt;
&lt;p&gt;If the user of a creative marketing cloud creates a campaign avatar or mascot, that &lt;strong&gt;character needs to be&lt;/strong&gt; &lt;strong&gt;consistent&lt;/strong&gt; within and across campaigns.&lt;/p&gt;
&lt;p&gt;Being able to reference earlier outputs, prompts, or style cues gives the user control over not just individual assets but the &lt;strong&gt;whole arc of the design narrative&lt;/strong&gt;. GPT-4o’s ability to maintain that continuity is a game-changer for workflows that involve storytelling, brand identity, or serialized design work.&lt;/p&gt;
&lt;h2 id=&quot;what-to-expect-from-the-api&quot;&gt;What to Expect from the API&lt;/h2&gt;
&lt;p&gt;Technically, if GPT-4o follows OpenAI’s recent design philosophy, you can expect a JSON-based API with a &lt;code&gt;messages&lt;/code&gt; array, where content can include both &lt;code&gt;text&lt;/code&gt; and &lt;code&gt;image_url&lt;/code&gt; types. The output will likely be returned either as an image URL hosted by OpenAI or as base64-encoded image data, depending on the format you request.&lt;/p&gt;
&lt;p&gt;That structure plays nicely with modern JavaScript front-end frameworks. React, Svelte, and Vue are all well-suited to async generation flows with visual previews. If you’re already using tools like &lt;a href=&quot;https://zustand.docs.pmnd.rs/&quot;&gt;Zustand&lt;/a&gt; or &lt;a href=&quot;https://jotai.org/&quot;&gt;Jotai&lt;/a&gt; for local state or something like &lt;a href=&quot;https://trpc.io/&quot;&gt;tRPC&lt;/a&gt; or &lt;a href=&quot;https://graphql.org/&quot;&gt;GraphQL&lt;/a&gt; for structured calls, you’re in a good position to layer GPT-4o in without breaking the flow.&lt;/p&gt;
&lt;h3 id=&quot;trade-offs-and-technical-considerations&quot;&gt;Trade-offs and Technical Considerations&lt;/h3&gt;
&lt;p&gt;There are trade-offs, of course. GPT-4o will probably cost more per call than a standard DALL·E 2 or 3 generation. Its latency is still an open question, and the multimodal input support will likely require more thoughtful UX decisions. What happens when a user drops an image and wants to undo just part of the generation? Where do you store prompt context for edits? How do you communicate what’s editable and what’s not?&lt;/p&gt;
&lt;p&gt;This is where design and engineering need to work together. You’ll want to build an interface that makes AI feel like a creative partner, not just a backend service. That might mean giving users a visual prompt history or allowing partial re-generations of specific canvas elements. You’ll need sensible fallback states. What happens when generation fails or the result isn’t what the user wanted?&lt;/p&gt;
&lt;h2 id=&quot;where-imglys-cesdk-fits-in&quot;&gt;Where IMG.LY’s CE.SDK Fits In&lt;/h2&gt;
&lt;p&gt;We have already given the questions raised above some serious thought, and most of the complexities introduced by this new workflow are the table stakes for the Creative Editor. So, if you’ve already integrated IMG.LY’s CE.SDK, we have taken care of most of these problems, and you can seamlessly integrate with any AI model. We are actively working on an off-the-shelf integration of the GPT-4o image model once its public API launches.&lt;/p&gt;
&lt;p&gt;In general, you can treat GPT-4o’s image outputs as just another layer in the editing canvas, positioned, styled, cropped, and ultimately editable in the same environment as everything else. That’s the real power of multimodal workflows: not just generating but integrating. And once GPT-4o’s API goes live, you’ll want your infrastructure ready to slot it in with minimal friction.&lt;/p&gt;
&lt;h3 id=&quot;the-loop-prompt-generate-refine&quot;&gt;The Loop: Prompt, Generate, Refine&lt;/h3&gt;
&lt;p&gt;The era of single-shot generation is winding down. What’s coming next is a loop: edit, prompt, generate, refine, repeat. And this loop doesn’t just belong in the backend, it needs to live in the UI, in a way that invites user input, creativity, and correction.&lt;/p&gt;
&lt;p&gt;We’ll be publishing more on how this integrates into IMG.LY’s upcoming AI workflows soon. Expect tools that don’t just generate visuals but help teams and individuals work through ideas in real time. Because especially as AI gets more potent, it needs humans on top.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;3,000+ creative professionals gain early access to new features and updates—don’t miss out, and&lt;/strong&gt; &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;to our newsletter.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Jan</dc:creator><media:content url="https://blog.img.ly/2025/04/GPT-4o-API-Changes-1.jpg" medium="image"/><category>AI</category><category>gpt-4o</category><category>Creative Workflows</category></item><item><title>Top 5 Generative AI APIs for Creative Apps in 2025: A Developer’s Guide (GPT-4o, Gemini, Firefly, and More)</title><link>https://img.ly/blog/comparing-image-generation-apis-gpt-4o-gemini-firefly-and-more/</link><guid isPermaLink="true">https://img.ly/blog/comparing-image-generation-apis-gpt-4o-gemini-firefly-and-more/</guid><description>AI image generation is quickly becoming a must-have in creative apps. But with so many models and APIs to choose from, picking the right one can be tricky. This guide breaks down the top options like DALL·E, GPT-4o, Gemini, and SDXL to help you find the best fit for your product and users.</description><pubDate>Mon, 14 Apr 2025 07:57:51 GMT</pubDate><content:encoded>&lt;p&gt;If you’re working on creative tooling right now, anything from a lightweight design editor to a marketing automation suite, you’re probably already thinking about or actively working on bringing image generation into the mix. The tech is here, expectations are rising, and if your users can’t type a prompt and get a visual back in seconds, your app might feel like it’s lagging behind.&lt;/p&gt;
&lt;p&gt;But choosing &lt;em&gt;which&lt;/em&gt; AI model to integrate, and how, isn’t all that straightforward. There’s a growing ecosystem of APIs out there, and they don’t all behave the same way, some are designed for open-ended creativity, others for structured workflows. Some offer pixel-perfect fidelity with fine control, others lean toward rapid ideation. And Importantly in our content not all of them are equally accessible to developers.&lt;/p&gt;
&lt;p&gt;This is a guide to help you make sense of it all. What models are available, how do they differ, and what should you consider when embedding them into your product. This isn’t supposed to be a hype piece or a leaderboard, just a clear-eyed look at what’s out there and what’s coming.&lt;/p&gt;
&lt;h3 id=&quot;openai-gpt-4o&quot;&gt;OpenAI GPT-4o&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://openai.com/index/introducing-4o-image-generation/&quot;&gt;GPT-4o is OpenAI&lt;/a&gt;’s next-gen multimodal model, currently only available inside ChatGPT. It can take both text and images as input and is capable of generating image outputs in context.&lt;/p&gt;
&lt;p&gt;The potential upside is significant. With GPT-4o, you may soon be able to create deeply interactive creative tools where users chat, sketch, and prompt all within a single UI. It’s likely to support richer input types and more natural iteration flows.&lt;/p&gt;
&lt;p&gt;The main downside is availability. There’s no API yet, so you can’t build on it directly. It also remains to be seen how OpenAI will expose generation tools—whether through a dedicated endpoint or via the chat interface.&lt;/p&gt;
&lt;p&gt;GPT-4o is right for you if you’re planning ahead and want to design for a future where multimodal interaction is the norm. It’s not something you can use today, but it should inform how you architect your UI and prompt handling.&lt;/p&gt;
&lt;h3 id=&quot;openai-dalle-3&quot;&gt;OpenAI DALL·E 3&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://openai.com/index/dall-e-3/&quot;&gt;DALL·E 3&lt;/a&gt; is OpenAI’s current image generation API, available via both the platform and ChatGPT. It translates text prompts into images and is known for interpreting prompts accurately and producing clean, useful visuals.&lt;/p&gt;
&lt;p&gt;Its strengths are clarity, commercial readiness, and reliability. It’s easy to use and integrates well into frontend flows that involve text-to-image generation.&lt;/p&gt;
&lt;p&gt;However, it lacks features like inpainting, style tuning, or detailed layout control. You also don’t get deep iteration features—each image is a new generation.&lt;/p&gt;
&lt;p&gt;DALL·E 3 is a good fit if you want &lt;strong&gt;high-quality results from text prompts&lt;/strong&gt; with minimal complexity. It’s especially useful for marketing visuals, content automation, and simple design tools.&lt;/p&gt;
&lt;h3 id=&quot;google-gemini-imagen&quot;&gt;Google Gemini (Imagen)&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://gemini.google.com/&quot;&gt;Gemini&lt;/a&gt;, powered by Google’s Imagen models, is available via &lt;a href=&quot;https://fal.ai/&quot;&gt;fal.ai&lt;/a&gt;, Makersuite, Vertex AI. It supports not only text prompts, but also sketches and inpainting, making it one of the more flexible APIs for creative work.&lt;/p&gt;
&lt;p&gt;Its big advantage is control. You can use sketches to guide composition and make visual edits to generated outputs. That makes it ideal for &lt;strong&gt;iterative design processes&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;The downside is that it can be tricky to navigate Google’s ecosystem. Access and feature sets can change quickly, and the integration overhead is higher than OpenAI.&lt;/p&gt;
&lt;p&gt;Gemini is right for you if your product needs image refinement, visual grounding, or sketch-to-image workflows. It fits e-commerce editors, mockup tools, and design collaboration features.&lt;/p&gt;
&lt;h3 id=&quot;adobe-firefly&quot;&gt;Adobe Firefly&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.adobe.com/de/products/firefly.html&quot;&gt;Firefly is Adobe&lt;/a&gt;’s generative image model, integrated tightly into Creative Cloud. It stands out for its licensing model—images are trained on Adobe Stock, meaning they’re cleared for commercial use.&lt;/p&gt;
&lt;p&gt;The biggest strength here is trust and integration. Designers already using Photoshop or Illustrator can use Firefly to generate content directly in their layers and work non-destructively.&lt;/p&gt;
&lt;p&gt;The drawback is API access. There is no public endpoint for Firefly yet, and its features are embedded in Adobe’s own ecosystem.&lt;/p&gt;
&lt;p&gt;Firefly is a strong option if you’re building for agencies, brand teams, or other users with high expectations around copyright and integration with existing Adobe workflows.&lt;/p&gt;
&lt;h3 id=&quot;stability-ai-sdxl&quot;&gt;Stability AI (SDXL)&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://stability.ai/&quot;&gt;Stability AI&lt;/a&gt; offers an open-source model suite, with SDXL as the flagship for high-resolution image generation. It supports both text and image inputs and can be run locally or hosted via services like Replicate.&lt;/p&gt;
&lt;p&gt;Its biggest advantage is flexibility. You can fine-tune models, build custom workflows, or even run inference offline. It’s ideal for teams that want full control.&lt;/p&gt;
&lt;p&gt;The challenge is quality consistency. Compared to closed models like DALL·E, SDXL may require more tuning, and prompt engineering matters more. Hosting and scaling also require more effort.&lt;/p&gt;
&lt;p&gt;SDXL is right for you if you need an open, customizable system that fits into a broader pipeline. It’s a solid choice for research tools, OSS projects, and privacy-conscious applications.&lt;/p&gt;
&lt;h3 id=&quot;midjourney&quot;&gt;Midjourney&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.midjourney.com/home&quot;&gt;Midjourney&lt;/a&gt; is a proprietary model with a focus on aesthetic, stylized image generation. It runs exclusively via Discord and is popular for its distinctive look and community-driven prompts.&lt;/p&gt;
&lt;p&gt;Its upside is the quality of its visuals, especially for stylized scenes or concept art. Designers often use it as an ideation tool.&lt;/p&gt;
&lt;p&gt;The limitation is integration. There’s no API, no SDK, and limited ways to embed it in your own product beyond scraping or bots.&lt;/p&gt;
&lt;p&gt;Midjourney is best used as an inspiration engine. If your workflow includes moodboarding or creative brainstorming, it can supplement—but not power—your product.&lt;/p&gt;
&lt;h3 id=&quot;hugging-face&quot;&gt;Hugging Face&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://huggingface.co/&quot;&gt;Hugging Face&lt;/a&gt; is a hub for open models, offering hosted APIs for SDXL variants, Playground v2, and other creative generation tools.&lt;/p&gt;
&lt;p&gt;The main benefit is diversity. You can try multiple models, experiment with variations, and deploy quickly using their hosted inference endpoints.&lt;/p&gt;
&lt;p&gt;That said, it’s not always ready for production. Some models lack documentation or support, and you may need to piece together features.&lt;/p&gt;
&lt;p&gt;Hugging Face is a great choice for experimental projects, prototyping, or if you want to stay vendor-neutral and build your own stack.&lt;/p&gt;
&lt;h3 id=&quot;runway-gen-2-and-leonardoai&quot;&gt;Runway Gen-2 and Leonardo.Ai&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://runwayml.com/&quot;&gt;Runway&lt;/a&gt; and &lt;a href=&quot;https://leonardo.ai/&quot;&gt;Leonardo&lt;/a&gt; are rising players at the edge of AI and media. Runway’s Gen-2 supports text-to-video and animated image generation, while Leonardo focuses on style-consistent 2D asset generation.&lt;/p&gt;
&lt;p&gt;These platforms bring specialization. Runway is tailored to video and cinematic scenes, while Leonardo offers structured design features for asset creators.&lt;/p&gt;
&lt;p&gt;They’re less open from a dev perspective. APIs are limited, and integration support is still maturing.&lt;/p&gt;
&lt;p&gt;Use these tools if your use case leans into video, motion, or asset generation for games and content libraries. They’re best when you’re not looking to build your own editor, but to enhance creative capacity.&lt;/p&gt;
&lt;h3 id=&quot;quick-comparison&quot;&gt;Quick Comparison&lt;/h3&gt;





















































































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Model/API&lt;/th&gt;&lt;th&gt;Input&lt;/th&gt;&lt;th&gt;Output&lt;/th&gt;&lt;th&gt;Control&lt;/th&gt;&lt;th&gt;API Access&lt;/th&gt;&lt;th&gt;Best For&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;GPT-4o (OpenAI)&lt;/td&gt;&lt;td&gt;text, image (chat)&lt;/td&gt;&lt;td&gt;image (likely)&lt;/td&gt;&lt;td&gt;medium-high&lt;/td&gt;&lt;td&gt;not yet&lt;/td&gt;&lt;td&gt;assistants, multimodal UIs&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;DALL·E 3&lt;/td&gt;&lt;td&gt;text&lt;/td&gt;&lt;td&gt;image&lt;/td&gt;&lt;td&gt;medium&lt;/td&gt;&lt;td&gt;yes&lt;/td&gt;&lt;td&gt;content tools, illustrations&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Gemini (Google)&lt;/td&gt;&lt;td&gt;text, sketch&lt;/td&gt;&lt;td&gt;image&lt;/td&gt;&lt;td&gt;high&lt;/td&gt;&lt;td&gt;yes&lt;/td&gt;&lt;td&gt;e-commerce, product mockups&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Firefly (Adobe)&lt;/td&gt;&lt;td&gt;text&lt;/td&gt;&lt;td&gt;image, layers&lt;/td&gt;&lt;td&gt;very high&lt;/td&gt;&lt;td&gt;no&lt;/td&gt;&lt;td&gt;professional design tools&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;SDXL&lt;/td&gt;&lt;td&gt;text, image&lt;/td&gt;&lt;td&gt;image&lt;/td&gt;&lt;td&gt;high&lt;/td&gt;&lt;td&gt;yes&lt;/td&gt;&lt;td&gt;custom tools, OSS projects&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Midjourney&lt;/td&gt;&lt;td&gt;text&lt;/td&gt;&lt;td&gt;image&lt;/td&gt;&lt;td&gt;very high&lt;/td&gt;&lt;td&gt;no&lt;/td&gt;&lt;td&gt;stylized inspiration&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Hugging Face&lt;/td&gt;&lt;td&gt;text, image&lt;/td&gt;&lt;td&gt;image&lt;/td&gt;&lt;td&gt;medium-high&lt;/td&gt;&lt;td&gt;yes&lt;/td&gt;&lt;td&gt;experimentation, open models&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Runway Gen-2&lt;/td&gt;&lt;td&gt;text&lt;/td&gt;&lt;td&gt;video/image&lt;/td&gt;&lt;td&gt;medium&lt;/td&gt;&lt;td&gt;yes&lt;/td&gt;&lt;td&gt;motion design, AI video&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Leonardo.Ai&lt;/td&gt;&lt;td&gt;text&lt;/td&gt;&lt;td&gt;image&lt;/td&gt;&lt;td&gt;high&lt;/td&gt;&lt;td&gt;limited&lt;/td&gt;&lt;td&gt;game assets, style templates&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;If you’re building for creative users, especially those used to real-time feedback and control, then how you wrap these APIs into your workflow matters more than which model you use. It’s not just about generating images. It’s about how you let users prompt, refine, iterate, and remix inside your canvas.&lt;/p&gt;
&lt;p&gt;That’s the opportunity here. Not just plugging in a model, but designing a loop where generation feels native to creation. The APIs are improving fast. The real challenge, and the real product value, is in how you build around them.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;3,000+ creative professionals gain early access to new features and updates—don’t miss out, and &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;subscribe&lt;/a&gt; to our newsletter.&lt;/p&gt;</content:encoded><dc:creator>Jan</dc:creator><media:content url="https://blog.img.ly/2025/04/AI-Comparison.jpg" medium="image"/><category>AI</category><category>Image Gen</category><category>Creative Workflows</category><category>gpt-4o</category></item><item><title>How to Build a Short Video Generator Using CE.SDK</title><link>https://img.ly/blog/how-to-build-a-short-video-generator-using-ce-sdk-2/</link><guid isPermaLink="true">https://img.ly/blog/how-to-build-a-short-video-generator-using-ce-sdk-2/</guid><description>Build an AI-powered video generator that creates editable, high-quality videos in the browser—no server-side processing needed.</description><pubDate>Tue, 04 Mar 2025 12:57:47 GMT</pubDate><content:encoded>&lt;p&gt;In the following, I’m presenting a simple cookbook for building an AI-based video generator app, as described in &lt;a href=&quot;https://img.ly/blog/how-to-build-short-video-generator-ai-creative-sdk/&quot;&gt;my previous blog post&lt;/a&gt;. We’re using a combination of different APIs to generate text, audio, and images and will compose &amp;#x26; render the final video using the headless &lt;a href=&quot;https://img.ly/products/creative-sdk&quot;&gt;CreativeEditor SDK&lt;/a&gt;. We also call it the Creative Engine.&lt;/p&gt;
&lt;p&gt;This cookbook showcases the powerful capabilities of our client-side Creative Engine. The engine enables real-time video generation directly in the browser, eliminating the need for server-side processing. What sets this approach apart is its ability to produce editable source files that can then be opened with CreativeEditor SDK.&lt;/p&gt;
&lt;p&gt;This approach is giving users complete control over every aspect of your video–from text and images to animations and overall composition. This means your users can refine and perfect your content even after the initial generation.&lt;/p&gt;
&lt;p&gt;Get the &lt;a href=&quot;https://github.com/imgly/ai-video-creator&quot;&gt;complete code on GitHub&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;scope&quot;&gt;Scope&lt;/h2&gt;
&lt;p&gt;This tutorial focuses on building an app with a simple UX:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Input your keywords/topics&lt;/li&gt;
&lt;li&gt;Choose between landscape or portrait format&lt;/li&gt;
&lt;li&gt;Generate and preview your video&lt;/li&gt;
&lt;li&gt;Edit the video in the CE.SDK video editor&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The app flow we will create:&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/how-to/er-ai2/workflow.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;The post-editing we will get with CE.SDK:&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/how-to/er-ai2/editing-with-ce-sdk.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;technical-overview&quot;&gt;Technical Overview&lt;/h2&gt;
&lt;p&gt;The app follows three major steps to generate the video.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;A script is generated based on User input, the output is a structured XML file.&lt;/li&gt;
&lt;li&gt;The XML script is parsed to extract text and image information. The extracted data will then be used to generate audio &amp;#x26; image files through third-party APIs&lt;/li&gt;
&lt;li&gt;All assets are loaded into the creative engine. This is where the composition, including animation and effects, takes place. The Creative Engine then exports a video and scene file, which can be edited with the Creative Editor.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;setup&quot;&gt;Setup&lt;/h2&gt;
&lt;p&gt;We’ll use a boilerplate with Next.js, React, Typescript &amp;#x26; Tailwind. Make sure you retrieve all necessary keys:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.anthropic.com/&quot;&gt;Anthropic&lt;/a&gt; (LLM)&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://elevenlabs.io/&quot;&gt;ElevenLabs&lt;/a&gt; (text to speech)&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://fal.ai/&quot;&gt;fal.ai&lt;/a&gt; (text to image)&lt;/li&gt;
&lt;li&gt;IMG.LY CE.SDK – Retrieve a &lt;a href=&quot;https://img.ly/forms/free-trial&quot;&gt;free trial key&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Required environment variables&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;NEXT_PUBLIC_ANTHROPIC_API_KEY&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; your_claude_api_key;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;NEXT_PUBLIC_FAL_API_KEY&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; your_fal_ai_key;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;NEXT_PUBLIC_ELEVEN_LABS_KEY&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; your_eleven_labs_key;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;NEXT_PUBLIC_IMG_LY_KEY&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; your_img_ly_key;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;implementation&quot;&gt;Implementation&lt;/h2&gt;
&lt;h3 id=&quot;1-generate-the-script&quot;&gt;1. Generate The Script&lt;/h3&gt;
&lt;p&gt;In this step, we’ll focus on generating the initial prompt and then passing it to the Anthropic API.&lt;/p&gt;
&lt;p&gt;As with many things with LLM, there are many different strategies for structuring the initial prompt. From experience, the best result comes from providing examples of the desired output. We’ve decided to use an XML document; this can be easily parsed later on and is less error-prone compared to a JSON.&lt;/p&gt;
&lt;p&gt;We now define the structure of how information should be saved in the XML.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&amp;#x3C;&lt;/span&gt;&lt;span&gt;video&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &amp;#x3C;&lt;/span&gt;&lt;span&gt;group&lt;/span&gt;&lt;span&gt; part&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;intro&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt; voiceId&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50YSQEDPA2vlOxhCseP4&quot;&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;0.2&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        Did you know these fascinating facts about pyramids?&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;Ancient Egyptian pyramid at sunset&amp;#x3C;/&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span&gt;group&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &amp;#x3C;&lt;/span&gt;&lt;span&gt;group&lt;/span&gt;&lt;span&gt; part&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;content&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt; voiceId&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50YSQEDPA2vlOxhCseP4&quot;&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;0.2&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        The Great Pyramid was the tallest structure for over 3,800 years!&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;Great Pyramid comparison to modern buildings&amp;#x3C;/&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span&gt;group&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &amp;#x3C;&lt;/span&gt;&lt;span&gt;group&lt;/span&gt;&lt;span&gt; part&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;outro&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt; voiceId&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50YSQEDPA2vlOxhCseP4&quot;&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;0.4&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        The pyramids continue to reveal their secrets to this day...&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;A giant 3D question mark hovering over the pyramids&amp;#x3C;/&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt; voiceId&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50YSQEDPA2vlOxhCseP4&quot;&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;0.4&quot;&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        Stay curious - there&apos;s always more to discover!&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span&gt;text&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      &amp;#x3C;&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;Pyramids under starry night sky&amp;#x3C;/&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span&gt;element&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span&gt;group&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&amp;#x3C;/&lt;/span&gt;&lt;span&gt;video&lt;/span&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;In this tutorial, we’ll focus on the format trivia only as shown in this example. For later iterations, however, I’m planning to implement different content formats (e.g., trivia, quiz, recipe, etc.). Each of these formats will have its example XML. Therefore, I’m nesting the XML in a simple format object to scale this up easily later.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;interface&lt;/span&gt;&lt;span&gt; Format&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  name&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  example&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; formats&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; Record&lt;/span&gt;&lt;span&gt;&amp;#x3C;&lt;/span&gt;&lt;span&gt;string&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;Format&lt;/span&gt;&lt;span&gt;&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  trivia: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    name: &lt;/span&gt;&lt;span&gt;&apos;Trivia&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    example: &lt;/span&gt;&lt;span&gt;`&amp;#x3C;video&gt;&amp;#x3C;group&gt;...&amp;#x3C;/group&gt;&amp;#x3C;/video&gt;`&lt;/span&gt;&lt;span&gt; // Add example from above&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;};&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Using this format object with the example, we can now generate the prompt.&lt;/p&gt;
&lt;p&gt;What do we need for this prompt?&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Description of the task&lt;/li&gt;
&lt;li&gt;Description of the desired output, incl. an example for the specified format&lt;/li&gt;
&lt;li&gt;Topic as provided by the user&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The topic provided by the user is passed to the function as a string.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; const&lt;/span&gt;&lt;span&gt; createVideoScriptPrompt&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; (&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  topic&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  formatName&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; &apos;trivia&apos;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  const&lt;/span&gt;&lt;span&gt; format&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; formats[formatName];&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  if&lt;/span&gt;&lt;span&gt; (&lt;/span&gt;&lt;span&gt;!&lt;/span&gt;&lt;span&gt;format) &lt;/span&gt;&lt;span&gt;throw&lt;/span&gt;&lt;span&gt; new&lt;/span&gt;&lt;span&gt; Error&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;`Format ${&lt;/span&gt;&lt;span&gt;formatName&lt;/span&gt;&lt;span&gt;} not found`&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  return&lt;/span&gt;&lt;span&gt; `&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Format: ${&lt;/span&gt;&lt;span&gt;format&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Topic: ${&lt;/span&gt;&lt;span&gt;topic&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Please write a detailed script for this short video, considering the specified format and topic.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Include an introduction, main content sections, and an outro. Each section should have an image.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Structure the script as an XML Document with clear sections, descriptions for the images.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;The image description should be written as a prompt. This prompt will be used to generate an image.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Put the description between the image tags. The video shouldn&apos;t be longer than 30 seconds.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;Example format:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;${&lt;/span&gt;&lt;span&gt;format&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;example&lt;/span&gt;&lt;span&gt;}`&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;};&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;2-generate-all-assets&quot;&gt;2. Generate All Assets&lt;/h3&gt;
&lt;p&gt;In the second step, we’ll parse through the LLM response, which should be the XML. We’ll create a simple parsing function to extract all text information that should be sent to text-to-speech and text-to-image AIs.&lt;/p&gt;
&lt;p&gt;Please note that all these steps can be easily streamlined by using AI-assisted coding. Just provide the example XML as input and your desired output.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;API Calls&lt;/strong&gt;&lt;br&gt;
When finding text &amp;#x26; image tags in the XML, we’ll call API functions for text-to-speech and text-to-image. For this example, I’m using ElevenLabs &amp;#x26; fal APIs. You will find all API calls in the api.ts.&lt;/p&gt;
&lt;p&gt;Since the LLM generated a script that includes image prompts, make sure to pass them to the API.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; async&lt;/span&gt;&lt;span&gt; function&lt;/span&gt;&lt;span&gt; generateImage&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;prompt&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; Promise&lt;/span&gt;&lt;span&gt;&amp;#x3C;&lt;/span&gt;&lt;span&gt;string&lt;/span&gt;&lt;span&gt; |&lt;/span&gt;&lt;span&gt; null&lt;/span&gt;&lt;span&gt;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  try&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    console.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Generating image for prompt:&apos;&lt;/span&gt;&lt;span&gt;, prompt);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    const&lt;/span&gt;&lt;span&gt; result&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; fal.&lt;/span&gt;&lt;span&gt;subscribe&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;fal-ai/flux/dev&apos;&lt;/span&gt;&lt;span&gt;, {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      input: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        prompt: prompt,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        size: &lt;/span&gt;&lt;span&gt;&apos;portrait_16_9&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;      },&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    });&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    const&lt;/span&gt;&lt;span&gt; typedResult&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; result &lt;/span&gt;&lt;span&gt;as&lt;/span&gt;&lt;span&gt; { &lt;/span&gt;&lt;span&gt;images&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; { &lt;/span&gt;&lt;span&gt;url&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt; }[] };&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    console.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Image generation successful. URL:&apos;&lt;/span&gt;&lt;span&gt;, typedResult.images[&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;].url);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    return&lt;/span&gt;&lt;span&gt; typedResult.images[&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;].url;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  } &lt;/span&gt;&lt;span&gt;catch&lt;/span&gt;&lt;span&gt; (error) {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    console.&lt;/span&gt;&lt;span&gt;error&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Error generating image:&apos;&lt;/span&gt;&lt;span&gt;, error);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    return&lt;/span&gt;&lt;span&gt; null&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Timestamps&lt;/strong&gt;&lt;br&gt;
Last but not least, we need to come up with timestamps. What’s the duration of each segment? This is critical information for composing the video. Luckily, this is quite easy: Each scene is as long as the generated audio for each segment. This duration for the audio segments can be calculated: Most TTS like ElevenLabs provide timestamps along the audio file. These are typically character-based timestamps, so we first have to calculate the timestamps for each word and then the duration for the entire text section.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Ready For The Next Steps&lt;/strong&gt;&lt;br&gt;
All Asset URLs that are generated will be saved in a &lt;code&gt;VideoBlock&lt;/code&gt; object for convenience. The duration of the VideoBlock is the duration of the audio, as calculated above.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;interface&lt;/span&gt;&lt;span&gt; VideoBlock&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  text&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  imageUrl&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt; |&lt;/span&gt;&lt;span&gt; null&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  audioUrl&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt; |&lt;/span&gt;&lt;span&gt; null&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  startTime&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  duration&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  wordTimestamps&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; Array&lt;/span&gt;&lt;span&gt;&amp;#x3C;{ &lt;/span&gt;&lt;span&gt;word&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;; &lt;/span&gt;&lt;span&gt;start&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;; &lt;/span&gt;&lt;span&gt;duration&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt; }&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;3-generate-the-video&quot;&gt;3. Generate The Video&lt;/h3&gt;
&lt;p&gt;We have everything together now: The completed XML with timestamps, duration, and all assets. It’s now time to generate the video using the creative engine.&lt;/p&gt;
&lt;p&gt;Let’s first add an empty container in our HTML that will be referenced for initiating the creative engine.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;{&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  /* Add container for Creative Engine */&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&amp;#x3C;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; id&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;cesdk_container&quot;&lt;/span&gt;&lt;span&gt; className&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;invisible mt-8 rounded-lg bg-gray-100&quot;&lt;/span&gt;&lt;span&gt; /&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We can now initialize the engine. Use &lt;a href=&quot;https://img.ly/docs/cesdk/js/get-started/overview-e18f40/&quot;&gt;this code&lt;/a&gt; snippet from our documentation.&lt;/p&gt;
&lt;p&gt;We’ll then set up a function that creates a simple composition using the provided VideoBlocks. The engine requires you to first create a scene, append a page to the scene, and then create tracks within the page. The tracks are basically the layers in the timeline. I recommend setting one track as a background track using the following snippet:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Set video track as a background track by connecting the page duration to the video track&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setAlwaysOnBottom&lt;/span&gt;&lt;span&gt;(videotrack, &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setPageDurationSource&lt;/span&gt;&lt;span&gt;(page, videotrack);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The Creative Engine provides powerful API calls to style &amp;#x26; manipulate blocks in many ways. Here is an example of how we can animate the images with a slow zoom effect:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; imageZoomAnimation&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;createAnimation&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;crop_zoom&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setInAnimation&lt;/span&gt;&lt;span&gt;(image, imageZoomAnimation);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setDuration&lt;/span&gt;&lt;span&gt;(imageZoomAnimation, block.duration);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;engine.block.&lt;/span&gt;&lt;span&gt;setBool&lt;/span&gt;&lt;span&gt;(imageZoomAnimation, &lt;/span&gt;&lt;span&gt;&apos;animation/crop_zoom/fade&apos;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;false&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Export The Video &amp;#x26; Scene&lt;/strong&gt;&lt;br&gt;
Exporting the video is easy. Just pass the page to the export function. In our example, we’re also saving the scene file so we can edit the video later.&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;tsx&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Export video&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; progressCallback&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; (&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  renderedFrames&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  encodedFrames&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  totalFrames&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; number&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  console.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;`Progress: ${&lt;/span&gt;&lt;span&gt;Math&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;round&lt;/span&gt;&lt;span&gt;((&lt;/span&gt;&lt;span&gt;encodedFrames&lt;/span&gt;&lt;span&gt; /&lt;/span&gt;&lt;span&gt; totalFrames&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;*&lt;/span&gt;&lt;span&gt; 100&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;}%`&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;};&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; blob&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; engine.block.&lt;/span&gt;&lt;span&gt;exportVideo&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  page,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  &apos;video/mp4&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  progressCallback,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  {}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Save scene to string&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; sceneData&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; await&lt;/span&gt;&lt;span&gt; engine.scene.&lt;/span&gt;&lt;span&gt;saveToString&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;// Create scene blob&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; sceneBlob&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; new&lt;/span&gt;&lt;span&gt; Blob&lt;/span&gt;&lt;span&gt;([sceneData], {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;  type: &lt;/span&gt;&lt;span&gt;&apos;text/plain&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;4-add-a-video-editor&quot;&gt;4. Add A Video Editor&lt;/h3&gt;
&lt;p&gt;The last step is to add the video editor for post editing and pass the scene file. With CE.SDK, this effort is reduced to adding a few lines of code. In the &lt;code&gt;init&lt;/code&gt; function, we’re configuring the editor and adding callbacks for the export:&lt;/p&gt;
&lt;pre class=&quot;astro-code github-dark&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; initEditor&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; async&lt;/span&gt;&lt;span&gt; () &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        const&lt;/span&gt;&lt;span&gt; config&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          license: &lt;/span&gt;&lt;span&gt;&apos;A-O53TWXK5bfyconUx7e53S5YU7DzjuGpMAH5vvKjLd0zBa6IhsoF7zChy1uCVbj&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          userId: &lt;/span&gt;&lt;span&gt;&apos;guides-user&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          theme: &lt;/span&gt;&lt;span&gt;&apos;dark&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          baseURL: &lt;/span&gt;&lt;span&gt;&apos;&amp;#x3C;https://cdn.img.ly/packages/imgly/cesdk-js/1.44.0/assets&gt;&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          role: &lt;/span&gt;&lt;span&gt;&apos;Creator&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          ui: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            elements: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              view: &lt;/span&gt;&lt;span&gt;&apos;default&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              panels: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              },&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              navigation: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                position: &lt;/span&gt;&lt;span&gt;&apos;top&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                action: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                  save: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                  load: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                  close: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                  download: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                  export: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              },&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              dock: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                iconSize: &lt;/span&gt;&lt;span&gt;&apos;normal&apos;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// &apos;large&apos; or &apos;normal&apos;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                hideLabels: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt; // false or true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          },&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          callbacks: {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            onUpload: &lt;/span&gt;&lt;span&gt;&apos;local&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            onSave&lt;/span&gt;&lt;span&gt;: (&lt;/span&gt;&lt;span&gt;scene&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; string&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              const&lt;/span&gt;&lt;span&gt; element&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; document.&lt;/span&gt;&lt;span&gt;createElement&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;a&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              const&lt;/span&gt;&lt;span&gt; base64Data&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; btoa&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;unescape&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;encodeURIComponent&lt;/span&gt;&lt;span&gt;(scene)))&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              element.&lt;/span&gt;&lt;span&gt;setAttribute&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                &apos;href&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                `data:application/octet-stream;base64,${&lt;/span&gt;&lt;span&gt;base64Data&lt;/span&gt;&lt;span&gt;}`&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              )&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              element.&lt;/span&gt;&lt;span&gt;setAttribute&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                &apos;download&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;                `video-${&lt;/span&gt;&lt;span&gt;new&lt;/span&gt;&lt;span&gt; Date&lt;/span&gt;&lt;span&gt;().&lt;/span&gt;&lt;span&gt;toISOString&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span&gt;}.scene`&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              )&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              element.style.display &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &apos;none&apos;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              document.body.&lt;/span&gt;&lt;span&gt;appendChild&lt;/span&gt;&lt;span&gt;(element)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              element.&lt;/span&gt;&lt;span&gt;click&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              document.body.&lt;/span&gt;&lt;span&gt;removeChild&lt;/span&gt;&lt;span&gt;(element)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            },&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            onClose&lt;/span&gt;&lt;span&gt;: () &lt;/span&gt;&lt;span&gt;=&gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;              onClose&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            },&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            onLoad: &lt;/span&gt;&lt;span&gt;&apos;upload&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            onDownload: &lt;/span&gt;&lt;span&gt;&apos;download&apos;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            onExport: &lt;/span&gt;&lt;span&gt;&apos;download&apos;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;          }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        }&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;By following this cookbook, you can streamline the process of AI-generated video creation, making it fast and efficient. This method is especially useful for content creators, educators, and marketers looking to automate video production while maintaining creative control.&lt;br&gt;
Next, try experimenting with video styles, refining AI scripts, or exploring advanced editing.&lt;br&gt;
Feel free to &lt;a href=&quot;https://github.com/imgly/ai-video-creator&quot;&gt;GitHub&lt;/a&gt; repo and share your creations &lt;a href=&quot;https://x.com/imgly&quot;&gt;with us on X&lt;/a&gt;. Happy creating!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;3,000+ creative professionals gain early access to new features and updates—don’t miss out, and&lt;/strong&gt; &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;to our newsletter.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Eray</dc:creator><media:content url="https://blog.img.ly/2025/03/AI-video-generator-tutorial-1.jpg" medium="image"/><category>AI</category><category>CE.SDK</category><category>How-To</category></item><item><title>How I Built a Short Video Generator with AI &amp; CE.SDK in One Day</title><link>https://img.ly/blog/how-to-build-short-video-generator-ai-creative-sdk/</link><guid isPermaLink="true">https://img.ly/blog/how-to-build-short-video-generator-ai-creative-sdk/</guid><description>Can AI really accelerate product development? I built a short video generator in one day using AI and CE.SDK to find out.</description><pubDate>Thu, 09 Jan 2025 11:27:13 GMT</pubDate><content:encoded>&lt;p&gt;Here’s the crux of product development in the age of LLMs: how much can AI truly accelerate the development process?&lt;/p&gt;
&lt;p&gt;We have seen videos of solo developers building small apps entirely with AI with just a few prompts. But how does it scale to more complex development projects? As LLMs rapidly evolve, their scope and impact will only increase.&lt;/p&gt;
&lt;p&gt;That’s why I regularly challenge myself to build a small project with the help of AI. I’m a prime candidate to test the AI productivity boost: a jack-of-all-trades (and a master of none) with a background in both design and engineering, yet no hands-on experience in the past five years. My latest challenge? Build a web-based short video generator within one day.&lt;/p&gt;
&lt;p&gt;In this post, I’ll share the most intriguing takeaways from tackling this project.&lt;/p&gt;
&lt;h2 id=&quot;why-a-short-video-generator&quot;&gt;Why a Short Video Generator?&lt;/h2&gt;
&lt;p&gt;Why focus on this idea? It’s simple: to ride the wave of a new trend. A format called “&lt;strong&gt;faceless&lt;/strong&gt;” short videos is gaining traction among creators on platforms like YouTube and TikTok.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.youtube.com/embed/DfQ3fhqfKVc?feature=oembed&quot;&gt;https://www.youtube.com/embed/DfQ3fhqfKVc?feature=oembed&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;What’s fascinating about these videos is their automation: an LLM generates a script, which is then transformed into speech, images, and text assets using various AI services. These assets are automatically assembled into a cohesive video.&lt;/p&gt;
&lt;p&gt;The general concept is compelling: It’s still generative content, but mixed with classic video composition techniques. This approach offers greater accuracy, consistency, and control over pure generative AI.&lt;/p&gt;
&lt;p&gt;The potential to automate video production at this scale is exciting. Add its relatively low complexity and high production value, and it became the perfect topic for my challenge.&lt;/p&gt;
&lt;h2 id=&quot;enter-cesdk&quot;&gt;Enter CE.SDK&lt;/h2&gt;
&lt;p&gt;Another reason I chose this challenge was its compatibility with CE.SDK, our design and video editor library. CE.SDK offers a robust editing toolkit that integrates into any product with just a few lines of code. Its features, like headless mode, are ideal for automating workflows like video generation.&lt;/p&gt;
&lt;p&gt;Most faceless video services use React-based video generation and achieve fair results. However, using CE.SDK instead of a react-based library could potentially boost the overall experience with three critical improvements:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Editable Outputs:&lt;/strong&gt; This is huge. Full automation often needs human adjustments for fine-tuning. CE.SDK enables automated video generation while allowing manual refinement of the results.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Enhanced Visual Quality:&lt;/strong&gt; CE.SDK has its own rendering pipeline, allowing for more nuanced visual effects and animations. When you’re competing against others in this space, it can make a huge difference if you’re able to produce higher fidelity in the visual output.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Visual Design Workflow:&lt;/strong&gt; Create design components or even entire templates visually, and then use them via code. This authoring workflow can be extremely helpful in creating rich, interesting designs for the generated videos.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;the-ground-rules&quot;&gt;The Ground Rules&lt;/h2&gt;
&lt;p&gt;To keep the challenge focused, I set strict rules:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Time Limit:&lt;/strong&gt; Spend no more than 12 hours on the challenge.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;No Manual Coding:&lt;/strong&gt; Avoid writing any code yourself—everything should be built through conversations with AI.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Trust the AI:&lt;/strong&gt; Do not read or analyze code generated by the AI. Rely entirely on its decisions.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Skip External Research:&lt;/strong&gt; Do not read or explore the APIs you intend to use. Instead, provide links to the AI and let it determine how to use them.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Compare AI Performance:&lt;/strong&gt; Alternate Claude Sonnet 3.5 and ChatGPT o1 for code generation to evaluate which performs better.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;the-tools--workflow&quot;&gt;The Tools &amp;#x26; Workflow&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Code Editor:&lt;/strong&gt; &lt;a href=&quot;https://www.cursor.com/&quot;&gt;&lt;strong&gt;Cursor&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
Built on VSCode’s foundation, Cursor stood out as the only editor offering both an integrated chat interface and the ability to switch between different LLMs. However, with GitHub’s recent significant updates to Copilot, I’ll switch to VSCode with Copilot for future challenges.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;UI Prototyping:&lt;/strong&gt; &lt;a href=&quot;https://madewithclaude.com/&quot;&gt;&lt;strong&gt;Claude Artifacts&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
Rather than building the entire project in my code editor, I chose to prototype the UI directly through Claude’s web interface. The benefits were immense:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Instant results:&lt;/strong&gt; To create an artifact, Claude streamlines development by automatically writing and compiling code while leveraging essential UI libraries and components. This automation eliminates setup time and technical overhead, allowing me to focus purely on design iterations.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Instants Variations:&lt;/strong&gt; Claude enables rapid prototyping through parallel conversations. When a design direction didn’t quite work, I could simply start a fresh conversation with modified requirements and evaluate a new prototype. This approach helped me develop three viable concepts quickly - a pace that would have been impossible in a traditional code editor.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Quality of execution:&lt;/strong&gt; Claude transforms rough concepts into polished, intuitive interfaces. Its suggestions often surpassed my initial ideas, offering sophisticated solutions I hadn’t considered.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Keep it clean:&lt;/strong&gt; By prototyping outside the code editor, I kept the main project’s codebase clean and focused. This separation prevented the accumulation of experimental code and maintained the clarity of our primary development environment.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/how-to/er-ai/0108.mp4&quot; controls loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Quickly prototype your interface with Claude Artifacts.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;APIs&lt;/strong&gt;&lt;br&gt;
Key APIs used in the project included:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Script Generation:&lt;/strong&gt; Claude Sonnet 3.5 vs various ChatGPT models.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Image/Video Assets:&lt;/strong&gt; &lt;a href=&quot;https://Fal.ai&quot;&gt;Fal.ai&lt;/a&gt; Flux models.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Speech Synthesis:&lt;/strong&gt; &lt;a href=&quot;https://elevenlabs.io/&quot;&gt;ElevenLabs&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;building-the-app-divide-and-conquer&quot;&gt;Building the App: Divide and Conquer&lt;/h2&gt;
&lt;p&gt;After having prototyped the UI, I started to chat with the LLM inside the code editor so that it can code the app. To work with the AI efficiently, I followed a divide-and-conquer approach. Rather than simply asking it to “build me a video app,” I broke down the problem into manageable steps:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Generate a video script&lt;/strong&gt;&lt;br&gt;
Create an AI prompt that includes user input and examples of the desired output format. Pass this prompt to the LLM API.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Parse the script to generate assets (speech, images, text)&lt;/strong&gt;&lt;br&gt;
Parse the LLM’s response to extract image prompts and speech paragraphs. Send these to their respective APIs.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Compose the final video&lt;/strong&gt;&lt;br&gt;
Load all the generated assets into a predefined template to generate the finished video through the CE.SDK library.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;After completing these steps, I was finally able to generate my first fully automated videos! With a few more tweaks and additions, I had an MVP ready within twelve hours.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/how-to/er-ai/shortyroll.mp4&quot; controls loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;The final result: A Short Video Generator&lt;/p&gt;
&lt;p&gt;There are still some missing features, partly because I spent a significant amount of time refining the prompt to generate the video script. I also had to bend the rules occasionally—sometimes the LLM would hit a wall, and I had to read or write small snippets of code.&lt;/p&gt;
&lt;h2 id=&quot;key-takeaways&quot;&gt;Key Takeaways&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Engineering Knowledge Is Essential&lt;/strong&gt;&lt;br&gt;
You should have some engineering background to achieve the AI productivity boost in development.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;AI doesn’t solve everything for you. You are still the architect. You provide a lot of input and guidance. AI often needs to be pointed to the right strategy. Foundational knowledge of computer science is hugely advantageous for working with AI effectively.&lt;/li&gt;
&lt;li&gt;As mentioned, I had to read and write a few lines of code myself. Without coding experience, I would have probably not been able to progress, as the LLM was not able to.&lt;/li&gt;
&lt;li&gt;The getting started experience is nowhere close to novice-friendly. How do you get started with a new project in a code editor that actually requires you to do the setup manually? My workaround was to create an empty project, and then ask the LLM to instruct me to use a boilerplate for react. Again, this is engineering knowledge, any novice would have hit a wall already at this point.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Claude Outperformed ChatGPT&lt;/strong&gt;&lt;br&gt;
Claude was a clear winner in the side-by-side comparison, because of three reasons:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Claude Artifacts was a game changer for UI prototyping.&lt;/li&gt;
&lt;li&gt;It was generally better at writing and understanding code. Difficult to quantify, but in some cases Claude fixed the mess ChatGPT left in the code&lt;/li&gt;
&lt;li&gt;Claude can process URLs, which makes working with APIs much smoother.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Who would have thought new LLMs would catch up to OpenAI so quickly after they released the first version of ChatGPT?&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Complexity Slows AI&lt;/strong&gt;&lt;br&gt;
The more code in my project, the slower the overall progress. LLMs struggled with the growing complexity. Their context windows filled more quickly, and their responses became increasingly unreliable. At some point, it becomes extremely difficult to make architectural changes, especially if this affects multiple parts of the app. When trying to fix errors, you’ll often find yourself in a whack-a-mole game. While the AI would resolve one issue, it would inadvertently introduce new problems elsewhere, creating an endless loop of fixes and regressions.&lt;/p&gt;
&lt;p&gt;Ultimately, the time invested in this challenge was well worth it. While LLMs can’t build products end to end on their own, they can significantly streamline product development when paired with the right human collaboration. The real question is whether development teams are ready to adapt their habits and explore new workflows to boost productivity.&lt;/p&gt;
&lt;h2 id=&quot;next-steps&quot;&gt;Next Steps&lt;/h2&gt;
&lt;p&gt;This challenge has inspired me to refine and expand on this project. Future iterations will focus on harnessing CE.SDK’s unique features to push the boundaries of automated video generation.&lt;/p&gt;
&lt;p&gt;Stay tuned for part two of this series—there’s much more to explore!&lt;/p&gt;
&lt;p&gt;UPDATE: Read &lt;a href=&quot;https://img.ly/blog/how-to-build-a-short-video-generator-using-ce-sdk-2/&quot;&gt;part two&lt;/a&gt; - a cookbook how to build your own short video creator!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Over 3,000 creative professionals gain early access to our new features, insights and updates—don’t miss out, and&lt;/strong&gt; &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i?ref=img.ly&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;to our newsletter.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Eray</dc:creator><media:content url="https://blog.img.ly/2025/01/build-ai-video-generator-1.jpg" medium="image"/><category>How-To</category><category>AI</category><category>CE.SDK</category><category>Artificial Intelligence</category><category>Video Editor</category></item><item><title>IMG.LY Research: AI-based Generative Design Editing</title><link>https://img.ly/blog/img-ly-research-ai-based-generative-editing/</link><guid isPermaLink="true">https://img.ly/blog/img-ly-research-ai-based-generative-editing/</guid><description>Combine Large Language Models (LLMs) with CE.SDK for design edits and automated creative workflows.</description><pubDate>Tue, 16 Jul 2024 10:44:05 GMT</pubDate><content:encoded>&lt;p&gt;Generative AI is transforming the tech landscape, finding applications in virtually every field. At &lt;a href=&quot;https://img.ly/?utm_source=imgly&amp;#x26;utm_medium=blog&amp;#x26;utm_campaign=generative-editing&quot;&gt;IMG.LY&lt;/a&gt;, we’re exploring how these advancements can revolutionize creative workflows. This article presents a research project, where we integrate Large Language Models (LLMs) with our flagship product, CreativeEditor SDK (CE.SDK), to enable natural language-driven design edits.&lt;/p&gt;
&lt;p&gt;Our flagship product, CreativeEditor SDK (CE.SDK) allows for advanced creative workflows for countless use cases in industries ranging from &lt;a href=&quot;https://img.ly/industries/print&quot;&gt;print&lt;/a&gt; to &lt;a href=&quot;https://img.ly/industries/marketing-tech&quot;&gt;marketing tech&lt;/a&gt;. Most use cases can be realized with the out-of-the-box feature set, but it also exposes a best-in-class API, called Engine API, to build complex custom workflows with designs and videos.&lt;/p&gt;
&lt;p&gt;In this article, we will showcase how to combine our CE.SDK Engine API with LLMs to edit designs with natural language.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://storage.googleapis.com/imgly-static-assets/static/blog/videos/imgly-research/imgly-ai-template-editor-demo.mp4&quot; controls autoplay muted loop playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;h2 id=&quot;introduction-to-llms&quot;&gt;Introduction to LLMs&lt;/h2&gt;
&lt;p&gt;Generative AI is often associated with chatbots, but its capabilities stretch further. It is a versatile text processor that can transform any textual input into various structured outputs. This adaptability is due to its training on diverse textual patterns, allowing it to support a wide range of text-to-text applications beyond just generating conversational prose.&lt;/p&gt;
&lt;p&gt;Carefully crafting an input text (prompt) in a way that instructs the LLM to output a specific structured output format allows us to use LLMs to solve almost any arbitrary text-based task.&lt;/p&gt;
&lt;p&gt;Crafting prompts is an art in itself. When ensuring that we receive the required output we need to adhere to the following steps:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Consider what type of data our model was trained on to ensure the correct formatting of our input text. The most basic example is using English as our “main prompt language” since most LLMs are mainly trained on English text samples.&lt;/li&gt;
&lt;li&gt;All necessary problem-specific information to solve the task needs to be included in the prompt. While LLMs often possess an inherent understanding of the world inferred from the vast amount of text they are trained on, they may not know much about our specific problem. Furthermore, LLMs have the notorious tendency to hallucinate, that is fill in missing context with incoherent or incorrect information. To ensure the best performance, the input to the LLM must provide as much context as possible.&lt;/li&gt;
&lt;li&gt;Finally, we need to instruct the LLM well enough to output text-based data in a format we can then parse and process.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;human-vs-ai-workflows-for-executing-design-tasks&quot;&gt;Human vs. AI Workflows for Executing Design Tasks&lt;/h2&gt;
&lt;p&gt;We started this project with the vision to use generative AI to magically handle requests like these (in increasing order of complexity):&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Make the logo bigger&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Translate this design into German&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Adopt this template to our brand colors and brand assets&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Transform this Instagram story portrait design into a landscape YouTube thumbnail&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;When trying to delegate a task to an AI, it’s best to start by thinking about how these tasks are currently solved by humans.&lt;/p&gt;
&lt;p&gt;Let’s walk through how a human would complete a task such as&lt;br&gt;
&lt;code&gt;Make the logo bigger&lt;/code&gt;:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Humans would visually scan the design and automatically segment it by its elements such as objects, backgrounds, or text.&lt;/li&gt;
&lt;li&gt;Humans would then read and comprehend the task “Make the logo bigger”&lt;/li&gt;
&lt;li&gt;Finally, users would use their existing knowledge of how to move and interact with design software to fulfill the task by manipulating the individual elements in the design.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Based on these considerations we can extract the implicit knowledge necessary to fulfill a task and make it explicit for the benefit of our LLM.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Design Representation:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;To enable the LLM to understand and manipulate a design, it is essential to provide a representation of the design. This can be either textual or a mix of textual and visual (if the LLM has vision capabilities) data. While supplying the current design as a raster image to the LLM is trivial, serializing a CE.SDK design into a textual format requires a custom serialization process. The textual representation is important since it allows the LLM to identify, address, and comprehend the different components of the design effectively.&lt;/p&gt;
&lt;p&gt;Refer to &lt;code&gt;Appendix: Use-Case dependent serialization of CE.SDK Designs&lt;/code&gt; for a more in-depth explanation of how to accomplish this.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Editing Protocol:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;LLMs do not interact with design software using traditional human interfaces like a mouse, keyboard, or visual feedback. Therefore, we need a specific protocol for the LLM to propose changes to the design. We have developed a method where we pass a textual representation of the design to the LLM as part of the prompt so that the LLM can indicate changes to the design by returning a modification of this representation.&lt;/p&gt;
&lt;p&gt;Practically, this means that if we pass in an element such as &lt;code&gt;&amp;#x3C;Image id=&quot;1337&quot; x=”100” y=&quot;100&quot; .../&gt;&lt;/code&gt;, the LLM can change those x and y attributes by simply returning &lt;code&gt;&amp;#x3C;Image id=&quot;1337&quot; x=&quot;0&quot; y=&quot;0&quot; .. /&gt;&lt;/code&gt; inside its output text. Since we can identify the design element that was changed using the ID attribute, we can then calculate the programmatic changes that need to be applied to the design, like in this case &lt;code&gt;engine.block.setPositionX(1337, 0)&lt;/code&gt; and &lt;code&gt;engine.block.setPositionY(1337, 0)&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Refer to &lt;code&gt;Appendix: Parsing and transforming LLM response&lt;/code&gt; for a deeper look into this topic.&lt;/p&gt;
&lt;h2 id=&quot;using-generative-ai-to-execute-design-related-tasks&quot;&gt;Using Generative AI to Execute Design-Related Tasks&lt;/h2&gt;
&lt;p&gt;&lt;img alt=&quot;Employ LLMs to modify and improve CE.SDK design templates.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 2000px) 2000px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;2000&quot; height=&quot;879&quot; src=&quot;https://img.ly/_astro/ai-generated-design-templates-LLM_1BWRFe.webp&quot; srcset=&quot;/_astro/ai-generated-design-templates-LLM_1etJt1.webp 640w, /_astro/ai-generated-design-templates-LLM_Z2amSOe.webp 750w, /_astro/ai-generated-design-templates-LLM_2jWNYV.webp 828w, /_astro/ai-generated-design-templates-LLM_Lp5Ga.webp 1080w, /_astro/ai-generated-design-templates-LLM_2qLpKx.webp 1280w, /_astro/ai-generated-design-templates-LLM_Z1OfXUH.webp 1668w, /_astro/ai-generated-design-templates-LLM_1BWRFe.webp 2000w&quot;&gt;&lt;/p&gt;
&lt;p&gt;Based on what we have learned, we assemble a workflow, with the LLM as the center point that allows the LLM to execute design-related tasks on any of our CE.SDK designs. This workflow can be divided into two sub-tasks: Composing an input text (prompt) with all necessary context and parsing and applying the output of the LLM to the CE.SDK design.&lt;/p&gt;
&lt;h3 id=&quot;composing-the-input-text&quot;&gt;Composing the Input Text&lt;/h3&gt;
&lt;p&gt;As seen in the graphic above we first compose the input text based on different components to provide the model with all necessary context to fulfill the user’s editing request: This includes a general text to “instruct” the model, the actual request that the user entered, an exemplary design representation to explain our output format to the model and a representation of the currently edited design.&lt;/p&gt;
&lt;p&gt;The general, static text to “instruct” the model is composed of the following three parts.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;What we are trying to achieve in general:&lt;br&gt;
&lt;code&gt;&quot;You are an AI with expertise in design, specifically focused on XML representations of designs&quot;&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Output format instructions:&lt;br&gt;
&lt;em&gt;Your responses should only contain one XML document. Ensure that you do not introduce new attributes to any XML elements. You can change image elements by setting the alt attribute, which then will be used to search Unsplash for a fitting image. A sample alt text is “A mechanic changing tires with a pair of beautiful work gloves on”.&lt;br&gt;
Additionally, pay close attention to the layout: verify that no elements in the XML document extend beyond the page boundaries. This constraint is critical for maintaining consistency and accuracy in XML formatting. Always double-check your XML output for these requirements.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;The actual user request:&lt;br&gt;
e.g., &lt;code&gt;&quot;Make the logo bigger&quot;&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;By including a textual representation of a comprehensive example design we can show the model which layer types are available as well as which properties of those layers can be manipulated.&lt;/p&gt;
&lt;p&gt;The model now has all the necessary context and building blocks to respond to user requests in a format that we can process downstream.&lt;/p&gt;
&lt;h3 id=&quot;applying-the-output-text&quot;&gt;Applying the Output Text&lt;/h3&gt;
&lt;p&gt;In the first step, we scan the output text for an XML-like document and if we find one, attempt to parse it.&lt;/p&gt;
&lt;p&gt;This will yield a structured data object we can compare to the one we passed in and calculate which elements have been modified, added, or removed.&lt;/p&gt;
&lt;p&gt;The resulting change set can then be translated into specific calls to the &lt;a href=&quot;https://img.ly/docs/cesdk/js/user-interface/ui-extensions-d194d1/&quot;&gt;CE.SDK Engine API&lt;/a&gt; to change the current design.&lt;/p&gt;
&lt;h2 id=&quot;issues-faced&quot;&gt;Issues faced&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Latency&lt;/strong&gt;: One issue with state-of-the-art models is their big latency: Each LLM response contains approximately 1000 tokens. That means each request takes 7-45 seconds (depending on the model) to complete. This long delay may be unacceptable for some user experiences. However, we see this issue as transitory and expect upcoming models to have much smaller latency while maintaining their capabilities.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Pricing&lt;/strong&gt;: Each request/response with GPT-4 turbo as a backing model costs around 5 cents and restricts some use cases. We also expect the pricing to drop significantly. The new GPT-4o model for example reduces the price by half.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Hallucinations&lt;/strong&gt;: LLMs do not always follow the instructions properly and, e.g., produce output that is not parsable. Hallucinations directly correlate with the capabilities of the model and this issue is not apparent at current state-of-the-art LLMs like e.g GPT-4/GPT-4o.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;We present a novel and adaptable approach to use Generative AI and LLMs specifically to interact with IMG.LY’s CreativeEditor SDK. We showcase how this technology can be used to execute common design requests on arbitrary CE.SDK Designs. The proposition that LLMs can understand textual representations of visual elements was by no means obvious. This research project has revealed that it is very well within the scope of LLMs to translate instructions from a visual semantic context to its textual representation and back. This invites more inquiries into LLMs as assistants for tasks with a heavy visual component such as design.&lt;/p&gt;
&lt;p&gt;While further research is needed to make this technology available in production environments, we are confident that Generative AI-based editing will play a big role in the future of Graphics and Video editing.&lt;/p&gt;
&lt;h2 id=&quot;appendix-use-case-dependent-serialization-of-cesdk-designs&quot;&gt;Appendix: Use-case Dependent Serialization of CE.SDK Designs&lt;/h2&gt;
&lt;p&gt;LLMs work based on “tokens” which are equal to words. However, a design, like e.g a poster design or a social media graphic, is highly visual. That means that we need a way to convert a design into text, a way to serialize it. Our CE.SDK engine can serialize an existing scene using our &lt;code&gt;engine.block.saveToString&lt;/code&gt; method. However, this serialization contains a huge pile of information that is not necessary to do edits inside the file. LLMs are priced by token and their speed is also relative to the number of tokens the input and output have. Thus, the number of tokens should be reduced.&lt;/p&gt;
&lt;p&gt;We looked at several ways to convert the current state of the design into a textual representation. Since GenAI is trained on a lot of (X)HTML which has an XML-like format, we decided to serialize any designs into a tag-based XML-like format.&lt;/p&gt;
&lt;p&gt;The IMG.LY editor internally refers to design elements like images or texts as “blocks”. These blocks are uniquely identifiable and addressable using a numeric ID. We use this ID to be able to identify a serialized design block in the input and output of the LLM. Example: &lt;code&gt;&amp;#x3C;Image id=&quot;12582927&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;800&quot; height=&quot;399&quot; /&gt;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;For each of the CE.SDK block types like e.g “Text” or “Graphics” (representing images or vector shapes), we will the CE.SDK Engine API to query very specific data from the block. That means that for example we only have a text attribute for Text blocks.&lt;/p&gt;
&lt;p&gt;This rather specific mapping of only certain properties from the CE.SDK design into the text serialization allows us to optimize the design serialization for different use cases. A use-case where we e.g. want to automatically name each layer does maybe not require fine-grained information about e.g the font size.&lt;/p&gt;
&lt;h2 id=&quot;appendix-parsing-and-transforming-llm-response&quot;&gt;Appendix: Parsing and transforming LLM response&lt;/h2&gt;
&lt;p&gt;The LLM answers with arbitrary tokens. It’s not possible to restrict the response to a certain syntax. By settling on a well-defined and widely used format we instruct the model to also reply with an XML-like document, similar to the one we passed in as “current state”.&lt;/p&gt;
&lt;p&gt;After receiving the LLM’s Response we first make sure that only a single XML document is present inside the response. We then compare the retrieved XML document with the state of the Design that we passed into the LLM and generate a change set. This change set contains entries like “Color of block with ID=123 has changed”. These change set entries are then converted into programmatic commands, like e.g &lt;code&gt;engine.block.setColor(123)&lt;/code&gt; and executed on the current design.&lt;/p&gt;
&lt;p&gt;One challenges when working with an LLM is the inability to restrict the output space. Thus, we are never guaranteed that the LLM did not add e.g new XML node names or that it even replies with a proper, valid XML-like document. The only lever to influence the probability of a proper XML-like document is to use strong prompting and LLM that are good at following those instructions.&lt;/p&gt;
&lt;p&gt;In our tests, state-of-the-art models like GPT-4 can follow those instructions without any further tooling.&lt;/p&gt;
&lt;h2 id=&quot;further-research-topics&quot;&gt;Further Research Topics&lt;/h2&gt;
&lt;p&gt;It’s also worth exploring fine-tuning an LLM specifically for this task which could improve the performance of the LLM for the specific tasks.&lt;/p&gt;
&lt;p&gt;It would also be possible to use more advanced libraries like &lt;a href=&quot;https://github.com/guidance-ai/guidance&quot;&gt;Guidance&lt;/a&gt;, which allows to define a grammar for the LLM response thus making sure that the output of the LLM is always parseable.&lt;/p&gt;
&lt;p&gt;Another way to improve the performance would be to methodically test different prompt templates and find a way to measure and compare the output quality.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Thank you for reading!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;3,000+ creative professionals gain exclusive access and hear of our releases first—&lt;/strong&gt;&lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i&quot;&gt;&lt;strong&gt;subscribe&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;to our newsletter and never miss out.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Mirko</dc:creator><media:content url="https://blog.img.ly/2024/07/0_AI-Template-generator.jpg" medium="image"/><category>AI</category><category>Automation</category><category>Design Editor</category><category>Machine Learning</category></item><item><title>Cutting Through The Jungle: An In-depth Review of Cloud GPU Providers to Train Your AI Models in 2024</title><link>https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models/</link><guid isPermaLink="true">https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models/</guid><description>Embark with us on a journey to finding the best place to host AI models.</description><pubDate>Mon, 22 Apr 2024 06:35:54 GMT</pubDate><content:encoded>&lt;h2 id=&quot;navigating-the-world-of-ai-models-hosting&quot;&gt;Navigating the World of AI Models Hosting&lt;/h2&gt;
&lt;p&gt;Here at IMG.LY, we recently dug into finding the best place to host AI models to support apps we’re dreaming up. We wanted to figure out if using cloud GPUs or going serverless would work better for us. As we were looking specifically for service providers to run Image Generation Workloads on, we focused on those that could be the best fit for that. Along the way, we picked up some cool insights and ran into a few hiccups. We think sharing our journey and the things we figured out could help you when you’re looking to deploy your own AI models.&lt;/p&gt;
&lt;p&gt;First off, we’ll explain what cloud GPU and serverless hosting really mean. Then, we’ll chat about their good and not-so-good sides when it comes to hosting AI models. It’s super important to make sure whatever hosting you choose fits your model like a glove. We’ll talk about some tools we stumbled upon that could help with that. Next up, we’ll give you a peek at some of the providers we checked out and our thoughts on how they might fit with what we’re working on. We decided to skip over the big names like IBM, Google, and Amazon this time. We were curious about what the newer, smaller companies have to offer.&lt;/p&gt;
&lt;p&gt;To wrap things up, we’ll share some final thoughts on all our research. Plus, we’ll throw in some tips and ideas you might want to think about when you’re doing your own digging. Whether you’re developing AI models or planning to host some of the well-known ones, we hope our adventure helps you nail down the perfect hosting solution for what you need. Ready to jump in?&lt;/p&gt;
&lt;h2 id=&quot;kinds-of-cloud-hosting-for-ai-models&quot;&gt;Kinds of Cloud Hosting for AI Models&lt;/h2&gt;
&lt;p&gt;Cloud hosting has been around for as long as there has been a cloud. Though the server hardware is not at your location, earlier versions of cloud hosting required that your team learnt lots about server infrastructure. As things have evolved, providers now manage the infrastructure so that you can focus on your work. You can now host even just a single function in the cloud, if that’s what you need. In our research, we looked at general serverless hosting and at Cloud GPU AI providers.&lt;/p&gt;
&lt;h3 id=&quot;serverless-hosting&quot;&gt;Serverless Hosting&lt;/h3&gt;
&lt;p&gt;Serverless hosting can be defined as an architecture model that lets developers build and run applications and services without managing the servers they run on. The cloud provider manages things like security, provisioning, scaling, and connectivity.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Diagram of serverless app services all running together on general hardware.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 478px) 478px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;478&quot; height=&quot;390&quot; src=&quot;https://img.ly/_astro/serverless2_9SKyE.webp&quot; srcset=&quot;/_astro/serverless2_9SKyE.webp 478w&quot;&gt;&lt;br&gt;
In a serverless CPU-loads hosting the host provisions your services to the most appropriate and available hardware. However, with most of the providers of GPU loads you get to choose.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Serverless Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Pay-per-compute model: you only pay for the compute time you consume.&lt;/li&gt;
&lt;li&gt;Autoscaling: the provider will automatically scale up or down depending on load, from a few requests a day to thousands per second.&lt;/li&gt;
&lt;li&gt;No server management: eliminates the need for developers to &lt;em&gt;also&lt;/em&gt; understand server infrastructure. Often, just a Docker image holding an application is sufficient.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Serverless Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Cold starts: instance deallocates after a certain idle time (enabling the great pay-per-compute model) so initial request after this can be noticeably slow.&lt;/li&gt;
&lt;li&gt;Limited control over specifics: certain GPU hardware or even server hardware may be unavailable at times which can impact performance.&lt;/li&gt;
&lt;li&gt;Limitations on time - there may be limitations on the execution time of functions, which can impact long-running processes.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;cloud-gpu-hosting&quot;&gt;Cloud GPU Hosting&lt;/h3&gt;
&lt;p&gt;Cloud GPU hosting provides access to GPU and TPU (Tensor Processing Unit) hardware that can perform the parallel operations essential for AI model training and inference. The provider allows users to configure specific hardware for their jobs.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Diagram showing AI model running on specific GPU&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; sizes=&quot;(min-width: 545px) 545px, 100vw&quot; data-astro-image=&quot;constrained&quot; data-astro-image-pos=&quot;center&quot; width=&quot;545&quot; height=&quot;390&quot; src=&quot;https://img.ly/_astro/gpu3_Z27RcaD.webp&quot; srcset=&quot;/_astro/gpu3_Z27RcaD.webp 545w&quot;&gt;&lt;br&gt;
With cloud GPU each service or model gets its own GPU while running. Your other services communicate with the model through an API.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Cloud GPU Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;High performance: GPUs are specifically designed to run AI models and other tasks like deep learning and complex simulations.&lt;/li&gt;
&lt;li&gt;Full control of hardware: users can specify specific hardware configurations for their projects.&lt;/li&gt;
&lt;li&gt;Persistent availability: resources are not deallocated, so there is no latency for provisioning for the first request.&lt;/li&gt;
&lt;li&gt;Cost-effective experiments: the upfront cost of purchasing GPU hardware to experiment with different configurations is eliminated. Services are priced with a pay-as-you-go model.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cloud GPU Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Costs over time: costs do not go down during periods of low demand. Over time, costs can potentially surpass the cost of investing in local hardware.&lt;/li&gt;
&lt;li&gt;Management overhead - managing and optimizing hardware configurations is not automatically part of the hosting. You’ve got to learn some server administration and manage security and upgrades.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;providers&quot;&gt;Providers&lt;/h2&gt;
&lt;p&gt;It’s important to understand that this isn’t a ranking of the best providers or an endorsement. It’s what we discovered with some web searching, reviewing the available documentation, and tinkering with any demo or free tools and models the provider makes available. The list could easily have been different providers and we think some of the pros and cons and qualities would be the same. Hopefully, some of the questions we raise and the pros or cons we noticed in our research can help you to guide your research.&lt;/p&gt;
&lt;p&gt;Our goal was to find potential hosts for various workflows with different models in a scalable manner. We want to be able to build applications around the workflows. Some of our, specific, requirements include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Autoscaling, ideally out-of-the-box without the need for custom Kubernetes setup or similar technologies.&lt;/li&gt;
&lt;li&gt;Minimal vendor lock-in.&lt;/li&gt;
&lt;li&gt;Compatibility with various technologies (REST API, WebSocket, Webhooks, etc.).&lt;/li&gt;
&lt;li&gt;Support for Windows Server.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;With those disclaimers and caveats, here is a short summary of our research.&lt;/p&gt;

























































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Provider&lt;/th&gt;&lt;th&gt;Best For&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Runpod IO (Serverless)&lt;/td&gt;&lt;td&gt;Deploy AI models with GPU support and require customizable API interfaces.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Vast AI (Serverless)&lt;/td&gt;&lt;td&gt;Affordable GPU resources and a variety of GPU options for AI model training.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Paperspace (Serverless)&lt;/td&gt;&lt;td&gt;Flexible workflows and support for different stages of AI model development.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;CoreWeave (Serverless)&lt;/td&gt;&lt;td&gt;Strong knowledge of Kubernetes and need autoscaling capabilities for AI workloads.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Modal (Serverless)&lt;/td&gt;&lt;td&gt;Comprehensive documentation and examples for deploying AI models in containers.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ComfyICU (Serverless)&lt;/td&gt;&lt;td&gt;Serverless infrastructure tailored for hosting ComfyUI applications.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Replicate (Serverless)&lt;/td&gt;&lt;td&gt;Easy-to-use API for executing AI tasks without managing infrastructure.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Genesis Cloud (Cloud GPU)&lt;/td&gt;&lt;td&gt;Sustainability and need scalable GPU instances for AI model training.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Fly IO (Cloud GPU)&lt;/td&gt;&lt;td&gt;To deploy complete applications with GPU support in a scalable environment.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Runpod IO (Cloud GPU)&lt;/td&gt;&lt;td&gt;GPU resources in various regions and require customizable Docker-based deployments.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Lamda Labs (Cloud GPU)&lt;/td&gt;&lt;td&gt;On-demand GPU resources for model training and inference tasks.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Together AI (Cloud GPU)&lt;/td&gt;&lt;td&gt;A platform for testing serverless models and occasional access to GPU clusters.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;If you want to skip ahead to a specific part, here are the providers we will be diving into:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Serverless Providers&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#runpodioserverless&quot;&gt;Runpod IO (Serverless)&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#vastai&quot;&gt;Vast AI&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#paperspace&quot;&gt;Paperspace&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#bananadev&quot;&gt;Banana Dev&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#coreweave&quot;&gt;CoreWeave&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#modal&quot;&gt;Modal&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#comfyicu&quot;&gt;ComfyICU&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#replicate&quot;&gt;Replicate&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;GPU Cloud Providers&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#genesiscloud&quot;&gt;Genesis Cloud&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#flyio&quot;&gt;Fly IO&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#runpodiocloudgpu&quot;&gt;Runpod IO (Cloud GPU)&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#lamdalabs&quot;&gt;Lamda Labs&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://img.ly/blog/reviewing-cloud-gpu-providers-for-training-ai-models//#togetherai&quot;&gt;Together AI&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;serverless-providers&quot;&gt;Serverless Providers&lt;/h2&gt;
&lt;h3 id=&quot;runpod-io-serverless&quot;&gt;Runpod IO (Serverless)&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.runpod.io/&quot;&gt;Runpod IO&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A Docker image that includes the installation of Python + GPU packages, models, and ComfyUI.&lt;/li&gt;
&lt;li&gt;Python/Go handlers act as an API interface to ComfyUI, which is vendor-specific, but can be wrapped in a more general API for reuse. For more information, see &lt;a href=&quot;https://9elements.com/blog/hosting-a-comfyui-workflow-via-api/&quot;&gt;this article on hosting a ComfyUI workflow via API&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Good documentation, including public GitHub repositories with examples.&lt;/li&gt;
&lt;li&gt;Relatively large community for a new provider.&lt;/li&gt;
&lt;li&gt;Compatibility with Windows Server.&lt;/li&gt;
&lt;li&gt;Handlers allow for webhook and WebSocket-like communication for API feedback.&lt;/li&gt;
&lt;li&gt;Network volume to store models/data and reduce cold start times.&lt;/li&gt;
&lt;li&gt;Control over the number of workers and the ability to define persistently active workers.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Availability of GPUs, especially in Europe, needs to be validated.&lt;/li&gt;
&lt;li&gt;Handlers can only be written in Python and Go.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;General open questions regarding serverless infrastructure and AI inference tasks.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The overall package seems very mature. The setup can largely be adopted from the GitHub examples. Good documentation and community support (notably on Reddit). The open questions regarding pricing and cold starts are typical for serverless infrastructure.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;vast-ai&quot;&gt;Vast AI&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://vast.ai/&quot;&gt;Vast AI&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Peer-to-Peer Sharing. Companies/organizations can rent out their unused GPUs.&lt;/li&gt;
&lt;li&gt;A GPU Marketplace approach.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Affordable prices through their peer-to-peer GPU sharing model.&lt;/li&gt;
&lt;li&gt;A wide selection of different GPUs.&lt;/li&gt;
&lt;li&gt;Good global availability of GPUs.&lt;/li&gt;
&lt;li&gt;Ability to define autoscaler groups, allowing different workflows to scale differently.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The autoscaler is currently only in beta mode.&lt;/li&gt;
&lt;li&gt;Data privacy/security concerns when renting GPUs from anonymous providers.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How will the autoscaler beta evolve?&lt;/li&gt;
&lt;li&gt;Control over GPU providers: Can one allow only certain trusted providers (e.g., those based in the EU)?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Even though the pricing is more affordable, there may be significant issues, in terms of security and data protection, as well as the fact that the autoscaler is still in the beta phase.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;paperspace&quot;&gt;Paperspace&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.digitalocean.com/products/paperspace/workflows/getting-started/your-first-workflow/&quot;&gt;Paperspace&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The serverless approach (Workflows or Gradient) is still in beta &lt;a href=&quot;https://www.paperspace.com/gradient/workflows&quot;&gt;Paperspace Gradient Workflows&lt;/a&gt; is based on &lt;a href=&quot;https://argoproj.github.io/workflows/&quot;&gt;Argo Workflows&lt;/a&gt; which utilizes Kubernetes.&lt;/li&gt;
&lt;li&gt;A predefined API is available for communicating with workflows, as detailed in &lt;a href=&quot;https://docs.digitalocean.com/reference/paperspace/pspace/commands/completion/&quot;&gt;DigitalOcean’s documentation for Paperspace commands&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The ability to use different machines (GPUs) at different stages of a workflow.&lt;/li&gt;
&lt;li&gt;Provided by Digital Ocean, allows for general hosting customers to expand into GPU hosting without finding a new vendor.&lt;/li&gt;
&lt;li&gt;Possible Windows support as outlined in &lt;a href=&quot;https://docs.digitalocean.com/products/paperspace/machines/getting-started/run-windows-app/&quot;&gt;DigitalOcean’s documentation on running Windows apps&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Complex documentation: offers many features for various use cases (AI learning, data preparation, validation, and inference).&lt;/li&gt;
&lt;li&gt;Vendor lock-in through a proprietary system: Gradient Workflows and YAML config are specific to Paperspace.&lt;/li&gt;
&lt;li&gt;No real-time feedback over the API.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Since it’s still in beta, how will the ecosystem continue to develop?&lt;/li&gt;
&lt;li&gt;How extensive is the knowledge of Kubernetes required to implement autoscaling?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;It’s positive that it’s offered by Digital Ocean as they are a more mature company with general hosting experience. The approach seems very specific to Digital Ocean. Furthermore, it may require experience with Kubernetes.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;banana-dev&quot;&gt;Banana Dev&lt;/h3&gt;
&lt;p&gt;It has been excluded: Recently, they announced the termination of their serverless model as it was not cost-effective.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Learning from this: Currently, there are many new providers entering the market aiming to establish themselves as cloud GPU or serverless GPU providers. This highlights the importance of minimizing vendor lock-in.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3 id=&quot;coreweave&quot;&gt;CoreWeave&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.coreweave.com/coreweave-kubernetes/serverless&quot;&gt;CoreWeave&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Heavily based on Kubernetes.
&lt;ul&gt;
&lt;li&gt;A Kubernetes file is created for setup; scaling and additional infrastructure are managed by Core Weave.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Autoscaling by default with the possibility of scaling to zero.&lt;/li&gt;
&lt;li&gt;Supports Windows.&lt;/li&gt;
&lt;li&gt;Minimal vendor lock-in due to Kubernetes configuration.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Strong dependency on Kubernetes, with the serverless setup based on &lt;a href=&quot;https://knative.dev/docs/&quot;&gt;KNative documentation&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Does not offer a handler API, etc., to communicate directly with ComfyUI.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How complicated would it be to implement an API interface and resulting scaling to address the correct instances, etc.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Good documentation and a close interface to Kubernetes. For a team with strong knowledge of Kubernetes, this could be a prime candidate.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;modal&quot;&gt;Modal&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Container Setup: Containers are defined through Modal’s own container setup &lt;a href=&quot;https://modal.com/docs/guide/custom-container&quot;&gt;Modal custom container documentation&lt;/a&gt;.
&lt;ul&gt;
&lt;li&gt;Docker images can also be used.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Modal-specific handlers to communicate with ComfyUI and other models.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Supports webhooks and custom endpoints &lt;a href=&quot;https://modal.com/docs/guide/webhooks#custom-domains&quot;&gt;Modal webhooks documentation&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Focus on fast startups/cold starts.&lt;/li&gt;
&lt;li&gt;Emphasis on AI inference tasks.&lt;/li&gt;
&lt;li&gt;Comprehensive documentation with many examples.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Vendor lock-in if Modal’s container setup is used.&lt;/li&gt;
&lt;li&gt;Autoscaling and scaling configuration are not directly described.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How exactly does the autoscaling work?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Assessment:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;For us, this is a candidate for closer consideration. The container setup can be managed through Dockerfiles, and the API defined by Modal’s own interface.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;comfyicu&quot;&gt;ComfyICU&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://comfy.icu/serverless/&quot;&gt;ComfyICU&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Pure focus on ComfyUI, serverless infrastructure.&lt;/li&gt;
&lt;li&gt;API interface for communication.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Minimal setup effort.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Limited control over the API.&lt;/li&gt;
&lt;li&gt;Limited GPU resources.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How does the autoscaling work, if it exists at all?&lt;/li&gt;
&lt;li&gt;Community-based open source. What is the long-term support for this project?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Potentially useful for testing or building a demo site, but probably not suitable for developing our commercial applications.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;replicate&quot;&gt;Replicate&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://replicate.com/&quot;&gt;Replicate&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Execution of AI tasks/models in the cloud via an API.&lt;/li&gt;
&lt;li&gt;No access to infrastructure, etc.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Supports various languages: Node, Python, Swift.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;No control over the infrastructure, number of GPUs, or workers.&lt;/li&gt;
&lt;li&gt;API rate limits.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How can autoscaling be enabled?&lt;/li&gt;
&lt;li&gt;Is it possible to create custom API endpoints, webhooks, websockets?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;For testing or as a demo for one’s own model, this can be a very good platform. However, as a standalone application interface, it doesn’t meet some of our core requirements.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;gpu-cloud-providers&quot;&gt;GPU Cloud Providers&lt;/h2&gt;
&lt;h3 id=&quot;genesis-cloud&quot;&gt;Genesis Cloud&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.genesiscloud.com/&quot;&gt;Genesis Cloud&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Focus on sustainability and renewable energy.&lt;/li&gt;
&lt;li&gt;Scaling through instances as detailed in &lt;a href=&quot;https://developers.genesiscloud.com/instances&quot;&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A REST API is available for managing instances.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The availability of GPUs varies significantly by region.&lt;/li&gt;
&lt;li&gt;Limited selection of GPUs.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How quickly can new instances be scaled up or down?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The use case for Genesis Cloud appears to be more suited for model training or tasks that require a significant amount of computing power for extended periods.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;fly-io&quot;&gt;Fly IO&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://fly.io/&quot;&gt;Fly IO&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Focus on the deployment of complete applications.&lt;/li&gt;
&lt;li&gt;Also offers its own GPU servers.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Docker File support with additional configuration via a TOML file.&lt;/li&gt;
&lt;li&gt;Quick scaling of GPUs up or down facilitated by the launch process.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Limited selection of GPUs, with only very large GPUs available.&lt;/li&gt;
&lt;li&gt;Specifically tailored for Linux.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How well does the launch system perform for relatively fast inference tasks?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Since primarily large GPUs are available, the focus here also appears to be more on model training or other long-duration tasks. However, the launch system might also potentially be used for inference.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;runpod-io-cloud-gpu&quot;&gt;Runpod IO (Cloud GPU)&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.runpod.io/&quot;&gt;Runpod IO&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A wide range of GPUs available across various regions.&lt;/li&gt;
&lt;li&gt;Base Docker images for popular tasks or support for custom Docker images.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Many different data center regions.&lt;/li&gt;
&lt;li&gt;A variety of CPUs available.&lt;/li&gt;
&lt;li&gt;Simple setup via Docker images.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;No direct autoscaling (would need to use Runpod Serverless for that).&lt;/li&gt;
&lt;li&gt;Despite a large selection of GPUs and many different data center locations, the availability of GPUs is not very high.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Open Questions:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Can autoscaling be implemented without using serverless?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The setup can largely be adopted from the GitHub examples. There is good documentation and a community (much of it on Reddit). The availability of GPUs could become a problem, especially for smaller GPUs.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;lamda-labs&quot;&gt;Lamda Labs&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;On-demand cloud with a focus on model training and inference.&lt;/li&gt;
&lt;li&gt;Similar concept to Runpod, offering a variety of GPUs.
&lt;ul&gt;
&lt;li&gt;GPU availability is very limited.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Runpod and Lambda Labs seem to have a similar approach and similar offerings. Runpod appears to have greater availability.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;together-ai&quot;&gt;Together AI&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Concept:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Offers an API and playground for testing serverless models.&lt;/li&gt;
&lt;li&gt;Also offers GPU clusters but only upon request.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;We didn’t dig into the GPU clusters since information is available only upon request. Otherwise, in the API/serverless area, it appears to be similar to Replicate.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;established-providers&quot;&gt;Established Providers&lt;/h2&gt;
&lt;p&gt;As we said in the introduction we did not examine the old, large providers like Google Cloud, AWS, Azure, Nvidia, etc., in detail. Rather, we focused on the new providers aiming specifically at the market segment of AI GPUs. With the older providers, we are more in the realm of cloud GPUs and less in serverless. Given the size of these providers and the wide range of market segments they cover, it can make sense to opt for them if one is already familiar with their architecture and documentation.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Google Cloud Platform (GCP)&lt;/li&gt;
&lt;li&gt;AWS&lt;/li&gt;
&lt;li&gt;Microsoft Azure&lt;/li&gt;
&lt;li&gt;IBM Cloud&lt;/li&gt;
&lt;li&gt;NVIDIA GPU Cloud (NGC)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Just as we saw that performance can vary wildly for different models, pricing can be similarly complex. When evaluating costs, consider factors like response times, the number of required workers, and potential charges for features like caching. Many providers offer detailed pricing guidelines on their websites, which can be crucial for ensuring you only pay for the computing power you truly need. Experimenting with performance of your model and applications during development will be helpful to make sure your hardware and pricing are both optimized for your application.&lt;/p&gt;
&lt;p&gt;Another thing to consider is what kind of experience does your team already have? Most cloud GPU services provide tools like CLI or REST APIs to manage resources, which can be a steep learning curve if your team is not familiar with these technologies. Additionally, while serverless platforms may support multiple programming languages, compatibility with your team’s preferred language—be it JavaScript, Python, or Go—is essential. As exciting as it can be to learn new languages, it’s probably not the best use of your team’s time.&lt;/p&gt;
&lt;p&gt;The size of files you’ll be moving between your model and the other parts of your project may also be a factor. Your users may not notice latency for models that communicate using text only. Text moves quickly from point to point in a network. However, if your model takes large image files as input or output, you may find that moving data between data centers is too slow. Then you’d want to focus on providers who can offer more general hosting in addition to cloud GPU hosting.&lt;/p&gt;
&lt;p&gt;As we continue to research this for our own projects, we are thinking the best configuration for us is to use a cloud GPU exclusively for generation tasks and communicate with it via an API from our existing back end. We will have to experiment to see if we can have those functions geographically separate, or if we need to find one hosting company and one data center for both. As we learn more we may change our ideas, but that’s part of the fun of working in technology, things change. By using the higher-cost cloud GPU for as few tasks as possible, we’ll know we aren’t wasting compute power for things easily handled by a general CPU.&lt;/p&gt;
&lt;p&gt;We hope this has given you some useful background and ideas as you research hosting options for your AI projects. Understanding the subtle differences between serverless and cloud GPU hosting can spark innovative ideas tailored to your needs. Perhaps some of the lesser-known providers we’ve explored might just be the perfect fit for your next project. As always, the dynamic nature of technology keeps us on our toes—ready to adapt and evolve. Happy hosting!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Thanks for reading. Join over 3000 specialists with powerful apps and &lt;a href=&quot;https://share.hsforms.com/1IgAOV1wASXGPnFG4ZPLejg1hk3i&quot;&gt;subscribe&lt;/a&gt; to our newsletter. We keep you in the loop with brand-new features, early access, and updates.&lt;/strong&gt;&lt;/p&gt;</content:encoded><dc:creator>Walter</dc:creator><media:content url="https://blog.img.ly/2024/04/cloud-gpu-review.jpg" medium="image"/><category>AI</category><category>Cloud</category><category>Development</category><category>Machine Learning</category></item></channel></rss>