{"id":21676,"date":"2026-08-14T17:37:22","date_gmt":"2026-08-14T15:37:22","guid":{"rendered":"https:\/\/www.juust.org\/?p=21676"},"modified":"2026-08-15T22:34:56","modified_gmt":"2026-08-15T20:34:56","slug":"seo-blogger-agent-in-in-typescript-the-handoff","status":"publish","type":"post","link":"https:\/\/www.juust.org\/index.php\/seo-blogger-agent-in-in-typescript-the-handoff\/2026\/08\/","title":{"rendered":"SEO Blogger Agent in TypeScript ~ a Handoff"},"content":{"rendered":"\n

Three agents. One pipeline. Zero frameworks.<\/em><\/h2>\n\n\n\n

You have seen the single-agent loop in our previous articles: a while<\/code> loop that sends history to the model, executes tool calls, and keeps going until it gets a final answer. That loop is the foundation of every agent ever built.<\/p>\n\n\n\n

But real-world workflows rarely use a single agent. They chain agents together: one researches, another writes, a third publishes. Each agent has a focused job, a narrow context window, and a clear output format. The output of one agent becomes the input of the next. That is a handoff<\/strong>, and it is the most practical multi-agent pattern you will ever use.<\/p>\n\n\n\n

This guide builds a three-agent SEO content pipeline in vanilla TypeScript<\/strong>:<\/p>\n\n\n\n

    \n
  1. SEO agent<\/strong> \u2014 queries live Google results via DataForSEO, scrapes top-ranking pages via Jina Reader, and produces a structured article brief.<\/li>\n\n\n\n
  2. Writer agent<\/strong> \u2014 takes the brief plus the scraped research and writes a full article draft.<\/li>\n\n\n\n
  3. Publisher agent<\/a><\/strong> \u2014 formats the article into a WordPress-ready REST API payload and posts it as a draft.<\/li>\n<\/ol>\n\n\n\n

    Everything is on GitHub: https:\/\/github.com\/juustesout\/typescript-agent-with-handoff-seo-blogger<\/a> (the handoff example lives in the TShandoff<\/code> folder).<\/p>\n\n\n\n

    \n\n\n\n

    1. Installatie \u2014 More Keys, Same Setup<\/h2>\n\n\n\n

    You need Node.js 18+<\/strong> and a handful of API keys. Two dev dependencies (TypeScript + @types\/node<\/code>):<\/p>\n\n\n\n

    git clone https:\/\/github.com\/juustesout\/typescript-agent-with-handoff-seo-blogger\ncd javascript-agents-example\/TShandoff\nnpm install\ncp .env.example .env\n<\/code><\/pre>\n\n\n\n
    Open .env<\/code> and add your keys:<\/p>\n\n\n\n
    OPENAI_API_KEY=sk-proj-your-key-here\nOPENAI_MODEL=gpt-4o-mini\nOPENAI_BASE_URL=https:\/\/api.openai.com\/v1\n\nDATAFORSEO_API_KEY=your-dataforseo-key\nDATAFORSEO_BASE_URL=https:\/\/api.dataforseo.com\n\nJINA_API_KEY=your-jina-key\n\nWP_BASE_URL=https:\/\/your-site.com\nWP_USERNAME=your-wordpress-username\nWP_APPLICATION_PASSWORD=your-wordpress-app-password\n<\/code><\/pre>\n\n\n\n
    Four API integrations, one .env<\/code> file. The built-in loadEnv()<\/code> loads them all automatically.<\/p>\n\n\n\n
    npm run build\nnpm run demo \"AI agents for SEO content workflows\"\n<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    2. Project Structure<\/h2>\n\n\n\n
    TShandoff\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 miniAgent.ts    # Reusable OpenAI-compatible agent loop (same as before)\n\u2502   \u251c\u2500\u2500 handoff.ts      # Three-agent pipeline: SEO \u2192 writer \u2192 publisher\n\u2502   \u2514\u2500\u2500 demo.ts         # Entry point \u2014 runs the full pipeline\n\u251c\u2500\u2500 dist\/               # Compiled TypeScript output\n\u251c\u2500\u2500 .env.example\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 tsconfig.json\n<\/code><\/pre>\n\n\n\n
    Three source files, one pipeline. The miniAgent.ts<\/code> is the same MiniAgent<\/code> class from the previous TypeScript article \u2014 the core loop does not change, only the prompts and tools do.<\/p>\n\n\n\n
    \n\n\n\n
    3. The Core Agent Loop \u2014 A Quick Refresher<\/h2>\n\n\n\n
    The MiniAgent<\/code> class is identical to the one in the TypeScript agents example. It is a single while<\/code> loop:<\/p>\n\n\n\n
    async run(userPrompt: string): Promise<string> {\n  this.messages = [\n    { role: \"system\", content: this.systemPrompt },\n    { role: \"user\", content: userPrompt },\n  ];\n\n  for (let iteration = 1; iteration <= this.maxToolIters; iteration++) {\n    const reply = await this._callModel();\n\n    if (reply.tool_calls && reply.tool_calls.length) {\n      await this._handleToolCalls(reply.tool_calls);\n      continue;  \/\/ loop back to the model\n    }\n\n    return reply.content || \"\";  \/\/ final answer\n  }\n\n  throw new Error(\"No final answer after max iterations.\");\n}\n<\/code><\/pre>\n\n\n\n
    The call to the model, the tool execution, and the tool_call_id<\/code> protocol are all identical to the earlier TypeScript article. If you have read that, you know this. The difference is in how we use three instances of this class<\/strong> \u2014 not in the class itself.<\/p>\n\n\n\n
    \n\n\n\n
    4. The Three Agents<\/h2>\n\n\n\n
    Each agent is a MiniAgent<\/code> with a different system prompt, a different temperature, and a different set of tools. They do not share state \u2014 the output of one is passed as the input to the next as a plain JSON string.<\/p>\n\n\n\n
    Agent 1 \u2014 The SEO Researcher<\/h3>\n\n\n\n
    The SEO agent has one tool: a DataForSEO SERP query that fetches live Google organic results. Its job is to produce a structured ArticleBrief<\/code>:<\/p>\n\n\n\n
    export type ArticleBrief = {\n  topic: string;\n  audience: string;\n  angle: string;\n  keyword: string;\n  headings: string[];\n  outline: string[];\n  tone: string;\n  seoNotes: string[];\n  researchContext?: string;\n};\n<\/code><\/pre>\n\n\n\n
    The system prompt tells it to use the tool before writing, and to return strict JSON only<\/strong>:<\/p>\n\n\n\n
    const SEO_PROMPT = `\nYou are the SEO agent for a blog workflow.\n\nImportant: before writing the brief, use the DataForSEO research tool\nto inspect live Google organic results. Then use those results to\ninfer search intent, top competitors, and likely article angle.\n\nReturn only valid JSON in this exact structure:\n{\n  \"topic\": \"...\",\n  \"audience\": \"...\",\n  \"angle\": \"...\",\n  \"keyword\": \"...\",\n  \"headings\": [\"...\"],\n  \"outline\": [\"...\"],\n  \"tone\": \"...\",\n  \"seoNotes\": [\"...\"]\n}\n`;<\/code><\/pre>\n\n\n\n
    The agent is created with a low temperature (0.4) for consistency:<\/p>\n\n\n\n
    const seoAgent = buildAgent(SEO_PROMPT, {\n  model: \"gpt-4o-mini\",\n  temperature: 0.4,\n});\n\nseoAgent.addTool(\"dataforseo_google_organic_live_advanced\",\n  \"Search live Google organic results...\",\n  { type: \"object\", properties: { ... }, required: [\"keyword\"] },\n  async (args) => fetchDataForSeoGoogleOrganicLiveAdvanced({ ... })\n);<\/code><\/pre>\n\n\n\n
    Agent 2 \u2014 The Article Writer<\/h3>\n\n\n\n
    The writer has no tools. It receives the SEO brief plus the scraped research context and produces a complete article draft \u2014 title, summary, outline, content, meta description and slug, all as JSON:<\/p>\n\n\n\n
    const WRITER_PROMPT = `\nYou are the article writer agent.\n\nYou receive a structured SEO brief plus live SERP and scraped\nsource context. Use those signals to build the article.\n\nReturn valid JSON in this exact structure:\n{\n  \"title\": \"...\",\n  \"summary\": \"...\",\n  \"outline\": [\"...\"],\n  \"content\": \"...\",\n  \"metaDescription\": \"...\",\n  \"slug\": \"...\"\n}\n`;<\/code><\/pre>\n\n\n\n
    The writer runs at a higher temperature (0.8) for creative variation:<\/p>\n\n\n\n
    const writerAgent = buildAgent(WRITER_PROMPT, {\n  model: \"gpt-4o-mini\",\n  temperature: 0.8,\n});\n\nconst result = await callModelForJson(writerAgent, `\n  Use this SEO brief and the live SERP\/scrape research to draft the article.\n  SEO brief: ${JSON.stringify(brief, null, 2)}\n  SERP + scraped source research: ${brief.researchContext}\n`);<\/code><\/pre>\n\n\n\n
    Agent 3 \u2014 The WordPress Publisher<\/h3>\n\n\n\n
    The publisher takes the article draft, the SEO brief and the research context, and formats everything into a WordPress REST API payload. It adds the research-aware framing and ensures the content is ready for the API:<\/p>\n\n\n\n
    const PUBLISHER_PROMPT = `\nYou are the WordPress publisher agent.\n\nFormat the article draft into a WordPress-ready publish payload\nusing the article plus the live SERP and scraped source context.\n\nReturn valid JSON in this exact structure:\n{\n  \"title\": \"...\",\n  \"content\": \"...\",\n  \"status\": \"draft\",\n  \"slug\": \"...\",\n  \"excerpt\": \"...\",\n  \"meta\": {\n    \"seo_title\": \"...\",\n    \"meta_description\": \"...\"\n  }\n}\n`;<\/code><\/pre>\n\n\n\n
    The publisher runs at a moderate temperature (0.5) \u2014 just enough to frame the research context without rewriting the article.<\/p>\n\n\n\n
    \n\n\n\n
    5. The Handoff \u2014 How Data Flows Between Agents<\/h2>\n\n\n\n
    The handoff is the core idea of this project. It is not complex \u2014 it is a simple chain of async function calls, each passing its output to the next:<\/p>\n\n\n\n
    export async function runHandoff(topic: string) {\n  const brief = await seoResearch(topic);        \/\/ step 1: SEO\n  const draft = await writeArticle(brief);        \/\/ step 2: writer\n  const publishPayload = await prepareWordPressPayload(draft, brief); \/\/ step 3: publisher\n  const result = await publishToWordPress(publishPayload);            \/\/ step 4: HTTP\n  return { brief, draft, publishPayload, result };\n}\n<\/code><\/pre>\n\n\n\n
    Each step is a function, not a shared agent context. The data is passed as plain JSON strings, which means:<\/p>\n\n\n\n