How to Convert Long Blog Lists Into Instagram Carousels With Nano Banana, AI HTML, and OpenRouter

You can write a hundred solid blogs and still lose the week to Canva.

That is the real bottleneck for developer sites with a big archive. The writing is done. The distribution is not. Instagram wants short hooks, dense slides, and a consistent visual system. Your markdown folder wants H2s, code blocks, and 2,000-word essays. Bridging those two formats by hand does not scale.

This post is how we turned that gap into an admin workflow: load the blog list into a table, pick a row, then generate a carousel with either Google Nano Banana images through OpenRouter, AI HTML slides you export locally, or the same mental model as an AI React code generator when you want component-based slides instead of PNGs.

The live tool sits at /ig-post-creator. The ideas below are the design behind it, so you can rebuild the same pattern on your own stack.

We already publish from a static markdown catalog under blogs-content/. Each file has title, slug, description, tags, and a body with ## sections. That same catalog powers /blog, /articles.json, and the blog sitemap.

What we did not have was a second view of that catalog: one built for Instagram production.

Without that view, every post becomes a one-off design job. You open the essay, invent a carousel structure, rewrite the copy for mobile, pick colors, export slides, and forget which blogs you already turned into posts. After twenty articles the system collapses into a spreadsheet you never update.

So the product is not "an image model." The product is an admin table of blogs with a generate button.

Start from the same source of truth you already trust for SEO.

On iHateReading, loadBlogCarouselIdeas() walks the newest markdown posts, strips frontmatter, splits on ##, and returns JSON the admin UI can filter. The page loads that list server-side, then refreshes from /api/instagram/blog-carousel-ideas so the table stays current when new blogs land.

That mapping rule matters more than the UI chrome:

Long essays become carousels without a second outline. If a post has six sections, you get six teaching slides. If it has three, you get three. You stop inventing structure every time.

If you are still building the content engine that feeds this table, the pipeline in How we write 100 SEO blogs a day for under $10 is the upstream half. This post is the downstream half: archive → Instagram.

Once a blog is selected, the admin should ask one question: how do you want the slides rendered?

Google's image models ship under the Nano Banana family. Nano Banana 2 is Gemini 3.1 Flash Image: fast, good text rendering, native aspect ratios. OpenRouter exposes those models through a dedicated Image API at POST /api/v1/images, so you keep one API key and can swap models later.

In code, the image call is boring on purpose:

const response = await fetch ( " https://openrouter.ai/api/v1/images ", { method: " POST ", headers: { Authorization: `Bearer ${ process. env. OPENROUTER_API_KEY } `, " Content-Type ": " application/json ", " HTTP-Referer ": " https://ihatereading.in/ig-post-creator ", " X-Title ": " iHateReading IG Post Creator ", }, body: JSON. stringify ({ model: " google/gemini-3.1-flash-lite-image ", // Nano Banana 2 Lite prompt: slidePrompt, aspect_ratio: " 4:5 ", }), }); Enter fullscreen mode Exit fullscreen mode Use Lite when you are batching a long list. Step up to Flash or Pro when a single carousel needs sharper type. Google's own prompting guide for Nano Banana is worth reading once so you stop writing vague "make a nice carousel" prompts.

Image APIs cost money and take time. For drafts, or for days when you only need structure, generate HTML slides instead.

OpenRouter chat returns JSON slides with layouts ( cover, explain, steps, code, cta ). The admin renders those as React DOM nodes styled for Instagram. Export uses html-to-image (or any DOM-to-PNG path) so you still leave with files you can post.

This mode is the same idea as AI HTML generators: the model writes structure and copy, the browser paints pixels. You keep brand CSS in your app instead of hoping the image model remembers your fonts.

If you already ship an AI React code generator — prompt in, Tailwind component out — you can treat each carousel slide as a component, not a bitmap.

We wrote about building that generator with Next.js and the Vercel AI SDK in AI React Tailwind Code Generator App. For IG, you do not need a full IDE product. You need a constrained prompt, a fixed canvas size, and a download step. Same architecture, narrower job.

Do not scatter provider SDKs across the admin.

One key ( OPENROUTER_API_KEY ), two endpoints:

That split matches how OpenRouter announced the unified Image API: chat for text, images for pixels. It also matches how we already use OpenRouter elsewhere — for example in the AI automated Reddit trend scraper — so ops stays one billing page and one key rotation.

Whether you generate images, HTML, or React, the content brief is the same.

Then close with a soft CTA: "Full write-up on iHateReading" beats "BUY NOW" for a developer audience.

If the source post is distribution-heavy — directories, launches, free traffic — pull hooks from pieces like How to Get Free Traffic to Your Website in 2026 or the 393 SaaS directories essay. The admin table makes that reuse mechanical: pick the row, generate, post.

For the agent-tooling side of wiring models and tools cleanly, the AI Agent Developer Roadmap still applies. This admin is a thin agent: tools are list_blogs, plan_slides, render_image, export_png.

The win is throughput. A catalog of a hundred posts becomes a queue you can clear in batches: ten carousels a week from essays you already wrote, without opening Canva ten times.

If you want the monthly roundup of tools and posts in this lane, the iHateReading Magazine is the digest. If you want the creator itself, open /ig-post-creator and start from the Blogs tab.

More to come as we add caption drafts and a shared Generated queue.