DEV Community: masaya ohsugi

LLM Chains vs Single Calls in n8n: My Caption Generation Experiment

masaya ohsugi — Sat, 07 Feb 2026 16:00:28 +0000

I tested two approaches for generating Instagram captions with n8n:

Approach A: Claude Haiku 4.5 × 3-step chain (cost optimization attempt)
Approach B: Claude Sonnet 4.5 × single call

Result: Sonnet single call won by a landslide. Consistency and tone matter more than I thought.

The Hypothesis

While building an n8n workflow for Instagram carousel captions, I wondered: "Can I save costs by chaining a cheaper model (Haiku) with role-specific prompts instead of using an expensive model once?"

Spoiler: Nope. Not for creative tasks.

Tech Stack

n8n v1.19.4+ (Advanced AI nodes)
Claude 4.5 Haiku & Sonnet via Anthropic API
Node.js 18+ for testing
Environment: ANTHROPIC_API_KEY

The Two Approaches

Approach A: 3-Step Chain (Haiku)

Break the task into micro-steps:

Extract key points from data
Draft structure using Step 1 output
Polish and add metadata

Approach B: Single Call (Sonnet)

Throw everything at the model once and let it handle the whole flow.

The Code

Here's the test script I used to compare both approaches outside n8n:

# Setup
npm init -y
npm i @anthropic-ai/sdk dotenv
export ANTHROPIC_API_KEY="your_key_here"

index.mjs

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

const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

// Sample data structure
const image_details = [
  { order: 1, attributeA: "value1", attributeB: "value2" },
  { order: 2, attributeA: "value3", attributeB: "value4" },
];

async function callClaude({ model, system, prompt }) {
  const res = await client.messages.create({
    model,
    max_tokens: 1000,
    system,
    messages: [{ role: "user", content: prompt }],
  });
  return res.content?.text ?? "";
}

// Approach A: Haiku 3-step chain
async function haikuChain() {
  const model = "claude-haiku-4-5";
  const system = "You are a caption editor. Be concise.";

  // Step 1: Extract data
  const step1 = await callClaude({
    model,
    system,
    prompt: `Extract key descriptions from this data:\n${JSON.stringify({ image_details }, null, 2)}`,
  });

  // Step 2: Create structure
  const step2 = await callClaude({
    model,
    system,
    prompt: `Based on this, create hook + body + CTA:\n${step1}`,
  });

  // Step 3: Add tags
  const step3 = await callClaude({
    model,
    system,
    prompt: `Add hashtags to this caption:\n${step2}`,
  });

  return { step1, step2, final: step3 };
}

// Approach B: Sonnet single call
async function sonnetSingle() {
  const model = "claude-sonnet-4-5";
  const system = "You are a caption editor. Be concise.";

  return await callClaude({
    model,
    system,
    prompt: `Create a complete caption (hook + body + bullets + CTA + tags) from:\n${JSON.stringify({ image_details }, null, 2)}`,
  });
}

// Run both
const resultA = await haikuChain();
const resultB = await sonnetSingle();

console.log("=== Haiku Chain ===\n", resultA.final);
console.log("\n=== Sonnet Single ===\n", resultB);

n8n Integration Gotcha

When preparing data in n8n's Code node, don't just pass IDs:

const transformedImages = items.json.transformedImages;

// ❌ Wrong: LLM can't work with IDs alone
const image_details = transformedImages.map(img => ({ id: img.id }));

// ✅ Right: Give the LLM actual content to work with
const image_details = transformedImages.map((img, index) => ({
  order: index + 1,
  ...img, // Spread ALL attributes the LLM needs
}));

return [{ json: { image_details } }];

What Broke (And How I Fixed It)

Issue: Step 1 Kept Returning "Unknown"

Root cause: I was only passing image IDs to the LLM. No descriptions, no attributes—just meaningless identifiers.

The fix: Spread the entire object (...img) so the LLM gets all the context it needs.

This was embarrassing but educational.

Results

Metric	Haiku 3-Chain	Sonnet Single
Context awareness	Fragments between steps	Holistic understanding
Tone consistency	Stitched together, uneven	Unified from start to finish
Output quality	Informative but stiff	Natural, engaging, flows well
Cost	~3× cheaper	Higher but worth it

The verdict: For captions (or any creative writing), context continuity beats cost savings.

When to Use Each Approach

Pattern	Use Case	Examples
Lower model + Chain	Clear role separation	Data extraction, classification, formatting
Mid/upper model + Single	Context-dependent creativity	Captions, articles, copywriting

Key Takeaways

Context > Cost: For creative tasks, fragmented chains break the narrative flow
Data quality matters: If you don't feed the LLM enough info, no amount of chaining will help
Haiku's niche: Great for speed and structured tasks, but Sonnet wins for "feel"

References

Automated Video Generation with n8n and Remotion: Server Setup Guide

masaya ohsugi — Fri, 06 Feb 2026 14:20:43 +0000

I built a video generation workflow by combining n8n (a business automation tool) and Remotion (a React-based video framework).

In this post—the "Server Setup Edition"—I will share how to build an HTTP API server (Express) on a VPS to render Remotion videos, along with the specific pitfalls I encountered (such as memory shortages and bundling times).

Architecture

The setup involves sending a POST request from n8n's "HTTP Request" node. The server receives parameters (like text and colors), renders the video on the server side, and returns the file path.

n8n: Sends text and parameters via POST
Express Server (VPS): Receives the request and executes Remotion
Remotion: Renders React components into an MP4 file
Response: Returns the path of the generated video

Environment

Since Remotion rendering uses a headless browser, it consumes significant resources, especially memory.

VPS OS: Ubuntu 22.04
Node.js: 20.x
Remotion: 4.0.x
Framework: Express 4.x
Memory: 4GB or more recommended (2GB will likely cause crashes)

Project Structure

The structure is simple. The api directory contains the server logic, and src contains the React components for the video.

remotion-server/
├── src/
│   ├── Video.tsx          # Video content (React component)
│   └── index.ts           # Remotion entry point
├── api/
│   └── server.ts          # Express server entry point
├── out/                   # Destination for rendered videos
├── package.json
└── tsconfig.json

Implementation

1. package.json

The key point here is the start script. Since the Remotion rendering process is heavy, I relaxed the Node.js heap memory limit.

{
  "name": "remotion-server",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node --max-old-space-size=3072 api/server.js"
  },
  "dependencies": {
    "@remotion/bundler": "^4.0.0",
    "@remotion/renderer": "^4.0.0",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "remotion": "^4.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.0.0",
    "typescript": "^5.0.0"
  }
}

2. Video Component (src/Video.tsx)

This is a simple video component that changes text and background color based on the received props.

import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';
import React from 'react';

interface VideoProps {
  text: string;
  color: string;
}

export const MyVideo: React.FC<VideoProps> = ({ text, color }) => {
  const frame = useCurrentFrame();

  // Fade in between frames 0 and 30
  const opacity = interpolate(frame, ,, {[1]
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <h1 style={{ fontSize: 100, color: 'white', opacity }}>
        {text}
      </h1>
    </AbsoluteFill>
  );
};

3. API Server (api/server.ts)

This is the core implementation. To improve performance, I designed it to execute the Webpack bundle only once at server startup and cache the result for reuse.

import express from 'express';
import { bundle } from '@remotion/bundler';
import { renderMedia, selectComposition } from '@remotion/renderer';
import path from 'path';
import { fileURLToPath } from 'url';
import fs from 'fs';

const app = express();
app.use(express.json());

// Path resolution for ES Modules environment
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Keep bundle result in memory
let cachedBundleLocation: string | null = null;

// Create bundle at server startup
async function initializeBundle() {
  console.log('Creating Webpack bundle...');
  const entryPoint = path.resolve(__dirname, '../src/index.ts');

  cachedBundleLocation = await bundle({
    entryPoint,
    webpackOverride: (config) => ({
      ...config,
      cache: { type: 'filesystem' }, // Speed up build
    }),
  });
  console.log('Bundle created:', cachedBundleLocation);
}

// Video generation endpoint
app.post('/render', async (req, res) => {
  try {
    const { text = 'Hello', color = '#000000' } = req.body;

    if (!cachedBundleLocation) {
      return res.status(500).json({ error: 'Bundle not initialized' });
    }

    // Select composition (video settings)
    const composition = await selectComposition({
      serveUrl: cachedBundleLocation,
      id: 'MyVideo',
      inputProps: { text, color },
    });

    // Generate output file path
    const timestamp = Date.now();
    const outputLocation = path.resolve(__dirname, `../out/video-${timestamp}.mp4`);

    // Create directory
    const outputDir = path.dirname(outputLocation);
    if (!fs.existsSync(outputDir)) {
      fs.mkdirSync(outputDir, { recursive: true });
    }

    console.log(`Rendering started: ${outputLocation}`);

    // Execute rendering
    await renderMedia({
      composition,
      serveUrl: cachedBundleLocation,
      codec: 'h264',
      outputLocation,
      inputProps: { text, color },
    });

    console.log('Rendering completed.');

    res.json({
      success: true,
      path: outputLocation,
      filename: path.basename(outputLocation),
    });

  } catch (error) {
    console.error('Render error:', error);
    res.status(500).json({
      error: 'Rendering failed',
      message: error instanceof Error ? error.message : 'Unknown error',
    });
  }
});

// Startup process
const PORT = process.env.PORT || 3000;
initializeBundle()
  .then(() => {
    app.listen(PORT, () => {
      console.log(`Server running on port ${PORT}`);
    });
  })
  .catch((e) => {
    console.error('Failed to start server:', e);
    process.exit(1);
  });

Usage

Startup

# Install dependencies
npm install

# TypeScript compilation
npx tsc

# Start server (with heap memory expansion)
npm start

Request Example

Send a request from n8n or Curl as follows:

curl -X POST http://localhost:3000/render \
  -H "Content-Type: application/json" \
  -d '{"text":"Hello Zenn","color":"#3ea8ff"}'

Response:

{
  "success": true,
  "path": "/path/to/remotion-server/out/video-1738465200000.mp4",
  "filename": "video-1738465200000.mp4"
}

Technical Challenges & Gotchas

Here are three major issues I faced during implementation and their solutions.

1. Bundling was too heavy and caused timeouts

Initially, I executed the bundle() function for every request. This meant Webpack ran every time a video was generated, resulting in a wait time of over 5 minutes before rendering even started.

Solution:
I changed the logic to run bundling only once at server startup (initializeBundle) and cache the generated bundleLocation in a variable. This allows rendering to start immediately for all subsequent requests.

// NG: Executed inside every request
// app.post('/render', async (req, res) => {
//   const bundleLocation = await bundle({ ... }); // Too heavy
// });

// OK: Executed once at startup and cached
let cachedBundleLocation: string | null = null;
await initializeBundle();

2. Process crashed due to memory shortage

When running on a VPS (2GB memory plan), the process was frequently killed (Killed) during rendering. Remotion uses Chromium in headless mode, which consumes a lot of memory.

Solution:
I added the --max-old-space-size option to increase the Node.js heap size limit. I also highly recommend using a VPS with at least 4GB of RAM.

"scripts": {
  "start": "node --max-old-space-size=3072 api/server.js"
}

3. Path resolution differences (__dirname vs process.cwd)

I encountered issues where file paths drifted between the development environment and the production environment (when started with PM2, etc.).

process.cwd(): The directory where the command was executed (depends on launch location)
__dirname: The directory where the script file is located (depends on file location)

Solution:
I unified the path resolution by using __dirname (generated from import.meta.url since this is ESM) for specifying the entry point, resolving relative paths from there. This ensures stability regardless of where the command is run.

// NG: Path changes depending on where you launch
// const entryPoint = path.resolve(process.cwd(), 'src/index.ts');

// OK: Reliable as it's based on server.ts location
const entryPoint = path.resolve(__dirname, '../src/index.ts');

Conclusion

I have now completed an API server that can be called from n8n to generate videos at any time.

In this example, I simply saved the MP4 locally and returned the path. However, in a production environment, adding a process to upload the file to AWS S3 and return a signed URL would make it more practical.

Automated video generation can be applied to various use cases, such as automating SNS posts or creating personalized videos.