Forem: BeanBean

How to Handle Background Jobs with BullMQ and Redis in Node.js (2026)

BeanBean — Thu, 23 Apr 2026 05:00:01 +0000

The problem

When a user action triggers something slow — sending an email, calling a third-party API, resizing an image — blocking the HTTP response until it finishes is the wrong move. The naive fix is await someSlowThing() inside the route handler, which ties up the server thread and breaks under load. You need a queue: accept the request instantly, hand the work to a background worker, and process it reliably with retries. BullMQ on top of Redis is the production-grade answer for Node.js — it handles retries, concurrency, delayed jobs, and cron scheduling out of the box.

Prerequisites

Node.js 22+
Redis 7+ (local Docker: docker run -p 6379:6379 redis:7-alpine)
TypeScript 5 (optional but assumed)
npm install bullmq ioredis
Env var: REDIS_URL=redis://localhost:6379

Step 1: Create a shared queue

A Queue is the entry point — you add jobs here from anywhere in your app (API routes, webhooks, crons):

// queue/email-queue.ts
import { Queue } from "bullmq";
import IORedis from "ioredis";

const connection = new IORedis(process.env.REDIS_URL!, {
  maxRetriesPerRequest: null, // required by BullMQ
});

export const emailQueue = new Queue("email", { connection });

// Add a job: fire-and-forget from your API handler
await emailQueue.add(
  "send-welcome",
  { to: "user@example.com", name: "Alice" },
  { attempts: 3, backoff: { type: "exponential", delay: 2000 } }
);

Step 2: Define the worker

A Worker pulls jobs from the queue and processes them. Run this in a separate process (e.g. node worker.js) so it doesn't share resources with your web server:

// worker/email-worker.ts
import { Worker, Job } from "bullmq";
import IORedis from "ioredis";

const connection = new IORedis(process.env.REDIS_URL!, {
  maxRetriesPerRequest: null,
});

const worker = new Worker(
  "email",
  async (job: Job) => {
    const { to, name } = job.data;
    console.log(\`[email] Sending welcome to \${to}\`);
    // await resend.emails.send({ to, subject: "Welcome!", ... });
    return { sent: true };
  },
  {
    connection,
    concurrency: 5, // process 5 jobs in parallel
  }
);

worker.on("completed", (job) =>
  console.log(\`Job \${job.id} completed\`)
);
worker.on("failed", (job, err) =>
  console.error(\`Job \${job?.id} failed:\`, err.message)
);

Step 3: Add recurring scheduled jobs

BullMQ's QueueScheduler was removed in v3 — use queue.upsertJobScheduler instead for cron jobs:

// Schedule a daily digest job at 07:00 UTC
await emailQueue.upsertJobScheduler(
  "daily-digest",            // scheduler ID (idempotent)
  { pattern: "0 7 * * *" }, // cron expression
  {
    name: "send-digest",
    data: { type: "daily" },
    opts: { attempts: 2 },
  }
);

Full working example

// ─── queue/index.ts ──────────────────────────────────────────────────────────
import { Queue } from "bullmq";
import IORedis from "ioredis";

const connection = new IORedis(process.env.REDIS_URL!, {
  maxRetriesPerRequest: null,
});

export const emailQueue = new Queue("email", { connection });

export async function scheduleJobs() {
  await emailQueue.upsertJobScheduler(
    "daily-digest",
    { pattern: "0 7 * * *" },
    { name: "send-digest", data: { type: "daily" }, opts: { attempts: 2 } }
  );
}

// ─── worker/index.ts ─────────────────────────────────────────────────────────
import { Worker, Job } from "bullmq";
import IORedis from "ioredis";

const connection = new IORedis(process.env.REDIS_URL!, {
  maxRetriesPerRequest: null,
});

async function processEmail(job: Job): Promise {
  const { to, name, type } = job.data;

  switch (job.name) {
    case "send-welcome":
      console.log(\`Sending welcome email to \${to} (\${name})\`);
      // await sendWelcomeEmail(to, name);
      break;
    case "send-digest":
      console.log(\`Sending daily digest (type: \${type})\`);
      // await sendDigest();
      break;
    default:
      throw new Error(\`Unknown job: \${job.name}\`);
  }

  return { sent: true };
}

const worker = new Worker("email", processEmail, {
  connection,
  concurrency: 5,
  removeOnComplete: { count: 100 },
  removeOnFail: { count: 50 },
});

worker.on("completed", (job) => console.log(\`✓ \${job.id} \${job.name}\`));
worker.on("failed", (job, err) => console.error(\`✗ \${job?.id}:\`, err.message));

// ─── api/enqueue/route.ts (Next.js App Router) ───────────────────────────────
import { NextRequest, NextResponse } from "next/server";
import { emailQueue } from "@/queue";

export const dynamic = "force-dynamic";

export async function POST(req: NextRequest) {
  const { to, name } = await req.json();
  if (!to) return NextResponse.json({ error: "to required" }, { status: 400 });

  const job = await emailQueue.add(
    "send-welcome",
    { to, name },
    { attempts: 3, backoff: { type: "exponential", delay: 2000 } }
  );

  return NextResponse.json({ jobId: job.id }, { status: 202 });
}

Testing it

Start the worker in one terminal (npx tsx worker/index.ts), then POST a job:

curl -X POST http://localhost:3000/api/enqueue \
  -H "Content-Type: application/json" \
  -d '{"to":"test@example.com","name":"Alice"}'
# → {"jobId":"1"}
# Worker terminal: ✓ 1 send-welcome

Troubleshooting

maxRetriesPerRequest must be null: BullMQ requires this IORedis option explicitly — add maxRetriesPerRequest: null to your connection config.
Jobs stuck in waiting: No worker is connected to the queue. Make sure the worker process is running and connected to the same Redis instance.
Scheduler not firing: upsertJobScheduler requires BullMQ v5+. Check npm ls bullmq and upgrade if needed.

{"@context":"https://schema.org","@type":"HowTo","name":"How to Handle Background Jobs with BullMQ and Redis in Node.js (2026)","step":[{"@type":"HowToStep","position":1,"name":"Create a shared queue","text":"Instantiate a BullMQ Queue with an IORedis connection and add jobs with retry config."},{"@type":"HowToStep","position":2,"name":"Define the worker","text":"Run a BullMQ Worker in a separate process with a processor function and concurrency setting."},{"@type":"HowToStep","position":3,"name":"Add recurring scheduled jobs","text":"Use queue.upsertJobScheduler with a cron pattern to schedule repeating background tasks."}]}

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

gpt-image-2 API: ship 2K AI images in Next.js for $0.21 (2026)

BeanBean — Wed, 22 Apr 2026 23:00:00 +0000

What's new this week

OpenAI shipped ChatGPT Images 2.0 on April 21, 2026, exposing the new gpt-image-2 model in the API, Codex, and ChatGPT on the same day. The model renders up to 2,000 pixels on the long edge, supports seven aspect ratios from 3:1 to 1:3, and produces up to 8 coherent images per call with the same characters and objects preserved across the batch. A new thinking mode reasons about layout and typography before rendering — the reason gpt-image-2 now handles multilingual text, infographics, slides, and maps that gpt-image-1 used to mangle. TechCrunch called the text rendering "surprisingly good" and the Image Arena leaderboard currently ranks it #1 across every category. The production-tracked alias chatgpt-image-latest rolls updates forward automatically; pin to gpt-image-2 if you want a fixed version.

Why it matters for builders

Indie makers: you can skip the Midjourney → Photoshop dance for launch assets. Before: generate a square hero in Midjourney, hand-edit typography in Figma, upscale. After: one gpt-image-2 call returns an on-brand landscape hero with legible headline text at 2K — ready to paste into your marketing page. Eight-image batches turn A/B testing your hero copy into a single API call instead of eight prompt iterations.

Web engineers: product visuals no longer need a CMS upload flow. Before: designer exports PNG, uploads to S3, copy-pastes the URL into a CMS field. After: a Next.js server action takes the product title, calls images.generate, streams the base64 PNG straight into a next/image tag or Vercel Blob. You get on-demand blog covers, og:image defaults, and placeholder product photos from one endpoint.

AI engineers: demos that need synthetic screenshots or diagrams stop blocking on design tickets. Before: "let's Photoshop a fake dashboard for the pitch deck." After: one prompt — "a SaaS dashboard showing churn dropping from 8% to 3% over six months, labels in English and Vietnamese, dark theme" — returns a usable PNG in roughly 7 seconds. RAG and eval pipelines that need grounded visual artifacts can now generate them deterministically with a fixed seed.

Hands-on: try it in under 15 minutes

Requirements: Node 20+, the OpenAI Node SDK (npm i openai@^4), and an API key with image generation enabled. Drop this into a Next.js 16 server action at app/actions/image.ts:

"use server";
import OpenAI from "openai";
import { put } from "@vercel/blob";

const client = new OpenAI();

export async function generateCover(prompt: string) {
  const res = await client.images.generate({
    model: "gpt-image-2",
    prompt,
    size: "1536x1024",   // landscape; up to 2K long-edge supported
    quality: "high",      // "low" | "medium" | "high"
    n: 1,                 // bump to 8 for a coherent batch
    // @ts-expect-error — new 2026 param, SDK types lag
    thinking: "auto",
  });

  const b64 = res.data[0].b64_json!;
  const { url } = await put(
    `covers/${Date.now()}.png`,
    Buffer.from(b64, "base64"),
    { access: "public", contentType: "image/png" },
  );
  return url;
}

Call it from an RSC page: const url = await generateCover("Dark hero for a Next.js tutorial, laptop with glowing keyboard, title 'Ship faster'");. Costs: OpenAI bills images as tokens — $5/M input text, $10/M output text, $8/M input image, $30/M output image. A 1024×1024 high-quality render lands at ~$0.21; a batch of four is ~$0.84. Thinking mode bills extra reasoning tokens, so a strict layout brief (four-column infographic, Vietnamese headings, exact pricing) costs more than a loose scene — budget it. Free-tier ChatGPT users only get instant mode; thinking, 8-image batches, and web-search grounding require Plus/Pro/Business or any paid API tier. For subject continuity across a batch — four angles of a product, a four-panel comic — set n: 8 and describe each variant inline; the model keeps subjects stable, which gpt-image-1 could not.

How it compares to alternatives

gpt-image-2Gemini 2.5 Flash ImageFlux 1.1 ProStarts at~$0.21 / 1024² high-quality render$0.039 / image$0.055 / imageBest forText-heavy infographics, slides, multilingual signageConversational edits, cheap iteration inside Gemini APIPhotoreal hero shots, stylistic controlKey limit2K max on long edge; thinking mode billed extraWeaker at small-font text renderingNo reasoning step; legibility weak on dense UI copyIntegrationopenai SDK, one endpoint, base64 or URL response@google/genai SDK, same call path as textReplicate / Fal / BFL REST APIs

Try it this week

Pick one piece of marketing art on your site — a blog cover, a pricing-page illustration, an empty-state screenshot — and regenerate it with gpt-image-2 in a Next.js server action tonight. Measure three numbers: total USD, first-render latency, and whether the text stays legible at 2×. If the answer is "cheaper than an hour of Figma," wire it into your publish pipeline as an auto-cover generator. For the audio side of the same UX pattern, see how Gemini 3.1 Flash TTS ships voice UX in 15 minutes; if you want the coding agent that now calls this endpoint natively, pair it with the OpenAI Codex April 2026 update.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

How to deploy a Hono API to Railway with Postgres in 10 minutes (2026)

BeanBean — Wed, 22 Apr 2026 05:00:01 +0000

The problem

Hono is the fastest Node/Bun-compatible HTTP framework available in 2026 — its benchmark suite regularly outperforms Express and Fastify by a factor of three on raw throughput. The deployment story, however, has historically been messy: you either maintain a custom Dockerfile, wrestle with platform-specific adapters, or fight cold-start limits on serverless edge runtimes that do not support long-lived database connections. Railway solves this by treating your Hono service, its Postgres database, and any other add-ons as first-class siblings in one project, injecting connection strings automatically and handling the build pipeline without extra configuration.

Prerequisites

Node.js 22+ (confirm with node -v) or Bun 1.1+
npm 10+ or Bun package manager
A Railway account — free tier includes $5/month credit, no credit card required
Railway CLI: npm i -g @railway/cli, then railway login
drizzle-kit for schema management — installed in Step 2

Step 1: Bootstrap the Hono project

create-hono scaffolds a production-ready tsconfig, a dev watch command via tsx, and a minimal build pipeline in one command — choose the nodejs adapter when prompted, because it is the only option that supports persistent Postgres connections on Railway's always-on containers. Edge and Cloudflare Workers adapters do not allow stateful TCP sockets, so they cannot hold a Postgres connection pool.

npm create hono@latest my-api
# Select "nodejs" template at the prompt
cd my-api
npm install

Step 2: Add Drizzle ORM and the Postgres driver

Drizzle's zero-overhead query builder compiles directly to parameterized SQL with no reflection or proxy magic, which means fast cold starts and queries that are straightforward to audit in production logs. The postgres package is the canonical JavaScript driver that Drizzle's drizzle-orm/postgres-js dialect targets — it handles connection pooling, backpressure, and prepared statements natively without a separate pool configuration file.

npm install drizzle-orm postgres dotenv
npm install -D drizzle-kit tsx @types/node

Step 3: Define the schema and wire the routes

Create src/db/schema.ts using Drizzle's pgTable helper — column definitions carry full TypeScript inference so route handlers get autocomplete on query results without manual type assertions. Your main src/index.ts imports both the Drizzle client and the schema, keeping the database layer a plain import rather than a global singleton that leaks across test files.

Step 4: Provision Railway Postgres

In the Railway dashboard, open your project, choose New Service, then Database, then PostgreSQL. Railway provisions a managed Postgres 16 instance and injects DATABASE_URL as an environment variable into every service in the same project automatically — no secrets panel, no copy-pasting of connection strings, no risk of committing credentials. After linking your repo with railway link, push the Drizzle schema against the remote database before deploying code that depends on it.

railway login
railway link
railway run npx drizzle-kit push

Step 5: Deploy

Set the Start Command in Railway's service settings to node dist/index.js, or add a Procfile at the repo root with web: node dist/index.js — Railway reads either. Running railway up --detach ships the current directory, triggers the Nixpacks build, and prints the public HTTPS URL once the health check passes; total time on a cold push is typically under 90 seconds.

railway up --detach
# Output: Deployment successful → https://my-api-production.up.railway.app

Full working example

// src/index.ts — complete Hono + Drizzle API, deploy-ready for Railway
import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import { pgTable, uuid, text, timestamp } from "drizzle-orm/pg-core";
import { eq } from "drizzle-orm";
import "dotenv/config";

const items = pgTable("items", {
  id: uuid("id").defaultRandom().primaryKey(),
  name: text("name").notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
});

const url = process.env.DATABASE_URL;
if (!url) throw new Error("DATABASE_URL is not set");

const sql = postgres(url, { max: 5 });
const db = drizzle(sql, { schema: { items } });

const app = new Hono();

app.get("/health", (c) => c.json({ status: "ok" }));

app.get("/items", async (c) => {
  const rows = await db.select().from(items).orderBy(items.createdAt);
  return c.json({ data: rows });
});

app.post("/items", async (c) => {
  const body = await c.req.json();
  if (!body?.name || typeof body.name !== "string") {
    return c.json({ error: "name is required" }, 400);
  }
  const [row] = await db
    .insert(items)
    .values({ name: body.name.trim() })
    .returning();
  return c.json({ data: row }, 201);
});

app.get("/items/:id", async (c) => {
  const [row] = await db
    .select()
    .from(items)
    .where(eq(items.id, c.req.param("id")));
  if (!row) return c.json({ error: "not found" }, 404);
  return c.json({ data: row });
});

const port = Number(process.env.PORT) || 3000;
console.log(`Server listening on port ${port}`);
serve({ fetch: app.fetch, port });

Prefer a managed option? Try Railway — deploy fullstack apps with Postgres, Redis, and auto-SSL in a few clicks, with $5/month free credit and no credit card required.

Testing it

Once railway up completes, copy the URL from the CLI output and run the three commands below. The health endpoint confirms the process started; the POST verifies Postgres connectivity end-to-end; the final GET confirms the row persisted across requests — all three should respond with 2xx status and JSON bodies.

BASE=https://my-api-production.up.railway.app
curl $BASE/health
curl -X POST $BASE/items -H "Content-Type: application/json" -d '{"name":"hello railway"}'
curl $BASE/items

Troubleshooting

Build fails: cannot find module postgres — Ensure postgres is under dependencies (not devDependencies) in package.json; Railway installs production deps only by default (override via NIXPACKS_NODE_ENVIRONMENT=development).
DATABASE_URL undefined at runtime — The Hono service and the Postgres plugin must be in the same Railway project; verify with railway variables before deploying.
Health check timeout and deployment rollback — Railway assigns a dynamic PORT env var; hardcoding 3000 means the health probe never gets a response. Reading process.env.PORT as shown above is mandatory.

Where to go next

Once the API is live, add a Redis plugin the same way — Railway injects REDIS_URL automatically, and wiring ioredis into Hono middleware takes fewer than 10 lines for request-level caching or per-IP rate limiting. For a broader picture of how platform choices — Railway vs. raw VPS vs. Vercel — compare on the cost-versus-DX axis in 2026, the Q1 2026 Web+AI Recap is the best single read on what actually shifted. The top DX tools for shipping faster in 2026 covers the adjacent tooling — forms, short links, scheduling — that rounds out a modern indie-maker stack built on Railway.
{"@context":"https://schema.org","@type":"HowTo","name":"How to deploy a Hono API to Railway with Postgres in 10 minutes (2026)","step":[{"@type":"HowToStep","position":1,"name":"Bootstrap the Hono project","text":"Run npm create hono@latest, select the nodejs adapter at the prompt, then npm install."},{"@type":"HowToStep","position":2,"name":"Add Drizzle ORM and the Postgres driver","text":"Install drizzle-orm, the postgres driver, dotenv, and drizzle-kit as a devDependency."},{"@type":"HowToStep","position":3,"name":"Define the schema and wire the routes","text":"Create a pgTable schema in src/db/schema.ts and import it into your Hono route handlers in src/index.ts."},{"@type":"HowToStep","position":4,"name":"Provision Railway Postgres","text":"Add a PostgreSQL plugin in the Railway dashboard; DATABASE_URL is injected automatically. Run railway run npx drizzle-kit push to apply the schema."},{"@type":"HowToStep","position":5,"name":"Deploy","text":"Set the Start Command to node dist/index.js and run railway up --detach to ship your API and receive a public HTTPS URL."}]}

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

Gemini 3.1 Flash TTS for Next.js: ship voice UX in 15 min (2026)

BeanBean — Tue, 21 Apr 2026 23:00:00 +0000

What's new this week

On April 15, 2026, Google shipped Gemini 3.1 Flash TTS as a public preview on AI Studio and Vertex AI. The model ID is gemini-3.1-flash-tts-preview, and it introduces 200+ inline audio tags (for example [whispers], [happy], [pause]), 30 prebuilt voices, native multi-speaker dialogue, and coverage across 70+ languages. The free tier is open for prototyping; paid usage is $1 per million text input tokens and $20 per million audio output tokens — roughly an order of magnitude cheaper than ElevenLabs at the same run-time. Output is 24 kHz mono PCM, returned inline as base64, so there is no webhook dance and no separate voice-studio account to manage.

Why it matters for builders

Web engineer. Previously, adding a "listen to this article" button to a Next.js blog meant wiring ElevenLabs or patching tts-1-hd with custom SSML to fix prosody. With Flash TTS, a single generateContent call and one inline [slow] or [excited] tag produces the same emotional pacing — no SSML build step, no separate voice studio, and the audio streams back as base64 PCM you can buffer straight into an <audio> element. The full call lives in a server action, so API keys stay on the server.

AI engineer. Building a voice agent that reads CRM notes aloud used to need two inference passes (LLM then TTS) plus manual speaker diarization. Flash TTS accepts multi-speaker transcripts inline: your LLM emits Joe: ... Jane: ... and TTS returns one WAV with two distinct voices. Your agent graph loses a node, latency drops by a full network round-trip, and you skip maintaining a separate speaker-labelling prompt that drifts every model upgrade.

Indie maker. A Duolingo-style pronunciation app priced at $4/month barely broke even on Azure TTS at roughly $0.05 per lesson. At $20 per million output audio tokens, a 30-second lesson now costs about $0.003 — gross margin holds above 90% on the same $4 tier. Voice is no longer the line item that kills your side project's unit economics, which means TTS-heavy features like audiobook summaries, podcast previews, or accessibility narration finally pencil out on a free-tier SaaS.

Hands-on: try it in under 15 minutes

Grab a free API key from aistudio.google.com, store it as GEMINI_API_KEY, then install the SDK:

npm install @google/genai wav

Minimal Node/TypeScript call wrapped as a Next.js 16 server action:

"use server";
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY! });

export async function synthesize(text: string, voice = "Kore") {
  const res = await ai.models.generateContent({
    model: "gemini-3.1-flash-tts-preview",
    contents: [{ parts: [{ text }] }],
    config: {
      responseModalities: ["AUDIO"],
      speechConfig: {
        voiceConfig: { prebuiltVoiceConfig: { voiceName: voice } },
      },
    },
  });

  const b64 = res.candidates![0].content!.parts![0].inlineData!.data!;
  return Buffer.from(b64, "base64"); // 24kHz mono PCM
}

await synthesize(
  "Say warmly: [slow] Welcome back, Alex. [happy] You crushed this week."
);

The inline [slow] and [happy] tags steer pacing and emotion mid-sentence — no separate prosody config. Tags must live inside square brackets, separated by text or punctuation: two adjacent tags will error. For a two-person podcast intro via cURL:

curl "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-tts-preview:generateContent" \
  -H "x-goog-api-key: $GEMINI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "contents":[{"parts":[{"text":"TTS between Joe and Jane: Joe: [excited] The feed dropped. Jane: [amused] Took long enough."}]}],
    "generationConfig":{"responseModalities":["AUDIO"]}
  }' --output podcast.wav

Pipe the output through ffmpeg -i in.wav -b:a 64k out.mp3 if you need smaller transfer. Preview rate limits follow Gemini Flash defaults (10 RPM on free, 1,000 RPM on paid) — fine for prototyping. For production, queue synthesis in a BullMQ worker and cache finished clips in S3 or R2 keyed by a hash of text + voice + tagSet; a cache hit rate above 60% on a changelog feature is common. One caveat: preview model IDs have been renamed twice in the Gemini 3.1 family this quarter, so read the exact ID from an env var rather than hard-coding it.

How it compares to alternatives

Gemini 3.1 Flash TTSOpenAI gpt-4o-mini-ttsElevenLabs Flash v2.5Starts atFree tier; $1/M text + $20/M audio tokens paid$0.60 per 1M input chars, no free tier$5/mo Starter (30k credits)Best forMultilingual, expressive multi-speaker narrationLow-latency voice replies inside GPT appsCloned brand voices, audiobook productionKey limitPreview only — no SLA, model ID may change before GA~8 voices, fewer expressive tagsPer-character billing scales fast on free-tier SaaSIntegration@google/genai SDK, Vertex AI, REST/cURLOpenAI SDK, streaming WebSocketREST API, WebSocket streaming, native SDK

Try it this week

Pick one text-heavy screen in your product — an onboarding intro, a weekly changelog entry, a lesson summary — and wire Flash TTS behind a "Play" button. Ship it behind a feature flag so you can A/B the voice UX on 10% of sessions, then compare time-on-page and replay counts; if replay rate clears 15%, keep it and expand to every long-form page. For wider context on where the Gemini stack sits today, read our Gemma 4 review and the Q1 2026 Web+AI recap for the pricing shifts since January.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

AI Web Dev Digest — Apr 20 (Evening)

BeanBean — Tue, 21 Apr 2026 05:00:00 +0000

Today's briefing

Today's 48-hour window is dominated by agent tooling graduating from hype to hard numbers. Anthropic shipped a brand-new Claude Design preview that generates exportable prototypes from a single prompt, while two long-form deep dives delivered a grounded Q1 reckoning — cataloguing the real costs, capability gaps, and infra pricing shifts that defined the first quarter for fullstack teams. Developer experience tooling rounds out the day as a quiet but practical counterweight to the AI noise.

AI Tooling & Agents

Claude Design enters Labs preview. Anthropic's new feature turns a text prompt into exportable prototypes, pitch decks, and on-brand one-pagers — no Figma or Keynote required. Early previews show coherent layouts and brand-colour adherence that position it as a serious contender alongside v0.dev and Bolt.new. Read more
AI coding agents in 2026: the honest fullstack recap. A grounded breakdown of how agent workflows evolved through early 2026 — real cost structures, where context-window limits still bite, and which tasks fullstack teams are genuinely offloading versus which they are still doing by hand. Read more
Q1 2026 in one post: Next.js 16, Claude 4.7, and Vercel's pricing pivot. The quarterly debrief covers major launches (Claude Managed Agents, Opus 4.7, Gemma 4), the Vercel pricing restructure that rattled ISR-heavy apps, and the cascading outages that rewrote incident-response playbooks for teams on managed infra. Read more

Web Frameworks & Runtimes

Three DX tools quietly eating your sprint capacity. Fillout (forms), Dub.co (short links), and Cal.com (scheduling) each chip away at integration work that most teams hand-roll. The breakdown covers free-tier cut-offs, self-host viability, and the exact moment each tool earns its place in a Next.js project. Read more

What to watch next

Claude Design is preview-only today — watch for an API surface or SDK hook that lets server components invoke it directly, which would make it a first-class tool in AI-assisted content pipelines. The Q1 recap also flags Vercel's ISR pricing as still unresolved for high-traffic apps; a community benchmark or migration guide to a self-hosted alternative is likely before May.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

Claude Design: ship prototypes, decks and one-pagers by chat

BeanBean — Mon, 20 Apr 2026 23:00:01 +0000

What's new this week

On April 17, 2026, Anthropic Labs shipped Claude Design, a research preview that turns prompts into polished prototypes, pitch decks, slides, and one-pagers. It is powered by Claude Opus 4.7 — Anthropic's most capable vision model as of this week — and is rolling out to Claude Pro, Max, Team, and Enterprise subscribers. Figma's stock slid roughly 7 percent on the announcement, which should tell you where users think it lands on the threat matrix.

Why it matters across roles

Founders and product managers. The old loop: scribble an investor deck in Google Slides, ship to a contractor, wait three days for the round trip. The new loop: upload your brand guidelines and a rough outline, get a complete on-brand deck in under ten minutes, export as PPTX or push to Canva for final polish. Opus 4.7's stronger vision model means typography, spacing, and grid usage look like a human designer drafted them — not like a clip-art explosion.

Designers. Claude Design reads your codebase and design files during onboarding, so colors, typography, and components are reused automatically. Instead of spending an afternoon wiring static frames, you can generate an interactive prototype from a user story, scrub web elements directly from a live site using the web-capture tool, and hand the result to stakeholders for testing — no code review, no Figma prototype setup. Direct manipulation (comments, inline edits, custom sliders) is still there when you need pixel control.

Writers, marketers, and analysts. One-pagers and research briefs used to mean wrestling with PowerPoint templates or outsourcing a $200 Fiverr job. Drop in a DOCX, XLSX, or research summary and Claude Design lays it out in your brand — with chart placements, pull quotes, and call-outs that survive export to PDF, PPTX, or Canva. An analyst with a hypothesis and a table can go from gist to shareable artifact in the same standup they presented the idea in.

Hands-on: try it in under 15 minutes

Sign in to claude.ai and open the Labs section. If you are on Pro ($20/mo), Max ($100–$200/mo), Team ($30/seat/mo), or Enterprise, Claude Design should appear as a new workspace during the gradual rollout.
During onboarding, upload brand assets — a logo SVG, style-guide PDF, or a link to your public repo. Claude scans typography, palette, and component library, then stores them as your team's design system so every future project inherits them.
Start a project with a text prompt. Example: "Build a 5-slide pitch deck for our Series A covering problem, market, demo, traction, and ask. Use our brand palette and keep the cover minimal." You can also upload DOCX, PPTX, XLSX, or point Claude at a live URL with the web-capture tool.
Iterate. Add comments the way you would in Figma, or ask Claude in chat: "Make slide 3 denser — use a 2x2 grid of customer logos with quotes underneath." Custom sliders appear for dimensions like copy density or heading scale.
Export. PPTX and PDF are native. Canva export keeps a round-trip for brand teams that already live there. Standalone HTML is available for quick microsites.
For code handoff, Claude packages the design into a bundle you pass to Claude Code with one instruction:

# Turn a Claude Design bundle into a real Next.js page
claude-code run \
  "Implement the Claude Design bundle at ./design-bundle.zip \
   using Next.js 16 App Router, Tailwind 4, and our shadcn components. \
   Preserve the design tokens exactly."

Costs: no separate Claude Design fee — it ships inside your existing Pro/Max/Team/Enterprise plan. Opus 4.7 is metered against your plan quota, so heavy iteration on the xhigh-effort tier will burn through a Max allowance faster than a typical Claude chat session. Budget one deck run at roughly the same token weight as a medium coding task.

Where it beats existing alternatives

Versus Figma AI. Claude Design wins the cold start. Figma's generative features assume you already have frames, components, and a file structure. Claude drafts from nothing — text prompt, PDF, or URL — and infers a sane layout that respects your tokens. Figma still wins for multi-person real-time editing and fine vector control, so complex marketing sites stay there.

Versus Canva Magic Design. Claude is markedly more consistent with a supplied brand system. Canva tends to recompose your prompt into its own template library; Claude renders against your typography and palette the first time. Canva is cheaper if you only want stock ($15/mo Pro) and has a deeper asset catalog for non-technical teams.

Honest weakness. It is a research preview. Don't expect 99.9% uptime and don't ship a client deliverable without eyeballing it. Opus 4.7's rendering can still drop text inside tight grids by a pixel or two, and complex infographics (hand-drawn icons, layered charts, annotated diagrams) are where the human-designer loop still wins. Collaboration is limited to people on the same workspace — you can't invite an outside contractor to co-edit yet.

Try it this week

Pick one pitch deck, internal update, or product one-pager that went out in the last quarter and could use a refresh. Upload it, your brand guidelines, and ask Claude Design to re-lay it out on your design system. Compare both side-by-side in your next team sync and note which parts Claude missed — that gap is where human design still earns its keep in your workflow.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

Top 3 developer DX tools for shipping faster in 2026

BeanBean — Mon, 20 Apr 2026 17:00:14 +0000

This post contains affiliate links — if you sign up through them, we may earn a small commission at no extra cost to you.

Why picking the right DX tools matters

Every fullstack team rebuilds the same boring plumbing: a contact form, a short link for a campaign, a booking page for calls. Each one eats an afternoon — and over a year, that's weeks gone to problems other people have already solved. Worse, the hand-rolled version often ships with bugs (bad email validation, no rate limiting, broken mobile layout) that a mature tool fixes on day one. The three tools below are narrow, well-scoped, and cheap enough that the build-vs-buy math is almost always "buy." They all play nicely with Next.js, have honest free tiers, and none of them are trying to become a "platform." Pick one, two, or all three depending on how often the underlying problem shows up in your sprint reviews.

Fillout

Fillout replaces the "I need a form that writes to Notion, Airtable, or my own database and doesn't look like 2012" problem. It's a form builder designed with enough primitives — conditional logic, calculations, file uploads, payments — that it covers roughly 90% of the cases engineers used to hand-roll. The upshot: your founder or PM can build the enterprise contact form themselves, and you get to focus on actual product work. Payments, file uploads, and Stripe integration are first-class, which means request-a-demo and paid-application flows don't need an engineer to babysit them.

What's good

Native integrations with Airtable, Notion, Google Sheets, HubSpot, Salesforce, and webhooks — no Zapier tax for the common cases.
Conditional logic and calculated fields are real — you can build quote calculators or multi-step onboarding flows without code.
Embeds cleanly into Next.js via iframe or the React component; no CSS fights.

Watch-outs

The free tier is generous on features but caps submissions — plan on upgrading once the form goes live with real traffic.
If you need pixel-perfect visual control, you will fight the theme system; it's "polished preset," not "custom CSS."

Starting price: free for up to 1,000 submissions/month; paid plans begin at $15/month.

Try for free

Dub.co

Dub is a short-link platform built for developers — think bit.ly if it had been designed by someone who ships code. You point a custom domain at it, create branded links, and get click analytics, UTM builders, and a real API that fits into a deploy pipeline. For anyone managing affiliate links or campaign URLs by hand in a Google Sheet, swapping to Dub pays for itself inside a month.

What's good

Open source core (AGPL) with a hosted plan — you can self-host if compliance requires it, or start on the cloud and move later.
Built-in QR codes, link expirations, password protection, and geo-targeting — all accessible from the API.
Analytics are event-level, not aggregated-only; you can export clicks per link and feed them into your warehouse.

Watch-outs

If you only need three links, it's overkill — a manual redirect in Next.js middleware is two lines of code.
The free tier gets you started, but link retention and advanced analytics live on the paid tiers.

Starting price: free tier with 25 links and 1,000 tracked clicks/month; Pro plan begins at $24/month.

Try for free

Cal.com

Cal.com is the scheduling primitive — a Calendly alternative that's fully open source, self-hostable, and API-first. For fullstack teams running demos, interviews, or paid consults, it removes a surprising amount of back-and-forth without locking your availability data inside a SaaS vendor. If your product ever needs embedded booking (think marketplace, course platform, support desk), Cal's API is the shortest path to ship.

What's good

Self-host on a small VPS; the repo is actively maintained, and it deploys cleanly on Docker or Vercel.
Routing forms, team round-robin, and collect-payment workflows — it matches Calendly feature-for-feature on the paid tier.
Public REST API and webhooks, so you can programmatically create event types or drop a booking widget straight into your product.

Watch-outs

The managed cloud is solid, but if you self-host, expect to manage your own CalDAV sync edge cases and email deliverability.
First-time setup of Google Calendar + Zoom integrations takes around 20 minutes — not hard, just fiddlier than Calendly's hosted flow.

Starting price: free forever for individuals; Teams plan starts at $15/user/month; self-host is $0 plus your server cost.

Use for free

Quick comparison

ToolBest forStrengthStarts at

FilloutForms that write to real backendsConditional logic + native integrations$0 / $15 paid

Dub.coBranded short links at scaleOpen source + event-level analytics$0 / $24 paid

Cal.comScheduling without vendor lock-inSelf-hostable, API-first$0 / $15 paid

Which one should you pick?

Pick Fillout if you keep rebuilding contact, feedback, or onboarding forms and want them to land in Notion, Airtable, or a webhook without hand-wiring.
Pick Dub.co if you ship campaigns, run a newsletter, or manage affiliate links and need branded URLs with real analytics — not a generic bit.ly.
Pick Cal.com if booking calls is a recurring part of your workflow and you'd rather own the data than rent it from Calendly.

In practice, many teams end up wiring in all three — they're cheap, they don't overlap, and each one replaces a task engineers shouldn't be writing from scratch in 2026. The rule of thumb: if a tool costs less than an engineering hour per month and solves a problem you've solved before, just buy it. Your roadmap has better things to do.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

AI Web Dev Digest — Apr 20

BeanBean — Mon, 20 Apr 2026 05:00:00 +0000

Today's briefing

The past 48 hours in AI × web dev have been dominated by one signal: coding agents are graduating from demo to production. Two substantial deep-dives landed on nextfuture — one mapping the macro arc of how agentic coding evolved in early 2026, the other giving engineers a practical scorecard for evaluating Cursor replacements. Taken together, they frame a moment where the tooling choices developers make now will shape team velocity for the rest of the year.

AI Tooling & Agents

AI coding agents in 2026 — a grounded fullstack recap. This in-depth recap covers where Claude Code, Copilot Workspace, and autonomous PR agents are genuinely delivering value, breaks down the real cost-per-PR across team sizes, and outlines the agent-in-the-loop workflows fullstack teams are actually shipping — not just demoing. Essential context if you're evaluating whether to commit budget to agent tooling this quarter. Read more
10 Cursor alternatives ranked by agentic power and real-world DX. A hands-on comparison of Claude Code, Windsurf, Zed, Kilo Code, Codeium, and five others — scored on context window handling, multi-file editing, pricing transparency, and production-readiness rather than marketing claims. If Cursor's pricing or vendor lock-in has you looking around, this is the most thorough public scorecard available. Read more

What to watch next

A Q1 2026 retrospective covering the Vercel pricing restructure, Next.js 16 launch, Claude 4.7, and the major outages that rewrote incident playbooks is currently queued as a draft on nextfuture — expect it to publish soon and provide the broadest industry-wide narrative of the quarter. Meanwhile, the Cursor-alternatives space is moving fast; a follow-up on agentic IDE benchmarks would be timely within the next two weeks.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

The Q1 2026 Web+AI Recap: Launches, Outages, Pricing

BeanBean — Sun, 19 Apr 2026 23:00:00 +0000

Opening

Q1 2026 was one of those quarters where a fullstack engineer's RSS feed and on-call pager rang in near lockstep. Framework majors shipped, LLM price charts got redrawn twice, and two high-profile outages reminded everyone that AI gateways are now Tier-1 dependencies. If you skipped the news to ship features, here's the filtered recap that still matters this month.

Why it matters

Most "industry recap" posts are noise. But a handful of Q1 shifts directly change how you deploy, how much inference costs, and which escape hatches your team needs. Understanding them isn't optional if your roadmap for the rest of 2026 touches model routing, edge rendering, or AI-assisted coding — and most roadmaps do.

The common thread: the AI-native web stack is finally settling into defaults. That's good for productivity and brutal for anyone still running early-2024 patterns in production. Three areas moved fast enough to force real migration work: frameworks, coding agents, and infra pricing.

Technical deep-dive

Frameworks: Next.js 16 lands, React compiler becomes default

Next.js 16 hit stable in late January, with 16.2 following in March. The headline change most teams feel day-to-day is the new cacheComponents semantics — fine-grained, per-component cache control that replaces the older page-level revalidate dance. If you've been wrestling with revalidateTag arity (the 2-arg signature added in 16: revalidateTag(tag, "default")), that's the same pipeline.

React 19.2 made the React Compiler default for new apps. The practical effect: most manual useMemo and useCallback calls are now dead weight in new code. The compiler isn't magic — it still bails on dynamic dependencies and non-pure render paths — but code reviews can stop nitpicking memoization.

Turbopack is now the default dev and build server. Cold starts on a 50k-file monorepo dropped from ~40s to ~9s in our internal benchmark; your mileage will vary, but the gap is real. If you're still on webpack, schedule the migration before Q3.

AI tooling: the coding-assistant field consolidates

Three things happened to AI coding tools in Q1:

Claude Code shipped web sessions, hooks, and first-class sub-agents — pushing the "agent as shell" model into mainstream developer workflows.
Cursor doubled down on multi-file agent loops and background tasks, blurring the IDE-vs-agent line.
Antigravity and Codex CLI made the headless, CI-friendly agent the new baseline expectation.

The Opus 4.7 release in Q1 mattered because it pushed the per-token cost of a fully-tooled coding agent below the psychological "one-coffee-per-feature" threshold for most small tasks. That's why every CI pipeline blog post in March mentioned automated PR triage agents — the economics finally work.

Infra and pricing: the reality check

Vercel rolled out its revised Fluid compute pricing in February. The net effect for most Next.js apps: streaming-heavy routes got cheaper, long-polling got more expensive. If you have not re-run your cost projection, do it this weekend — teams that skipped the exercise reported 20-30% surprises either direction.

Cloudflare Workers AI expanded its free-tier model roster but clipped cold-start allowances — worth re-benchmarking if you were using it as a RAG retrieval layer behind consumer traffic.

And then there were the outages. A global Anthropic API degradation on March 11 and an OpenAI router incident on March 28 each lasted 40+ minutes. Any app without a multi-provider fallback lost features or, worse, spent the window retrying into rate-limit cliffs.

Engineer's take

The most useful Q1 lesson is boring: stop treating LLM endpoints as infallible synchronous dependencies. A tiny router with a circuit breaker pays for itself the first time a provider blips. Here's the ~40-line pattern we now bake into every new service:

import Anthropic from "@anthropic-ai/sdk";
import OpenAI from "openai";

type Provider = "anthropic" | "openai";
const breaker = new Map
();
const OPEN_MS = 30_000;

function isOpen(p: Provider) {
  const s = breaker.get(p);
  if (!s) return false;
  if (Date.now() - s.openedAt > OPEN_MS) {
    breaker.delete(p);
    return false;
  }
  return s.failures >= 3;
}

function trip(p: Provider) {
  const s = breaker.get(p) ?? { failures: 0, openedAt: Date.now() };
  s.failures += 1;
  s.openedAt = Date.now();
  breaker.set(p, s);
}

export async function complete(prompt: string) {
  const order: Provider[] = ["anthropic", "openai"];
  for (const p of order) {
    if (isOpen(p)) continue;
    try {
      if (p === "anthropic") {
        const c = new Anthropic();
        const r = await c.messages.create({
          model: "claude-opus-4-7",
          max_tokens: 1024,
          messages: [{ role: "user", content: prompt }],
        });
        return r.content;
      }
      const o = new OpenAI();
      const r = await o.chat.completions.create({
        model: "gpt-5-mini",
        messages: [{ role: "user", content: prompt }],
      });
      return r.choices[0].message.content;
    } catch {
      trip(p);
    }
  }
  throw new Error("all providers degraded");
}

This isn't novel — it's the same pattern you'd use for Stripe or Twilio. The Q1 takeaway is that you now need it for LLM calls too, because they are no longer the reliable 99.9% dependency marketers claimed in 2024. Bonus: once a breaker is in place, you can route by cost tier (Opus for hard prompts, Haiku for classification) with ten extra lines.

Key takeaways

Upgrade Next.js to 16.2 if you're on 15.x — the Turbopack and cacheComponents wins are worth the migration weekend.
Drop manual memoization on new React 19.2 code; trust the compiler and measure before optimizing.
Re-run your Vercel / Workers cost projection after the February pricing shifts before your next quarterly review.
Treat LLM providers as multi-vendor. Add a breaker + fallback now, not after the next 40-minute outage.
Audit your AI coding workflow. If your team isn't using at least one headless agent in CI by Q2, you're leaving real productivity on the table.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

AI Coding Agents in 2026: A Fullstack Engineer's Recap

BeanBean — Sun, 19 Apr 2026 11:00:02 +0000

Opening

The AI coding assistant market looked crowded in 2024. By April 2026 it looks consolidated, specialized, and — for the first time — genuinely predictable in how it slots into fullstack work. If you paused on agents after a few bad autocompletes a year ago, the landscape has changed enough to warrant a second pass.

Why it matters

If you are shipping Next.js, Nuxt, or SvelteKit apps in 2026, the question is no longer "can AI write code?" but "which part of the loop should it own?" Three forces converged over the past twelve months: inference cost dropped roughly 6-10× for frontier-class models, agentic loops moved from demos into default workflows, and evaluation tooling matured from vibes into repeatable benchmarks.

Each of those shifts changes how a small team staffs a feature. Ignoring them is starting to cost real velocity — and, on the other end, over-indexing on agents without guardrails is producing the "AI-generated tech debt" conversations now showing up in engineering postmortems. Neither extreme is rational. The boring middle path — a narrow agent, scoped tools, logged outputs — is where the teams shipping fastest have landed.

Technical deep-dive

Agent orchestration moved into the editor

The biggest structural shift in early 2026 is that the IDE is now the default agent runtime. Claude Code, Cursor's agent mode, OpenAI's Codex CLI, and Google's Antigravity all expose the same rough surface — a long-running agent with tool access to the filesystem, shell, and language server. What was novel in 2024 (the "autonomous PR" demo) is now table stakes.

The practical consequence for fullstack engineers: context-window strategy beats prompt cleverness. A 200K-token window filled with stale package docs will lose to a 32K window packed with the three files the agent actually needs. Most teams standardized on some form of AGENTS.md or CLAUDE.md at repo root — short, stable instructions, explicit paths to check, and a short allowlist of commands the agent may run without asking. Your repo rules file is now as important as your README.

Token economics finally make sense

Pricing for flagship Claude, GPT, and Gemini tiers dropped to a range where sustained agentic work is no longer a CFO conversation. A typical Next.js feature pass — read five files, edit two, run the typechecker, loop — costs pennies to low single-digit dollars depending on the model. That is 5-10× cheaper than the same loop would have cost in early 2025.

The corollary is that cheap inference rewards verbose, self-correcting prompts. Asking the agent to run tsc --noEmit, read the errors, and patch until green is now economically rational for 500-line changes. It was not in 2024. Prompt caching on Anthropic and OpenAI APIs — 5-10× cost reduction for the repeated system prompt and tool definitions — pushed the math further in the engineer's favor.

Evaluation is the new moat

The less visible shift: eval harnesses went from bespoke to standard. Tools like Braintrust, Langfuse, and OpenAI's evals framework are now the default way teams catch prompt regressions. If your app embeds an LLM call in a critical path — a semantic search, a content classifier, a PR summarizer — not having a regression suite for that call is now the equivalent of not having unit tests for a payment function. Model swaps that used to be silent correctness regressions are now loud CI failures, which is exactly how it should work.

The workflow most teams have converged on is unglamorous: a golden dataset of 50-200 real inputs, a deterministic scoring function (exact match, JSON-schema validity, embedding similarity), and a CI job that runs the eval on every prompt or model change. Nobody writes blog posts about it because it looks exactly like normal testing — which is the point. The bar for shipping AI features is now the same bar as shipping anything else, and teams that do not accept that are the ones producing the "AI-generated tech debt" threads.

Engineer's take

The pattern that has worked across shipped projects is treating the agent like a very fast but literal junior engineer. The productive move is to define the tools it has, the checks it must pass, and the boundary of what it is allowed to touch. Everything else is prompt noise.

Here is the minimal wrapper I now put around any agentic endpoint in a Next.js app — a typed tool registry, a hard iteration cap, and structured messages you can log:

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

type Tool = {
  name: string;
  description: string;
  input_schema: Anthropic.Tool.InputSchema;
  handler: (input: unknown) => Promise;
};

export async function runAgent(
  prompt: string,
  tools: Tool[],
  { maxSteps = 8 }: { maxSteps?: number } = {},
) {
  const messages: Anthropic.MessageParam[] = [
    { role: "user", content: prompt },
  ];

  for (let step = 0; step  ({
        name: t.name,
        description: t.description,
        input_schema: t.input_schema,
      })),
      messages,
    });

    if (resp.stop_reason === "end_turn") return resp;

    const use = resp.content.find((b) => b.type === "tool_use");
    if (!use || use.type !== "tool_use") return resp;

    const tool = tools.find((t) => t.name === use.name);
    const result = tool
      ? await tool.handler(use.input)
      : `Unknown tool: ${use.name}`;

    messages.push({ role: "assistant", content: resp.content });
    messages.push({
      role: "user",
      content: [
        { type: "tool_result", tool_use_id: use.id, content: result },
      ],
    });
  }

  throw new Error(`Agent exceeded ${maxSteps} steps`);
}

Three things are non-negotiable: a step cap (agents loop), a tool allowlist (agents escalate), and structured messages you can log (you will need to debug them). Everything else — prompt rewriting, model swapping, caching — is a tuning knob you adjust after the first version ships.

Key takeaways

Pick one IDE-native agent (Claude Code, Cursor, or Codex) and invest in a CLAUDE.md-style repo rules file. Context beats cleverness every time.
Treat inference as cheap but not free. A step cap and a tool allowlist are the minimum guardrails before anything ships to production.
If your product has an LLM in a critical path, ship an eval harness this quarter. Regressions are silent otherwise, and model swaps happen more often than you think.
Watch the evaluation tooling space — it is where the 2026 moats are actually being built, not in yet another chat wrapper.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

AI Web Dev Digest — Apr 19

BeanBean — Sun, 19 Apr 2026 11:00:01 +0000

Today's briefing

This week brought a flurry of updates to the AI-assisted coding stack that web developers actually use day-to-day. Cursor, Claude Code, Claude Opus, and OpenAI Codex all shipped meaningful changes — some raise the ceiling of what agentic coding can do, others quietly shift the economics of how you run long agent sessions. Here is what matters and what to do about it before your next sprint.

AI Coding Tools & Agents

Ten Cursor alternatives worth a serious look. If Cursor's pricing tier changes or reliability blips have you shopping around, there are now at least ten credible contenders — each with different trade-offs across context window, agent autonomy, IDE integration, and workflow fit. The roundup breaks down who each one is actually for, so you can pick a short list in under ten minutes. Read more
Claude Code ships /advisor. A new strategic-reasoning command positions Claude Code as the "brain" of agentic coding — for planning refactors, dependency audits, and architecture review before writing a single line of code. Useful when you do not want an agent to start editing files until the plan is clear. Read more
Claude Opus 4.7 lands. Sharper coding on real-world tasks, roughly 3x vision throughput, and a pricing shift web engineers need to factor in before budgeting long agent sessions or background runs. Read more
OpenAI Codex April 2026 update. Computer-use mode, persistent memory across sessions, and a 90-plugin ecosystem — but the headline features need a reality check. A field report on what actually ships to production today and what is still rough. Read more

Developer Productivity Stack

Five Calendly alternatives — free and open source. Self-hostable scheduling tools engineers can run without per-seat pricing, handy when a small team outgrows a free tier or wants data to stay in its own infra. Read more

What to watch next

With two major coding assistants (Cursor, Claude Code) and two major model/tool platforms (Opus 4.7, Codex) all shipping in the same window, expect benchmark comparisons and head-to-head reviews to dominate the next cycle. The practical question for web developers is not "which model is smartest" but "which combination ships the most production code per hour at a cost you can defend in a Monday review?" Try one new pairing this week and log your wall-clock time — the numbers decide faster than the marketing does.

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.

OpenAI Codex April 2026 Update Review: Computer Use, Memory & 90+ Plugins — Is the Hype Real?

BeanBean — Thu, 16 Apr 2026 23:00:01 +0000

TL;DR — Quick Verdict

  Feature
  Rating
  Notes




  Background Computer Use (macOS)
  ⭐⭐⭐⭐
  Genuinely impressive. Runs parallel agents in background.


  Memory & Personalization
  ⭐⭐⭐
  Rolling out to Enterprise/Edu first — not everyone yet.


  90+ New Plugins
  ⭐⭐⭐⭐
  Atlassian, CircleCI, GitLab, Render, Neon — solid coverage.


  In-App Browser
  ⭐⭐⭐
  Only useful for localhost apps right now.


  Image Generation (gpt-image-1.5)
  ⭐⭐⭐⭐
  Useful for mockups directly in dev workflow.


  Pricing
  ⭐⭐
  Heavy use gets expensive fast on ChatGPT plans.


  Platform Support
  ⭐⭐
  macOS only for computer use. EU/UK rollout delayed.

Bottom line up front: The April 16 Codex update is the biggest leap OpenAI has made in developer tooling since Codex launched. Background computer use is legitimately novel. Memory and automation scheduling are game-changers — when they actually reach your account. The plugin ecosystem at 90+ is now broader than most developers will ever need. But there are real tradeoffs: macOS-only computer use, staggered rollouts, and a pricing model that punishes heavy automation. Read on for the full breakdown.

What Dropped on April 16, 2026

OpenAI announced what it calls "Codex for (almost) everything" — a positioning shift from Codex-as-code-assistant to Codex-as-full-software-partner. The key new capabilities:

Background computer use on macOS: Codex can now see, click, and type with its own cursor across any macOS app — running in parallel without interfering with your own work.
In-app browser: A built-in browser where you can comment directly on pages to give the agent precise frontend instructions.
Image generation: Codex now uses gpt-image-1.5 to generate and iterate on visual assets (mockups, product concept art, UI designs) directly inside the workflow.
Memory: Codex remembers your preferences, corrections, and gathered context across sessions. Reduces repeated setup for recurring tasks.
Automations with scheduling: Codex can schedule future work for itself and wake up automatically across days or weeks to continue long-running tasks.
90+ new plugins: Including Atlassian Rovo (JIRA), CircleCI, CodeRabbit, GitLab Issues, Microsoft Suite, Neon by Databricks, Remotion, and Render.
Dev workflow improvements: PR review comment handling, multiple terminal tabs, SSH to remote devboxes (alpha), rich file previews (PDFs, spreadsheets, slides).

This is also paired with the April 15 Agents SDK evolution, which adds native sandbox execution (via E2B, Vercel, Cloudflare, Modal, and more), a Manifest abstraction for portable environments, and durable execution so agents can survive container restarts.

Background Computer Use: What It Actually Means for Developers

This is the headliner feature — and it earns it. Previously, Codex operated on code files and terminal output. Now it can see your screen, click buttons, fill forms, and interact with any macOS app — apps that don't expose APIs, GUI-only tools, even games.

Practical examples from the announcement:

Iterating on frontend changes inside Figma or Sketch while you work in another window
Testing your desktop app's UI without writing automation scripts
Operating design tools, spreadsheets, or legacy software that has no API surface

Multiple agents can run in parallel. You could have one agent running visual regression tests while another is reviewing a GitHub PR and a third is updating a JIRA ticket — simultaneously, without stealing your mouse.

Memory: Genuinely Useful, But Still Rolling Out

Codex now preserves context from previous sessions — your coding preferences, project-specific conventions, things you've corrected it on before. Combined with the new proactive suggestions feature (Codex proposes what to work on next based on your project context, open PRs, Slack activity), this starts to feel less like a tool and more like a colleague.

The practical use case is compelling: if you've spent an hour teaching Codex your preferred state management patterns or file structure conventions, it remembers that next time. No re-explaining.

Catch: Memory and personalization are rolling out to Enterprise, Edu, and EU/UK users "soon." If you're on a standard ChatGPT Plus plan, you may not see these features for weeks. OpenAI's staged rollouts have historically been slow.

Automations: Scheduling Your Own Agent

One of the most underrated announcements: Codex can now schedule future work for itself and re-use existing conversation threads — preserving context across multi-day tasks. Real-world use cases teams are reportedly already using:

Landing open pull requests nightly
Following up on tasks across Slack + Notion + Gmail
Monitoring fast-moving conversations and summarizing for async teams

This brings Codex closer to what Devin was promising a year ago — a software engineer that keeps working even when you're offline.

The 90+ Plugin Ecosystem

The plugin expansion is comprehensive. Here are the ones developers will reach for most:

  Plugin
  What it Adds
  Best For




  Atlassian Rovo
  JIRA ticket management, project context
  Teams on JIRA


  CircleCI
  CI/CD pipeline visibility & control
  Backend / DevOps


  CodeRabbit
  AI-powered code review integration
  Teams wanting automated PR review


  GitLab Issues
  GitLab issue tracking + context
  GitLab shops (finally)


  Neon by Databricks
  Serverless Postgres context + query gen
  Full-stack developers


  Render
  Deploy and manage Render services
  Indie hackers & small teams


  Remotion
  Video generation in code workflows
  Content-heavy apps

Notably absent: a native Railway plugin. If you're using Railway for deployment (and you probably should be — it's the cleanest zero-config platform for Node.js and full-stack apps right now), you can still use it alongside Codex via the terminal. Railway's one-click deploys pair naturally with Codex-generated code: Codex writes and reviews, Railway ships. It's the workflow stack I'd recommend for indie developers who want Codex-speed development without managing infrastructure.

The New Agents SDK: Sandbox-Native Agent Execution

Alongside the Codex desktop update, OpenAI's Agents SDK (updated April 15) gets native sandbox support. This is significant for developers building their own agent systems — not just using the Codex app.

from openai_agents import Agent, Sandbox

# Define agent with sandbox execution
agent = Agent(
  name="review-agent",
  instructions="Review the PR diff and suggest improvements",
  tools=["shell", "apply_patch", "read_file"],
  sandbox=Sandbox(
    provider="e2b",  # or "vercel", "cloudflare", "modal"
    manifest={
      "mount": "./project",
      "output": "./review-output"
    }
  )
)

result = agent.run("Review PR #142 and apply suggested fixes")
print(result.artifacts)

Key Agents SDK improvements:

Configurable memory — agents can persist state across runs
Sandbox providers: E2B, Vercel, Cloudflare, Blaxel, Daytona, Modal, Runloop — pick your stack
Manifest abstraction — portable environment descriptions (mount S3, GCS, Azure Blob, Cloudflare R2)
Durable execution — agent state is externalized; container crash ≠ task lost
Native MCP + skills + AGENTS.md — standard agentic primitives built in

from openai_agents import Agent, Memory, AutomationSchedule

# Agent with memory + scheduled follow-up
agent = Agent(
  name="pr-watcher",
  memory=Memory(scope="project"),  # persists across runs
  instructions="Monitor open PRs and flag stale ones daily"
)

# Schedule to run daily at 9am
agent.schedule(AutomationSchedule.daily(hour=9))
agent.run("Check for PRs open > 7 days and notify in Slack")

⚠️ The Controversy: What They Don't Tell You

Developer communities have been excited — but not uniformly. Here's what the honest Reddit and HN threads are flagging:

1. Computer Use = Screenshot Streaming to OpenAI Servers

Background computer use works by sending screenshots of your screen to OpenAI's models for interpretation. This is the same fundamental privacy concern raised against Recall and other screen-capture AI tools. If you're working with proprietary code, client data, or anything under NDA — be cautious. OpenAI's data usage policies for Codex apply here, and the nuance matters.

2. macOS Only — and EU/UK Are Third-Class Citizens Again

Computer use is macOS only at launch. No Windows. No Linux. European and UK users are getting memory and computer use "soon" — which in OpenAI's track record means 4-8 weeks minimum. If you're a developer outside the US or on Windows, the headline feature doesn't exist for you yet.

3. Cost at Scale Gets Brutal

Automations that run overnight, schedule themselves, and chain tasks sound great — until you see the token bill. Heavy Codex automation use on ChatGPT Pro can easily burn through $50-100/month at scale. OpenAI hasn't published per-task pricing for the automation scheduling features, which is a deliberate omission developers on Hacker News were quick to note. See our earlier post on Codex's token pricing for the full breakdown.

4. The "Almost" in "Codex for Almost Everything"

The in-app browser currently only controls localhost apps — it can't fully navigate the open web yet. OpenAI says "over time we plan to expand it so Codex can fully command the browser beyond web applications on localhost." That's a lot of future tense in a launch announcement.

Codex vs. The Competition (April 2026)

  Tool
  Computer Use
  Memory
  Scheduling / Automations
  Plugin Ecosystem
  Pricing
  Best For




  **OpenAI Codex**
  ✅ macOS
  ✅ (rolling out)
  ✅ Schedule + wake up
  90+ plugins
  ChatGPT Pro $20-200/mo
  Full-stack devs on macOS


  **Cursor 3**
  ❌
  ⚠️ Limited
  ❌
  Agent-first IDE
  $20/mo + usage
  Editor-centric workflows


  **Claude Code**
  ❌
  via MEMORY.md
  ❌
  MCP ecosystem
  Per-token (API)
  Power users, custom stacks


  **Devin**
  ✅ (web)
  ✅
  ✅
  Moderate
  $500/mo (ACUs)
  Enterprise teams


  **GitHub Copilot Workspace**
  ❌
  ❌
  ❌
  GitHub native
  $10-19/mo
  GitHub-centric teams

Practical Code Example: Combining Agents SDK + Codex Plugins

from openai_agents import Agent, Plugin, Memory

# Agent that handles daily PR review using CodeRabbit + CircleCI plugins
agent = Agent(
  name="daily-dev-agent",
  instructions="""
    Every morning:
    1. Check for new PRs since yesterday
    2. Run CodeRabbit review on each PR
    3. Check CircleCI status for failing tests
    4. Summarize findings and post to Slack
  """,
  plugins=[
    Plugin("coderabbit"),
    Plugin("circleci"),
    Plugin("slack"),
    Plugin("github")
  ],
  memory=Memory(scope="project", retention_days=30)
)

# This agent will now remember your team's review preferences
# from previous runs and adapt its suggestions accordingly
agent.run("Daily morning dev review")

Should You Switch to / Upgrade Codex?

✅ Use It If:

You're on macOS and want computer use for GUI-only tools
You have repetitive dev tasks (PR reviews, daily standups, JIRA updates) that could be automated
Your team is already in the ChatGPT ecosystem and has Pro/Enterprise accounts
You work on frontend development and want to iterate on visual designs + code in one workflow
You want the most integrated agent-native coding experience available right now

❌ Don't Use It If:

You're on Windows or Linux (computer use isn't available yet)
You work with sensitive/proprietary data and are uncomfortable with screen capture streaming
You're cost-sensitive — heavy automation can get expensive fast
You're in the EU/UK and want the full feature set today (not "soon")
You prefer editor-native workflows over a separate app experience (Cursor 3 may suit you better)

What This Means for the Broader Dev Stack

The Codex update — combined with the new Agents SDK sandbox support — signals that OpenAI is positioning Codex as the orchestration layer for your entire software development lifecycle. Not just writing code, but understanding codebases, reviewing changes, managing project context, talking to CI/CD, deploying, and iterating on design.

If you want to see how the Agents SDK compares to managed agent APIs and model-agnostic frameworks, check out our Claude Managed Agents deep dive for the alternative architecture perspective.

For the editor-side story — how Cursor 3's "agent-first" IDE fits alongside (or competes with) Codex — see our Cursor 3 deep dive.

For Developers Building Their Own Products

One thing the Codex update underlines: agent-native applications are becoming the default expectation. If you're building a SaaS or developer tool, users will increasingly expect agentic features. The AI Frontend Starter Kit ($49) includes pre-built agent UI patterns and scaffolding for integrating with OpenAI's Agents SDK — so you're not starting from scratch when adding these capabilities to your own product.

Verdict

The April 2026 Codex update is legitimately the most significant developer AI release since Claude Code landed. Background computer use alone changes what's possible for automation workflows. The plugin ecosystem at 90+ is now serious infrastructure. Memory and automations, when they fully roll out, will feel transformative.

The catches are real: macOS only, privacy concerns with screen capture, staggered rollouts, and opaque pricing for automation-heavy use. But if you're a macOS developer and you haven't revisited Codex since it launched — April 2026 is the moment to do that.

Rating: 4.2 / 5 — Best AI coding assistant update of 2026 so far, with real limitations that prevent a perfect score.

{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is the OpenAI Codex April 2026 update?",
"acceptedAnswer": {
"@type": "Answer",
"text": "On April 16, 2026, OpenAI released a major Codex update adding background computer use on macOS (Codex can see and click your screen), memory across sessions, scheduling/automation for long-running tasks, 90+ new plugins (Atlassian, CircleCI, GitLab, Render, Neon, etc.), an in-app browser for frontend iteration, and image generation via gpt-image-1.5."
}
},
{
"@type": "Question",
"name": "Is OpenAI Codex computer use available on Windows?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. As of the April 2026 launch, Codex computer use is only available on macOS. EU and UK users also face a delayed rollout. Windows support has not been announced."
}
},
{
"@type": "Question",
"name": "How does Codex computer use work technically?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Codex computer use works by taking screenshots of your screen and sending them to OpenAI's models, which interpret what they see and generate click/type actions. Multiple agents can run in parallel in the background without interfering with your own mouse and keyboard usage."
}
},
{
"@type": "Question",
"name": "What are the privacy risks of OpenAI Codex computer use?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Since computer use involves streaming screenshots to OpenAI servers, any sensitive data visible on your screen (proprietary code, client data, NDA-protected information) is potentially captured. Developers working with confidential information should review OpenAI's data usage policies for Codex before enabling this feature."
}
},
{
"@type": "Question",
"name": "How does the new OpenAI Agents SDK differ from before?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The April 2026 Agents SDK update adds native sandbox execution (via E2B, Vercel, Cloudflare, Modal, Runloop, Blaxel, Daytona), configurable memory, durable execution (agent state persists if a container crashes), a Manifest abstraction for portable environments, and built-in support for MCP, skills, and AGENTS.md — making it easier to build production-grade agents without piecing together infrastructure yourself."
}
},
{
"@type": "Question",
"name": "Is OpenAI Codex worth it compared to Cursor 3 or Claude Code?",
"acceptedAnswer": {
"@type": "Answer",
"text": "For macOS developers wanting computer use, automation scheduling, and the broadest plugin ecosystem, Codex is now the strongest option. Cursor 3 remains better for editor-native, agent-first coding workflows. Claude Code excels for power users who want terminal-native control and custom MCP stacks. The right choice depends on your OS, workflow, and budget."
}
}
]
}

This article was originally published on NextFuture. Follow us for more fullstack & AI engineering content.