<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Tony Spiro</title>
    <description>The latest articles on Forem by Tony Spiro (@tonyspiro).</description>
    <link>https://forem.com/tonyspiro</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F36636%2F37a4c910-90d9-40b1-9a8b-69e1ad31b4f6.jpeg</url>
      <title>Forem: Tony Spiro</title>
      <link>https://forem.com/tonyspiro</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/tonyspiro"/>
    <language>en</language>
    <item>
      <title>The Power of Headless CMS with AI Agents</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 22 May 2026 17:28:35 +0000</pubDate>
      <link>https://forem.com/tonyspiro/the-power-of-headless-cms-with-ai-agents-16cm</link>
      <guid>https://forem.com/tonyspiro/the-power-of-headless-cms-with-ai-agents-16cm</guid>
      <description>&lt;p&gt;What if your content could manage itself — publishing, optimizing, and adapting without constant human intervention? Discover how pairing headless CMS architecture with AI agents unlocks truly autonomous, scalable content operations built for the demands of modern digital experiences.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is a Headless CMS, and Why Does API-First Matter?
&lt;/h2&gt;

&lt;p&gt;A headless CMS decouples content management from content presentation. Instead of rendering pages directly, it exposes content through APIs so developers can pull structured data into any frontend: a website, mobile app, smart display, voice assistant, or even an in-car interface.&lt;/p&gt;

&lt;p&gt;This API-first model matters because it makes content a first-class, programmable resource. Editors define schemas, validation rules, and relationships once, and developers consume that content anywhere. The result is faster iteration, cleaner architecture, and freedom to adopt the best tools for each channel.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Structured content: clearly defined fields, types, and relationships&lt;/li&gt;
&lt;li&gt;Omnichannel delivery: one source of truth feeds many surfaces&lt;/li&gt;
&lt;li&gt;Composable architecture: best-of-breed tools instead of monolithic lock-in&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why AI Agents Need Structured, Programmable Content
&lt;/h2&gt;

&lt;p&gt;AI agents, autonomous systems that reason, plan, and execute tasks, thrive on predictable inputs and outputs. A traditional CMS, where content lives buried inside HTML templates or proprietary page builders, is a nightmare for an agent to navigate.&lt;/p&gt;

&lt;p&gt;A headless CMS, on the other hand, looks exactly like what an agent needs: typed schemas, documented endpoints, and machine-readable content. When an agent can introspect a content model, it knows what a "Product," "Article," or "Event" actually is. It understands which fields are required, which are optional, and how entries relate to each other. That clarity transforms content from a static asset into a programmable surface the agent can operate on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Concrete Use Cases for AI Agents + Headless CMS
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Creating and Updating Content Autonomously
&lt;/h3&gt;

&lt;p&gt;Agents can draft blog posts, translate articles, refresh product descriptions, or rewrite metadata for SEO, then push those changes directly through the CMS API. With a structured schema, the agent knows exactly which fields to populate and which validation rules to respect.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Generating Media on Demand
&lt;/h3&gt;

&lt;p&gt;Pair a headless CMS with image and video generation models, and agents can produce hero images, alternate crops, social previews, or localized variants automatically. The generated assets get uploaded, tagged, and linked to the right content entries, with no human file-shuffling required.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Automating Publishing Workflows
&lt;/h3&gt;

&lt;p&gt;Agents can monitor drafts, run quality checks, request human approval when confidence is low, and schedule publication windows. They can even coordinate multi-step workflows: translate, review, optimize, publish, and notify stakeholders, all through API calls.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Multi-Channel Distribution
&lt;/h3&gt;

&lt;p&gt;Once content lives in a headless CMS, agents can syndicate it intelligently. An agent might reformat a long-form article into a LinkedIn post, a newsletter blurb, and a push notification, each tuned to its channel and audience, while keeping the canonical version centralized.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Personalized landing pages generated per audience segment&lt;/li&gt;
&lt;li&gt;Continuous content audits and automatic cleanup of outdated entries&lt;/li&gt;
&lt;li&gt;Real-time localization across dozens of markets&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why the Combination Unlocks Scale
&lt;/h2&gt;

&lt;p&gt;Individually, headless CMS platforms are powerful infrastructure, and AI agents are powerful actors. Combined, they enable something genuinely new: content operations that scale without scaling headcount linearly.&lt;/p&gt;

&lt;p&gt;The headless CMS provides the structured "world" the agent can safely act within, with schemas as guardrails, APIs as levers, and version history as a safety net. The agent provides the cognition: judgment, generation, and coordination. Humans shift from executing repetitive tasks to defining strategy, setting policies, and reviewing edge cases.&lt;/p&gt;

&lt;p&gt;This pairing also respects governance. Because every change flows through the CMS API, you get audit trails, role-based permissions, and rollback capabilities by default. Autonomy doesn't mean chaos; it means controlled, observable automation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Looking Forward
&lt;/h2&gt;

&lt;p&gt;We're heading toward a future where content teams operate more like product teams running an autonomous system. Editors will spend less time copy-pasting and more time tuning agent prompts, refining schemas, and shaping editorial strategy.&lt;/p&gt;

&lt;p&gt;If you're building digital experiences today, the question isn't whether AI agents will touch your content stack; it's whether your stack is ready for them. A headless, API-first CMS is the foundation that makes the next decade of intelligent, autonomous content operations possible.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published on &lt;a href="https://www.cosmicjs.com/blog/the-power-of-headless-cms-with-ai-agents" rel="noopener noreferrer"&gt;Cosmic&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>cms</category>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Top 7 Enterprise Headless CMS Platforms in 2026</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Thu, 21 May 2026 16:56:35 +0000</pubDate>
      <link>https://forem.com/tonyspiro/top-7-enterprise-headless-cms-platforms-in-2026-1pl2</link>
      <guid>https://forem.com/tonyspiro/top-7-enterprise-headless-cms-platforms-in-2026-1pl2</guid>
      <description>&lt;p&gt;Enterprise CMS buying decisions are expensive to get wrong. You're choosing infrastructure that your content, engineering, and marketing teams will live in for years. The wrong call means migration pain, security debt, or a platform that can't keep up with how fast AI is changing software development.&lt;/p&gt;

&lt;p&gt;This guide gives you an honest, side-by-side look at the top 7 enterprise headless CMS platforms in 2026, with real pricing where available and a clear-eyed take on what each platform is actually good at.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Cosmic
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Enterprise teams that want AI agents, managed infrastructure, and full-stack automation without the DevOps overhead.&lt;/p&gt;

&lt;p&gt;Cosmic (cosmicjs.com) is a managed headless CMS backed by Y Combinator (W19). It's built API-first, with a REST API delivering sub-100ms response times and a TypeScript SDK that makes content integration feel native in any JavaScript project.&lt;/p&gt;

&lt;p&gt;The platform's defining differentiator in 2026 is its AI agent layer. Cosmic ships four distinct agent types:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Content Agents:&lt;/strong&gt; Generate and manage CMS content, run bulk operations and migrations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code Agents:&lt;/strong&gt; Connect to GitHub, work on isolated branches, write and ship code, open pull requests.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Computer Use Agents:&lt;/strong&gt; Automate browser tasks visually, record demos, cross-post media, extract data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team Agents:&lt;/strong&gt; Live in Slack, WhatsApp, and Telegram as actual teammates.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Workflows chain these agents together: a Content Agent writes copy, a Code Agent deploys it, a Computer Use Agent screenshots the preview, a Team Agent posts to Slack.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Other enterprise-grade features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;99.9% uptime SLA&lt;/li&gt;
&lt;li&gt;256-bit SSL encryption&lt;/li&gt;
&lt;li&gt;imgix CDN for global media delivery&lt;/li&gt;
&lt;li&gt;MCP Server for AI tool integration&lt;/li&gt;
&lt;li&gt;Agent Skills for Cursor, Claude Code, and GitHub Copilot&lt;/li&gt;
&lt;li&gt;REST API + TypeScript SDK + CLI&lt;/li&gt;
&lt;li&gt;Supports: Next.js, React, Vue, Nuxt, Astro, Remix, Svelte, Gatsby&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;"Cosmic is: us never having to ask a developer to change anything on the backend of our website." - Maximilian Wuhr, Co-Founder at FINN&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Free: $0/month&lt;/li&gt;
&lt;li&gt;Builder: $49/month&lt;/li&gt;
&lt;li&gt;Team: $299/month&lt;/li&gt;
&lt;li&gt;Business: $499/month&lt;/li&gt;
&lt;li&gt;Enterprise: Custom&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Additional users: $29/user/month.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Contentful
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Large enterprises with established Contentful workflows and dedicated platform teams.&lt;/p&gt;

&lt;p&gt;Contentful is one of the most widely deployed headless CMS platforms in the enterprise market. It has a mature ecosystem, a large partner network, and deep integrations with enterprise toolchains.&lt;/p&gt;

&lt;p&gt;The tradeoffs: pricing at enterprise scale is significantly higher than most alternatives. AI capabilities are evolving but not as deeply native as Cosmic's agent layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt; Paid tiers start at around $300/month. Enterprise pricing is custom.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Sanity
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Teams that want maximum schema flexibility and are comfortable owning the editorial UI.&lt;/p&gt;

&lt;p&gt;Sanity takes a highly code-centric approach. The content studio is fully customizable in React. Real-time collaboration on content is a standout feature. Steeper learning curve than most CMS platforms.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt; Free tier available. Growth plan starts at $15/seat/month. Enterprise is custom.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Storyblok
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Marketing-heavy enterprise teams that prioritize visual editing and component-based content modeling.&lt;/p&gt;

&lt;p&gt;Storyblok's visual editor is genuinely excellent. Their FlowMotion feature adds CMS-native workflow automation. Note: FlowMotion automates processes inside the CMS. It does not extend to writing code, deploying to GitHub, or operating as a Slack teammate.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt; Entry plan starts at $99/month. Enterprise is custom.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Hygraph
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Content federation and complex multi-source data architectures.&lt;/p&gt;

&lt;p&gt;Hygraph specializes in pulling data from multiple sources and unifying it behind a single content graph. Powerful for complex architectures, but may be more than most teams need.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt; Professional plan starts at $299/month. Enterprise is custom.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Strapi
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Teams that want full code-level control and are comfortable self-hosting.&lt;/p&gt;

&lt;p&gt;Strapi is the leading open-source headless CMS. Self-hosted, fully customizable. The tradeoff: your team owns security patching, server maintenance, and upgrade cycles.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt; Open-source is free to self-host. Strapi Cloud starts at $29/month. Enterprise is custom.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Prismic
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Marketing and editorial teams that want a clean, opinionated writing experience.&lt;/p&gt;

&lt;p&gt;Prismic's slice-based content modeling makes it fast to build page layouts. AI capabilities are not as mature as Cosmic's agent layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pricing:&lt;/strong&gt; Free tier available. Paid plans from $15/month. Enterprise is custom.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to Choose
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Building AI-native products where the CMS is infrastructure? &lt;strong&gt;Cosmic.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Large existing Contentful deployment with a dedicated platform team? &lt;strong&gt;Contentful.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Maximum schema flexibility with strong developer ownership? &lt;strong&gt;Sanity.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Visual editing and marketing team autonomy as the primary requirement? &lt;strong&gt;Storyblok.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Content federation across multiple enterprise data sources? &lt;strong&gt;Hygraph.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Full infrastructure control with engineering capacity to maintain it? &lt;strong&gt;Strapi.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Clean, opinionated editorial experience for a non-technical team? &lt;strong&gt;Prismic.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building free on Cosmic&lt;/a&gt; or &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;book a demo&lt;/a&gt; to discuss Enterprise requirements.&lt;/p&gt;

</description>
      <category>cms</category>
      <category>headless</category>
      <category>enterprise</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Best Headless CMS for AI SaaS Backends in 2026</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Wed, 20 May 2026 15:41:32 +0000</pubDate>
      <link>https://forem.com/tonyspiro/best-headless-cms-for-ai-saas-backends-in-2026-4k3o</link>
      <guid>https://forem.com/tonyspiro/best-headless-cms-for-ai-saas-backends-in-2026-4k3o</guid>
      <description>&lt;p&gt;Building an AI SaaS product in 2026 means your content backend has to do more than store structured data. It needs to be fast enough for real-time API calls, secure enough that you're not patching CVEs on a Friday night, and smart enough to keep pace with an AI-augmented development workflow. This post breaks down what actually matters in a CMS for AI SaaS backends, and which platforms are worth your attention.&lt;/p&gt;




&lt;h2&gt;
  
  
  What AI SaaS Backends Actually Need from a CMS
&lt;/h2&gt;

&lt;p&gt;When your product is AI-native, the CMS is not just a writing tool for a marketing blog. It's infrastructure. Here's what that means in practice:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Speed.&lt;/strong&gt; Your frontend or API layer will call the CMS on every request or during build. Sub-100ms response times are not a nice-to-have. They determine whether your product feels fast.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Security you don't have to own.&lt;/strong&gt; Self-hosting a CMS means your team owns every CVE, every patch cycle, every security audit. For a small AI SaaS team, that is a real cost.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Developer ergonomics.&lt;/strong&gt; The SDK, the CLI, the REST API: they need to work the way your developers expect. Friction in the content layer slows shipping.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI integration that is native, not bolted on.&lt;/strong&gt; The CMS should be able to generate content, images, and video, run agents, and execute workflows without requiring a separate integration layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Framework flexibility.&lt;/strong&gt; Next.js today, Astro tomorrow. The CMS should be invisible to the frontend.&lt;/p&gt;




&lt;h2&gt;
  
  
  Cosmic: Built for AI SaaS from the Ground Up
&lt;/h2&gt;

&lt;p&gt;Cosmic is a managed headless CMS backed by Y Combinator (YC W19). It was built API-first, and the entire platform has been evolving toward AI-native infrastructure for the past two years.&lt;/p&gt;

&lt;h3&gt;
  
  
  Infrastructure and Security
&lt;/h3&gt;

&lt;p&gt;Cosmic is fully managed SaaS. That means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;99.9% uptime SLA on paid plans&lt;/li&gt;
&lt;li&gt;256-bit SSL encryption in transit and at rest&lt;/li&gt;
&lt;li&gt;50M+ API requests/month infrastructure scale&lt;/li&gt;
&lt;li&gt;150+ country CDN for global content delivery&lt;/li&gt;
&lt;li&gt;imgix CDN for media, with real-time image transformation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No CVEs to patch. No server to maintain. No security audit you have to run yourself.&lt;/p&gt;

&lt;p&gt;This is not a knock on open-source CMS platforms. It is a statement about what managed infrastructure means when your core team is building AI features, not patching web servers.&lt;/p&gt;

&lt;h3&gt;
  
  
  The API Layer
&lt;/h3&gt;

&lt;p&gt;Cosmic's REST API is the product. Sub-100ms response times. Predictable, cacheable, built for high-frequency reads.&lt;/p&gt;

&lt;p&gt;The TypeScript SDK is the recommended way to integrate from any JavaScript or TypeScript project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your-bucket-slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your-read-key&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;objects&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  AI Agents Built In
&lt;/h3&gt;

&lt;p&gt;Cosmic includes four types of AI agents that run directly inside your workspace:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Content Agents&lt;/strong&gt; generate and manage CMS content, handle bulk operations, and run migrations. No separate integration required.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code Agents&lt;/strong&gt; connect to GitHub repositories, work on isolated branches, write and fix code, create pull requests, and deploy to production or preview. Your CMS can literally ship code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Computer Use Agents&lt;/strong&gt; automate browser tasks with visual AI: record demos, cross-post media, extract data from any webpage.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team Agents&lt;/strong&gt; live in Slack, WhatsApp, and Telegram as actual teammates. Schedule them, message them, have them report status, and execute workflows on your behalf.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are not marketing features bolted on top of a legacy CMS architecture. They're first-class capabilities built into the platform.&lt;/p&gt;

&lt;h3&gt;
  
  
  MCP Server and Agent Skills
&lt;/h3&gt;

&lt;p&gt;For AI SaaS developers using modern tooling:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;MCP Server:&lt;/strong&gt; Cosmic exposes a Model Context Protocol server so AI tools that speak MCP can interact directly with your content schema.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agent Skills for Cursor, Claude Code, and GitHub Copilot:&lt;/strong&gt; Your AI coding assistant understands your Cosmic content schema natively. No manual context-loading.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Framework Support
&lt;/h3&gt;

&lt;p&gt;Cosmic works with every major frontend framework: Next.js, React, Vue, Nuxt, Astro, Remix, Svelte, Gatsby.&lt;/p&gt;




&lt;h2&gt;
  
  
  Pricing
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Plan&lt;/th&gt;
&lt;th&gt;Price&lt;/th&gt;
&lt;th&gt;Key Limits&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Free&lt;/td&gt;
&lt;td&gt;$0/month&lt;/td&gt;
&lt;td&gt;1 Bucket, 1,000 Objects&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Builder&lt;/td&gt;
&lt;td&gt;$49/month&lt;/td&gt;
&lt;td&gt;2 Buckets, 5,000 Objects&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Team&lt;/td&gt;
&lt;td&gt;$299/month&lt;/td&gt;
&lt;td&gt;3 Buckets, 20,000 Objects&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Business&lt;/td&gt;
&lt;td&gt;$499/month&lt;/td&gt;
&lt;td&gt;5 Buckets, 50,000 Objects&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Enterprise&lt;/td&gt;
&lt;td&gt;Custom&lt;/td&gt;
&lt;td&gt;Custom&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;No credit card required to start. Additional users are $29/user/month.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Self-Hosted Open Source Option: What You're Actually Signing Up For
&lt;/h2&gt;

&lt;p&gt;Several popular CMS platforms are open source and self-hosted by default. Strapi is the most prominent example. The appeal is clear: full control, no vendor lock-in, customize everything. For some teams and use cases, this is the right call.&lt;/p&gt;

&lt;p&gt;But for an AI SaaS team in 2026, there is a real cost to consider:&lt;/p&gt;

&lt;p&gt;Security patching is yours. This week (week of May 13, 2026), Strapi disclosed five CVEs: CVE-2025-64526, CVE-2026-22599, and others. This is not unusual for large open source projects. What it means in practice is that someone on your team owns the patch cycle, the upgrade testing, and the deployment coordination. If you're a three-person AI startup, that overhead is material.&lt;/p&gt;

&lt;p&gt;Managed SaaS removes that overhead entirely. The tradeoff is less raw configuration control in exchange for not owning your own server security posture.&lt;/p&gt;




&lt;h2&gt;
  
  
  Evaluating a CMS for Your AI SaaS: A Quick Checklist
&lt;/h2&gt;

&lt;p&gt;Before committing to a CMS as your AI SaaS backend, run through these questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;[ ] Does it have a REST API with documented, predictable response times?&lt;/li&gt;
&lt;li&gt;[ ] Is there a TypeScript SDK with active maintenance?&lt;/li&gt;
&lt;li&gt;[ ] Is security patching handled by the vendor (managed) or by your team (self-hosted)?&lt;/li&gt;
&lt;li&gt;[ ] Does it have a free tier to prototype without a credit card?&lt;/li&gt;
&lt;li&gt;[ ] Does it support the frontend framework(s) you're using?&lt;/li&gt;
&lt;li&gt;[ ] Do AI agents and workflow automation come included, or require separate services?&lt;/li&gt;
&lt;li&gt;[ ] Is there a path to Enterprise with SLAs and dedicated support?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cosmic checks every box on this list.&lt;/p&gt;




&lt;h2&gt;
  
  
  Get Started
&lt;/h2&gt;

&lt;p&gt;Cosmic's free plan is genuinely free: no credit card, one bucket, one Team agent, 1,000 Objects. It's enough to build a real prototype.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building free&lt;/a&gt; or &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;book a 30-minute intro call with Tony&lt;/a&gt; to see how Cosmic fits your AI SaaS architecture.&lt;/p&gt;

&lt;p&gt;Cosmic's REST API, TypeScript SDK, and AI agent layer are designed specifically for developers building modern, AI-native applications.&lt;/p&gt;

</description>
      <category>headlesscms</category>
      <category>ai</category>
      <category>saas</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Why Bun is Rewriting in Rust (And What It Means for JavaScript Developers)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Tue, 19 May 2026 16:44:38 +0000</pubDate>
      <link>https://forem.com/tonyspiro/why-bun-is-rewriting-in-rust-and-what-it-means-for-javascript-developers-31jo</link>
      <guid>https://forem.com/tonyspiro/why-bun-is-rewriting-in-rust-and-what-it-means-for-javascript-developers-31jo</guid>
      <description>&lt;p&gt;Bun started as a bet that JavaScript tooling could be much faster. That bet paid off. Now, Bun is making another one: rewriting its runtime in Rust. Here's everything you need to know about why, where things stand, and what it means if you're building JavaScript applications today.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is Bun and Why It Matters
&lt;/h2&gt;

&lt;p&gt;Bun is an all-in-one JavaScript toolkit. It combines a fast JavaScript runtime, a bundler, a package manager, a test runner, and a transpiler into a single binary. If you've been frustrated by Node.js startup times, slow npm runs, or juggling separate tools for bundling and testing, Bun was built for exactly those pain points.&lt;/p&gt;

&lt;p&gt;The numbers are striking. According to &lt;a href="https://bun.sh" rel="noopener noreferrer"&gt;benchmarks published on bun.sh&lt;/a&gt;, Bun handles 59,026 Express.js "hello world" HTTP requests per second on Linux x64, compared to 25,335 for Deno and 19,039 for Node.js. For WebSocket throughput, Bun clocks 2,536,227 messages per second against Deno's 1,320,525 and Node's 435,099. Bun also bundles 10,000 React components in 269ms. Rolldown completes the same job in 495ms. esbuild takes 572ms.&lt;/p&gt;

&lt;p&gt;These aren't hypothetical gains. Companies including X (Twitter) and Midjourney run Bun in production. Tailwind's standalone CLI is compiled with Bun. Claude Code, Anthropic's AI coding assistant, ships as a Bun executable to millions of users.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Bun Was Originally Written in Zig
&lt;/h2&gt;

&lt;p&gt;Bun's creator, Jarred Sumner, started the project in 2021. He was building a voxel game and got frustrated with Next.js hot reload times. He began porting a JSX and TypeScript transpiler from Go to Zig, a systems programming language that compiles to native binaries and offers fine-grained memory control without a garbage collector.&lt;/p&gt;

&lt;p&gt;Zig was a pragmatic choice for a small team obsessed with performance. It gave Bun low-level control over memory layout and system calls, which directly contributed to the benchmark advantages the runtime is known for. Bun shipped its 1.0 release in September 2023 and its 1.2 release added built-in PostgreSQL, S3, and Redis clients.&lt;/p&gt;

&lt;p&gt;But Zig is a young language with a small ecosystem. Finding contributors who know Zig well is harder than finding Rust developers. The Rust ecosystem, by contrast, is large, mature, and has become the dominant language for systems-level rewrites across the industry (see: the Linux kernel, Android, Firefox, and much of the cloud-native toolchain).&lt;/p&gt;

&lt;h2&gt;
  
  
  The Decision to Rewrite in Rust
&lt;/h2&gt;

&lt;p&gt;The Rust rewrite is still described as experimental. &lt;a href="https://news.ycombinator.com/item?id=48073680" rel="noopener noreferrer"&gt;Jarred Sumner announced the milestone on Hacker News&lt;/a&gt; in what became one of the more closely-watched threads in the JavaScript runtime community this year.&lt;/p&gt;

&lt;p&gt;The core reasons for the rewrite come down to three things:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contributor accessibility.&lt;/strong&gt; Rust has a vastly larger developer community than Zig. More contributors means faster bug fixes, more platform support, and a healthier open-source ecosystem around Bun.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Maintainability at scale.&lt;/strong&gt; Rust's ownership model and strong type system provide compile-time safety guarantees that help catch bugs before they reach users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Long-term stability signals.&lt;/strong&gt; Bun was acquired by Anthropic in late 2025. As &lt;a href="https://bun.sh/blog/bun-joins-anthropic" rel="noopener noreferrer"&gt;Jarred wrote on the Bun blog&lt;/a&gt;, Claude Code ships as a Bun executable to millions of users. If Bun breaks, Claude Code breaks. That stakes profile demands a codebase that's as battle-hardened as possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where the Rewrite Stands Today
&lt;/h2&gt;

&lt;p&gt;The headline number: the Rust rewrite has achieved 99.8% test compatibility on Linux x64 glibc. This figure comes from &lt;a href="https://news.ycombinator.com/item?id=48073680" rel="noopener noreferrer"&gt;Jarred Sumner's own announcement on Hacker News&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;99.8% compatibility is a meaningful threshold. It means the Rust rewrite, running Bun's existing test suite, behaves identically to the Zig implementation in the overwhelming majority of cases. The 0.2% gap represents edge cases and platform-specific behaviors, not fundamental incompatibilities.&lt;/p&gt;

&lt;p&gt;The rewrite is currently scoped to Linux x64 glibc. macOS, Windows, and ARM support come later. Bun's current stable release series (v1.3.x) continues to ship from the Zig codebase. The Rust rewrite is parallel, experimental work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Performance Implications: Rust vs Zig
&lt;/h2&gt;

&lt;p&gt;The most common question is whether Rust will be faster or slower than Zig. The honest answer: it depends, and the gap is smaller than most people assume.&lt;/p&gt;

&lt;p&gt;Both Zig and Rust compile to native machine code. Neither has a garbage collector. Both allow the same class of low-level optimizations. The real performance benefits of the rewrite are likely to come from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A larger contributor pool finding and fixing performance regressions faster&lt;/li&gt;
&lt;li&gt;Rust's ecosystem of performance-focused crates like Rayon and Tokio&lt;/li&gt;
&lt;li&gt;Memory safety eliminating a class of bugs that cause random slowdowns in production&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What won't change: Bun's use of JavaScriptCore (WebKit's JavaScript engine) for actually executing your JavaScript code.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Changes for JavaScript Developers Using Bun
&lt;/h2&gt;

&lt;p&gt;For most JavaScript developers, the Rust rewrite won't require any changes to your code or workflow. Bun's explicit goal is 100% backward compatibility.&lt;/p&gt;

&lt;p&gt;What you can expect to improve over time:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fewer edge-case bugs, especially on non-Linux platforms&lt;/li&gt;
&lt;li&gt;Faster patch releases from a more accessible codebase&lt;/li&gt;
&lt;li&gt;Better cross-platform parity&lt;/li&gt;
&lt;li&gt;Increased confidence for production adoption&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Using Bun with Cosmic
&lt;/h2&gt;

&lt;p&gt;If you're building with Bun today, integrating Cosmic is straightforward. Install the TypeScript SDK:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bun add @cosmicjs/sdk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then initialize your client:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_READ_KEY&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;objects&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This runs identically on Bun, Node.js, and Deno. Cosmic's REST API and TypeScript SDK don't depend on any runtime-specific APIs.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;The timeline for the Rust rewrite becoming the default Bun binary is not publicly committed. The likely next steps are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Closing the remaining 0.2% compatibility gap on Linux x64&lt;/li&gt;
&lt;li&gt;Expanding platform coverage to macOS (both x64 and ARM)&lt;/li&gt;
&lt;li&gt;Windows support&lt;/li&gt;
&lt;li&gt;A public beta period before the Rust binary becomes the default release&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The bigger context is Anthropic's acquisition. Bun now has institutional backing from one of the best-funded AI labs in the world. That financial and organizational support changes the risk calculus for anyone evaluating Bun for long-term production use.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Bottom Line
&lt;/h2&gt;

&lt;p&gt;Bun's Rust rewrite isn't a pivot or a panic. It's a deliberate maturity move by a team that has already proven it can execute. The 99.8% test compatibility milestone is real progress, the Anthropic acquisition provides genuine long-term stability, and the move to Rust opens Bun's development to a much larger contributor community.&lt;/p&gt;

&lt;p&gt;For JavaScript developers: Bun was already fast. The Rust rewrite is about making it more reliable, more maintainable, and more accessible to contributors, while keeping the performance characteristics that made it worth paying attention to in the first place.&lt;/p&gt;

&lt;p&gt;The runtime wars aren't over, but Bun just made a significant move.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Building your next Bun app? &lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Cosmic's REST API and TypeScript SDK&lt;/a&gt; work seamlessly with any JavaScript runtime. Start free.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>bunjs</category>
      <category>rust</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Cosmic AI Agents vs. Storyblok FlowMotion: Why CMS Automation Is Not Enough</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Mon, 18 May 2026 16:29:39 +0000</pubDate>
      <link>https://forem.com/tonyspiro/cosmic-ai-agents-vs-storyblok-flowmotion-why-cms-automation-is-not-enough-4dag</link>
      <guid>https://forem.com/tonyspiro/cosmic-ai-agents-vs-storyblok-flowmotion-why-cms-automation-is-not-enough-4dag</guid>
      <description>&lt;p&gt;Storyblok recently launched FlowMotion, a workflow automation and orchestration layer built directly into their CMS, powered by n8n under the hood. It's a genuine product advancement, and if your world begins and ends inside the CMS, it solves real problems: content governance, localization sync, compliance routing, launch coordination.&lt;/p&gt;

&lt;p&gt;But there's a category question worth asking: Is CMS automation the same as having AI agents?&lt;/p&gt;

&lt;p&gt;The honest answer is no. And the gap between the two matters enormously for teams building in 2026.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Storyblok FlowMotion Actually Does
&lt;/h2&gt;

&lt;p&gt;FlowMotion is an automation layer embedded in Storyblok. When something happens inside the CMS, a publish event, a translation update, an asset upload, a workflow fires. You can route content to legal review, sync regional variants, trigger notifications, and coordinate multi-market launches.&lt;/p&gt;

&lt;p&gt;These are valuable capabilities. FlowMotion clearly solves a real operational pain for enterprise content teams managing global content pipelines.&lt;/p&gt;

&lt;p&gt;But read the language carefully: "whenever something happens in Storyblok... FlowMotion activates your entire content ecosystem." The trigger is CMS-native. The automation scope is CMS-adjacent. FlowMotion keeps content operations in sync. That is its job.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Cosmic AI Agents Actually Do
&lt;/h2&gt;

&lt;p&gt;Cosmic agents are not automation rules attached to CMS events. They are autonomous AI teammates that operate across your entire stack.&lt;/p&gt;

&lt;p&gt;Here's the concrete difference:&lt;/p&gt;

&lt;h3&gt;
  
  
  Content Agents
&lt;/h3&gt;

&lt;p&gt;Generate and manage CMS content, run bulk operations and migrations, and discover content progressively. Yes, they do what FlowMotion does inside the CMS. But they're just the starting point.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code Agents
&lt;/h3&gt;

&lt;p&gt;Connect to your GitHub repositories, work on isolated branches, write and fix code, create pull requests, and deploy to production or preview environments. FlowMotion cannot write a single line of code. Cosmic agents can ship a feature.&lt;/p&gt;

&lt;h3&gt;
  
  
  Computer Use Agents
&lt;/h3&gt;

&lt;p&gt;Automate browser tasks with visual AI. Record demo videos automatically. Cross-post media between platforms. Extract data from any website. These agents navigate the web the way a human would: visually, intelligently, across any surface.&lt;/p&gt;

&lt;h3&gt;
  
  
  Team Agents
&lt;/h3&gt;

&lt;p&gt;Live in Slack, WhatsApp, and Telegram as actual team members. They receive messages, respond intelligently, execute tasks, and check in on their own schedule. Your content team can @ a Cosmic agent in Slack and get work done. FlowMotion has no channel presence.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Workflow Difference
&lt;/h2&gt;

&lt;p&gt;FlowMotion workflows are triggered by CMS events and route content through CMS-adjacent steps.&lt;/p&gt;

&lt;p&gt;Cosmic Workflows chain any combination of agent types into a single automated process:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A Content Agent writes a new product page from a brief&lt;/li&gt;
&lt;li&gt;A Code Agent deploys it to a feature branch and opens a PR&lt;/li&gt;
&lt;li&gt;A Computer Use Agent screenshots the live preview and posts it to Slack&lt;/li&gt;
&lt;li&gt;A Team Agent notifies the marketing channel and awaits approval&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That is one Cosmic Workflow. It crosses four system boundaries. It involves content, code, a browser, and a messaging platform. No CMS automation layer can do this, because by definition, a CMS automation layer lives inside the CMS.&lt;/p&gt;

&lt;p&gt;Workflows can be scheduled (hourly, daily, weekly, monthly on paid plans) or triggered via webhook, giving you full programmatic control.&lt;/p&gt;

&lt;h2&gt;
  
  
  Developer-Native Integrations FlowMotion Does Not Offer
&lt;/h2&gt;

&lt;p&gt;Cosmic was built from the ground up for developers. The integrations reflect that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;REST API&lt;/strong&gt; with sub-100ms response times. Not an afterthought. The API is the product.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript SDK&lt;/strong&gt; (&lt;code&gt;@cosmicjs/sdk&lt;/code&gt;): the official way to interact with Cosmic from any TypeScript or JavaScript project&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CLI&lt;/strong&gt;: Manage your Cosmic workspace from the terminal&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MCP Server&lt;/strong&gt;: Cosmic exposes an MCP (Model Context Protocol) server, which means AI tools that speak MCP can directly interact with your content&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agent Skills&lt;/strong&gt; for Cursor, Claude Code, and GitHub Copilot&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Two Different Categories
&lt;/h2&gt;

&lt;p&gt;To be direct: Storyblok FlowMotion is a well-built CMS automation layer. If you're deep in the Storyblok ecosystem and need better content operations workflows, it likely delivers real value.&lt;/p&gt;

&lt;p&gt;But if you're building with AI in 2026, the question is not "which CMS has better automation?"&lt;/p&gt;

&lt;p&gt;The question is: Do you want a CMS that automates its own operations, or do you want AI agents that can do work across your entire business?&lt;/p&gt;

&lt;p&gt;FlowMotion automates content operations inside a CMS. Cosmic agents write code, browse the web, generate images and video, post to Slack, deploy to GitHub, and manage content, as a team, across every system boundary that matters.&lt;/p&gt;

&lt;p&gt;That is a different category of product.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pricing
&lt;/h2&gt;

&lt;p&gt;Cosmic starts free with no credit card required:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Free:&lt;/strong&gt; $0/month — 1 Bucket, 2 Team members, 1,000 Objects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Builder:&lt;/strong&gt; $49/month — 2 Buckets, 3 Team members, 5,000 Objects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team:&lt;/strong&gt; $299/month — 3 Buckets, 5 Team members, 20,000 Objects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Business:&lt;/strong&gt; $499/month — 5 Buckets, 10 Team members, 50,000 Objects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Enterprise:&lt;/strong&gt; Custom pricing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Additional users are $29/user/month.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building free&lt;/a&gt; with no credit card required, or &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;book a demo with Tony&lt;/a&gt; to see Cosmic agents in action.&lt;/p&gt;

</description>
      <category>cms</category>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Claude Sonnet vs Opus for Coding: Which Model Should You Choose?</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Mon, 18 May 2026 16:06:26 +0000</pubDate>
      <link>https://forem.com/tonyspiro/claude-sonnet-vs-opus-for-coding-which-model-should-you-choose-1pfg</link>
      <guid>https://forem.com/tonyspiro/claude-sonnet-vs-opus-for-coding-which-model-should-you-choose-1pfg</guid>
      <description>&lt;p&gt;If you've spent any time building with the Anthropic API, you've faced the same question: Sonnet or Opus? For coding tasks specifically, the answer isn't "always use the smartest model." It depends on the task, your latency budget, and what you're paying per token. This guide breaks down the real-world tradeoffs between Claude Sonnet 4.6 and Claude Opus 4.7 for coding work, so you can make the right call every time.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Quick Answer
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Claude Sonnet 4.6:&lt;/strong&gt; Best for the majority of coding tasks. Fast, cost-efficient, and handles most real-world code generation, debugging, and refactoring with high quality.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Claude Opus 4.7:&lt;/strong&gt; Best for the hardest problems. Architecture decisions, complex multi-file reasoning, and tasks where a wrong answer costs you hours.&lt;/p&gt;

&lt;p&gt;But that framing is too simple on its own. Let's go deeper.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pricing: The Numbers You Need to Know
&lt;/h2&gt;

&lt;p&gt;Before comparing capability, know what you're spending:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Claude Sonnet 4.6:&lt;/strong&gt; $3 input / $15 output (per MTok)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Claude Opus 4.7:&lt;/strong&gt; $5 input / $25 output (per MTok)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Opus costs roughly 1.67x more on input and output than Sonnet. On large codebases with high prompt volumes, that gap compounds fast. For agentic coding pipelines where the model is called dozens of times per task, Sonnet's cost advantage makes it the default for most steps. Reserve Opus for the decision nodes that matter.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Each Model Is Good At (for Code)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Claude Sonnet 4.6: The Everyday Workhorse
&lt;/h3&gt;

&lt;p&gt;Sonnet is where you'll live for most coding work. It handles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Code generation from specs.&lt;/strong&gt; Give Sonnet a clear function signature, a description of behavior, and edge cases to handle. It produces clean, idiomatic code across TypeScript, Python, Go, Rust, and most other mainstream languages.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bug hunting and debugging.&lt;/strong&gt; Paste in an error trace and the relevant code block. Sonnet is excellent at reading stack traces, identifying the root cause, and proposing a fix, often on the first pass.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Boilerplate and CRUD.&lt;/strong&gt; REST API routes, database models, form validation, utility functions. Sonnet generates this at speed with minimal review needed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code review and refactoring.&lt;/strong&gt; Ask Sonnet to review a pull request diff or suggest a cleaner implementation. It flags real issues, not just style nitpicks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Unit test generation.&lt;/strong&gt; Feed it a function, get back a test suite. Sonnet understands testing patterns (Jest, Pytest, Vitest, etc.) and generates meaningful test cases.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Claude Opus 4.7: When You Need the Heavy Lifter
&lt;/h3&gt;

&lt;p&gt;Opus earns its price premium on tasks that require sustained, multi-step reasoning over large, complex contexts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Complex architecture decisions.&lt;/strong&gt; Tasks that require understanding tradeoffs across a system, not just code completion.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Large codebase comprehension.&lt;/strong&gt; When you need to understand data flows across 50+ files, Opus maintains coherence across a longer context window more reliably.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multi-step agentic coding tasks.&lt;/strong&gt; Tasks where the model needs to plan edits across multiple files, maintain state about what it has already changed, and reason about dependencies.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hard algorithmic problems.&lt;/strong&gt; Competitive-programming-style problems, complex graph algorithms, optimization tasks where a subtly wrong solution is worse than no solution.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security-critical code review.&lt;/strong&gt; When reviewing authentication logic, cryptographic implementations, or input validation on a public-facing surface.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Speed and Latency
&lt;/h2&gt;

&lt;p&gt;Sonnet is significantly faster. For interactive coding tools (autocomplete, inline suggestions, chat-based debugging in an IDE), latency is a real UX factor. Waiting 8 seconds for a response breaks flow in a way that waiting 2 seconds does not.&lt;/p&gt;

&lt;p&gt;For batch processing (overnight analysis, CI-integrated code review, automated test generation), latency matters less. That's a valid use case for Opus if you need maximum accuracy.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Practical Decision Framework
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Default to Sonnet when:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The task is well-defined (clear input, clear expected output)&lt;/li&gt;
&lt;li&gt;Speed or cost is a constraint&lt;/li&gt;
&lt;li&gt;You're running many parallel calls in an agent pipeline&lt;/li&gt;
&lt;li&gt;The task is generative (new code, boilerplate, tests)&lt;/li&gt;
&lt;li&gt;You can validate output programmatically&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Reach for Opus when:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The task requires judgment, not just generation&lt;/li&gt;
&lt;li&gt;You're reasoning across a large, ambiguous codebase&lt;/li&gt;
&lt;li&gt;A wrong answer has downstream consequences that are hard to catch&lt;/li&gt;
&lt;li&gt;You're doing one-shot architecture or design work where iteration is expensive&lt;/li&gt;
&lt;li&gt;The cost per call is small relative to the value of getting it right&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Hybrid Approach
&lt;/h2&gt;

&lt;p&gt;The most effective production setups don't pick one model and commit. They route tasks:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Use Sonnet for planning, scaffolding, and code generation.&lt;/li&gt;
&lt;li&gt;Pass the result to a validation step (run tests, linter, type checker).&lt;/li&gt;
&lt;li&gt;If validation fails and the error requires reasoning (not just a syntax fix), escalate to Opus for diagnosis.&lt;/li&gt;
&lt;li&gt;Use Opus for final review on security-sensitive or architecture-defining changes.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This is exactly the pattern Cosmic uses for our own AI agents. Cosmic's agent infrastructure runs on Claude, and Sonnet handles the high-volume content and code generation tasks while Opus is reserved for the decisions that require deeper judgment.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Note on Context Windows
&lt;/h2&gt;

&lt;p&gt;Both Sonnet 4.6 and Opus 4.7 support large context windows, so raw context length is rarely the deciding factor. The real difference is how effectively each model reasons within that context. Opus maintains more coherent reasoning over long, complex contexts, but for most coding tasks within a single file or module, Sonnet's context utilization is more than sufficient.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Sonnet is the right default for coding. It's fast, cost-efficient, and capable enough for the majority of real-world tasks. Opus is the right choice when the stakes are high and the reasoning is genuinely complex.&lt;/p&gt;

&lt;p&gt;Using Opus everywhere is expensive and usually unnecessary. Using Sonnet everywhere means occasionally getting a suboptimal answer on the hard problems.&lt;/p&gt;

&lt;p&gt;The teams shipping the best AI-assisted coding workflows treat model selection as a routing problem, not a binary choice. Start with Sonnet, validate your output, and escalate to Opus only when the task earns it.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Cosmic is an AI-powered headless CMS built for developers. Our platform uses Claude to power autonomous content and code agents that work directly in your workflow. &lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building for free&lt;/a&gt;, no credit card required.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>claude</category>
      <category>ai</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to Build a React Blog with Next.js and Cosmic</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 15 May 2026 15:37:50 +0000</pubDate>
      <link>https://forem.com/tonyspiro/how-to-build-a-react-blog-with-nextjs-and-cosmic-2e63</link>
      <guid>https://forem.com/tonyspiro/how-to-build-a-react-blog-with-nextjs-and-cosmic-2e63</guid>
      <description>&lt;p&gt;Building a blog with React and Next.js is one of the most common use cases for modern web development. But where you store and manage your content matters just as much as the frontend you choose.&lt;/p&gt;

&lt;p&gt;In this tutorial, you'll learn how to build a fast, production-ready React blog using the &lt;a href="https://nextjs.org/docs/app" rel="noopener noreferrer"&gt;Next.js App Router&lt;/a&gt; and &lt;a href="https://www.cosmicjs.com/" rel="noopener noreferrer"&gt;Cosmic&lt;/a&gt; as your headless CMS.&lt;/p&gt;

&lt;p&gt;Want to skip ahead? Grab the free &lt;a href="https://cosmicjs.com/templates/simple-react-blog" rel="noopener noreferrer"&gt;Simple React Blog template&lt;/a&gt; and deploy in minutes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Use a Headless CMS for a React Blog?
&lt;/h2&gt;

&lt;p&gt;Managing blog content directly in your codebase works fine for a handful of posts, but it breaks down fast. Markdown files scattered across a repo, no visual editing interface, and every content update requiring a developer and a deployment are all pain points that accumulate quickly.&lt;/p&gt;

&lt;p&gt;A headless CMS solves this by separating your content layer from your presentation layer. You manage posts, authors, and categories in a structured dashboard. Your Next.js app fetches that content via the REST API at build time or on demand. Non-technical editors can publish without touching code, and developers stay focused on the frontend.&lt;/p&gt;

&lt;p&gt;Cosmic gives you a clean API, a TypeScript SDK, a generous free tier, and zero infrastructure to manage.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Before you start, you'll need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Node.js 18 or later&lt;/li&gt;
&lt;li&gt;A free &lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Cosmic account&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Basic familiarity with React and TypeScript&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 1: Set Up Your Cosmic Bucket and Content Model
&lt;/h2&gt;

&lt;p&gt;After signing up for a free Cosmic account, create a new bucket. You can start from the &lt;a href="https://cosmicjs.com/templates/simple-react-blog" rel="noopener noreferrer"&gt;Simple React Blog template&lt;/a&gt; to get a pre-configured bucket with sample content and a ready-to-deploy Next.js app, or follow along manually.&lt;/p&gt;

&lt;h3&gt;
  
  
  Creating a Blog Posts Object Type
&lt;/h3&gt;

&lt;p&gt;In your Cosmic dashboard, navigate to Object Types and create a new type called &lt;code&gt;blog-posts&lt;/code&gt;. Add the following metafields:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Title&lt;/strong&gt; - Text (built-in)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Slug&lt;/strong&gt; - Text (built-in)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cover Image&lt;/strong&gt; - File (image)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Excerpt&lt;/strong&gt; - Textarea&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Content&lt;/strong&gt; - Markdown&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Published Date&lt;/strong&gt; - Date&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Author&lt;/strong&gt; - Text&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once saved, create a few sample posts so you have content to query during development.&lt;/p&gt;

&lt;h3&gt;
  
  
  Get Your API Credentials
&lt;/h3&gt;

&lt;p&gt;Go to Settings &amp;gt; API Keys in your bucket. You'll need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bucket Slug (e.g. &lt;code&gt;my-blog-production&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Read Key (for public content fetching)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Save these as environment variables.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Create a New Next.js App
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-next-app@latest my-blog &lt;span class="nt"&gt;--typescript&lt;/span&gt; &lt;span class="nt"&gt;--app&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;my-blog
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Install the Cosmic SDK:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; @cosmicjs/sdk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a &lt;code&gt;.env.local&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight properties"&gt;&lt;code&gt;&lt;span class="py"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your-bucket-slug&lt;/span&gt;
&lt;span class="py"&gt;COSMIC_READ_KEY&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your-read-key&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3: Initialize the Cosmic Client
&lt;/h2&gt;

&lt;p&gt;Create a shared Cosmic client at &lt;code&gt;lib/cosmic.ts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_READ_KEY&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 4: Define Your TypeScript Types
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// types/post.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Post&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="nx"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="nx"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
    &lt;span class="nx"&gt;excerpt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
    &lt;span class="nx"&gt;cover_image&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;imgix_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nl"&gt;published_date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
    &lt;span class="nx"&gt;author&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 5: Fetch Posts from the Cosmic REST API
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Fetch All Posts (Blog Index)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;depth&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Fetch a Single Post by Slug
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;object&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;depth&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 6: Build the Blog with Next.js App Router
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Blog Index Page (&lt;code&gt;app/blog/page.tsx&lt;/code&gt;)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@/lib/cosmic&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Link&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/link&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;BlogPage&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;main&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Blog&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;article&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Link&lt;/span&gt; &lt;span class="na"&gt;href&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="s2"&gt;`/blog/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Link&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;excerpt&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;article&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;main&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Dynamic Post Page (&lt;code&gt;app/blog/[slug]/page.tsx&lt;/code&gt;)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@/lib/cosmic&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;marked&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;marked&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;generateStaticParams&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt; &lt;span class="p"&gt;}))&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;PostPage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt; &lt;span class="p"&gt;}:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;params&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;object&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;marked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;main&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="na"&gt;src&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cover_image&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;imgix_url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;?w=1200&amp;amp;auto=format`&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;alt&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;dangerouslySetInnerHTML&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;__html&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;main&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 7: Optimize Images with Imgix
&lt;/h2&gt;

&lt;p&gt;Cosmic stores all media through &lt;a href="https://imgix.com" rel="noopener noreferrer"&gt;Imgix&lt;/a&gt;, a powerful image CDN. Append transformation parameters directly to any media URL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://imgix.cosmicjs.com/your-image.jpg?w=800&amp;amp;auto=format&amp;amp;q=80&amp;amp;fit=crop
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Common params:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;w=&lt;/code&gt; sets width&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;auto=format&lt;/code&gt; serves WebP to supported browsers&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;q=80&lt;/code&gt; reduces file size&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;fit=crop&lt;/code&gt; crops to exact dimensions&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 8: Deploy to Vercel
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Push your project to a GitHub repository&lt;/li&gt;
&lt;li&gt;Go to &lt;a href="https://vercel.com" rel="noopener noreferrer"&gt;vercel.com&lt;/a&gt; and import the repo&lt;/li&gt;
&lt;li&gt;Add your environment variables under Settings &amp;gt; Environment Variables:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;COSMIC_BUCKET_SLUG&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;COSMIC_READ_KEY&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Click Deploy&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Vercel will detect Next.js automatically, build your app, and give you a live URL in under a minute.&lt;/p&gt;

&lt;h3&gt;
  
  
  Enable On-Demand Revalidation (Optional)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/api/revalidate/route.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;revalidatePath&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/cache&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;NextRequest&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/server&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;POST&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;request&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;NextRequest&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;revalidatePath&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/blog&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;revalidated&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then configure a Cosmic webhook to call this endpoint whenever a post is published.&lt;/p&gt;

&lt;h2&gt;
  
  
  What You've Built
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A Next.js App Router project with TypeScript&lt;/li&gt;
&lt;li&gt;A Cosmic bucket with a structured content model&lt;/li&gt;
&lt;li&gt;Server-side data fetching via the &lt;code&gt;@cosmicjs/sdk&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Static pre-rendering with &lt;code&gt;generateStaticParams&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Imgix-powered image optimization&lt;/li&gt;
&lt;li&gt;Live on Vercel with optional on-demand revalidation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Your editors can log into the Cosmic dashboard and publish new posts without touching your codebase. Your readers get a fast, statically rendered experience. And your SEO improves because every post is pre-rendered HTML at build time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with the Free Template
&lt;/h2&gt;

&lt;p&gt;Don't want to build from scratch? The &lt;a href="https://cosmicjs.com/templates/simple-react-blog" rel="noopener noreferrer"&gt;Simple React Blog template&lt;/a&gt; gives you everything in this tutorial, already wired up and ready to deploy with one click.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://cosmicjs.com/templates/simple-react-blog" rel="noopener noreferrer"&gt;Get the free React blog template&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building free&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have questions or want to talk through your project? &lt;a href="https://calendly.com/tonyspiro/general-meeting" rel="noopener noreferrer"&gt;Book a quick intro call&lt;/a&gt; with the Cosmic team.&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>react</category>
      <category>cms</category>
      <category>webdev</category>
    </item>
    <item>
      <title>MCP vs Agent Skills: What's the Difference and Which Do You Need?</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Tue, 12 May 2026 22:12:48 +0000</pubDate>
      <link>https://forem.com/tonyspiro/mcp-vs-agent-skills-whats-the-difference-and-which-do-you-need-459h</link>
      <guid>https://forem.com/tonyspiro/mcp-vs-agent-skills-whats-the-difference-and-which-do-you-need-459h</guid>
      <description>&lt;p&gt;Originally published at &lt;a href="https://www.cosmicjs.com/blog/mcp-vs-agent-skills" rel="noopener noreferrer"&gt;cosmicjs.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Two terms keep coming up in every AI developer conversation right now: MCP (Model Context Protocol) and Agent Skills. They sound similar. They're not the same thing. Here's a clear breakdown of what each is, when to use which, and how Cosmic implements both.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is MCP?
&lt;/h2&gt;

&lt;p&gt;MCP (Model Context Protocol) is an open protocol developed by Anthropic that lets AI models connect to external tools and data sources in a standardized way. Think of it as a universal adapter that allows an AI assistant like Claude to read files, query databases, call APIs, and interact with services, all through a consistent interface.&lt;/p&gt;

&lt;p&gt;MCP runs as a server that your AI client connects to. Once connected, the AI can discover and use whatever tools the MCP server exposes.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Cosmic MCP Server:&lt;/em&gt; Cosmic ships a native MCP server that gives AI assistants direct access to your content. Claude, Cursor, and other MCP-compatible clients can read objects, query content types, fetch media, and understand your content model, all without you writing any integration code.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Are Agent Skills?
&lt;/h2&gt;

&lt;p&gt;Agent Skills are pre-built, reusable capabilities you can attach to AI coding assistants like Cursor, Claude Code, and GitHub Copilot. Where MCP gives an AI access to data, Agent Skills give an AI knowledge of how to do specific tasks in a specific codebase or platform.&lt;/p&gt;

&lt;p&gt;CosmicAgent Skills teach your coding assistant how to work with Cosmic specifically: how to structure queries, how to use the TypeScript SDK, how to model content, and how to build features against the Cosmic REST API.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Key Difference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;MCP&lt;/em&gt; = data access. The AI can read and write to your Cosmic bucket in real time.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Agent Skills&lt;/em&gt; = task knowledge. The AI knows how to build with Cosmic correctly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They are complementary, not competing.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to Use MCP
&lt;/h2&gt;

&lt;p&gt;Use the Cosmic MCP Server when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want Claude or another AI assistant to query your live content&lt;/li&gt;
&lt;li&gt;You're using an AI chat interface and want it to have context about your bucket&lt;/li&gt;
&lt;li&gt;You want AI to help you manage, audit, or restructure your content
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Add Cosmic MCP to your Claude config&lt;/span&gt;
npx @cosmicjs/mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  When to Use Agent Skills
&lt;/h2&gt;

&lt;p&gt;Use Cosmic Agent Skills when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You're building features in Cursor, Claude Code, or Copilot&lt;/li&gt;
&lt;li&gt;You want your coding assistant to generate correct Cosmic SDK code automatically&lt;/li&gt;
&lt;li&gt;You want to avoid copy-pasting docs into every prompt&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Using Both Together
&lt;/h2&gt;

&lt;p&gt;The most powerful setup uses both. Your coding assistant has Agent Skills so it generates correct Cosmic code, and it has MCP access so it can query your actual live bucket while building. It can look up your real content types, check what fields exist, and generate code that matches your exact schema.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Agent Skills ensure your assistant generates correct SDK usage&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_READ_KEY&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="c1"&gt;// MCP gives the assistant live access to your actual content types&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;objects&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your-actual-type-slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="c1"&gt;// AI knows this from MCP&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title,slug,metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  The Bottom Line
&lt;/h2&gt;

&lt;p&gt;If you're building with AI assistants, you want both. MCP for live data access. Agent Skills for correct code generation. Cosmic ships both natively.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.cosmicjs.com" rel="noopener noreferrer"&gt;Start free with Cosmic&lt;/a&gt; and set up both in under 10 minutes.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>agents</category>
      <category>webdev</category>
      <category>cms</category>
    </item>
    <item>
      <title>Astro vs Next.js: Which Framework Should You Use in 2026?</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Tue, 12 May 2026 22:12:26 +0000</pubDate>
      <link>https://forem.com/tonyspiro/astro-vs-nextjs-which-framework-should-you-use-in-2026-5e2h</link>
      <guid>https://forem.com/tonyspiro/astro-vs-nextjs-which-framework-should-you-use-in-2026-5e2h</guid>
      <description>&lt;p&gt;Originally published at &lt;a href="https://www.cosmicjs.com/blog/astro-vs-nextjs-2026" rel="noopener noreferrer"&gt;cosmicjs.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Choosing between Astro and Next.js in 2026? Both are excellent frameworks, but they solve different problems. This guide breaks down the real tradeoffs so you can make the right call for your project.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Short Answer
&lt;/h2&gt;

&lt;p&gt;Use Astro when your site is content-heavy and you want maximum performance with minimal JavaScript. Use Next.js when you need a full-stack React application with dynamic data, auth, and API routes.&lt;/p&gt;

&lt;p&gt;Both work seamlessly with Cosmic as your headless CMS.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Astro Does Well
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Zero JS by default, ships only what you need&lt;/li&gt;
&lt;li&gt;Island architecture for selective hydration&lt;/li&gt;
&lt;li&gt;Supports React, Vue, Svelte, and more in the same project&lt;/li&gt;
&lt;li&gt;Best-in-class for static content sites, blogs, and marketing pages&lt;/li&gt;
&lt;li&gt;Built-in content collections&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Next.js Does Well
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Full-stack React with App Router and Server Components&lt;/li&gt;
&lt;li&gt;API routes and server actions built in&lt;/li&gt;
&lt;li&gt;ISR and on-demand revalidation&lt;/li&gt;
&lt;li&gt;Largest ecosystem and community&lt;/li&gt;
&lt;li&gt;Best for dynamic applications, dashboards, and e-commerce&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Performance Comparison
&lt;/h2&gt;

&lt;p&gt;Astro wins on raw page weight for content sites. No framework JavaScript ships by default. Next.js with proper server components is competitive, but requires more discipline to keep bundles lean.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to Use Astro
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Marketing sites and landing pages&lt;/li&gt;
&lt;li&gt;Blogs and documentation&lt;/li&gt;
&lt;li&gt;Content-heavy sites where SEO is the primary goal&lt;/li&gt;
&lt;li&gt;Teams that want to mix component frameworks&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  When to Use Next.js
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;SaaS applications&lt;/li&gt;
&lt;li&gt;E-commerce with dynamic inventory&lt;/li&gt;
&lt;li&gt;Apps with complex auth flows&lt;/li&gt;
&lt;li&gt;Teams already invested in the React ecosystem&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Using Both with Cosmic
&lt;/h2&gt;

&lt;p&gt;Cosmic's REST API and TypeScript SDK work identically in both frameworks. Here's how to fetch content in each:&lt;/p&gt;

&lt;h3&gt;
  
  
  Astro
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_READ_KEY&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;objects&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title,slug,metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Next.js App Router
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_READ_KEY&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;BlogPage&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;objects&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title,slug,metadata&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&amp;gt;&lt;/span&gt;&lt;span class="se"&gt;)&lt;/span&gt;&lt;span class="sr"&gt;}&amp;lt;/&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Same SDK, same API, same content model. Switch frameworks without touching your content.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Verdict
&lt;/h2&gt;

&lt;p&gt;Astro and Next.js are not competitors in the traditional sense. They serve different primary use cases. The better question is: what are you building?&lt;/p&gt;

&lt;p&gt;Content site with SEO focus? Astro. Full-stack application? Next.js. Both? Cosmic works with either.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.cosmicjs.com" rel="noopener noreferrer"&gt;Start free with Cosmic&lt;/a&gt; and build with whichever framework fits your project.&lt;/p&gt;

</description>
      <category>astro</category>
      <category>nextjs</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>AI as Coordinator: Why SaaS Must Bundle or Die</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Tue, 12 May 2026 16:03:23 +0000</pubDate>
      <link>https://forem.com/tonyspiro/ai-as-coordinator-why-saas-must-bundle-or-die-5c9b</link>
      <guid>https://forem.com/tonyspiro/ai-as-coordinator-why-saas-must-bundle-or-die-5c9b</guid>
      <description>&lt;p&gt;For most of the last decade, the conventional wisdom in software was simple: use the best tool for every job. The CRM that wins on contact management. The CMS that wins on editor experience. The analytics platform that wins on dashboards. The best-of-breed stack, stitched together by integrations and held together by the humans navigating between them.&lt;/p&gt;

&lt;p&gt;That era is over. I don't think this is coming. I think it has already happened. And I don't think most SaaS companies understand the implications yet.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Unbundling Era Made Sense When Humans Were the Coordinators
&lt;/h2&gt;

&lt;p&gt;The logic behind best-of-breed stacks was always human logic. A skilled operator could hold context across a dozen tools. A marketing manager could pull data from one platform, paste it into another, run a report from a third, and synthesize the whole picture in her head. The friction of context-switching was manageable because humans are actually pretty good at it. We pattern-match across interfaces. We tolerate inconsistency. We remember which export format a specific tool uses.&lt;/p&gt;

&lt;p&gt;The integration layer was built for us. Zapier, Make, and dozens of custom webhooks exist because humans needed to connect tools they were already using. The business value was locked inside each individual product. The human was the orchestration layer.&lt;/p&gt;

&lt;p&gt;So the market optimized for exactly that model. Single-purpose tools got sharper, deeper, and more opinionated. The pitch was always the same: we do one thing and we do it better than anyone. If you want the best email tool, use us. If you want the best CMS, use us. Mix and match as needed.&lt;/p&gt;

&lt;p&gt;It was a good model. For a while.&lt;/p&gt;

&lt;h2&gt;
  
  
  Agents Don't Care About Dashboard Design
&lt;/h2&gt;

&lt;p&gt;Here's what changes when AI agents become the coordinators of business operations: agents don't navigate between tools the way humans do. They don't have the cognitive flexibility to tolerate seams. They operate through APIs, CLIs, and MCPs, and every API boundary is a potential failure point: an authentication handoff that breaks, a data schema that doesn't translate cleanly, a rate limit that introduces latency, an error state that the agent doesn't know how to recover from.&lt;/p&gt;

&lt;p&gt;Agents don't care about dashboard design. They don't appreciate a beautiful UI. The entire value proposition of the best-of-breed stack collapses when the end user is not a human.&lt;/p&gt;

&lt;p&gt;An agent operating across 12 separate SaaS tools is not more capable than an agent operating in one unified system. It's more fragile. More likely to fail at a handoff. More likely to produce inconsistent output. More expensive to maintain. More difficult to debug.&lt;/p&gt;

&lt;p&gt;The seams that humans could paper over with judgment and context-switching become hard failures when an agent hits them.&lt;/p&gt;

&lt;h2&gt;
  
  
  The New Moat Isn't UI. It's Vertical Integration.
&lt;/h2&gt;

&lt;p&gt;This is where I think much of the software industry is getting it wrong. A lot of SaaS companies are responding to the AI moment by adding AI features. A copilot here. An AI-assisted editor there. An auto-summarize button on the dashboard. These features are fine, but they don't change the fundamental problem.&lt;/p&gt;

&lt;p&gt;The companies that will win the next decade are not the ones that added AI on top of their existing product. They're the ones that rethought the product architecture entirely, with agents as the primary user.&lt;/p&gt;

&lt;p&gt;The new moat is vertical integration. It's owning the full stack that an agent needs to do a job, in a single system, with a single data model, through a single API.&lt;/p&gt;

&lt;p&gt;The single-product SaaS company with a great UI is not just at a disadvantage. It is structurally exposed.&lt;/p&gt;

&lt;h2&gt;
  
  
  From User Experience to Agent Experience
&lt;/h2&gt;

&lt;p&gt;For the last decade, premium software competed on UX. Smoother onboarding. Cleaner dashboards. More intuitive editors. The best product was the one your team actually wanted to open in the morning.&lt;/p&gt;

&lt;p&gt;That era produced real value. But it also produced an entire generation of software optimized for the wrong user.&lt;/p&gt;

&lt;p&gt;The new benchmark is Agent Experience. AX. How well does your platform perform when the user is an AI agent making thousands of API calls, not a human clicking through a dashboard?&lt;/p&gt;

&lt;p&gt;AX is not about aesthetics. It is about architecture. A high-AX platform has a unified data model, a clean and comprehensive API, minimal failure surfaces at integration boundaries, and built-in orchestration so agents don't need to reach outside the system to complete a workflow.&lt;/p&gt;

&lt;p&gt;A vertically integrated platform is not just more convenient for agents. It is architecturally superior for them. Every seam an agent doesn't have to cross is a failure point eliminated, a latency reduced, a context preserved.&lt;/p&gt;

&lt;p&gt;The logical endpoint of this architecture is a platform where agents don't just create content, they also measure its performance and act on what they learn. When the same system owns the content object and the pageview that came from it, the loop closes. Write, ship, measure, learn, all inside one platform, all accessible to your agents without a single third-party integration. That is what vertically integrated AX looks like in practice. We are building toward it.&lt;/p&gt;

&lt;p&gt;UX won the last decade. AX wins the next one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who Loses
&lt;/h2&gt;

&lt;p&gt;The companies most at risk are the ones whose entire value proposition was "we do one thing better than anyone."&lt;/p&gt;

&lt;p&gt;Point solutions that relied on being the best-in-class editor, the best-in-class analytics view, or the best-in-class content modeling interface are going to find that the interface advantage no longer matters when agents are the users. An agent doesn't prefer your drag-and-drop UI. It calls your API.&lt;/p&gt;

&lt;p&gt;The companies that built moats through beautiful interfaces are going to find that those moats are much shallower than they thought.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who Wins
&lt;/h2&gt;

&lt;p&gt;The companies that win will have a few characteristics in common.&lt;/p&gt;

&lt;p&gt;First, they'll have a unified data model. Second, they'll expose a clean, comprehensive API as the primary interface. Third, they'll own the vertical. Fourth, they'll have built-in orchestration.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Headless CMS Example
&lt;/h2&gt;

&lt;p&gt;The headless CMS space is a useful lens here, because it's a sector that went through aggressive unbundling in the last five years and is now running directly into this problem.&lt;/p&gt;

&lt;p&gt;The headless CMS companies that survive this shift will be the ones that extended beyond pure content APIs before the window closed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cosmic as the Model
&lt;/h2&gt;

&lt;p&gt;I'm not writing this as an abstract observation. This is the exact bet we made at Cosmic.&lt;/p&gt;

&lt;p&gt;Today, Cosmic is a single system that covers content management, media processing and delivery, AI agent infrastructure, workflow automation, and deployment. Our customers' agents can write a content draft, pull from the media library, run it through a publishing workflow, and deploy it, all through one API, in one system, with one data model.&lt;/p&gt;

&lt;p&gt;When FINN, one of our customers, describes the value, Co-Founder Maximilian Wuhr puts it simply: "Cosmic is: us never having to ask a developer to change anything on the backend of our website."&lt;/p&gt;

&lt;h2&gt;
  
  
  The Window Is Shorter Than You Think
&lt;/h2&gt;

&lt;p&gt;The companies that figure this out in the next 18 months will build the infrastructure their AI-native customers depend on. The companies that wait are betting that their existing moats hold longer than the market is moving.&lt;/p&gt;

&lt;p&gt;Bundling isn't a retreat from the sophistication of the unbundled era. It's the appropriate response to the fact that the coordinator changed.&lt;/p&gt;

&lt;p&gt;Bundle or die isn't hyperbole. It's the engineering reality of building for agents.&lt;/p&gt;

&lt;p&gt;UX won the last decade. AX wins the next one.&lt;/p&gt;




&lt;p&gt;If you're building for the agentic era and want to see what integrated depth actually looks like in production, &lt;a href="https://www.cosmicjs.com" rel="noopener noreferrer"&gt;start free at cosmicjs.com&lt;/a&gt; or &lt;a href="https://calendly.com/tonyspiro/general-meeting" rel="noopener noreferrer"&gt;book a 30-minute intro with Tony&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Tony Spiro is the CEO of Cosmic. He writes about building AI-native teams, headless CMS architecture, and the future of content infrastructure.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>saas</category>
      <category>webdev</category>
      <category>architecture</category>
    </item>
    <item>
      <title>What Agent-Native Means for Your Content Infrastructure</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Mon, 11 May 2026 21:41:02 +0000</pubDate>
      <link>https://forem.com/tonyspiro/what-agent-native-means-for-your-content-infrastructure-51oi</link>
      <guid>https://forem.com/tonyspiro/what-agent-native-means-for-your-content-infrastructure-51oi</guid>
      <description>&lt;p&gt;"Agent-native" is being claimed by a lot of companies right now. Here's what it actually means at the content infrastructure layer — where agents read, write, and publish the content that everything else depends on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Every Layer Is Being Redesigned
&lt;/h2&gt;

&lt;p&gt;Every layer of the software stack is being redesigned for AI agents. The frontend layer, the code layer, the deployment layer. But there's one layer getting less attention — and it's the one agents depend on most: the content infrastructure layer. That's the CMS.&lt;/p&gt;

&lt;p&gt;Here's what I think "agent-native" actually means at that layer, and why it matters.&lt;/p&gt;

&lt;h2&gt;
  
  
  Agents Need to Read, Write, and Publish Content
&lt;/h2&gt;

&lt;p&gt;Let's start with the obvious: AI agents work with content. They generate it, organize it, update it, and publish it. The CMS is where that content lives. So if your CMS wasn't built for agents to interact with directly, your entire AI workflow has a bottleneck at the most important layer.&lt;/p&gt;

&lt;p&gt;A traditional CMS was designed for a human editor sitting at a dashboard. An agent-native CMS is designed for agents — and humans — to operate it equally well.&lt;/p&gt;

&lt;p&gt;For Cosmic, this meant four concrete things:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First:&lt;/strong&gt; The API had to be simple enough for any AI agent to consume without special training. REST over HTTP, predictable URL patterns, JSON responses. Not a custom query language. Not a schema you need to introspect before you can use it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Second:&lt;/strong&gt; Agents needed to be first-class objects in the product. Not bolt-on integrations. Not webhooks you configure manually. Native AI agents — Team, Content, Code, Computer Use — that live in your workspace and operate on your content autonomously.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Third:&lt;/strong&gt; The CMS had to connect to where developers already work. That's your IDE. So we built an MCP Server and Agent Skills for Cursor, Claude Code, and GitHub Copilot. Your AI coding tool can now read and write CMS content without leaving your editor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fourth:&lt;/strong&gt; Agents needed to chain together. A Content Agent drafts an article. A Code Agent updates the front-end component. A Computer Use Agent cross-posts to social. A Team Agent notifies the editor in Slack. This is a workflow — and it needs to run on a schedule or a webhook trigger, without a human in the loop.&lt;/p&gt;

&lt;h2&gt;
  
  
  What This Unlocks for Teams in 2026
&lt;/h2&gt;

&lt;p&gt;When your content infrastructure is genuinely agent-native, a few things become possible that weren't before.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Content velocity stops being a headcount problem.&lt;/strong&gt; A single editor working with a team of content agents can produce, manage, and publish at a scale that previously required a full content department.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Developers get their time back.&lt;/strong&gt; When agents handle the routine CMS work — bulk updates, content audits, migration tasks — developers can focus on the work that actually requires human judgment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The feedback loop between content and code collapses.&lt;/strong&gt; When your Content Agent and your Code Agent are in the same workflow, a content change can trigger a code update, a preview deployment, and a Slack notification in a single automated run.&lt;/p&gt;

&lt;p&gt;This is not a future state. These are things teams are doing with Cosmic today.&lt;/p&gt;

&lt;h2&gt;
  
  
  The CMS Is the Critical Layer
&lt;/h2&gt;

&lt;p&gt;Every AI agent that touches your product — regardless of what framework it's built in or which LLM it runs on — eventually needs to read or write content. That makes the CMS the most critical layer in an agent-native stack.&lt;/p&gt;

&lt;p&gt;And it's the layer that will determine whether your agent workflows are fast, reliable, and actually useful, or slow, fragile, and constantly requiring human intervention.&lt;/p&gt;

&lt;p&gt;Agent-native content infrastructure is not about adding an AI button to a dashboard. It's about rebuilding the CMS from the ground up for a world where agents and humans work on the same content, in the same system, at the same time.&lt;/p&gt;

&lt;p&gt;That's what we're building at Cosmic.&lt;/p&gt;




&lt;ul&gt;
&lt;li&gt;&lt;a href="https://cosmicjs.com/ai" rel="noopener noreferrer"&gt;See how Cosmic's AI Agents work&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building for free — no credit card required&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book time with Tony&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;I'm the CEO of Cosmic, an AI-powered headless CMS. I write about building AI-native teams and the future of content infrastructure.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published on the Cosmic blog: &lt;a href="https://www.cosmicjs.com/blog/agent-native-content-infrastructure" rel="noopener noreferrer"&gt;https://www.cosmicjs.com/blog/agent-native-content-infrastructure&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>agents</category>
      <category>cms</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Why Cosmic Uses REST (and Why That's the Right Call in 2026)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Mon, 11 May 2026 21:37:22 +0000</pubDate>
      <link>https://forem.com/tonyspiro/why-cosmic-uses-rest-and-why-thats-the-right-call-in-2026-5170</link>
      <guid>https://forem.com/tonyspiro/why-cosmic-uses-rest-and-why-thats-the-right-call-in-2026-5170</guid>
      <description>&lt;h1&gt;
  
  
  Why Cosmic Uses REST (and Why That's the Right Call in 2026)
&lt;/h1&gt;

&lt;p&gt;Every few years, a new API paradigm gets declared the future. GraphQL had its moment. And it's genuinely good — for certain use cases. But "good for certain use cases" and "better default for most teams" are different claims. REST is still the right default, and in 2026 there's a new reason it matters: AI agents.&lt;/p&gt;

&lt;p&gt;Here's an honest breakdown of the tradeoffs, and why Cosmic is REST-first by design.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Honest GraphQL vs REST Comparison
&lt;/h2&gt;

&lt;p&gt;Let's be direct about where each one wins.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where GraphQL excels
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Precisely shaped responses.&lt;/strong&gt; GraphQL lets clients request exactly the fields they need. On mobile or low-bandwidth environments, this can meaningfully reduce payload size.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Single endpoint for complex graphs.&lt;/strong&gt; When your data has deeply nested relationships and you need to traverse them in a single request, GraphQL's query model can simplify client code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rapid iteration on the client side.&lt;/strong&gt; Frontend teams can adjust what data they fetch without waiting for a backend API change.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Type-safe schema introspection.&lt;/strong&gt; Tooling like Apollo DevTools and GraphQL Codegen is genuinely excellent for teams that invest in the ecosystem.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Where REST wins
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplicity.&lt;/strong&gt; A REST endpoint is a URL. Any HTTP client — curl, fetch, Postman, a Python script, an AI agent — can consume it without understanding a schema or learning a query language.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cacheability.&lt;/strong&gt; HTTP caching is built for REST. GET requests to a stable URL can be cached at the CDN layer with no additional tooling. GraphQL's POST-by-default convention makes this harder.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Debuggability.&lt;/strong&gt; When something breaks, a REST API gives you a URL you can open in a browser, paste into Postman, or log directly. GraphQL errors can be harder to trace without dedicated tooling.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ecosystem breadth.&lt;/strong&gt; REST is universal. Every language, every framework, every tool speaks REST.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Operational simplicity.&lt;/strong&gt; No query parser, no resolver overhead, no N+1 query problems to solve. For most content APIs, the queries are simple enough that REST's structure is a feature, not a limitation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The honest verdict on GraphQL
&lt;/h3&gt;

&lt;p&gt;GraphQL makes sense for complex, client-driven data fetching scenarios — large product catalogs with dozens of relationship types, mobile apps with strict bandwidth constraints, teams with mature frontend infrastructure. It's a real tool for real problems.&lt;/p&gt;

&lt;p&gt;But most content APIs are not that complex. A blog post has a title, a body, some metadata, and maybe a category. A landing page has sections and a hero image. REST handles these cases cleanly, with less overhead and more cacheability.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why 2026 Changes the Calculation: AI Agents
&lt;/h2&gt;

&lt;p&gt;Here's the new variable: AI agents are now part of most content workflows. And REST is dramatically better suited for agent consumption than GraphQL.&lt;/p&gt;

&lt;h3&gt;
  
  
  REST endpoints are trivially parseable by LLMs
&lt;/h3&gt;

&lt;p&gt;A REST endpoint is a URL with predictable structure: &lt;code&gt;GET /objects?type=blog-posts&amp;amp;limit=10&lt;/code&gt;. An AI agent can construct this URL from a natural language instruction without understanding a schema. The response is JSON — structured, flat, predictable.&lt;/p&gt;

&lt;p&gt;GraphQL requires the agent to understand the schema, construct a valid query document, and handle the query syntax correctly. That's more tokens, more failure modes, and more prompting complexity.&lt;/p&gt;

&lt;h3&gt;
  
  
  Caching matters for agent workflows
&lt;/h3&gt;

&lt;p&gt;AI agents often make repeated, similar requests — checking content status, fetching object counts, reading metadata. CDN-cached REST responses make this cheap and fast. GraphQL's POST-by-default pattern bypasses CDN caching entirely, meaning every agent request hits your origin.&lt;/p&gt;

&lt;h3&gt;
  
  
  Direct URL-based queries are auditable
&lt;/h3&gt;

&lt;p&gt;When an AI agent fetches content via a REST endpoint, the request is a plain URL you can log, inspect, and replay. This matters for debugging agent workflows and for understanding what your agents are actually doing.&lt;/p&gt;

&lt;h3&gt;
  
  
  The emerging standard: REST + structured JSON
&lt;/h3&gt;

&lt;p&gt;Tools like Model Context Protocol (MCP) and the major LLM provider SDKs are all built around REST + JSON. The ecosystem is converging on REST as the lingua franca for agent-to-service communication — because it's the most universally parseable format.&lt;/p&gt;




&lt;h2&gt;
  
  
  Cosmic's REST API in Practice
&lt;/h2&gt;

&lt;p&gt;Cosmic's REST API is designed to be fast, predictable, and easy for both humans and AI agents to consume.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sub-100ms response times&lt;/strong&gt; globally via CDN caching. Whether it's a developer building a Next.js page or an AI agent fetching content to include in a generated article, the API is consistently fast.&lt;/p&gt;

&lt;p&gt;Here's a simple example using the Cosmic TypeScript SDK — which wraps the REST API with full type safety:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createBucketClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@cosmicjs/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBucketClient&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;bucketSlug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_BUCKET_SLUG&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;readKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;COSMIC_READ_KEY&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cosmic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;objects&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blog-posts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;title&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;slug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;metadata.teaser&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;created_at&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-created_at&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The SDK compiles down to simple REST requests. No schema introspection. No query document compilation. Just a URL, a JSON response, and TypeScript types.&lt;/p&gt;

&lt;p&gt;You can also call the REST API directly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="s2"&gt;"https://api.cosmicjs.com/v3/buckets/my-bucket/objects?type=blog-posts&amp;amp;limit=10&amp;amp;read_key=YOUR_READ_KEY"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That URL is cacheable at the CDN layer, inspectable in a browser, and consumable by any HTTP client — including an AI agent with no Cosmic-specific knowledge whatsoever.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Decision in Plain Terms
&lt;/h2&gt;

&lt;p&gt;For most content APIs, REST is faster to implement, easier to cache, simpler to debug, and better suited for the AI-agent workflows that are becoming standard in 2026.&lt;/p&gt;

&lt;p&gt;GraphQL is the right call when you have complex, client-driven data fetching needs and a team ready to invest in the ecosystem. Those situations exist. But they're not the default.&lt;/p&gt;

&lt;p&gt;Cosmic is REST-first because REST is the right default for content delivery — and because in a world where AI agents are increasingly reading and writing your content, the simplicity and cacheability of REST becomes even more valuable, not less.&lt;/p&gt;




&lt;h2&gt;
  
  
  Start Building with Cosmic
&lt;/h2&gt;

&lt;p&gt;The Cosmic REST API is available on the free plan, no credit card required. Fetch your first objects in under five minutes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;&lt;strong&gt;Get started free →&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Want to talk through your architecture? &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book time with Tony, Cosmic's CEO.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published on the &lt;a href="https://www.cosmicjs.com/blog/why-rest-api-headless-cms-2026" rel="noopener noreferrer"&gt;Cosmic blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>api</category>
      <category>typescript</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
