<?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>DEV Community: Tony Spiro</title>
    <description>The latest articles on DEV Community by Tony Spiro (@tonyspiro).</description>
    <link>https://dev.to/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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F36636%2F37a4c910-90d9-40b1-9a8b-69e1ad31b4f6.jpeg</url>
      <title>DEV Community: Tony Spiro</title>
      <link>https://dev.to/tonyspiro</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tonyspiro"/>
    <language>en</language>
    <item>
      <title>How to Build an AI Content Pipeline with Claude and a Headless CMS</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Sat, 01 Aug 2026 01:33:05 +0000</pubDate>
      <link>https://dev.to/tonyspiro/how-to-build-an-ai-content-pipeline-with-claude-and-a-headless-cms-3660</link>
      <guid>https://dev.to/tonyspiro/how-to-build-an-ai-content-pipeline-with-claude-and-a-headless-cms-3660</guid>
      <description>&lt;p&gt;Most "AI content pipeline" tutorials hand you a second vendor. You install an AI provider's SDK, manage a second API key, absorb a second bill, and then write glue code to move the output into wherever your content actually lives.&lt;/p&gt;

&lt;p&gt;Cosmic generates text, images, and video through the same API that stores your content. One SDK, one key, one bill. This guide builds a working pipeline on that API: a source document goes in, a reviewed draft comes out, and a human approves it before anything reaches production.&lt;/p&gt;

&lt;p&gt;Everything below uses the official TypeScript SDK, &lt;code&gt;@cosmicjs/sdk&lt;/code&gt;. No second AI provider required.&lt;/p&gt;

&lt;h2&gt;
  
  
  What we are building
&lt;/h2&gt;

&lt;p&gt;A content pipeline has four stages, and the third one is the reason the other three are worth automating.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Source.&lt;/strong&gt; The raw material: a brief, a transcript, a quarterly report, a spreadsheet of survey results.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Generate.&lt;/strong&gt; Turn the source into a structured draft.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Review.&lt;/strong&gt; A human reads it, edits it, and decides whether it ships.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Publish.&lt;/strong&gt; The approved draft goes live through your existing front end.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Skip stage three and you are running a slop factory. The pipeline below treats the review gate as load-bearing infrastructure, not an afterthought.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;A Cosmic account. The &lt;a href="https://www.cosmicjs.com/pricing" rel="noopener noreferrer"&gt;Free plan&lt;/a&gt; includes 1 Bucket, 2 team members, 1,000 Objects, and a monthly AI token allocation, which is enough to build and test this end to end.&lt;/li&gt;
&lt;li&gt;Your Bucket slug, read key, and write key, from &lt;strong&gt;Settings → API Access&lt;/strong&gt; in your Bucket.&lt;/li&gt;
&lt;li&gt;Node.js and a package manager.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A write key is required for every AI operation. Keep it server side only.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Install the SDK and create a client
&lt;/h2&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;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&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="na"&gt;writeKey&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_WRITE_KEY&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;That is the entire dependency list. The same client reads content, writes content, and generates it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Generate your first draft
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;cosmic.ai.generateText()&lt;/code&gt; takes a prompt and returns the generated text plus token usage.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Write a 400-word product description for a ceramic pour-over coffee dripper. Audience: home brewers. Tone: plain and specific. No superlatives.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;,&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;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&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;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;usage&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// { input_tokens, output_tokens }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;usage&lt;/code&gt; object matters more than it looks. It is how you attach a real cost figure to every piece of content the pipeline produces, which we come back to below.&lt;/p&gt;

&lt;p&gt;If you prefer HTTP directly, the same call over REST:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl https://workers.cosmicjs.com/v3/buckets/&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;BUCKET_SLUG&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;/ai/text &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s1"&gt;'{"prompt":"Write a product description for a coffee mug","max_tokens":500}'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s1"&gt;'Content-Type: application/json'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Authorization: Bearer &lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;BUCKET_WRITE_KEY&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3: Feed it a real source document
&lt;/h2&gt;

&lt;p&gt;This is the step that turns a prompt toy into a pipeline. The &lt;code&gt;media_url&lt;/code&gt; parameter points at any file in your Bucket and the model analyzes it as part of the request. Images, PDFs, Excel spreadsheets, Word documents.&lt;/p&gt;

&lt;p&gt;Upload a quarterly report to your Bucket, then generate from it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;summary&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Summarize the key points from this document as a bulleted list. Include only figures stated in the source. Do not extrapolate.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;media_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://cdn.cosmicjs.com/quarterly-report.pdf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000&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;The grounding this gives you is the whole point. A model working from a prompt alone invents plausible numbers. A model working from your PDF is constrained by a document you control, and the instruction to use only stated figures becomes checkable: a reviewer can open the same PDF and verify every claim.&lt;/p&gt;

&lt;p&gt;The same parameter works with the chat format when you need multi-turn refinement over one source:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;analysis&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;messages&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;What trends do you see in this sales data?&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;assistant&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Looking at the spreadsheet, I can see several patterns...&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;What was the highest performing month?&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="na"&gt;media_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://cdn.cosmicjs.com/sales-data.xlsx&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&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;Useful source documents for a content team: customer interview transcripts, support ticket exports, release notes, analytics CSVs, competitor pricing pages saved as PDFs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Write the result into the CMS as a draft
&lt;/h2&gt;

&lt;p&gt;Generation and storage are the same client, so this is one call and no glue code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;object&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;insertOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Q3 Performance Recap&lt;/span&gt;&lt;span class="dl"&gt;'&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;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;draft&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// never 'published' from an automated step&lt;/span&gt;
  &lt;span class="na"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;markdown_content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;summary&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;teaser&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Generated from the Q3 report. Pending editorial review.&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="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;object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;status: 'draft'&lt;/code&gt; line is the pipeline's safety property. Every generated object lands in a state that is invisible to your production front end until a person changes it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Make the review gate real
&lt;/h2&gt;

&lt;p&gt;A review gate that depends on someone remembering to check a folder will fail. Two things make it hold.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Query the queue.&lt;/strong&gt; Anything awaiting review is one request away:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;draft&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;created_at&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Wire that to a Slack message on a schedule and the queue comes to your team instead of waiting to be discovered.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Publishing stays a human action.&lt;/strong&gt; The approval step is a deliberate status change, made by a person:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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;updateOne&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;objectId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;published&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Keep that call out of your generation script entirely. Put it behind an editor's click in the dashboard, or behind an internal tool that requires a named approver.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6: Pick a model, and keep the ability to change it
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;model&lt;/code&gt; parameter defaults to &lt;code&gt;claude-opus-5&lt;/code&gt;. It also accepts Gemini models such as &lt;code&gt;gemini-3.1-pro-preview&lt;/code&gt;, OpenAI models such as &lt;code&gt;gpt-5.2-codex&lt;/code&gt;, and Moonshot Kimi models such as &lt;code&gt;kimi-k3&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;draft&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;brief&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;gemini-3.1-pro-preview&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2000&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;Switching providers is a one-line change with no new dependency, no new key, and no new billing relationship. That matters because the model you pick today will be superseded. A pipeline that pins itself to a single vendor's SDK has to be rebuilt every time the frontier moves. See &lt;a href="https://www.cosmicjs.com/blog/why-your-ai-stack-should-be-model-agnostic" rel="noopener noreferrer"&gt;why your AI stack should be model-agnostic&lt;/a&gt; for the longer argument.&lt;/p&gt;

&lt;p&gt;A practical split for a content pipeline: a cheaper Budget-tier model for mechanical work like extracting bullet points or drafting meta descriptions, and a Standard-tier model for prose that a reader will actually see.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 7: Generate the featured image in the same pipeline
&lt;/h2&gt;

&lt;p&gt;The AI API also generates images and video, so the featured image does not have to be a manual handoff to a designer or a trip to a stock library. Image generation is billed as a fixed token cost per image: a DALL-E 3 image is 4,800 output tokens, a Gemini 1K or 2K image is 32,160, and a Gemini 4K image is 57,600. Videos through Veo cost considerably more, from 144,000 tokens for a 4-second fast render.&lt;/p&gt;

&lt;p&gt;See the &lt;a href="https://www.cosmicjs.com/docs/api/ai" rel="noopener noreferrer"&gt;AI API reference&lt;/a&gt; for the image and video request formats. Generated media lands in your Bucket's media library, so you can attach it to the draft object in the same run that created the draft.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 8: Stream when a human is watching
&lt;/h2&gt;

&lt;p&gt;Batch jobs do not need streaming. Editor-facing tools do, because a blank screen for twenty seconds reads as a broken feature.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&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;TextStreamingResponse&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;result&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Draft an intro paragraph for this post&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;stream&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;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stream&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;TextStreamingResponse&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fullResponse&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;
&lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text&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="nx"&gt;text&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;fullResponse&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;usage&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="nx"&gt;usage&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Usage:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;usage&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;end&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="o"&gt;=&amp;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Complete:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fullResponse&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;error&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="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;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;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 9: Give the pipeline memory
&lt;/h2&gt;

&lt;p&gt;Generation is half of a useful pipeline. Retrieval is the other half. Before drafting a new post, check whether you already published one on the same topic, and feed the existing coverage into the prompt as context.&lt;/p&gt;

&lt;p&gt;Cosmic includes semantic search over your Bucket content, which finds objects by meaning rather than keyword match. That is how you stop a pipeline from producing four posts that compete with each other for the same search query. See the &lt;a href="https://www.cosmicjs.com/docs/api/content-rag" rel="noopener noreferrer"&gt;semantic search docs&lt;/a&gt; for the query format.&lt;/p&gt;

&lt;h2&gt;
  
  
  The no-code path: connect Claude directly to your CMS
&lt;/h2&gt;

&lt;p&gt;If you want an AI assistant operating on your content interactively instead of a scripted job, use the Cosmic MCP server. It exposes your Bucket as tools that Claude Code, Claude Desktop, or Cursor can call directly: read objects, create drafts, upload media, generate content.&lt;/p&gt;

&lt;p&gt;The read-key-only configuration is worth knowing about here. Point the MCP server at a read key and every create, update, and delete tool is blocked, which gives you an assistant that can analyze your content library and propose changes without the ability to write anything. Full setup is in &lt;a href="https://www.cosmicjs.com/blog/connect-claude-code-to-cms-with-mcp" rel="noopener noreferrer"&gt;connect Claude Code to your CMS with MCP&lt;/a&gt; and the &lt;a href="https://www.cosmicjs.com/docs/mcp-server" rel="noopener noreferrer"&gt;MCP server docs&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Guardrails that actually matter
&lt;/h2&gt;

&lt;p&gt;Six rules, learned the practical way.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Never publish from an automated step.&lt;/strong&gt; Generation writes drafts. Only a person changes status to published.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ground every factual claim in a source document.&lt;/strong&gt; Use &lt;code&gt;media_url&lt;/code&gt; and instruct the model to use only stated figures. Claims a reviewer cannot trace to a source get cut, not softened.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cap &lt;code&gt;max_tokens&lt;/code&gt; per job.&lt;/strong&gt; It is your circuit breaker against a runaway loop consuming a month of allocation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Log &lt;code&gt;usage&lt;/code&gt; on every call.&lt;/strong&gt; Store input and output tokens alongside the object so you can attribute cost per piece.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keep write keys server side.&lt;/strong&gt; Every AI operation needs one. A write key in client code is a public write key.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deduplicate before you generate.&lt;/strong&gt; Run a semantic search first. Two posts targeting one query split their own rankings.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  What this costs
&lt;/h2&gt;

&lt;p&gt;AI usage draws tokens from your plan allocation, and text generation applies a tier multiplier to the actual tokens used.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Budget, 1.0x:&lt;/strong&gt; GPT-5 Nano, GPT-5 Mini, Claude Haiku 4.5. 1,000 actual tokens deducts 1,000.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Standard, 2.0x:&lt;/strong&gt; GPT-5, GPT-5.2, GPT-5.2 Codex, GPT-5.5, Claude Sonnet 4.6, Claude Sonnet 5, Claude Opus 4.7, Claude Opus 4.8, Gemini 3.1 Pro, Kimi K3. 1,000 actual tokens deducts 2,000.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Premium, 4.0x:&lt;/strong&gt; Claude Fable 5. 1,000 actual tokens deducts 4,000.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Media is a fixed cost per asset, billed as output tokens, with the image and video figures listed in Step 7.&lt;/p&gt;

&lt;p&gt;Plan pricing, current at time of writing: Free at $0/month, Builder at $49/month, Team at $299/month, Business at $499/month, and Enterprise on custom pricing. Additional team members are $29/user/month. Token packs are available if you exceed your monthly allocation. Check the &lt;a href="https://www.cosmicjs.com/pricing" rel="noopener noreferrer"&gt;pricing page&lt;/a&gt; for current allocations and pack sizes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Measuring whether the pipeline is working
&lt;/h2&gt;

&lt;p&gt;Volume is the wrong metric. A pipeline that triples output and halves engagement has made things worse. Track these instead:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Approval rate.&lt;/strong&gt; What share of generated drafts a human ships without a rewrite. A low rate points at your prompts and source documents, not the model.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Editing distance.&lt;/strong&gt; How much reviewers change before publishing. Rising distance means quality is drifting.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cost per published piece.&lt;/strong&gt; Logged &lt;code&gt;usage&lt;/code&gt; divided by pieces that actually shipped, counting the drafts you threw away.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Engagement on generated pieces versus hand-written ones.&lt;/strong&gt; The honest test.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  FAQ
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Do I need my own Anthropic or OpenAI API key?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;No. Text, image, and video generation run through the Cosmic API using your Bucket write key. Model access is included in your plan allocation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Which models are available?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Claude, Gemini, OpenAI, and Moonshot Kimi models, selected with the &lt;code&gt;model&lt;/code&gt; parameter. The default is &lt;code&gt;claude-opus-5&lt;/code&gt;. The full list is in the &lt;a href="https://www.cosmicjs.com/docs/api/ai" rel="noopener noreferrer"&gt;AI API docs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Can the AI read my existing files?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Yes. Pass &lt;code&gt;media_url&lt;/code&gt; pointing at any file in your Bucket: images, PDFs, Excel spreadsheets, Word documents, and more.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Does Cosmic have a GraphQL API?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;No. Cosmic provides a REST API and the JavaScript/TypeScript SDK, &lt;code&gt;@cosmicjs/sdk&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Can I run this without writing code?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Yes, through the MCP server or the AI features in the dashboard. The code path gives you scheduling and repeatability.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Will generated content hurt my SEO?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Unreviewed content will. The review gate in Step 5 exists for that reason. Publish what a human has verified and cut what nobody can source.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ship the boring version first
&lt;/h2&gt;

&lt;p&gt;The smallest useful pipeline is one source document, one prompt, one draft object, one reviewer. Build that, run it for a week, then add scheduling and images and retrieval once you trust the output.&lt;/p&gt;

&lt;p&gt;This is the outcome teams are after when they automate content operations. As Maximilian Wuhr, Co-Founder at FINN, put it: "Cosmic is: us never having to ask a developer to change anything on the backend of our website."&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup?utm_source=dev.to&amp;amp;utm_medium=syndication&amp;amp;utm_campaign=devto-crosspost&amp;amp;utm_content=ai-content-pipeline"&gt;Start building for free&lt;/a&gt; with AI generation included on every plan, or &lt;a href="https://calendly.com/tonyspiro/cosmic-intro?utm_source=dev.to&amp;amp;utm_medium=syndication&amp;amp;utm_campaign=devto-crosspost&amp;amp;utm_content=ai-content-pipeline"&gt;book 20 minutes with our CEO&lt;/a&gt; to talk through your content workflow. If you want the interactive version instead, wire up &lt;a href="https://www.cosmicjs.com/ai/agents" rel="noopener noreferrer"&gt;Cosmic AI agents&lt;/a&gt; or the &lt;a href="https://www.cosmicjs.com/docs/mcp-server" rel="noopener noreferrer"&gt;MCP server&lt;/a&gt; and start from a conversation.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>DeepSeek V4 Flash: Benchmarks, Pricing, and What It Means for Content Agents</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 31 Jul 2026 22:08:25 +0000</pubDate>
      <link>https://dev.to/tonyspiro/deepseek-v4-flash-benchmarks-pricing-and-what-it-means-for-content-agents-32fd</link>
      <guid>https://dev.to/tonyspiro/deepseek-v4-flash-benchmarks-pricing-and-what-it-means-for-content-agents-32fd</guid>
      <description>&lt;p&gt;&lt;em&gt;Originally published on &lt;a href="https://www.cosmicjs.com/blog/deepseek-v4-flash-benchmarks-pricing" rel="noopener noreferrer"&gt;the Cosmic blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;DeepSeek released &lt;strong&gt;V4-Flash&lt;/strong&gt; on July 31, 2026, and pushed it to public beta on the API under the model name &lt;code&gt;deepseek-v4-flash&lt;/code&gt;. It landed on the front page of Hacker News twice within hours.&lt;/p&gt;

&lt;p&gt;The headline is easy to summarize: near the top of the intelligence rankings, at the bottom of the price rankings. The details are more interesting than the headline, and one of them changes the cost math in a way the per-token price does not show.&lt;/p&gt;

&lt;p&gt;Here is what shipped, what the numbers say, and where a model like this fits in a content pipeline.&lt;/p&gt;

&lt;h2&gt;
  
  
  What actually shipped
&lt;/h2&gt;

&lt;p&gt;According to DeepSeek's official changelog, V4-Flash uses the &lt;strong&gt;same architecture and the same parameter size&lt;/strong&gt; as the earlier V4-Flash-Preview. The only change is post-training. DeepSeek re-post-trained the model and reports scores that represent a significant jump over the V4-Pro-Preview.&lt;/p&gt;

&lt;p&gt;A few practical notes from the release:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The model is in &lt;strong&gt;public beta&lt;/strong&gt; on the API.&lt;/li&gt;
&lt;li&gt;It &lt;strong&gt;natively supports the Responses API format&lt;/strong&gt; and has been adapted for Codex.&lt;/li&gt;
&lt;li&gt;The V4-Pro API, app, and web experiences are &lt;strong&gt;unchanged&lt;/strong&gt;. An official V4-Pro release is still to come.&lt;/li&gt;
&lt;li&gt;Independent measurement puts it at &lt;strong&gt;284B parameters&lt;/strong&gt;, with weights not publicly released.&lt;/li&gt;
&lt;li&gt;It is &lt;strong&gt;text in, text out&lt;/strong&gt;. No image, audio, or video input.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point matters if you were hoping to drop it into a workflow that processes screenshots or PDFs. You cannot, at least not directly.&lt;/p&gt;

&lt;h2&gt;
  
  
  The benchmark numbers
&lt;/h2&gt;

&lt;p&gt;DeepSeek published the following scores, evaluated with its own DeepSeek Harness in minimal mode at max effort, &lt;code&gt;top_p&lt;/code&gt; 0.95, &lt;code&gt;temperature&lt;/code&gt; 1.0:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Benchmark&lt;/th&gt;
&lt;th&gt;Score&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Terminal Bench 2.1&lt;/td&gt;
&lt;td&gt;82.7&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cybergym&lt;/td&gt;
&lt;td&gt;76.7&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Toolathlon (verified)&lt;/td&gt;
&lt;td&gt;70.3&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DSBench-FullStack&lt;/td&gt;
&lt;td&gt;68.7&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DSBench-Hard&lt;/td&gt;
&lt;td&gt;59.6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DeepSWE&lt;/td&gt;
&lt;td&gt;54.4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;NL2Repo&lt;/td&gt;
&lt;td&gt;54.2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Agent Last Exam&lt;/td&gt;
&lt;td&gt;25.2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Automation Bench (Public)&lt;/td&gt;
&lt;td&gt;25.1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Read the shape of that table rather than any single row. The strongest results cluster around &lt;strong&gt;terminal use, tool calling, and multi-step engineering work&lt;/strong&gt;: Terminal Bench at 82.7 and Toolathlon at 70.3 are agentic evaluations, not trivia recall. This is a model tuned to operate software.&lt;/p&gt;

&lt;p&gt;The bottom two rows deserve an honest caveat. Agent Last Exam and Automation Bench are deliberately brutal, long-horizon evaluations where scores in the twenties are normal across the frontier right now. A 25.2 is not a failure. It is a reminder that fully autonomous, hours-long task completion remains unsolved by everyone.&lt;/p&gt;

&lt;p&gt;One more caveat worth stating plainly: these are vendor-published numbers, produced with the vendor's own harness at max effort settings. Treat them as a strong signal and verify on your own evals before you migrate anything that matters.&lt;/p&gt;

&lt;p&gt;Independent measurement from Artificial Analysis puts V4-Flash at an &lt;strong&gt;Intelligence Index of 50&lt;/strong&gt;, ranking it &lt;strong&gt;2nd out of 162&lt;/strong&gt; models in its class, against a class median of 17.&lt;/p&gt;

&lt;h2&gt;
  
  
  The price story, and the part people will miss
&lt;/h2&gt;

&lt;p&gt;On raw API pricing, V4-Flash ranks &lt;strong&gt;1st out of 162&lt;/strong&gt; in its class:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;$0.14&lt;/strong&gt; per 1M input tokens&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;$0.28&lt;/strong&gt; per 1M output tokens&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;$0.003&lt;/strong&gt; per 1M cached input tokens, a &lt;strong&gt;98% discount&lt;/strong&gt; on a cache hit&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;$0.06&lt;/strong&gt; per 1M tokens blended&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;1M token context window&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That cache-hit price is the number to pay attention to, and it is the one that gets skimmed past. For any agent that runs repeatedly against the same system prompt, the same schema definitions, and the same style guide, the fixed prefix of every request is identical. Caching turns that prefix from a recurring cost into a rounding error.&lt;/p&gt;

&lt;p&gt;Now the catch.&lt;/p&gt;

&lt;p&gt;Artificial Analysis also measured &lt;strong&gt;verbosity&lt;/strong&gt;, and V4-Flash consumed &lt;strong&gt;210M output tokens&lt;/strong&gt; to complete the Intelligence Index, against a median of &lt;strong&gt;62M&lt;/strong&gt;. That ranks it 58th of 162 on output efficiency. It produced roughly three and a half times the median number of tokens to reach its score.&lt;/p&gt;

&lt;p&gt;Cheap tokens and cheap tasks are two different measurements. A model at a third of the per-token price that emits three times the tokens has spent your savings. The total cost to evaluate V4-Flash on the Intelligence Index came to &lt;strong&gt;$72.02&lt;/strong&gt;, which is genuinely low, so the economics still work out well here. The lesson is that you should benchmark &lt;strong&gt;cost per completed task&lt;/strong&gt; on your own workload rather than reading the price-per-million column and stopping there.&lt;/p&gt;

&lt;p&gt;If your workload is latency-sensitive, the verbosity number is also a throughput warning. More tokens means more time to last token.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where this fits in a content pipeline
&lt;/h2&gt;

&lt;p&gt;Strong tool-calling scores, a 1M token context window, and a 98% cache discount describe a specific kind of useful: &lt;strong&gt;long-running agents that read and write structured content&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That is a real workload. Translating a content library into six locales. Auditing every post for a deprecated product claim. Regenerating meta descriptions across a thousand objects. Keeping a changelog in sync with release notes. These jobs are repetitive, schema-bound, and expensive at frontier prices, which is exactly the profile where a cheap, cache-friendly, tool-capable model earns its place.&lt;/p&gt;

&lt;p&gt;The 1M context window matters here for a specific reason. Content operations tend to need &lt;strong&gt;broad but shallow&lt;/strong&gt; context: a large number of records, each fairly small. You can put an entire content model and hundreds of objects in a single request and let the model reason across all of it, instead of building a retrieval layer to work around a smaller window.&lt;/p&gt;

&lt;p&gt;With Cosmic, the read side of that loop is a few lines. Pull the objects and the fields you need:&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="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="o"&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="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="o"&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;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,slug,title,metadata.seo_description&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;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because &lt;code&gt;.props()&lt;/code&gt; limits the payload to the fields you actually asked for, you control your own token bill at the source. Sending 200 slugs and meta descriptions costs a fraction of sending 200 full post bodies.&lt;/p&gt;

&lt;p&gt;Then hand the batch to the model. The API is OpenAI-compatible, so the client you already have works:&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.deepseek.com/chat/completions&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="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&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;Content-Type&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;application/json&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;Authorization&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Bearer &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;DEEPSEEK_API_KEY&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;deepseek-v4-flash&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;messages&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;system&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;STYLE_GUIDE&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&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="p"&gt;},&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Keep &lt;code&gt;STYLE_GUIDE&lt;/code&gt; byte-identical across runs so it stays cacheable. Put the variable content in the user message. That one discipline is where the 98% cache discount actually shows up on your invoice.&lt;/p&gt;

&lt;p&gt;Writing results back through the SDK closes the loop, and because every change lands as a versioned object rather than a direct database write, you keep an audit trail of what the agent changed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Should you switch?
&lt;/h2&gt;

&lt;p&gt;A reasonable read as of today:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good fit for V4-Flash&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;High-volume, repetitive content operations where per-task cost dominates&lt;/li&gt;
&lt;li&gt;Agentic and terminal-oriented work, which is where the benchmarks are strongest&lt;/li&gt;
&lt;li&gt;Workloads with a large stable prompt prefix that will hit the cache&lt;/li&gt;
&lt;li&gt;Jobs that need broad context across many records&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Look elsewhere&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Anything requiring image, audio, or video input, since the model is text-only&lt;/li&gt;
&lt;li&gt;Latency-critical, user-facing interactions, given the verbosity numbers&lt;/li&gt;
&lt;li&gt;Production systems with no tolerance for a public beta API&lt;/li&gt;
&lt;li&gt;Deployments that require open weights, which are not available here&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The honest summary: this is a strong, cheap, tool-capable text model that is well suited to background content work and not yet the right choice for multimodal or latency-sensitive paths. Run it against your own evals before you commit.&lt;/p&gt;

&lt;h2&gt;
  
  
  Build the pipeline the model plugs into
&lt;/h2&gt;

&lt;p&gt;Model leaderboards will keep churning. The thing that determines whether you can take advantage of a release like this one is whether your content layer is API-first, so swapping the model behind it is a config change rather than a migration.&lt;/p&gt;

&lt;p&gt;That is what &lt;a href="https://www.cosmicjs.com?utm_source=devto&amp;amp;utm_medium=social&amp;amp;utm_campaign=deepseek-v4-flash-benchmarks-pricing" rel="noopener noreferrer"&gt;Cosmic&lt;/a&gt; is for. Your content lives in a headless CMS with a REST API and a TypeScript SDK, so any model, agent, or framework can read and write it. When a cheaper or smarter model ships next month, you point at it and move on.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://app.cosmicjs.com/signup?utm_source=devto&amp;amp;utm_medium=social&amp;amp;utm_campaign=deepseek-v4-flash-benchmarks-pricing" rel="noopener noreferrer"&gt;Start building free&lt;/a&gt;&lt;/strong&gt; and connect a bucket in minutes&lt;/li&gt;
&lt;li&gt;Read the &lt;strong&gt;&lt;a href="https://www.cosmicjs.com/ai?utm_source=devto&amp;amp;utm_medium=social&amp;amp;utm_campaign=deepseek-v4-flash-benchmarks-pricing" rel="noopener noreferrer"&gt;AI features overview&lt;/a&gt;&lt;/strong&gt; to see what is built in&lt;/li&gt;
&lt;li&gt;Comparing coding agents too? See our &lt;strong&gt;&lt;a href="https://www.cosmicjs.com/blog/claude-code-vs-github-copilot-vs-cursor-which-ai-coding-agent-should-you-use-2026?utm_source=devto&amp;amp;utm_medium=social&amp;amp;utm_campaign=deepseek-v4-flash-benchmarks-pricing" rel="noopener noreferrer"&gt;Claude Code vs GitHub Copilot vs Cursor breakdown&lt;/a&gt;&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Running this at team scale? &lt;strong&gt;&lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book 15 minutes with our CEO&lt;/a&gt;&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Benchmark scores in this post are from DeepSeek's official changelog dated July 31, 2026. Pricing, Intelligence Index, parameter count, and verbosity figures are from Artificial Analysis. Vendor-published benchmarks were produced with DeepSeek's own harness at max effort settings, so verify against your own workload.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Claude Sonnet 5 vs Opus 5: A Real-World Comparison (2026)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 31 Jul 2026 22:07:25 +0000</pubDate>
      <link>https://dev.to/tonyspiro/claude-sonnet-5-vs-opus-5-a-real-world-comparison-2026-1o67</link>
      <guid>https://dev.to/tonyspiro/claude-sonnet-5-vs-opus-5-a-real-world-comparison-2026-1o67</guid>
      <description>&lt;p&gt;&lt;em&gt;Originally published on &lt;a href="https://www.cosmicjs.com/blog/claude-sonnet-5-vs-opus-5" rel="noopener noreferrer"&gt;the Cosmic blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Anthropic shipped Claude Sonnet 5 on June 30, 2026 and Claude Opus 5 on July 24, 2026. Both are excellent. The expensive mistake is picking one, wiring it into every code path, and then either overpaying on trivial work or under-resourcing the work that actually matters.&lt;/p&gt;

&lt;p&gt;This is the practical breakdown: what each model is measurably good at, what the same job costs on each once you account for tokenization, and a routing rule you can ship this week.&lt;/p&gt;

&lt;h2&gt;
  
  
  The short answer
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Your workload&lt;/th&gt;
&lt;th&gt;Use&lt;/th&gt;
&lt;th&gt;Why&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Content generation, summarization, chat, classification, tagging&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Sonnet 5&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Highest quality per dollar. This is the volume tier.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Day-to-day coding, refactors, test writing, PR review&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Sonnet 5&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;72.7% on SWE-bench Verified, a 10.4 point jump over Sonnet 4.6.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Long autonomous agent runs with tool calls&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Opus 5&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Anthropic reports it ranked first on Zapier's AutomationBench for end-to-end task completion.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Architecture decisions, ambiguous multi-step problems, novel reasoning&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Opus 5&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Self-verification and judgment are the headline improvements.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Anything where a wrong answer is expensive to unwind&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Opus 5&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Lowest misaligned-behavior score of Anthropic's recent releases at 2.3.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;High-volume production traffic on a budget&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Sonnet 5&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;It is the default on Claude Free and Pro for a reason.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;If you want one sentence to take away: run Sonnet 5 by default and escalate to Opus 5 on the specific paths where judgment matters more than throughput.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the benchmarks actually say
&lt;/h2&gt;

&lt;p&gt;There is a wrinkle worth knowing before you compare scores. Anthropic evaluated these two models on &lt;strong&gt;different suites&lt;/strong&gt;, so there is no clean head-to-head table, and anyone who publishes one has filled in gaps with guesses.&lt;/p&gt;

&lt;p&gt;Here is what was actually published for Sonnet 5:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Benchmark&lt;/th&gt;
&lt;th&gt;Sonnet 5&lt;/th&gt;
&lt;th&gt;Sonnet 4.6&lt;/th&gt;
&lt;th&gt;Opus 4.8&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;SWE-bench Verified&lt;/td&gt;
&lt;td&gt;72.7%&lt;/td&gt;
&lt;td&gt;62.3%&lt;/td&gt;
&lt;td&gt;79.4%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Terminal-bench&lt;/td&gt;
&lt;td&gt;76.1%&lt;/td&gt;
&lt;td&gt;55.4%&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;GPQA Diamond&lt;/td&gt;
&lt;td&gt;78.0%&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MMMU&lt;/td&gt;
&lt;td&gt;76.3%&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MathVista&lt;/td&gt;
&lt;td&gt;76.6%&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CharacterEval&lt;/td&gt;
&lt;td&gt;90.3%&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;td&gt;not published&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;And here is what was published for Opus 5:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;State of the art on coding and knowledge work, measured on Frontier-Bench and GDPval-AA.&lt;/li&gt;
&lt;li&gt;First place on Zapier's AutomationBench for end-to-end task completion.&lt;/li&gt;
&lt;li&gt;An ARC-AGI 3 score roughly three times the next-best model.&lt;/li&gt;
&lt;li&gt;A misaligned-behavior score of 2.3, the lowest of Anthropic's recent releases.&lt;/li&gt;
&lt;li&gt;Matches Claude Fable 5 on intelligence at approximately half the cost.&lt;/li&gt;
&lt;li&gt;A fast mode that runs about 2.5x quicker.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Notice what is missing: &lt;strong&gt;Anthropic did not publish a SWE-bench Verified number for Opus 5.&lt;/strong&gt; So the honest comparison on classic coding benchmarks is Sonnet 5 at 72.7% against Opus 4.8 at 79.4%, with Opus 5 positioned above Opus 4.8 on the newer agentic and knowledge-work suites. Treat any "Opus 5 scores X% on SWE-bench" claim you find elsewhere as unsourced.&lt;/p&gt;

&lt;p&gt;The practical read: Sonnet 5 closed most of the gap to the previous Opus generation on straightforward coding. Opus 5's advantage shows up in long-horizon agent work, self-verification, and problems where the model has to decide what the task even is.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it actually costs
&lt;/h2&gt;

&lt;p&gt;List prices per million tokens:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Model&lt;/th&gt;
&lt;th&gt;Input&lt;/th&gt;
&lt;th&gt;Output&lt;/th&gt;
&lt;th&gt;Notes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Sonnet 5&lt;/td&gt;
&lt;td&gt;$2&lt;/td&gt;
&lt;td&gt;$10&lt;/td&gt;
&lt;td&gt;Introductory pricing through August 31, 2026&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonnet 5&lt;/td&gt;
&lt;td&gt;$3&lt;/td&gt;
&lt;td&gt;$15&lt;/td&gt;
&lt;td&gt;Standard pricing from September 1, 2026&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Opus 5&lt;/td&gt;
&lt;td&gt;$5&lt;/td&gt;
&lt;td&gt;$25&lt;/td&gt;
&lt;td&gt;Same as Opus 4.8&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Headline math says Opus 5 costs 1.67x Sonnet 5 at standard pricing, and 2.5x during the introductory window. That understates Sonnet 5's real cost, because &lt;strong&gt;Sonnet 5 ships a new tokenizer that counts the same text as 1.0x to 1.35x more tokens.&lt;/strong&gt; You pay per token, not per word, so that inflation lands on your invoice.&lt;/p&gt;

&lt;p&gt;Work a concrete example. Take a job that a baseline tokenizer counts as 1,000,000 input tokens and 200,000 output tokens:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Scenario&lt;/th&gt;
&lt;th&gt;Input cost&lt;/th&gt;
&lt;th&gt;Output cost&lt;/th&gt;
&lt;th&gt;Total&lt;/th&gt;
&lt;th&gt;Opus 5 premium&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Opus 5&lt;/td&gt;
&lt;td&gt;$5.00&lt;/td&gt;
&lt;td&gt;$5.00&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$10.00&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;baseline&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonnet 5 standard, no inflation&lt;/td&gt;
&lt;td&gt;$3.00&lt;/td&gt;
&lt;td&gt;$3.00&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$6.00&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;1.67x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonnet 5 standard, 1.35x inflation&lt;/td&gt;
&lt;td&gt;$4.05&lt;/td&gt;
&lt;td&gt;$4.05&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$8.10&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;1.23x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonnet 5 intro, no inflation&lt;/td&gt;
&lt;td&gt;$2.00&lt;/td&gt;
&lt;td&gt;$2.00&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$4.00&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;2.50x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonnet 5 intro, 1.35x inflation&lt;/td&gt;
&lt;td&gt;$2.70&lt;/td&gt;
&lt;td&gt;$2.70&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$5.40&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;1.85x&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;That 1.23x row is the one that should change your thinking. On text-heavy workloads that tokenize badly, at standard pricing, Opus 5 costs about 23% more than Sonnet 5 rather than 67% more. If judgment quality matters on that path at all, a 23% premium is easy to justify.&lt;/p&gt;

&lt;p&gt;Two caveats so you use this honestly. The inflation range is 1.0x to 1.35x depending on your content, and where you land is an empirical question about your own data. And the September 1 price change means any cost model you build this month needs revisiting. Run 1,000 real requests through both models, compare your actual billed token counts, and decide from your numbers instead of this table.&lt;/p&gt;

&lt;h2&gt;
  
  
  A routing rule you can ship
&lt;/h2&gt;

&lt;p&gt;Most teams do not need a clever classifier. A static route based on task type captures nearly all of the savings:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Default to Sonnet 5.&lt;/strong&gt; Content, chat, summaries, tagging, ordinary code changes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Escalate to Opus 5 on three triggers:&lt;/strong&gt; the task requires more than roughly ten tool calls, the task is architectural or ambiguous, or a wrong answer is expensive to reverse.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Escalate on retry.&lt;/strong&gt; If Sonnet 5's output fails validation twice, retry once on Opus 5 instead of a third time on Sonnet 5. This is the highest-return rule on the list and it takes about six lines of code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Never hardcode the model name.&lt;/strong&gt; Anthropic shipped two frontier models in 25 days. Whatever you pin today will be stale within a quarter.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Point four is where most of the long-term pain lives. If your model identifiers are compiled into your application, every model release becomes a pull request, a review, and a deploy.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keep model config out of your codebase
&lt;/h2&gt;

&lt;p&gt;Store your routing configuration as content instead. Then swapping Sonnet 5 for Sonnet 5.1 is a field edit that takes effect immediately, with no rebuild.&lt;/p&gt;

&lt;p&gt;Install the 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;Define the routing table as an object in Cosmic and read it at runtime:&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="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="o"&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="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="o"&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;type&lt;/span&gt; &lt;span class="nx"&gt;ModelRoute&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;default_model&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;escalation_model&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;escalate_after_failures&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&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;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getModelRoute&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ModelRoute&lt;/span&gt;&lt;span class="o"&gt;&amp;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;object&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;model-config&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;production&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;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;0&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;object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;metadata&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;ModelRoute&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;Use it at the call site:&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;route&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getModelRoute&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;route&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;default_model&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;        &lt;span class="c1"&gt;// "claude-sonnet-5"&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isArchitectural&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;task&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;failures&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="nx"&gt;route&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;escalate_after_failures&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;route&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;escalation_model&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;       &lt;span class="c1"&gt;// "claude-opus-5"&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;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;runTask&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;task&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When the next model lands, a non-engineer updates one field in the dashboard and production picks it up. No deploy, no pull request, no engineer in the loop. Cosmic exposes this over a REST API and the TypeScript SDK, so the same config is readable from any framework or runtime you use.&lt;/p&gt;

&lt;p&gt;For the previous generation's version of this decision, see &lt;a href="https://www.cosmicjs.com/blog/claude-sonnet-45-vs-opus-45-a-real-world-comparison" rel="noopener noreferrer"&gt;Sonnet 4.5 vs Opus 4.5&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Frequently asked questions
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Is Opus 5 better than Sonnet 5?&lt;/strong&gt;&lt;br&gt;
On ambiguous reasoning, long autonomous agent runs, and self-verification, yes. On cost per acceptable output for high-volume tasks, Sonnet 5 wins clearly. They are built for different jobs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What does Claude Sonnet 5 cost?&lt;/strong&gt;&lt;br&gt;
$2 per million input tokens and $10 per million output tokens through August 31, 2026, moving to $3 and $15 on September 1, 2026.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What does Claude Opus 5 cost?&lt;/strong&gt;&lt;br&gt;
$5 per million input tokens and $25 per million output tokens, unchanged from Opus 4.8.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Did Anthropic publish a SWE-bench Verified score for Opus 5?&lt;/strong&gt;&lt;br&gt;
No. Sonnet 5 scored 72.7% and Opus 4.8 scored 79.4%. Opus 5's published results cover Frontier-Bench, GDPval-AA, Zapier AutomationBench, and ARC-AGI 3.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Which Claude model should I use for coding?&lt;/strong&gt;&lt;br&gt;
Sonnet 5 for the majority of day-to-day work. Escalate to Opus 5 for architecture, cross-cutting refactors, and anything where you cannot cheaply verify the result.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why do my Sonnet 5 token counts look higher than expected?&lt;/strong&gt;&lt;br&gt;
Sonnet 5 uses a new tokenizer that counts the same text as 1.0x to 1.35x more tokens than the previous generation. Compare billed tokens, not word counts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Build on infrastructure that outlives the model
&lt;/h2&gt;

&lt;p&gt;Anthropic shipped two frontier models in under a month. The teams handling that well are the ones that never put a model name in a source file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.cosmicjs.com?utm_source=devto&amp;amp;utm_medium=social&amp;amp;utm_campaign=claude-sonnet-5-vs-opus-5" rel="noopener noreferrer"&gt;Cosmic&lt;/a&gt; is an AI-powered headless CMS where your content and your configuration both live behind a REST API and a TypeScript SDK. Model choice becomes a content decision, editable by anyone on your team, live in production the moment it is saved.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup?utm_source=devto&amp;amp;utm_medium=social&amp;amp;utm_campaign=claude-sonnet-5-vs-opus-5" rel="noopener noreferrer"&gt;Start free&lt;/a&gt; on the Free plan with 1 Bucket, 2 team members, and 1,000 Objects. No credit card required. If you want to talk through a specific architecture, &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;book 20 minutes with our CEO&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Bun vs Node vs Deno in 2026: How to Choose a JavaScript Runtime</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 31 Jul 2026 22:05:36 +0000</pubDate>
      <link>https://dev.to/tonyspiro/bun-vs-node-vs-deno-in-2026-how-to-choose-a-javascript-runtime-53ce</link>
      <guid>https://dev.to/tonyspiro/bun-vs-node-vs-deno-in-2026-how-to-choose-a-javascript-runtime-53ce</guid>
      <description>&lt;p&gt;Three JavaScript runtimes are now viable for production work: Node.js, Deno, and Bun. That is a genuinely good problem to have, and it makes the choice harder than it was when Node was the only answer.&lt;/p&gt;

&lt;p&gt;Most runtime comparisons you will find lead with benchmark charts. We are going to skip those, and the reason is worth stating plainly: published runtime benchmarks are almost always produced by the runtime's own team, measured on a workload chosen to flatter it. Your API is not that workload. The numbers that matter are the ones you measure on your own code, and we show you how to get them at the end of this post.&lt;/p&gt;

&lt;p&gt;What this guide covers instead is the set of differences that are stable, documented, and actually decide the outcome: ecosystem depth, how each runtime handles TypeScript, what ships in the box, the security model, and where you can deploy.&lt;/p&gt;




&lt;h2&gt;
  
  
  The short version
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Node.js&lt;/th&gt;
&lt;th&gt;Deno&lt;/th&gt;
&lt;th&gt;Bun&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Best for&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Anything where ecosystem risk matters&lt;/td&gt;
&lt;td&gt;Security-sensitive and web-standard code&lt;/td&gt;
&lt;td&gt;Fast local dev and all-in-one tooling&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;TypeScript&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Needs a build step or a loader&lt;/td&gt;
&lt;td&gt;Runs &lt;code&gt;.ts&lt;/code&gt; directly&lt;/td&gt;
&lt;td&gt;Runs &lt;code&gt;.ts&lt;/code&gt; directly&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Package manager&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;npm, pnpm, yarn&lt;/td&gt;
&lt;td&gt;npm specifiers plus JSR&lt;/td&gt;
&lt;td&gt;Built in (&lt;code&gt;bun install&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Test runner&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Built in&lt;/td&gt;
&lt;td&gt;Built in&lt;/td&gt;
&lt;td&gt;Built in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Bundler&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;External&lt;/td&gt;
&lt;td&gt;Built in&lt;/td&gt;
&lt;td&gt;Built in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Permissions&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Opt-in, still maturing&lt;/td&gt;
&lt;td&gt;Deny by default&lt;/td&gt;
&lt;td&gt;Opt-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Hosting support&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Everywhere&lt;/td&gt;
&lt;td&gt;Good and growing&lt;/td&gt;
&lt;td&gt;Good and growing&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;If you want the one-line answer: pick &lt;strong&gt;Node&lt;/strong&gt; when the cost of an ecosystem surprise is high, pick &lt;strong&gt;Deno&lt;/strong&gt; when you want strict sandboxing and web-standard APIs, pick &lt;strong&gt;Bun&lt;/strong&gt; when developer iteration speed and a single toolchain matter most.&lt;/p&gt;

&lt;p&gt;Most people arrive here weighing a pair rather than all three, so it helps to name the tradeoff in each one. If your question is bun vs node, you are trading ecosystem certainty for a faster toolchain and fewer config files. If it is deno vs node, the deciding factor is the permission model rather than performance, because Deno refuses ambient filesystem and network access that Node grants freely. And if it is bun vs deno, both already run TypeScript directly and ship their own test runner and bundler, so the real choice is the fastest toolchain against the strictest sandbox. The three sections below take those pairings in order.&lt;/p&gt;




&lt;h2&gt;
  
  
  Node.js vs Bun and Deno: the incumbent case
&lt;/h2&gt;

&lt;p&gt;Node is the incumbent, and incumbency is a real technical feature. Every hosting provider supports it, every observability vendor has an agent for it, every obscure npm package was tested against it, and every Stack Overflow answer assumes it. When something breaks at 2am, Node is the runtime most likely to have a documented answer already written.&lt;/p&gt;

&lt;p&gt;Node has also closed much of the gap that made the alternatives attractive in the first place. It ships a built-in test runner, native ESM support alongside CommonJS, a built-in watch mode, and a permission model that continues to develop release over release. A lot of the "you need Deno for that" arguments from a few years ago no longer hold.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where Node costs you:&lt;/strong&gt; TypeScript still wants a build step or a loader in most setups, and the toolchain is assembled rather than provided. A typical project pulls in a package manager, a bundler, a transpiler, a test runner, and a linter, each with its own config file and its own upgrade cadence. That assembly is flexible, and it is also the single biggest source of setup friction in the JavaScript ecosystem.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Choose Node if:&lt;/strong&gt; you are shipping something you will maintain for years, you have compliance or vendor requirements, or you depend on native modules that only ever get tested against Node.&lt;/p&gt;




&lt;h2&gt;
  
  
  Deno vs Node: the security model
&lt;/h2&gt;

&lt;p&gt;Deno's defining decision is that code gets no ambient permissions. A Deno process cannot read the filesystem, open a network connection, or read environment variables unless you granted that specific capability at launch. Every other runtime here works the opposite way: any dependency you install can do anything your process can do.&lt;/p&gt;

&lt;p&gt;That matters more every year. Supply chain attacks against package registries are now routine, and "this transitive dependency exfiltrated our environment variables" is a real class of incident. Deno makes it structurally harder, and no amount of care in Node or Bun gives you the same guarantee.&lt;/p&gt;

&lt;p&gt;Beyond the sandbox, Deno leans hard on web standards. &lt;code&gt;fetch&lt;/code&gt;, &lt;code&gt;Request&lt;/code&gt;, &lt;code&gt;Response&lt;/code&gt;, &lt;code&gt;URL&lt;/code&gt;, and Web Streams are the native vocabulary, so code you write for a Deno server often moves to a browser, a service worker, or an edge function with little change. It runs TypeScript directly, ships a formatter, linter, test runner, and bundler, and supports npm packages through &lt;code&gt;npm:&lt;/code&gt; specifiers alongside its own JSR registry.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where Deno costs you:&lt;/strong&gt; npm compatibility is good but not total, and the packages most likely to give you trouble are the ones doing something unusual with native bindings or filesystem layout. You will occasionally spend an afternoon on a dependency that would have just worked on Node.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Choose Deno if:&lt;/strong&gt; you are handling sensitive data, you want dependency risk contained by default, or you are writing code that needs to run at the edge and on a server without a rewrite.&lt;/p&gt;




&lt;h2&gt;
  
  
  Bun vs Node: the toolchain
&lt;/h2&gt;

&lt;p&gt;Bun's pitch is consolidation. One binary is your runtime, package manager, bundler, test runner, and script runner. There is no separate transpiler to configure, no bundler config, and TypeScript and JSX run directly. For a greenfield project, the difference between &lt;code&gt;bun init&lt;/code&gt; and assembling an equivalent Node toolchain is substantial, and it stays substantial every time you onboard a new engineer.&lt;/p&gt;

&lt;p&gt;Bun also ships batteries that other runtimes leave to packages: an HTTP server API, a SQLite driver, a shell API for cross-platform scripting, and a password hashing implementation. Fewer dependencies means less to audit and less to upgrade.&lt;/p&gt;

&lt;p&gt;Compatibility was Bun's weakest point early on and is now its strongest argument. It implements Node's APIs deliberately so that existing projects and existing npm packages run unmodified, which makes it realistic to adopt Bun in a codebase you did not start from scratch.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where Bun costs you:&lt;/strong&gt; it is the youngest of the three. The edges you hit will be less documented, and the engineer who hits one is more likely to be the first person to hit it. Some teams also use Bun only as a package manager and test runner while continuing to run Node in production, which is a legitimate and low-risk way to get most of the benefit.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Choose Bun if:&lt;/strong&gt; you are starting something new, your team is small enough that toolchain friction is a real tax, or your test suite and install times are actively slowing you down.&lt;/p&gt;




&lt;h2&gt;
  
  
  Your content layer should not care
&lt;/h2&gt;

&lt;p&gt;One thing worth checking before you commit: whether the services your app depends on will follow you across runtimes.&lt;/p&gt;

&lt;p&gt;An API-first content layer is portable by construction. The official Cosmic TypeScript SDK is standard JavaScript over a REST API with no native bindings, so the same code runs unchanged on all three runtimes, and in edge functions and React Server Components as well.&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="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="o"&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="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="o"&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;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&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;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;Install it with &lt;code&gt;npm install @cosmicjs/sdk&lt;/code&gt;, &lt;code&gt;bun add @cosmicjs/sdk&lt;/code&gt;, or a &lt;code&gt;npm:@cosmicjs/sdk&lt;/code&gt; specifier on Deno. The application code is identical in all three cases. Runtime choice stays a runtime decision and never becomes a content migration.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to actually decide
&lt;/h2&gt;

&lt;p&gt;Skip the benchmark blog posts, including the ones that favor us. Run this instead.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Test your real dependency tree first.&lt;/strong&gt; Take your existing &lt;code&gt;package.json&lt;/code&gt;, install it on each candidate runtime, and run your test suite. This single step eliminates more options than any performance measurement will, and it takes an afternoon. A runtime that cannot install your dependencies is not a candidate no matter how fast it is.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Measure your workload, not a synthetic one.&lt;/strong&gt; Put each runtime behind the same load generator, serving your actual routes against your actual database, and compare p95 and p99 latency under a concurrency level you expect in production. Average throughput on a hello-world handler predicts nothing about your app. If the difference you measure is within noise, and for many CRUD APIs it will be, then performance is not your deciding factor and you should choose on tooling and risk instead.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Confirm your deployment target.&lt;/strong&gt; Check that your hosting platform, your CI runner, your APM vendor, and your container base image all support the runtime you want. Node passes this trivially. The other two usually pass, and "usually" is worth verifying before you write code rather than after.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Price the migration honestly.&lt;/strong&gt; Moving an existing production service between runtimes is a real project with a real regression risk. The upside has to be large enough to justify it. New services are where switching costs are near zero, so that is where experimenting belongs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Consider splitting the decision.&lt;/strong&gt; Using Bun for local development, installs, and tests while deploying on Node is a common and sensible arrangement. You get the fast toolchain where it saves you time daily, and the boring runtime where reliability matters most.&lt;/p&gt;




&lt;h2&gt;
  
  
  The honest conclusion
&lt;/h2&gt;

&lt;p&gt;For most teams shipping a web application in 2026, all three runtimes will work. That is the actual state of the ecosystem, and any post that tells you one of them is obviously correct for everyone is selling something.&lt;/p&gt;

&lt;p&gt;Node remains the lowest-risk default and has quietly absorbed most of the features that once made it feel dated. Deno is the right call when dependency risk is a genuine threat model rather than a hypothetical. Bun is the most pleasant to develop against and the easiest to start with, and its compatibility work has made it a reasonable production choice rather than an experiment.&lt;/p&gt;

&lt;p&gt;Pick based on your team's risk tolerance and where your friction actually is. Then make sure the rest of your stack, your content layer included, does not lock the decision in.&lt;/p&gt;




&lt;h2&gt;
  
  
  FAQ
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Is Bun production ready in 2026?
&lt;/h3&gt;

&lt;p&gt;Yes, for most workloads. Bun implements Node's APIs deliberately so existing npm packages and projects run unmodified, and teams are running it in production. The remaining risk is maturity rather than capability: fewer engineers have hit any given edge case before you. Teams that want the tooling benefit with minimal risk often use Bun for installs, tests, and local development while deploying on Node.&lt;/p&gt;

&lt;h3&gt;
  
  
  Can I run npm packages on Deno?
&lt;/h3&gt;

&lt;p&gt;Yes, through &lt;code&gt;npm:&lt;/code&gt; specifiers, and compatibility covers the large majority of the registry. Packages that rely on native bindings or unusual filesystem assumptions are the ones most likely to need work. Test your actual dependency tree before committing.&lt;/p&gt;

&lt;h3&gt;
  
  
  Which JavaScript runtime is fastest?
&lt;/h3&gt;

&lt;p&gt;It depends entirely on the workload, and any single answer to this question is marketing. Bun and Deno both publish favorable benchmarks against Node, and those benchmarks measure workloads their teams selected. For a typical API that spends most of its time waiting on a database or an upstream service, runtime differences are frequently within measurement noise. Benchmark your own routes under realistic concurrency and compare p95 latency before you let performance drive the decision.&lt;/p&gt;

&lt;h3&gt;
  
  
  Should I migrate an existing Node app to Bun or Deno?
&lt;/h3&gt;

&lt;p&gt;Usually not on its own merits. Migrating a production service carries real regression risk, and the payoff has to be large to justify it. Adopt a new runtime on a new service where switching costs are near zero, learn its failure modes there, and revisit migration once you have operational experience.&lt;/p&gt;

&lt;h3&gt;
  
  
  Do I still need TypeScript build tooling?
&lt;/h3&gt;

&lt;p&gt;On Deno and Bun, no: both execute &lt;code&gt;.ts&lt;/code&gt; files directly. On Node you still want a build step or a loader for most setups. Note that running TypeScript directly is not the same as type checking it, and Deno and Bun both skip type checking at runtime by design, so keep &lt;code&gt;tsc --noEmit&lt;/code&gt; in CI regardless of runtime.&lt;/p&gt;

&lt;h3&gt;
  
  
  Does a headless CMS work the same across all three runtimes?
&lt;/h3&gt;

&lt;p&gt;If it is API-first, yes. The Cosmic TypeScript SDK is standard JavaScript over a REST API with no native dependencies, so identical application code runs on Node, Deno, and Bun, plus edge runtimes and React Server Components.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Originally published on the &lt;a href="https://www.cosmicjs.com/blog/bun-vs-node-vs-deno-2026" rel="noopener noreferrer"&gt;Cosmic blog&lt;/a&gt;. Cosmic is an AI-powered headless CMS with a REST API, TypeScript SDK, and AI Agents that live in Slack, WhatsApp, and Telegram. &lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Try it free, no credit card required.&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>node</category>
      <category>typescript</category>
    </item>
    <item>
      <title>How to Connect Claude Code to Your CMS with MCP</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Thu, 30 Jul 2026 22:08:46 +0000</pubDate>
      <link>https://dev.to/tonyspiro/how-to-connect-claude-code-to-your-cms-with-mcp-3n95</link>
      <guid>https://dev.to/tonyspiro/how-to-connect-claude-code-to-your-cms-with-mcp-3n95</guid>
      <description>&lt;p&gt;Claude Code is fluent in your repository and blind to your content. It can refactor the component that renders your blog, but ask it to publish the post that component displays and it has nowhere to look. The Model Context Protocol (MCP) closes that gap. It gives Claude Code a set of tools it can call against your CMS directly, so reading and writing content happens in the same conversation as the code.&lt;/p&gt;

&lt;p&gt;This guide connects Claude Code to a Cosmic bucket. With the hosted endpoint it takes about five minutes and requires no install.&lt;/p&gt;

&lt;h2&gt;
  
  
  What MCP actually gives Claude Code
&lt;/h2&gt;

&lt;p&gt;MCP is an open protocol for exposing tools to AI assistants. The Cosmic MCP server implements it and exposes &lt;strong&gt;18 tools&lt;/strong&gt; across four areas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Objects&lt;/strong&gt; (5 tools): list, get, create, update, and delete content&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Media&lt;/strong&gt; (4 tools): list, get, upload, and delete files&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Object Types&lt;/strong&gt; (5 tools): list, get, create, update, and delete content models&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Generation&lt;/strong&gt; (4 tools): generate text, images, video, and audio into your bucket&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once connected, "publish the MCP draft and generate a hero image for it" resolves to real tool calls against your bucket. No browser tab, no copy-paste, no manual export.&lt;/p&gt;

&lt;p&gt;There are two ways to connect:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Hosted MCP (recommended):&lt;/strong&gt; point your client at &lt;code&gt;https://mcp.cosmicjs.com/v1/buckets/{your-bucket-slug}&lt;/code&gt; and authenticate with your bucket keys. Nothing to install.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Self-hosted (stdio):&lt;/strong&gt; run the &lt;code&gt;@cosmicjs/mcp&lt;/code&gt; npm package locally via &lt;code&gt;npx&lt;/code&gt;. Useful for offline work, or when you want the MCP process running inside your own dev environment.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Before you start
&lt;/h2&gt;

&lt;p&gt;You need three things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;A Cosmic bucket.&lt;/strong&gt; The Free plan is $0/month and includes 1 Bucket, 2 team members, and 1,000 Objects, which is more than enough to follow along. &lt;a href="https://app.cosmicjs.com/signup?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=connect-claude-code-to-cms-with-mcp" rel="noopener noreferrer"&gt;Start for free&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Your bucket slug, read key, and write key.&lt;/strong&gt; Step 1 below covers where to find them.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Claude Code installed.&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The hosted path needs no local runtime at all. Node is only required if you choose the self-hosted stdio option, since that runs through &lt;code&gt;npx&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Get your bucket credentials
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Log in to the &lt;a href="https://app.cosmicjs.com" rel="noopener noreferrer"&gt;Cosmic dashboard&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Navigate to your bucket&lt;/li&gt;
&lt;li&gt;Go to &lt;strong&gt;Settings&lt;/strong&gt; -&amp;gt; &lt;strong&gt;API Access&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Copy your &lt;strong&gt;bucket slug&lt;/strong&gt;, &lt;strong&gt;read key&lt;/strong&gt;, and &lt;strong&gt;write key&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A recommendation before you paste anything: start with the read key only. Cosmic issues separate read and write keys per bucket, so you can give Claude Code full visibility into your content while making it structurally incapable of changing it. Add the write key once you trust the setup. The read-only vs full access section below covers exactly what changes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Connect with hosted MCP (recommended)
&lt;/h2&gt;

&lt;p&gt;Claude Code picks up project-scoped MCP servers from a &lt;code&gt;.mcp.json&lt;/code&gt; file at the root of your repository. Create it with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"cosmic"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://mcp.cosmicjs.com/v1/buckets/your-bucket-slug"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"headers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"Authorization"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Bearer your-read-key:your-write-key"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace &lt;code&gt;your-bucket-slug&lt;/code&gt;, &lt;code&gt;your-read-key&lt;/code&gt;, and &lt;code&gt;your-write-key&lt;/code&gt; with the values from Step 1. The endpoint supports the streamable-HTTP MCP transport.&lt;/p&gt;

&lt;h3&gt;
  
  
  How the authorization header works
&lt;/h3&gt;

&lt;p&gt;Cosmic packs both keys into a single bearer token, separated by a colon. The write key is the part after the colon:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Read-only access
Authorization: Bearer rk_abc123def456

# Full access (read + write)
Authorization: Bearer rk_abc123def456:wk_zyx987wvu654
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Omit the colon and the write key for read-only access. If your client cannot send a colon-packed token, you can pass the write key out-of-band using the &lt;code&gt;X-Cosmic-Write-Key&lt;/code&gt; header instead.&lt;/p&gt;

&lt;p&gt;One housekeeping note: &lt;code&gt;.mcp.json&lt;/code&gt; now contains live credentials, so add it to &lt;code&gt;.gitignore&lt;/code&gt; before your next commit.&lt;/p&gt;

&lt;p&gt;The same &lt;code&gt;mcpServers&lt;/code&gt; block works for Claude Desktop and Cursor. The &lt;a href="https://www.cosmicjs.com/docs/mcp-server?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=connect-claude-code-to-cms-with-mcp" rel="noopener noreferrer"&gt;MCP server docs&lt;/a&gt; list the exact config file paths for each client, including &lt;code&gt;~/Library/Application Support/Claude/claude_desktop_config.json&lt;/code&gt; on macOS and &lt;code&gt;.cursor/mcp.json&lt;/code&gt; for Cursor.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2, alternative: self-hosted over stdio
&lt;/h2&gt;

&lt;p&gt;If you would rather run the server yourself, the &lt;code&gt;@cosmicjs/mcp&lt;/code&gt; package ships a stdio binary. Point Claude Code at &lt;code&gt;npx&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"cosmic"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npx"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"@cosmicjs/mcp"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"COSMIC_BUCKET_SLUG"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"your-bucket-slug"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"COSMIC_READ_KEY"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"your-read-key"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"COSMIC_WRITE_KEY"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"your-write-key"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The stdio binary reads credentials from environment variables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;COSMIC_BUCKET_SLUG&lt;/code&gt; (required): your Cosmic bucket slug&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;COSMIC_READ_KEY&lt;/code&gt; (required): bucket read key for read operations&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;COSMIC_WRITE_KEY&lt;/code&gt; (optional): bucket write key for write operations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Leave &lt;code&gt;COSMIC_WRITE_KEY&lt;/code&gt; out entirely for a read-only server. You can also install it globally with &lt;code&gt;npm install -g @cosmicjs/mcp&lt;/code&gt; instead of resolving it through &lt;code&gt;npx&lt;/code&gt; each time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Verify the connection
&lt;/h2&gt;

&lt;p&gt;Restart Claude Code and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should see &lt;code&gt;cosmic&lt;/code&gt; listed with its tools. Then confirm it can actually reach your bucket by asking for something only your bucket knows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List all object types in my Cosmic bucket
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Claude Code should call &lt;code&gt;cosmic_types_list&lt;/code&gt; and return your real content models. If it returns your object types, the connection is live and correctly authenticated.&lt;/p&gt;

&lt;h2&gt;
  
  
  The 18 tools, and when each one fires
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Objects
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;cosmic_objects_list&lt;/code&gt;: list or search objects, filtered by type, status, and locale, with pagination&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_objects_get&lt;/code&gt;: fetch a single object by ID or slug, with optional metafield, depth, and locale params&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_objects_create&lt;/code&gt;: create a new object with title, slug, status, and metafields (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_objects_update&lt;/code&gt;: update an existing object's title, slug, status, or metafield values (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_objects_delete&lt;/code&gt;: permanently delete an object by ID (write key required)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Media
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;cosmic_media_list&lt;/code&gt;: list media files, optionally scoped to a folder&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_media_get&lt;/code&gt;: fetch metadata and the imgix URL for a single file&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_media_upload&lt;/code&gt;: upload from a URL or base64 payload into the media library (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_media_delete&lt;/code&gt;: delete a media file (write key required)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Object Types
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;cosmic_types_list&lt;/code&gt;: list every object type in the bucket&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_types_get&lt;/code&gt;: fetch the full schema for one object type, including metafields, options, and helper text&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_types_create&lt;/code&gt;: create a new object type with a metafield schema (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_types_update&lt;/code&gt;: update a type's schema or metafield definitions (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_types_delete&lt;/code&gt;: delete an object type and all its objects (write key required)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  AI Generation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;cosmic_ai_generate_text&lt;/code&gt;: generate text with optional context pulled from existing objects in your bucket&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_ai_generate_image&lt;/code&gt;: generate an image and store it in the media library (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_ai_generate_video&lt;/code&gt;: generate video with Google Veo and store it in the media library (write key required)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_ai_generate_audio&lt;/code&gt;: generate narration via OpenAI TTS, 13 voices available, stored in the media library (write key required)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The two tools worth calling out for agent work are &lt;code&gt;cosmic_types_list&lt;/code&gt; and &lt;code&gt;cosmic_types_get&lt;/code&gt;. An agent that reads your schema before writing produces valid metafields on the first attempt instead of guessing key names and failing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Read-only vs full access
&lt;/h2&gt;

&lt;p&gt;This is the part to get right before you point an agent at a production bucket.&lt;/p&gt;

&lt;p&gt;With a read-only token, every write tool is blocked with a clear error message and read tools work as normal. Specifically, the blocked set is every &lt;code&gt;*_create&lt;/code&gt;, &lt;code&gt;*_update&lt;/code&gt;, and &lt;code&gt;*_delete&lt;/code&gt; tool, plus all four AI generation tools, since each of those writes generated assets into your media library.&lt;/p&gt;

&lt;p&gt;So a read-only setup still lets Claude Code explore your content models, read every object, and reason about your content while it writes application code. It just cannot mutate anything. That is a good default for a first session against real data.&lt;/p&gt;

&lt;h2&gt;
  
  
  What this looks like in practice
&lt;/h2&gt;

&lt;p&gt;With the server connected, these are all single prompts:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List all blog posts in my Cosmic bucket
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a new blog post titled "Getting Started with MCP" with the content
"This is an introduction to the Model Context Protocol..."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Update the blog post with ID "abc123" to change its status to published
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Show me all images in the "blog-images" folder
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a new object type called "Products" with fields for name, price,
description, and image
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Generate audio narration of "Welcome to Cosmic CMS" using the "nova" voice
and upload it to my media library
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The schema management case is the one developers tend to underestimate. Modeling content is usually a dashboard task. Through MCP it becomes something you can do from the same prompt where you are scaffolding the components that will consume it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Agent scope: when the human has no Cosmic account yet
&lt;/h2&gt;

&lt;p&gt;The hosted endpoint exposes a second, smaller scope at &lt;code&gt;https://mcp.cosmicjs.com/v1/agent&lt;/code&gt; for the agent signup flow. It lets an AI agent provision a brand new Cosmic project and bucket on behalf of someone who does not have an account, without leaving the MCP transport. It exposes three tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;cosmic_agent_signup&lt;/code&gt; (no auth): creates an unclaimed project and bucket tied to a &lt;code&gt;human_email&lt;/code&gt;. Returns the &lt;code&gt;agent_key&lt;/code&gt;, &lt;code&gt;read_key&lt;/code&gt;, &lt;code&gt;write_key&lt;/code&gt;, and a &lt;code&gt;claim_url&lt;/code&gt;. Cosmic emails the human a 6-digit OTP.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_agent_verify&lt;/code&gt; (requires &lt;code&gt;agent_key&lt;/code&gt;): submits the OTP, lifts restricted-mode limits, and enables AI generation.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cosmic_agent_status&lt;/code&gt; (requires &lt;code&gt;agent_key&lt;/code&gt;): checks claim status, remaining limits, and recovers the bucket keys.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;New buckets start in restricted mode: no AI credits, a maximum of 50 objects, and a 5 MB media cap. Unclaimed projects are hard-deleted after 14 days.&lt;/p&gt;

&lt;p&gt;The bucket-scoped tools listed earlier are not available on the agent endpoint, and the agent tools are not available on the bucket endpoint. A single conversation often uses both: the agent signs the human up, captures the returned bucket keys, then switches to the bucket scope to start creating content.&lt;/p&gt;

&lt;h2&gt;
  
  
  MCP server vs Agent Skills
&lt;/h2&gt;

&lt;p&gt;Cosmic offers two things that sound similar and do different jobs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;MCP server&lt;/strong&gt; is for direct content management. It answers "list my blog posts." The AI calls tools that operate on your bucket.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agent Skills&lt;/strong&gt; is for code generation guidance. It answers "build a blog with Cosmic." The AI writes application code using the SDK.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use both. Agent Skills helps Claude Code write code like this:&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="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;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;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;p&gt;The MCP server then lets the same session manage the content that code renders. One tool writes the app, the other operates the data behind it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Guardrails for production buckets
&lt;/h2&gt;

&lt;p&gt;Four habits worth adopting:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Read key first.&lt;/strong&gt; Connect with a read-only token for your first few sessions. Add the write key when you have seen what the agent actually does.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Experiment in a separate bucket.&lt;/strong&gt; Bucket allowances scale with your plan: Free includes 1, Builder ($49/month) includes 2, Team ($299/month) includes 3, and Business ($499/month) includes 5. Point destructive experiments at a bucket you do not mind losing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Treat the delete tools as manual-approval only.&lt;/strong&gt; &lt;code&gt;cosmic_objects_delete&lt;/code&gt;, &lt;code&gt;cosmic_media_delete&lt;/code&gt;, and especially &lt;code&gt;cosmic_types_delete&lt;/code&gt; are permanent, and deleting an object type takes all of its objects with it. Never let an agent call these speculatively.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mind your seats.&lt;/strong&gt; Plans include a set number of team members (Free 2, Builder 3, Team 5, Business 10) and additional users are $29/user/month, so decide who needs dashboard access rather than adding everyone by default.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Troubleshooting
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The server does not appear in &lt;code&gt;/mcp&lt;/code&gt;.&lt;/strong&gt; Confirm &lt;code&gt;.mcp.json&lt;/code&gt; is valid JSON at the repository root and restart Claude Code. Some Claude Code versions want the transport named explicitly, so if a hosted config still will not connect, try adding &lt;code&gt;"type": "http"&lt;/code&gt; alongside &lt;code&gt;url&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;npx&lt;/code&gt; cannot find the package.&lt;/strong&gt; The package name is &lt;code&gt;@cosmicjs/mcp&lt;/code&gt;, scoped, including the &lt;code&gt;@&lt;/code&gt;. Verify Node is installed and on your PATH.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Write tools return an error but reads work.&lt;/strong&gt; Your bearer token is missing the write key. Check that the header is &lt;code&gt;Bearer READ_KEY:WRITE_KEY&lt;/code&gt; with a colon and no spaces, or send the write key via &lt;code&gt;X-Cosmic-Write-Key&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;404 from the hosted endpoint.&lt;/strong&gt; The bucket slug in the URL is wrong. Copy it again from &lt;strong&gt;Settings&lt;/strong&gt; -&amp;gt; &lt;strong&gt;API Access&lt;/strong&gt;, since the slug is not always identical to your project's display name.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tools connect but return nothing.&lt;/strong&gt; Confirm you are pointed at the bucket you think you are. Ask Claude Code to run &lt;code&gt;cosmic_types_list&lt;/code&gt; and compare the result against the dashboard.&lt;/p&gt;

&lt;h2&gt;
  
  
  Next steps
&lt;/h2&gt;

&lt;p&gt;Start with the hosted endpoint and a read-only token. Ask Claude Code to list your object types, then ask it to summarize the content in your bucket. Once that works, add the write key and let it draft something. The full tool reference and per-client config paths live in the &lt;a href="https://www.cosmicjs.com/docs/mcp-server?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=connect-claude-code-to-cms-with-mcp" rel="noopener noreferrer"&gt;MCP server documentation&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Try it yourself.&lt;/strong&gt; Cosmic is an AI-powered headless CMS with a REST API, a TypeScript SDK, and a hosted MCP server. &lt;a href="https://app.cosmicjs.com/signup?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=connect-claude-code-to-cms-with-mcp" rel="noopener noreferrer"&gt;Create a free account&lt;/a&gt; and connect Claude Code in about five minutes. Evaluating Cosmic for a team? &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book a call with Tony&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published on the &lt;a href="https://www.cosmicjs.com/blog/connect-claude-code-to-cms-with-mcp?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=connect-claude-code-to-cms-with-mcp" rel="noopener noreferrer"&gt;Cosmic blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Why Your AI Stack Should Be Model-Agnostic</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Thu, 30 Jul 2026 22:08:15 +0000</pubDate>
      <link>https://dev.to/tonyspiro/why-your-ai-stack-should-be-model-agnostic-3h43</link>
      <guid>https://dev.to/tonyspiro/why-your-ai-stack-should-be-model-agnostic-3h43</guid>
      <description>&lt;p&gt;The AI model landscape shifted three times in the last 90 days.&lt;/p&gt;

&lt;p&gt;Claude Opus 5 shipped. Gemini 3.1 Pro dropped. Kimi K3 landed with competitive benchmark scores.&lt;/p&gt;

&lt;p&gt;If your content infrastructure is wired to a single model, every one of those releases is a decision you have to make under pressure: do we migrate, do we stay, do we fork the integration?&lt;/p&gt;

&lt;p&gt;Model-agnostic infrastructure means you route to the best model for the job, swap when a better option ships, and your content layer stays stable throughout.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem with single-model lock-in
&lt;/h2&gt;

&lt;p&gt;Most teams start with one model because it is the fastest path to shipping. You pick the best available option, wire it into your stack, and move on. That works fine until one of the following happens:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A better model ships at lower cost per token&lt;/li&gt;
&lt;li&gt;Your chosen model has a reliability incident and you need to reroute fast&lt;/li&gt;
&lt;li&gt;A task-specific model outperforms the general-purpose one you standardized on&lt;/li&gt;
&lt;li&gt;Your provider changes pricing, deprecates a version, or shifts rate limits&lt;/li&gt;
&lt;li&gt;Your team wants to benchmark models against each other before committing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;None of these are edge cases. All of them happened in the last quarter.&lt;/p&gt;

&lt;p&gt;When your content workflow is tightly coupled to one model string, any of those events becomes a migration project. When your content infrastructure is model-agnostic, they become a config change.&lt;/p&gt;

&lt;h2&gt;
  
  
  What model-agnostic looks like in practice
&lt;/h2&gt;

&lt;p&gt;Cosmic's AI layer exposes a single, consistent API regardless of which model you route to underneath. The models currently available, organized by cost tier:&lt;/p&gt;

&lt;h3&gt;
  
  
  Budget tier (1x cost multiplier)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;GPT-5 Nano&lt;/li&gt;
&lt;li&gt;GPT-5 Mini&lt;/li&gt;
&lt;li&gt;Claude Haiku 4.5&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Best for: high-volume, low-complexity tasks. Metadata generation, tag extraction, alt text, short summaries.&lt;/p&gt;

&lt;h3&gt;
  
  
  Standard tier (2x cost multiplier)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;GPT-5, GPT-5.2, GPT-5.2 Codex, GPT-5.5&lt;/li&gt;
&lt;li&gt;Claude Sonnet 4.6, Claude Sonnet 5&lt;/li&gt;
&lt;li&gt;Claude Opus 4.7, Claude Opus 4.8&lt;/li&gt;
&lt;li&gt;Gemini 3.1 Pro&lt;/li&gt;
&lt;li&gt;Kimi K3&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Best for: most content workflows. Long-form drafting, structured generation, agentic tasks, code-adjacent content.&lt;/p&gt;

&lt;h3&gt;
  
  
  Premium tier (4x cost multiplier)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Claude Fable 5&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Best for: tasks where output quality directly drives outcomes and cost per call is not the primary constraint.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: confirmed model ID strings from the API docs are &lt;code&gt;claude-opus-5&lt;/code&gt; (API default), &lt;code&gt;gemini-3.1-pro-preview&lt;/code&gt;, &lt;code&gt;gpt-5.2-codex&lt;/code&gt;, and &lt;code&gt;kimi-k3&lt;/code&gt;. Full ID strings for all other models are in the &lt;a href="https://www.cosmicjs.com/docs/api/ai?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=why-your-ai-stack-should-be-model-agnostic" rel="noopener noreferrer"&gt;AI API reference&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Every model above is accessible through the same Cosmic AI API call. You change the &lt;code&gt;model&lt;/code&gt; parameter. Nothing else changes in your integration.&lt;/p&gt;

&lt;h2&gt;
  
  
  Routing by task, not by habit
&lt;/h2&gt;

&lt;p&gt;Model-agnostic infrastructure enables a pattern most teams do not have today: routing different tasks to the model best suited for each one.&lt;/p&gt;

&lt;p&gt;Here is a practical example using the Cosmic TypeScript SDK:&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="na"&gt;writeKey&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-write-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="c1"&gt;// Budget tier: fast, cheap metadata generation at scale&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;metadata&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;claude-haiku-4-5&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Budget tier, 1x cost&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Generate SEO metadata for this blog post: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;postBody&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;300&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Standard tier: long-form drafting&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;draft&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;claude-opus-5&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// API default&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Draft a 1,200-word technical blog post on this topic: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;brief&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Standard tier: multimodal image-aware task&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;altText&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;ai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;gemini-3.1-pro-preview&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// multimodal&lt;/span&gt;
  &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Write accessible alt text for this image&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;media_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;imageUrl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&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;metadata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&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;draft&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&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;altText&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The content layer, your Cosmic bucket, your object types, your structured data, stays identical across all three calls. Only the model changes.&lt;/p&gt;

&lt;p&gt;If you use Cursor or Claude Code as your primary editor, you can &lt;a href="https://www.cosmicjs.com/learn/connect-cosmic-to-cursor-claude-code-with-mcp?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=why-your-ai-stack-should-be-model-agnostic" rel="noopener noreferrer"&gt;connect Cosmic to Cursor or Claude Code with MCP in about 10 minutes&lt;/a&gt; and have your agents managing content directly, regardless of which underlying model you route to.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this matters more now than it did six months ago
&lt;/h2&gt;

&lt;p&gt;The model release cadence has accelerated. In Q2 and Q3 2026 alone: Claude Sonnet 4.6, Claude Opus 5, Gemini 3.1 Pro, GPT-5 and variants, Claude Fable 5, Kimi K3. That is roughly one significant model event every two weeks.&lt;/p&gt;

&lt;p&gt;Teams wired to a single model are making an implicit bet that the model stays best-in-class. That bet has not held for any model over a sustained period. The competitive frontier moves too fast.&lt;/p&gt;

&lt;p&gt;The practical implication: content infrastructure and AI model selection are now separate concerns that should be managed separately. Your CMS should not force you to pick one and stay there.&lt;/p&gt;

&lt;h2&gt;
  
  
  What to do today
&lt;/h2&gt;

&lt;p&gt;If you are building content workflows on Cosmic, three practical steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Audit your model usage.&lt;/strong&gt; Are you defaulting to one model everywhere because that is what you started with, or because it is genuinely the best choice for each task? These are different answers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Route by cost and capability.&lt;/strong&gt; High-volume, low-complexity tasks belong on Budget tier models. Reserve Standard and Premium tier for drafting, reasoning, and tasks where output quality directly affects outcomes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Build model-switching into your workflow from the start.&lt;/strong&gt; If your agent or pipeline hardcodes a model string, extract it to a config variable. The next model release is coming in roughly two weeks.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Start building
&lt;/h2&gt;

&lt;p&gt;Cosmic's full model list and AI API reference is at &lt;a href="https://www.cosmicjs.com/docs/api/ai?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=why-your-ai-stack-should-be-model-agnostic" rel="noopener noreferrer"&gt;cosmicjs.com/docs/api/ai&lt;/a&gt;. Every model listed above runs against the same content layer, so changing models is a config change.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Try it yourself.&lt;/strong&gt; Cosmic is an AI-powered headless CMS with a REST API, a TypeScript SDK, and model-agnostic AI generation built in. &lt;a href="https://app.cosmicjs.com/signup?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=why-your-ai-stack-should-be-model-agnostic" rel="noopener noreferrer"&gt;Create a free account&lt;/a&gt; and route your first call in minutes. Evaluating Cosmic for a team? &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book a call with Tony&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-your-ai-stack-should-be-model-agnostic?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=why-your-ai-stack-should-be-model-agnostic" rel="noopener noreferrer"&gt;Cosmic blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>programming</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Cosmic vs Hygraph: Headless CMS Comparison (2026)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 24 Jul 2026 02:38:55 +0000</pubDate>
      <link>https://dev.to/tonyspiro/cosmic-vs-hygraph-headless-cms-comparison-2026-5962</link>
      <guid>https://dev.to/tonyspiro/cosmic-vs-hygraph-headless-cms-comparison-2026-5962</guid>
      <description>&lt;p&gt;If you're evaluating headless CMS platforms and Hygraph is on your shortlist, you've probably noticed the overlap with Cosmic. Both are API-first, both target developers, and both position themselves as modern alternatives to monolithic CMS platforms. But they make meaningfully different bets on what a headless CMS should do in 2026.&lt;/p&gt;

&lt;p&gt;This comparison covers pricing, API and SDK, developer experience, AI capabilities, team collaboration, and migration path. Every claim is sourced from public documentation and pricing pages.&lt;/p&gt;

&lt;h2&gt;
  
  
  The short version
&lt;/h2&gt;

&lt;p&gt;Cosmic is a full-stack AI-native headless CMS with built-in AI Agents, Workflows, an MCP Server, and a JavaScript/TypeScript SDK. It is built for teams that want content infrastructure and AI tooling in one place.&lt;/p&gt;

&lt;p&gt;Hygraph is a federated content platform that emphasizes content federation (pulling from multiple sources into one graph) and a schema-first content modeling approach. It is strong for complex enterprise content federation use cases.&lt;/p&gt;

&lt;p&gt;The right choice depends on your use case.&lt;/p&gt;

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

&lt;p&gt;&lt;em&gt;Cosmic&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;em&gt;Hygraph&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Free: $0/month, limited API calls, 2 environments, community support&lt;/li&gt;
&lt;li&gt;Growth: $399/month, more environments, higher API limits, email support&lt;/li&gt;
&lt;li&gt;Scale / Enterprise: custom pricing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Hygraph's paid tiers jump steeply from free to Growth at $399/month, making it expensive for small teams. Cosmic's $49 Builder plan gives you a meaningful production-grade entry point before committing to a higher tier.&lt;/p&gt;

&lt;h2&gt;
  
  
  API and SDK
&lt;/h2&gt;

&lt;p&gt;Both platforms are API-first. The difference is in the SDK experience.&lt;/p&gt;

&lt;p&gt;Cosmic ships an official TypeScript SDK with full type safety, a clean object-oriented interface, and built-in AI text generation. Cosmic's REST API covers all CRUD operations and is straightforward to use without the SDK if you prefer.&lt;/p&gt;

&lt;p&gt;Hygraph relies on its REST Content API and a client SDK. Hygraph's heritage is schema/graph-based, which gives it power for complex relational queries but adds setup overhead for teams who want to move fast.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI capabilities
&lt;/h2&gt;

&lt;p&gt;This is where the platforms diverge most sharply.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Cosmic&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI Agents: deploy agents in Slack, WhatsApp, and Telegram that can read and write content, run Workflows, and respond to your team conversationally&lt;/li&gt;
&lt;li&gt;AI Workflows: multi-step automated content pipelines (research, draft, SEO review, publish) running on a schedule or triggered by events&lt;/li&gt;
&lt;li&gt;MCP Server: connect any MCP-compatible AI client directly to your content bucket&lt;/li&gt;
&lt;li&gt;AI Text Generation: generate content using Claude, Gemini, GPT, or Kimi K3 models directly from the Cosmic API and dashboard&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Hygraph&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Hygraph has introduced some AI-assisted content features, primarily around content generation within the editor. It does not offer a native AI Agents layer, conversational Slack/WhatsApp integration, or an MCP Server.&lt;/p&gt;

&lt;p&gt;If your team wants to run AI agents as part of your content operation, Cosmic is the only platform in this comparison that ships that natively today.&lt;/p&gt;

&lt;h2&gt;
  
  
  Developer experience
&lt;/h2&gt;

&lt;p&gt;A few honest differences:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Onboarding:&lt;/strong&gt; Cosmic's free tier requires no credit card and gets you to a working API in minutes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Content modeling:&lt;/strong&gt; Hygraph's schema-first modeling is powerful for complex relational structures. Cosmic's object and metafield system is faster to set up and easier for non-technical team members.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Environments:&lt;/strong&gt; Hygraph offers multiple environments on paid plans. Cosmic's bucket model gives you isolated content contexts per project.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Localization:&lt;/strong&gt; both platforms support localization. Hygraph has deep localization support baked into its schema model. Cosmic supports locale-specific content at the object level.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Team collaboration
&lt;/h2&gt;

&lt;p&gt;Cosmic's AI Agents are built around team collaboration: your marketing team can edit content, trigger Workflows, and query your CMS directly from Slack or WhatsApp, without touching the dashboard. For teams where non-developers need to contribute content without developer bottlenecks, Cosmic's agent layer removes friction in a way that Hygraph's editor-centric model does not replicate.&lt;/p&gt;

&lt;p&gt;Hygraph's collaboration is centered on the content editor and role-based permissions within the dashboard, which works well for teams that live in the CMS UI.&lt;/p&gt;

&lt;h2&gt;
  
  
  Content federation
&lt;/h2&gt;

&lt;p&gt;Hygraph's standout feature is content federation: the ability to define a unified content graph that pulls from multiple third-party sources (Salesforce, commerce platforms, DAMs, etc.) alongside Hygraph-managed content. If your content strategy requires unifying data from many external systems into a single queryable layer, Hygraph's federation model is purpose-built for that.&lt;/p&gt;

&lt;p&gt;Cosmic does not offer native content federation. If federation is your primary requirement, Hygraph is the stronger fit.&lt;/p&gt;

&lt;h2&gt;
  
  
  The honest summary
&lt;/h2&gt;

&lt;p&gt;Choose Hygraph if:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Content federation across multiple external systems is your primary use case&lt;/li&gt;
&lt;li&gt;You need deep schema-first relational content modeling&lt;/li&gt;
&lt;li&gt;You are on a large enterprise contract that needs Hygraph's federation enterprise tier&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Choose Cosmic if:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want AI Agents, Workflows, and an MCP Server as part of your CMS, not a separate integration&lt;/li&gt;
&lt;li&gt;You want your marketing team to manage content from Slack or WhatsApp without developer involvement&lt;/li&gt;
&lt;li&gt;You need a production-grade CMS at $49/month before committing to a higher tier&lt;/li&gt;
&lt;li&gt;You are building on Next.js, Astro, Nuxt, or any JavaScript framework and want a TypeScript-first SDK&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start for free on Cosmic&lt;/a&gt; — no credit card required.&lt;/p&gt;

</description>
      <category>cms</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Migrating from Umbraco to a Headless CMS (2026 Guide)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Fri, 24 Jul 2026 02:38:15 +0000</pubDate>
      <link>https://dev.to/tonyspiro/migrating-from-umbraco-to-a-headless-cms-2026-guide-1em8</link>
      <guid>https://dev.to/tonyspiro/migrating-from-umbraco-to-a-headless-cms-2026-guide-1em8</guid>
      <description>&lt;p&gt;Umbraco has served a lot of teams well for a long time. It is a mature, open-source .NET CMS with a solid editor experience and a large community. But when teams move to a modern JavaScript frontend (React, Next.js, Astro, Nuxt), they hit a familiar friction points: Umbraco's .NET backend doesn't fit naturally into a Node/JS deployment pipeline, the API layer requires configuration work that headless-first platforms handle out of the box, and marketing teams end up bottlenecked waiting on developers for routine content changes.&lt;/p&gt;

&lt;p&gt;This is the migration pattern Tripwire Interactive faced. The game developer behind the Red Orchestra and Killing Floor franchises was running Umbraco when they decided to rebuild their corporate website on a modern React stack. They needed each new game to get a dedicated landing page, and their marketing team needed to manage Blog, Career, and Press content without pulling in a developer every time. They moved to Cosmic.&lt;/p&gt;

&lt;p&gt;Here is how a migration like that works, and what to think about before you start.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why teams leave Umbraco for headless
&lt;/h2&gt;

&lt;p&gt;The common triggers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend rebuild.&lt;/strong&gt; Your team is moving to React, Next.js, Astro, or Nuxt and Umbraco's .NET backend creates a mismatch in the deployment stack.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Marketing team bottleneck.&lt;/strong&gt; Content changes require developer involvement because Umbraco's template system is tightly coupled to the backend.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API-first requirement.&lt;/strong&gt; You need to serve content to a web app, a mobile app, and potentially third-party integrations from one source of truth.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hosting and ops overhead.&lt;/strong&gt; Self-hosted Umbraco requires server maintenance, .NET runtime management, and database ops. A hosted headless CMS moves that off your plate.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What you are migrating
&lt;/h2&gt;

&lt;p&gt;A typical Umbraco-to-headless migration involves four things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Content types (Document Types in Umbraco) → Object Types in your headless CMS&lt;/li&gt;
&lt;li&gt;Content nodes (the actual content tree) → Objects&lt;/li&gt;
&lt;li&gt;Media library → hosted media in your headless CMS&lt;/li&gt;
&lt;li&gt;Frontend templates → your new JavaScript frontend (React, Next.js, etc.)&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Step 1: Audit your Umbraco content model
&lt;/h2&gt;

&lt;p&gt;Before touching anything, export and document your existing Document Types. For each type, note the type name and alias, every property and its data type, any nested content or block list structures, and relationships between types.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Map Document Types to Object Types
&lt;/h2&gt;

&lt;p&gt;In Cosmic, content is organized as Object Types with Metafields. Each Umbraco Document Type becomes a Cosmic Object Type. Each property becomes a Metafield.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Export content from Umbraco
&lt;/h2&gt;

&lt;p&gt;Umbraco's Content Delivery API (available in Umbraco 13+) is the cleanest export path. For older versions, use the Examine index or a custom controller to export content as JSON.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Import content to Cosmic
&lt;/h2&gt;

&lt;p&gt;With your content exported and your Object Types defined, import using the Cosmic JavaScript SDK. Run imports in batches with a small delay between inserts if you have hundreds of objects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Update your frontend
&lt;/h2&gt;

&lt;p&gt;With content in Cosmic, your React or Next.js frontend queries it via the SDK instead of Umbraco's Delivery API. The pattern is the same; only the client changes.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Tripwire got out of it
&lt;/h2&gt;

&lt;p&gt;Tripwire Interactive migrated from Umbraco to Cosmic when rebuilding their corporate site on React. In the words of Owen Liversidge, Lead Developer:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The marketing team can now manage game landing pages, blog posts, career listings, and press releases without filing a ticket.&lt;/p&gt;

&lt;h2&gt;
  
  
  Common migration pitfalls
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rich text with embedded media.&lt;/strong&gt; Migrate media assets first, then find-and-replace URLs in exported content before import.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Nested content / Block List.&lt;/strong&gt; These map to Cosmic repeater or parent metafield groups but the JSON structure differs. Budget extra time for a transform function.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;URL redirects.&lt;/strong&gt; Preserve clean URLs or set up 301 redirects. Google has indexed those URLs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Editor training.&lt;/strong&gt; Budget 30 minutes of walkthrough with your marketing team.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Next steps
&lt;/h2&gt;

&lt;p&gt;Cosmic's free tier is the fastest way to validate the content model before committing to a full migration. Create a bucket, define one or two Object Types mirroring your Umbraco Document Types, and run a small batch import to see how the data lands.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start for free on Cosmic&lt;/a&gt; — no credit card required.&lt;/p&gt;

</description>
      <category>cms</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>The Power of Headless CMS and AI Agents for Modern Content Teams</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Tue, 21 Jul 2026 23:25:26 +0000</pubDate>
      <link>https://dev.to/tonyspiro/the-power-of-headless-cms-and-ai-agents-for-modern-content-teams-149k</link>
      <guid>https://dev.to/tonyspiro/the-power-of-headless-cms-and-ai-agents-for-modern-content-teams-149k</guid>
      <description>&lt;p&gt;The way we create, manage, and deliver content is changing fast. Two technologies are leading that charge: headless CMS architecture and AI agents. On their own, each is powerful. Together, they're transforming how teams build digital experiences.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: This article was written using &lt;a href="https://platform.kimi.ai/docs/guide/kimi-k3-quickstart" rel="noopener noreferrer"&gt;Kimi K3&lt;/a&gt;, Moonshot AI's open-source frontier model. Kimi K3 will be available as a built-in model inside Cosmic soon... stay tuned&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What Is a Headless CMS? (A Quick Refresher)
&lt;/h2&gt;

&lt;p&gt;A traditional CMS bundles your content backend with a specific frontend. Think of the classic monolithic website platforms. A headless CMS removes that constraint by separating content management from presentation entirely. Your content lives in a central hub and is delivered via APIs to anywhere:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Websites and web apps&lt;/li&gt;
&lt;li&gt;Mobile applications&lt;/li&gt;
&lt;li&gt;Smart devices and wearables&lt;/li&gt;
&lt;li&gt;Digital signage and kiosks&lt;/li&gt;
&lt;li&gt;AI agents&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This API-first approach means your content is future-proof. A new channel emerges? You don't rebuild anything. You just connect.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Are AI Agents?
&lt;/h2&gt;

&lt;p&gt;AI agents go beyond simple chatbots or one-off prompts. An AI agent is a system that can perceive, reason, and act, often autonomously, to accomplish goals. Think of agents that can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Research topics and draft content briefs&lt;/li&gt;
&lt;li&gt;Generate and optimize copy for different channels&lt;/li&gt;
&lt;li&gt;Analyze performance data and suggest improvements&lt;/li&gt;
&lt;li&gt;Automate repetitive publishing workflows&lt;/li&gt;
&lt;li&gt;Personalize content for different audience segments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The key difference from basic AI tools: agents don't just respond. They do things. They chain tasks together, make decisions, and interact with other systems through APIs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Headless CMS + AI Agents Work So Well Together
&lt;/h2&gt;

&lt;p&gt;AI agents need structured, accessible data to work with. A headless CMS provides exactly that.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Structured Content Is Agent-Friendly
&lt;/h3&gt;

&lt;p&gt;AI agents thrive on structure. When your content is stored as well-defined objects with clear fields, types, and relationships, agents can read, write, and manipulate it programmatically. No scraping messy HTML. No guessing at page layouts. Just clean, predictable data.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. APIs Are the Perfect Handshake
&lt;/h3&gt;

&lt;p&gt;Because headless CMS platforms expose content through APIs, AI agents can plug in directly. Your agent becomes a first-class citizen in your content workflow, drafting, updating, localizing, and organizing content alongside your human team.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Automation That Actually Scales
&lt;/h3&gt;

&lt;p&gt;Imagine an agent that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Monitors your analytics for underperforming pages&lt;/li&gt;
&lt;li&gt;Rewrites headlines and meta descriptions for better SEO&lt;/li&gt;
&lt;li&gt;Creates localized versions for your international markets&lt;/li&gt;
&lt;li&gt;Submits everything as drafts for human review&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With a headless CMS, this workflow is an afternoon of API integration, not a months-long engineering project.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Humans Stay in Control
&lt;/h3&gt;

&lt;p&gt;The best part of this pairing: the CMS remains your single source of truth with built-in guardrails. Revision history, draft states, role-based permissions, and approval workflows mean AI agents accelerate your team without going rogue. Humans review, refine, and publish. Agents handle the heavy lifting. Your team keeps final say on voice and what goes live.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Use Cases
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Content generation:&lt;/em&gt; Agents draft articles, product descriptions, and landing pages directly into the CMS&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Localization:&lt;/em&gt; Automatically translate and adapt content for global audiences&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;SEO optimization:&lt;/em&gt; Continuously audit and improve metadata, alt text, and internal links&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Content migrations:&lt;/em&gt; Agents intelligently map and transform legacy content into structured models&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Personalization:&lt;/em&gt; Serve dynamic content variations based on user behavior and segments&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Editorial assistance:&lt;/em&gt; Suggest related content, flag inconsistencies, and enforce brand voice&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;Ready to bring AI agents into your content operations? Here's a simple path:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;em&gt;Structure your content well.&lt;/em&gt; Define clear content models with meaningful fields. Good structure in means good results out.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Start with one workflow.&lt;/em&gt; Pick a high-volume, low-risk task like generating meta descriptions or alt text.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Use API keys with scoped permissions.&lt;/em&gt; Give agents exactly the access they need, no more.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Keep humans in the loop.&lt;/em&gt; Route agent output to drafts first. Build trust, then expand autonomy.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Measure and iterate.&lt;/em&gt; Track time saved, content quality, and engagement. Let data guide your next automation.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;A headless CMS gives your content freedom. AI agents give your team leverage. Together, they create a content operation that's faster, smarter, and ready for whatever channel comes next.&lt;/p&gt;

&lt;p&gt;The teams winning today combine human creativity with machine efficiency. Your content deserves the same advantage.&lt;/p&gt;

&lt;p&gt;Curious how Cosmic makes this easy? With a powerful REST API, built-in AI capabilities, and flexible content modeling, Cosmic is the headless CMS built for the age of intelligent content.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start building for free&lt;/a&gt; and see what's possible. Or &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;book a quick intro with Tony&lt;/a&gt; to see how teams are using Cosmic AI Agents today.&lt;/p&gt;

</description>
      <category>cms</category>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How to Migrate to a Headless CMS (WordPress, Webflow, Ghost, Shopify)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Tue, 21 Jul 2026 20:31:10 +0000</pubDate>
      <link>https://dev.to/tonyspiro/how-to-migrate-to-a-headless-cms-wordpress-webflow-ghost-shopify-m72</link>
      <guid>https://dev.to/tonyspiro/how-to-migrate-to-a-headless-cms-wordpress-webflow-ghost-shopify-m72</guid>
      <description>&lt;p&gt;Most teams reach the same wall at different speeds. Your content is buried inside a platform that tightly couples your editing experience, your schema, and your delivery layer. You can't serve the same content across a mobile app, a web app, and a third-party integration without duplicating work.&lt;/p&gt;

&lt;p&gt;Migrating to a headless, API-first CMS changes this. Your content becomes a structured data layer that any frontend can consume, your editors keep a clean dashboard, and your developers get a REST API and SDK they can query from anywhere.&lt;/p&gt;

&lt;p&gt;The migration itself has always been the hard part. Until now.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cosmic Migrate: Point It at Your Site, and It Does the Work
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.cosmicjs.com/migrate" rel="noopener noreferrer"&gt;Cosmic's migration tool&lt;/a&gt; removes the manual work that makes migrations painful. You point it at your existing site, and it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyzes your pages and content structure&lt;/li&gt;
&lt;li&gt;Proposes a content model with the right object types, metafields, and relationships&lt;/li&gt;
&lt;li&gt;Migrates your content into a structured, API-first CMS with a clean REST API and JavaScript/TypeScript SDK ready to use&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It supports WordPress, Webflow, Ghost, and Shopify out of the box. No CSV exports, no manual field mapping, no writing migration scripts from scratch.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://www.cosmicjs.com/migrate" rel="noopener noreferrer"&gt;Try the migration tool at cosmicjs.com/migrate&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Teams Migrate to a Headless CMS
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The content is locked to one delivery layer.&lt;/strong&gt; WordPress, Webflow, and Ghost were built to put content on web pages. Serving that same content to a mobile app, a kiosk, or a third-party integration requires workarounds or rebuilding the content in a separate system. A headless CMS stores content as structured data and exposes it via API. Your content team edits once. Every surface consumes from the same source of truth.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The schema is rigid.&lt;/strong&gt; WordPress gives you posts, pages, and custom post types with plugin overhead for anything more complex. In a headless CMS, you define exactly the content model your project needs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Developer velocity slows down.&lt;/strong&gt; When developers need to change how content is structured, they are often waiting on backend changes in a monolithic CMS. In a headless setup, the CMS is infrastructure. Neither the frontend team nor the content team blocks the other.&lt;/p&gt;

&lt;p&gt;This is the value teams like FINN experience directly. Maximilian Wuhr, Co-Founder at FINN, put it plainly: &lt;em&gt;"Cosmic is: us never having to ask a developer to change anything on the backend of our website."&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Migration Paths by Platform
&lt;/h2&gt;

&lt;h3&gt;
  
  
  From WordPress to a Headless CMS
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.cosmicjs.com/migrate" rel="noopener noreferrer"&gt;Cosmic Migrate&lt;/a&gt; analyzes your WordPress site's structure, identifies your post types and fields, proposes equivalent Object Types and metafields in Cosmic, and migrates your content and media. Your WordPress posts become objects. Your ACF fields map to metafields. Your media uploads to Cosmic's media library.&lt;/p&gt;

&lt;h3&gt;
  
  
  From Webflow to a Headless CMS
&lt;/h3&gt;

&lt;p&gt;Cosmic Migrate reads your Webflow Collection structure and maps it to Cosmic Object Types. Plain Text fields become metafields. Reference fields become relationship metafields. After migration, your Webflow Collections are Cosmic Object Types accessible via the REST API.&lt;/p&gt;

&lt;h3&gt;
  
  
  From Ghost to a Headless CMS
&lt;/h3&gt;

&lt;p&gt;Cosmic Migrate ingests your Ghost export and creates objects in Cosmic with your posts' content, tags, authors, and featured images. Your Ghost JSON becomes a structured Cosmic bucket ready to query.&lt;/p&gt;

&lt;h3&gt;
  
  
  From Shopify to a Headless CMS
&lt;/h3&gt;

&lt;p&gt;Cosmic Migrate analyzes your Shopify store and migrates your blog posts, pages, and editorial content into Cosmic. Product data typically stays in Shopify; Cosmic handles the content layer.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the Migration Process Works
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Go to &lt;a href="https://www.cosmicjs.com/migrate" rel="noopener noreferrer"&gt;cosmicjs.com/migrate&lt;/a&gt; and enter your site URL or upload an export file&lt;/li&gt;
&lt;li&gt;Cosmic analyzes your site and surfaces a proposed content model&lt;/li&gt;
&lt;li&gt;Review the proposed Object Types and metafields. Adjust if needed&lt;/li&gt;
&lt;li&gt;Confirm the migration. Cosmic creates your Object Types, migrates your content, and uploads your media&lt;/li&gt;
&lt;li&gt;Connect your frontend with the Cosmic SDK and your bucket credentials&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For most sites under a few hundred pages, the analysis and migration complete in minutes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real Teams, Real Results
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.finn.com/" rel="noopener noreferrer"&gt;FINN&lt;/a&gt; moved their marketing content to Cosmic and removed the developer bottleneck from their content publishing workflow entirely.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.parqueexplora.org/" rel="noopener noreferrer"&gt;Parque Explora&lt;/a&gt;, Colombia's largest science and technology museum, uses Cosmic to power multilingual content delivery across their digital properties.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.eastmanmusic.com/" rel="noopener noreferrer"&gt;Eastman Music&lt;/a&gt; runs their product catalog and editorial content through Cosmic, serving content via the REST API.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://vuetifyjs.com/" rel="noopener noreferrer"&gt;Vuetify&lt;/a&gt; uses Cosmic to manage their documentation and community content.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ready to Migrate?
&lt;/h2&gt;

&lt;p&gt;If your content is locked inside a platform that slows your team down, the path out is now much shorter.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://www.cosmicjs.com/migrate" rel="noopener noreferrer"&gt;Start your migration at cosmicjs.com/migrate&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Want to talk through your specific migration? &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book a call with Tony Spiro&lt;/a&gt; to walk through your setup.&lt;/p&gt;

</description>
      <category>cms</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Best Free Headless CMS Platforms in 2026 (Ranked and Compared)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Mon, 20 Jul 2026 16:23:21 +0000</pubDate>
      <link>https://dev.to/tonyspiro/best-free-headless-cms-platforms-in-2026-ranked-and-compared-4c35</link>
      <guid>https://dev.to/tonyspiro/best-free-headless-cms-platforms-in-2026-ranked-and-compared-4c35</guid>
      <description>&lt;p&gt;If you're evaluating headless CMS platforms, the free plan is usually where the decision starts. You want to build something real, validate your architecture, and make sure the developer experience is solid before committing to a paid tier.&lt;/p&gt;

&lt;p&gt;The problem: free plans vary wildly. Some give you a genuinely useful starting point. Others are barely enough to run a demo. This post fixes that. We ranked the best free headless CMS platforms in 2026 by what you actually get on the free tier.&lt;/p&gt;

&lt;h2&gt;
  
  
  What to look for in a free headless CMS
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Objects / content entries:&lt;/strong&gt; how much content can you store before hitting a wall?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API access:&lt;/strong&gt; can you build a production-ready app, or are you rate-limited out of the gate?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team members:&lt;/strong&gt; can more than one person use the free plan?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Buckets / workspaces:&lt;/strong&gt; can you run more than one project?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Upgrade path:&lt;/strong&gt; when you outgrow free, does the next tier make sense?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI features:&lt;/strong&gt; does the platform give you any AI tooling on free, or lock it behind enterprise?&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Free plan includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1 Bucket (project)&lt;/li&gt;
&lt;li&gt;2 Team members&lt;/li&gt;
&lt;li&gt;1,000 Objects&lt;/li&gt;
&lt;li&gt;REST API + JavaScript/TypeScript SDK&lt;/li&gt;
&lt;li&gt;Media storage and imgix image optimization&lt;/li&gt;
&lt;li&gt;1 AI Agent (draft, publish, and manage content from Slack, WhatsApp, or Telegram)&lt;/li&gt;
&lt;li&gt;Full dashboard access&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cosmic's free plan is the only one in this list that includes an AI Agent out of the box. You can connect a Slack channel and have an AI Agent draft, edit, and publish content without touching the dashboard. The REST API and TypeScript SDK are fully available on free, so you can build a real production app without hitting artificial API rate limits.&lt;/p&gt;

&lt;p&gt;When you're ready to grow, the Builder plan ($49/month) gives you 2 Buckets, 3 Team members, 5,000 Objects, and 3 AI Agents.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start free on Cosmic&lt;/a&gt; | &lt;a href="https://www.cosmicjs.com/pricing" rel="noopener noreferrer"&gt;See all plans&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;Free plan includes: 10 Team members, 2 roles, 2 locales, 25 Content types, 100,000 API calls/month, 10,000 records.&lt;/p&gt;

&lt;p&gt;Contentful's free plan is generous on team seats (10 users), which makes it appealing for larger teams just starting out. The bigger limitation: paid plans start at $300/month, which is a significant jump once you need more locales, roles, or API capacity.&lt;/p&gt;

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

&lt;p&gt;Free plan includes: up to 20 users, unlimited content types, 1M API CDN requests/month, 100GB asset storage, 2 datasets.&lt;/p&gt;

&lt;p&gt;Sanity's free tier is genuinely generous on users and API calls. The tradeoff: steeper learning curve, and Sanity Studio requires configuration that's less approachable for non-technical editors.&lt;/p&gt;

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

&lt;p&gt;Free plan includes: self-hosted (open source), unlimited users, unlimited content types, REST API, community support only.&lt;/p&gt;

&lt;p&gt;Strapi is open source, so the software itself is free. But "free" here means you're managing your own hosting, security, backups, and updates. Strapi Cloud (managed) starts at $29/month.&lt;/p&gt;

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

&lt;p&gt;Free plan includes: 1 user, 1 locale, 200 components, 100,000 API calls/month, 1TB asset storage.&lt;/p&gt;

&lt;p&gt;Storyblok's free plan is limited to a single user, which makes it essentially a solo-developer tier. Even a two-person team needs a paid plan.&lt;/p&gt;

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

&lt;p&gt;Free plan includes: 1 user, 1 locale, unlimited documents, 4M API calls/month, page builder.&lt;/p&gt;

&lt;p&gt;Prismic's free plan has the highest API call limit in the group (4M/month). Like Storyblok, the 1-user cap is the main constraint.&lt;/p&gt;

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

&lt;p&gt;Free plan includes: 3 seats, 2 roles, 2 locales, 10 components, 500,000 API calls/month, unlimited asset storage, comments and live preview.&lt;/p&gt;

&lt;p&gt;Hygraph's Hobby plan is one of the more collaborative free tiers, with 3 seats, commenting, and live preview included. It's GraphQL-native, which is a strength for developers who want a flexible query layer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Which free headless CMS is right for you?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Choose &lt;strong&gt;Cosmic&lt;/strong&gt; if you want AI-native content tooling from day one, a clean REST API and TypeScript SDK, and a free plan that covers real solo or two-person projects.&lt;/li&gt;
&lt;li&gt;Choose &lt;strong&gt;Contentful&lt;/strong&gt; if you have a larger team (up to 10) who need to prototype together.&lt;/li&gt;
&lt;li&gt;Choose &lt;strong&gt;Sanity&lt;/strong&gt; if you're a developer who wants maximum flexibility and is comfortable with a code-first setup.&lt;/li&gt;
&lt;li&gt;Choose &lt;strong&gt;Strapi&lt;/strong&gt; if you want full ownership and have the DevOps resources to self-host.&lt;/li&gt;
&lt;li&gt;Choose &lt;strong&gt;Storyblok or Prismic&lt;/strong&gt; if you're a solo developer and visual editing or high API throughput is your top priority.&lt;/li&gt;
&lt;li&gt;Choose &lt;strong&gt;Hygraph&lt;/strong&gt; if you want collaborative features and GraphQL on a free tier.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start free on Cosmic, no credit card required&lt;/a&gt; | &lt;a href="https://www.cosmicjs.com/pricing" rel="noopener noreferrer"&gt;View pricing&lt;/a&gt; | &lt;a href="https://calendly.com/tonyspiro/cosmic-intro" rel="noopener noreferrer"&gt;Book a demo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>cms</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Best Contentful Alternatives in 2026 (Ranked &amp; Compared)</title>
      <dc:creator>Tony Spiro</dc:creator>
      <pubDate>Mon, 20 Jul 2026 16:22:43 +0000</pubDate>
      <link>https://dev.to/tonyspiro/best-contentful-alternatives-in-2026-ranked-compared-mgh</link>
      <guid>https://dev.to/tonyspiro/best-contentful-alternatives-in-2026-ranked-compared-mgh</guid>
      <description>&lt;p&gt;If you've been shopping for a Contentful alternative, you already know the pattern: great product, pricing that scales faster than your traffic, and a feature roadmap that prioritizes enterprise accounts over indie teams. This list cuts through the noise. We compared seven platforms on pricing, AI features, developer experience, and content modeling flexibility. Cosmic is on this list too, and we'll be upfront about where it fits and where it doesn't.&lt;/p&gt;

&lt;h2&gt;
  
  
  What to look for in a Contentful alternative
&lt;/h2&gt;

&lt;p&gt;Before picking a platform, decide which of these matters most to your team:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Free plan generosity:&lt;/strong&gt; Does it let you build something real before paying?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pricing transparency:&lt;/strong&gt; Can you predict your bill as you scale?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Developer experience:&lt;/strong&gt; REST API, SDK quality, TypeScript support, local preview?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI-native features:&lt;/strong&gt; Content generation, AI agents, semantic search built in, or bolt-on?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Content modeling:&lt;/strong&gt; How flexible are the field types and relationships?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team collaboration:&lt;/strong&gt; Roles, permissions, editorial workflows, draft/publish controls?&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; lean teams and developer-led projects that want AI-native features without enterprise pricing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.cosmicjs.com" rel="noopener noreferrer"&gt;Cosmic&lt;/a&gt; is a headless CMS built around the idea that content teams and developers should be able to move independently. Marketers publish from a clean editor. Developers query content via REST API or the TypeScript SDK. And AI Agents handle the repetitive work in between.&lt;/p&gt;

&lt;p&gt;What sets it apart from Contentful:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI Agents included on every plan.&lt;/strong&gt; Free accounts get 1 Agent and 1 Workflow. Agents connect to Slack, WhatsApp, and Telegram, draft and publish content, run scheduled tasks, and browse the web for research.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cosmic Insights included.&lt;/strong&gt; Cookieless web analytics with per-object attribution, built in.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Semantic search.&lt;/strong&gt; Find content by meaning across your bucket.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MCP Server.&lt;/strong&gt; Cosmic has a native MCP server, so AI tools like Claude can read and write your content directly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Predictable pricing.&lt;/strong&gt; No metered API calls on the paid plans.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Pricing (verified July 2026):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Free: $0/month, 1 Bucket, 2 Team members, 1,000 Objects, 1 Agent&lt;/li&gt;
&lt;li&gt;Builder: $49/month, 2 Buckets, 3 Team members, 5,000 Objects, 3 Agents&lt;/li&gt;
&lt;li&gt;Team: $299/month, 3 Buckets, 5 Team members, 20,000 Objects, 10 Agents&lt;/li&gt;
&lt;li&gt;Business: $499/month, 5 Buckets, 10 Team members, 50,000 Objects, 25 Agents&lt;/li&gt;
&lt;li&gt;Additional users: $29/user/month&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer"&gt;Start free, no credit card required&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; teams that want maximum content modeling flexibility and are comfortable with a steeper setup curve.&lt;/p&gt;

&lt;p&gt;Sanity uses a code-first content studio configured in TypeScript. Strengths: extremely flexible schema, GROQ query language, real-time collaboration. Watch out for: the free plan limits you to 2 datasets, and pricing scales by API usage on higher tiers.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; marketing teams and agencies that prioritize visual editing and a component-based approach.&lt;/p&gt;

&lt;p&gt;Storyblok's Visual Editor is genuinely good. Non-technical editors can see exactly what content will look like before publishing. Watch out for: the free plan is limited to 1 user, and pricing steps up significantly for team features.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; teams with complex content federation needs or existing GraphQL infrastructure.&lt;/p&gt;

&lt;p&gt;Hygraph is built around a federated content approach. Strengths: content federation, strong GraphQL API, good localization. Watch out for: pricing can be opaque for teams not already GraphQL-native.&lt;/p&gt;

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

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

&lt;p&gt;Strapi is open-source and self-hostable. Strengths: open source, full self-hosting, large plugin ecosystem. Watch out for: self-hosting means you own infrastructure, security patches, and uptime.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; marketing-focused teams building slice-based page layouts with Next.js, Nuxt, or SvelteKit.&lt;/p&gt;

&lt;p&gt;Prismic's Slice Machine is a unique approach: developers define reusable page sections in code, and editors compose pages from them. Watch out for: the slice model can feel rigid for content-heavy applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Builder.io
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; teams that prioritize visual page building and A/B testing over structured content management.&lt;/p&gt;

&lt;p&gt;Builder.io is more of a visual CMS and page builder. Strengths: powerful visual editor, A/B testing built in. Watch out for: structured content modeling is not its primary strength.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;You want AI agents and automation built in: &lt;strong&gt;Cosmic&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You need maximum schema flexibility and have developer resources: &lt;strong&gt;Sanity&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Your editors need a visual preview before publishing: &lt;strong&gt;Storyblok&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You have GraphQL infrastructure or content federation needs: &lt;strong&gt;Hygraph&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You need self-hosting and data sovereignty: &lt;strong&gt;Strapi&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You're building slice-based marketing pages: &lt;strong&gt;Prismic&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Landing pages and A/B testing are your primary use case: &lt;strong&gt;Builder.io&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All seven platforms have free tiers or trials. The fastest way to validate fit is to spin up a project and build something real before committing.&lt;/p&gt;

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

</description>
      <category>cms</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
