<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ai-agents Archives - Vijay Gokarn</title>
	<atom:link href="https://vijay-gokarn.com/tag/ai-agents/feed/" rel="self" type="application/rss+xml" />
	<link>https://vijay-gokarn.com/tag/ai-agents/</link>
	<description>&#34;Ignite Curiosity. Fuel the Future.&#34;</description>
	<lastBuildDate>Sat, 18 Apr 2026 11:20:04 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://i0.wp.com/vijay-gokarn.com/wp-content/uploads/2023/09/cropped-ideogram.jpeg?fit=32%2C32&#038;ssl=1</url>
	<title>ai-agents Archives - Vijay Gokarn</title>
	<link>https://vijay-gokarn.com/tag/ai-agents/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">230943525</site>	<item>
		<title>Creating AI Storytelling Agents Using Flowise: A Step-by-Step Guide</title>
		<link>https://vijay-gokarn.com/creating-ai-storytelling-agents-using-flowise-a-step-by-step-guide/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=creating-ai-storytelling-agents-using-flowise-a-step-by-step-guide</link>
		
		<dc:creator><![CDATA[Vijay Gokarn]]></dc:creator>
		<pubDate>Fri, 24 Jan 2025 16:51:01 +0000</pubDate>
				<category><![CDATA[ai-agents]]></category>
		<category><![CDATA[databricks]]></category>
		<category><![CDATA[food]]></category>
		<category><![CDATA[generative-ai]]></category>
		<category><![CDATA[python]]></category>
		<guid isPermaLink="false">https://vijay-gokarn.com/?p=227</guid>

					<description><![CDATA[<p>GenAI Mastery Series · Agentic AI · Flowise Walkthrough Building an AI Storytelling Agent with Flowise — No Code Required StackFlowise · OpenAI GPT-4 · Supervisor/Worker Nodes DeploymentLocal · Cloud-ready OutputIBM the Robot&#8217;s Marshmallow Party Concepts Covered AI Agents Flowise Workflows Supervisor / Worker Pattern ChatOpenAI Node No-Code Orchestration Prompt Engineering In today&#8217;s AI landscape, [&#8230;]</p>
<p>The post <a href="https://vijay-gokarn.com/creating-ai-storytelling-agents-using-flowise-a-step-by-step-guide/">Creating AI Storytelling Agents Using Flowise: A Step-by-Step Guide</a> appeared first on <a href="https://vijay-gokarn.com">Vijay Gokarn</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=DM+Sans:wght@300;400;500&#038;family=DM+Mono:wght@400&#038;display=swap" rel="stylesheet">

<style>
.vg4 {
  --ink: #0e0e0e; --paper: #f7f4ef; --paper-dark: #ede9e1;
  --teal: #0f6e56; --teal-light: #1d9e75; --teal-muted: #e1f5ee;
  --amber: #ba7517; --amber-light: #fac775; --amber-muted: #faeeda;
  --charcoal: #2c2c2a; --muted: #888780;
  --border: rgba(14,14,14,0.12); --border-strong: rgba(14,14,14,0.25);
  font-family: 'DM Sans', sans-serif; font-weight: 300;
  color: var(--ink); background: var(--paper); line-height: 1.75; font-size: 16px; overflow-x: hidden;
}
.vg4 *, .vg4 *::before, .vg4 *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* HERO */
.vg4-hero { background: var(--ink); padding: 5rem 4rem 4rem; position: relative; overflow: hidden; }
.vg4-hero::before {
  content: '⬡'; font-family: 'Cormorant Garamond', serif; font-size: 24rem;
  color: rgba(255,255,255,0.025); position: absolute;
  right: -2rem; bottom: -5rem; line-height: 1; pointer-events: none;
}
.vg4-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.vg4-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal-light); font-weight: 500; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.vg4-eyebrow::before { content: ''; display: inline-block; width: 1.5rem; height: 1px; background: var(--teal-light); }
.vg4-hero h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300; line-height: 1.1; color: var(--paper); letter-spacing: -0.02em;
  margin-bottom: 1.5rem; max-width: 26ch;
}
.vg4-hero h1 em { font-style: italic; color: var(--amber-light); }
.vg4-meta-row { display: flex; gap: 2rem; flex-wrap: wrap; }
.vg4-meta { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,244,239,0.35); }
.vg4-meta span { color: rgba(247,244,239,0.7); margin-left: 0.4rem; }

/* PILL BAND */
.vg4-pill-band {
  background: var(--teal); padding: 1.25rem 4rem;
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
}
.vg4-pill-band-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,239,0.5); font-weight: 400; margin-right: 0.5rem; }
.vg4-band-pill { font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.3rem 0.9rem; background: rgba(247,244,239,0.12); color: var(--paper); border: 0.5px solid rgba(247,244,239,0.2); }

/* INTRO */
.vg4-intro { background: var(--teal-muted); padding: 2.5rem 4rem; border-left: 4px solid var(--teal); }
.vg4-intro p { font-size: 1.05rem; line-height: 1.85; color: var(--charcoal); font-weight: 300; max-width: 80ch; }
.vg4-intro strong { color: var(--teal); font-weight: 500; }

/* BODY */
.vg4-body { max-width: 900px; margin: 0 auto; padding: 4rem; }
.vg4-section { margin-bottom: 3.5rem; }
.vg4-section-label {
  font-size: 0.63rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal); font-weight: 500; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.vg4-section-label::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--teal); }
.vg4-section h2 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 300; line-height: 1.2; color: var(--ink); margin-bottom: 1.25rem;
}
.vg4-section h2 em { font-style: italic; color: var(--teal); }
.vg4-section p { font-size: 0.93rem; line-height: 1.9; color: var(--charcoal); font-weight: 300; margin-bottom: 1rem; }
.vg4-section p strong { color: var(--ink); font-weight: 500; }
.vg4-divider { border: none; border-top: 0.5px solid var(--border); margin: 3rem 0; }

/* CALLOUT */
.vg4-callout {
  background: var(--paper-dark); border-left: 3px solid var(--amber);
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
  font-size: 0.87rem; line-height: 1.8; color: var(--charcoal);
}
.vg4-callout strong { color: var(--amber); font-weight: 500; }
.vg4-callout.teal { border-color: var(--teal); }
.vg4-callout.teal strong { color: var(--teal); }
.vg4-callout code { font-family: 'DM Mono', monospace; font-size: 0.8rem; background: rgba(14,14,14,0.07); padding: 0.1rem 0.4rem; }

/* CODE BLOCK */
.vg4-code { background: var(--ink); padding: 1.5rem 2rem; margin: 1.5rem 0; overflow-x: auto; }
.vg4-code-label { font-family: 'DM Sans', sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,239,0.3); margin-bottom: 0.6rem; display: block; }
.vg4-code code { font-family: 'DM Mono', monospace; font-size: 0.85rem; color: var(--amber-light); white-space: pre; display: block; line-height: 1.8; }
.vg4-code code .vg4-comment { color: rgba(247,244,239,0.3); }
.vg4-code code .vg4-cmd { color: var(--teal-light); }

/* NODE CARDS — WORKFLOW STEPS */
.vg4-nodes-section { background: var(--paper-dark); padding: 4rem; }
.vg4-nodes-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.vg4-nodes-eyebrow::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--teal); }
.vg4-nodes-section > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--ink); margin-bottom: 2.5rem; }
.vg4-nodes-section > h2 em { font-style: italic; color: var(--teal); }
.vg4-node-flow { display: flex; flex-direction: column; gap: 0; }
.vg4-node-item { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 2rem 0; border-top: 0.5px solid var(--border); align-items: start; }
.vg4-node-item:last-child { border-bottom: 0.5px solid var(--border); }
.vg4-node-left { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.vg4-node-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 300;
  background: var(--ink); color: var(--paper); flex-shrink: 0;
}
.vg4-node-num.teal { background: var(--teal); }
.vg4-node-num.amber { background: var(--amber); color: var(--paper); }
.vg4-node-connector { width: 1px; flex: 1; min-height: 20px; background: var(--border); }
.vg4-node-right {}
.vg4-node-type { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 0.35rem; }
.vg4-node-right h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--ink); margin-bottom: 0.6rem; }
.vg4-node-right p { font-size: 0.85rem; line-height: 1.8; color: var(--charcoal); font-weight: 300; margin-bottom: 0.75rem; }
.vg4-node-right p strong { color: var(--ink); font-weight: 500; }
.vg4-config-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.vg4-config-chip { font-family: 'DM Mono', monospace; font-size: 0.7rem; padding: 0.25rem 0.75rem; background: var(--paper); border: 0.5px solid var(--border-strong); color: var(--charcoal); letter-spacing: 0.04em; }
.vg4-config-chip.teal { border-color: var(--teal); color: var(--teal); background: var(--teal-muted); }
.vg4-prompt-box { background: var(--ink); padding: 1.1rem 1.25rem; margin-top: 0.75rem; font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--amber-light); line-height: 1.7; }
.vg4-prompt-box .vg4-prompt-label { font-family: 'DM Sans', sans-serif; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,244,239,0.3); margin-bottom: 0.4rem; display: block; }

/* STORY OUTPUT */
.vg4-story-section { background: var(--ink); padding: 4rem; }
.vg4-story-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber-light); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.vg4-story-eyebrow::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--amber-light); }
.vg4-story-section > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--paper); margin-bottom: 2rem; }
.vg4-story-section > h2 em { font-style: italic; color: var(--amber-light); }
.vg4-story-card { border: 0.5px solid rgba(247,244,239,0.12); padding: 2.5rem; position: relative; }
.vg4-story-card::before { content: '"'; font-family: 'Cormorant Garamond', serif; font-size: 8rem; font-weight: 300; color: rgba(250,199,117,0.1); position: absolute; top: -1rem; left: 1.5rem; line-height: 1; pointer-events: none; }
.vg4-story-title-row { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 0.5px solid rgba(247,244,239,0.1); }
.vg4-story-title-label { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,239,0.3); margin-bottom: 0.4rem; }
.vg4-story-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--amber-light); line-height: 1.2; }
.vg4-story-body { font-size: 0.9rem; line-height: 1.95; color: rgba(247,244,239,0.7); font-weight: 300; font-style: italic; }
.vg4-story-body p + p { margin-top: 1rem; }
.vg4-story-meta { display: flex; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 0.5px solid rgba(247,244,239,0.1); flex-wrap: wrap; }
.vg4-story-meta-item { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,244,239,0.3); }
.vg4-story-meta-item span { color: var(--amber-light); margin-left: 0.35rem; }

/* INTERVIEW */
.vg4-interview-section { background: var(--teal-muted); padding: 4rem; }
.vg4-interview-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.vg4-interview-eyebrow::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--teal); }
.vg4-interview-section > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--ink); margin-bottom: 2.5rem; }
.vg4-interview-section > h2 em { font-style: italic; color: var(--teal); }
.vg4-qa-list { display: flex; flex-direction: column; }
.vg4-qa-item { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; padding: 1.5rem 0; border-top: 0.5px solid rgba(14,14,14,0.1); align-items: start; }
.vg4-qa-item:last-child { border-bottom: 0.5px solid rgba(14,14,14,0.1); }
.vg4-qa-q { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 400; color: var(--ink); line-height: 1.4; }
.vg4-q-badge { font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--teal); color: var(--paper); padding: 0.15rem 0.5rem; margin-bottom: 0.5rem; display: inline-block; }
.vg4-qa-a { font-size: 0.83rem; line-height: 1.8; color: var(--charcoal); font-weight: 300; }
.vg4-qa-a strong { color: var(--teal); font-weight: 500; }
.vg4-qa-a code { font-family: 'DM Mono', monospace; font-size: 0.77rem; background: rgba(14,14,14,0.07); padding: 0.1rem 0.35rem; color: var(--ink); }
.vg4-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.vg4-pill { font-size: 0.67rem; letter-spacing: 0.06em; padding: 0.25rem 0.75rem; border: 0.5px solid var(--border-strong); color: var(--charcoal); }
.vg4-pill.t { border-color: var(--teal); color: var(--teal); background: var(--teal-muted); }
.vg4-pill.a { border-color: var(--amber); color: var(--amber); background: var(--amber-muted); }

/* FOOTER */
.vg4-footer { background: var(--ink); padding: 3rem 4rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.vg4-footer p { font-size: 0.82rem; color: rgba(247,244,239,0.35); font-weight: 300; }
.vg4-footer p strong { color: rgba(247,244,239,0.65); font-weight: 400; }
.vg4-back-btn { display: inline-block; padding: 0.65rem 1.75rem; background: var(--teal); color: var(--paper); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; font-weight: 400; }

/* REVEAL */
.vg4-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.vg4-reveal.vg4-vis { opacity: 1; transform: translateY(0); }
.vg4-d1 { transition-delay: 0.1s; } .vg4-d2 { transition-delay: 0.2s; } .vg4-d3 { transition-delay: 0.3s; }
</style>

<div class="vg4">

<!-- HERO -->
<div class="vg4-hero">
  <div class="vg4-hero-inner">
    <p class="vg4-eyebrow">GenAI Mastery Series · Agentic AI · Flowise Walkthrough</p>
    <h1>Building an AI Storytelling Agent with Flowise — <em>No Code Required</em></h1>
    <div class="vg4-meta-row">
      <p class="vg4-meta">Stack<span>Flowise · OpenAI GPT-4 · Supervisor/Worker Nodes</span></p>
      <p class="vg4-meta">Deployment<span>Local · Cloud-ready</span></p>
      <p class="vg4-meta">Output<span>IBM the Robot&#8217;s Marshmallow Party</span></p>
    </div>
  </div>
</div>

<!-- PILL BAND -->
<div class="vg4-pill-band">
  <span class="vg4-pill-band-label">Concepts Covered</span>
  <span class="vg4-band-pill">AI Agents</span>
  <span class="vg4-band-pill">Flowise Workflows</span>
  <span class="vg4-band-pill">Supervisor / Worker Pattern</span>
  <span class="vg4-band-pill">ChatOpenAI Node</span>
  <span class="vg4-band-pill">No-Code Orchestration</span>
  <span class="vg4-band-pill">Prompt Engineering</span>
</div>

<!-- INTRO -->
<div class="vg4-intro">
  <p>In today&#8217;s AI landscape, agents are becoming powerful tools to automate complex tasks — from chatbots to interactive storytelling. <strong>Flowise</strong> is a no-code AI workflow builder that makes it easy to design, deploy, and manage AI agents for a wide range of applications. This walkthrough builds a fully functional storytelling agent, locally deployable and cloud-ready.</p>
</div>

<!-- BODY -->
<div class="vg4-body">

  <!-- WHAT ARE AI AGENTS -->
  <div class="vg4-section vg4-reveal">
    <p class="vg4-section-label">Concepts</p>
    <h2>What are AI agents <em>in Flowise?</em></h2>
    <p>AI agents in Flowise are intelligent modules that can handle tasks <strong>autonomously</strong> by combining logic, AI models, and external tools. They process inputs, make decisions, and generate tailored outputs — without manual intervention at each step.</p>
    <p>In this project we use the <strong>Supervisor and Worker node pattern</strong> with OpenAI Chat. The supervisor coordinates the overall workflow; worker nodes each own a specific sub-task — here, storytelling and title assignment.</p>
    <div class="vg4-callout teal">
      <strong>Why multi-agent?</strong> Splitting responsibilities between nodes keeps each prompt focused and small. A dedicated Storyteller node generates better stories than one giant prompt trying to write a story, title it, and format it all at once. This mirrors how real engineering teams work — one job per role.
    </div>
  </div>

  <hr class="vg4-divider">

  <!-- SETUP -->
  <div class="vg4-section vg4-reveal">
    <p class="vg4-section-label">Step 1</p>
    <h2>Setting up <em>Flowise</em></h2>
    <p>Flowise runs as a local Node.js server you access through a browser-based canvas. Two commands are all you need to get started.</p>
    <div class="vg4-code">
      <span class="vg4-code-label">Terminal — Install &#038; Run</span>
      <code><span class="vg4-cmd">npm install</span> flowise
<span class="vg4-cmd">npx flowise</span> run</code>
    </div>
    <p>Once running, open your browser, log in, and click <strong>&#8220;New Workflow&#8221;</strong> to open the interactive canvas. You&#8217;ll drag, drop, and wire nodes together visually — no boilerplate code.</p>
    <div class="vg4-callout">
      <strong>Local vs Cloud:</strong> The setup above runs entirely on your machine. For cloud deployment, Flowise supports Railway, Render, and self-hosted Docker. The workflow JSON is portable — build locally, deploy anywhere.
    </div>
  </div>

</div><!-- /vg4-body -->

<!-- NODE WALKTHROUGH -->
<div class="vg4-nodes-section">
  <p class="vg4-nodes-eyebrow">Step 2 — Workflow Design</p>
  <h2>Building the agent — <em>node by node</em></h2>
  <div class="vg4-node-flow">

    <div class="vg4-node-item vg4-reveal">
      <div class="vg4-node-left">
        <div class="vg4-node-num teal">1</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Chat Model Node</p>
        <h3>ChatOpenAI — The Brain</h3>
        <p>Drag a <strong>ChatOpenAI Node</strong> onto the canvas and connect it as the model backend for all worker nodes. Configure GPT-4 with elevated temperature for imaginative outputs.</p>
        <div class="vg4-config-list">
          <span class="vg4-config-chip teal">Model: GPT-4</span>
          <span class="vg4-config-chip teal">Temperature: 0.9</span>
          <span class="vg4-config-chip">Max Tokens: 400–500</span>
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal vg4-d1">
      <div class="vg4-node-left">
        <div class="vg4-node-num teal">2</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Worker Node · Role: Storyteller</p>
        <h3>Storytelling Agent</h3>
        <p>Add a <strong>Worker Node</strong> and connect it to the ChatOpenAI node. Set its role as the Storyteller. This node owns the core creative generation task — it receives the theme prompt and writes the full story.</p>
        <div class="vg4-prompt-box">
          <span class="vg4-prompt-label">Worker Prompt</span>
          You are a storyteller. Write a fun and engaging story for kids aged 5–8. The main character is a robot named IBM. Make it funny, magical, and include a twist. Limit the story to 400 words.
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal vg4-d2">
      <div class="vg4-node-left">
        <div class="vg4-node-num amber">3</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Worker Node · Role: Title Assigner</p>
        <h3>Title Assigner Agent</h3>
        <p>Add a second <strong>Worker Node</strong> downstream of the Storyteller. This node&#8217;s sole job is to extract a short, engaging title from the generated story — a focused single-responsibility task.</p>
        <div class="vg4-prompt-box">
          <span class="vg4-prompt-label">Worker Prompt</span>
          Extract the title of the story you just created. Keep it short and engaging.
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal">
      <div class="vg4-node-left">
        <div class="vg4-node-num">4</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Format Prompt Values Node</p>
        <h3>Output Formatter</h3>
        <p>Use the <strong>Format Prompt Values Node</strong> to combine the story and title from the two worker nodes into a clean, structured output ready for display.</p>
        <div class="vg4-config-list">
          <span class="vg4-config-chip">Title: {&#8216;{&#8216;}Title Extracted{&#8216;}&#8217;}</span>
          <span class="vg4-config-chip">Story: {&#8216;{&#8216;}Generated Story{&#8216;}&#8217;}</span>
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal vg4-d1">
      <div class="vg4-node-left">
        <div class="vg4-node-num teal">5</div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Chat Output Node</p>
        <h3>Chat Output — Delivery</h3>
        <p>Connect the formatted output to the <strong>Chat Output Node</strong>. This is the interface layer — the final assembled story and title are surfaced here for users to read, copy, or embed.</p>
        <div class="vg4-config-list">
          <span class="vg4-config-chip teal">Displays story + title</span>
          <span class="vg4-config-chip">Embeddable chat widget</span>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- BODY CONTINUED — RUNNING -->
<div class="vg4-body">
  <div class="vg4-section vg4-reveal">
    <p class="vg4-section-label">Step 3</p>
    <h2>Running the <em>agent</em></h2>
    <p>With all nodes configured and wired together, save your workflow — name it something like <strong>&#8220;AI Storytelling Agent&#8221;</strong> — and hit Run. Enter a theme prompt or use the default storytelling instructions, and the agent pipeline fires automatically: ChatOpenAI powers the Storyteller worker, its output flows to the Title Assigner, both outputs merge in the Formatter, and the Chat Output displays the result.</p>
    <div class="vg4-callout teal">
      <strong>Tip:</strong> Experiment with different <code>temperature</code> values. At 0.7 the stories are coherent but predictable. At 0.95 you get genuinely surprising plot twists — which for kids&#8217; stories is exactly what you want.
    </div>
  </div>
</div>

<!-- STORY OUTPUT -->
<div class="vg4-story-section">
  <p class="vg4-story-eyebrow">Example Output</p>
  <h2>IBM&#8217;s <em>Marshmallow Party</em></h2>
  <div class="vg4-story-card vg4-reveal">
    <div class="vg4-story-title-row">
      <p class="vg4-story-title-label">Generated Title</p>
      <p class="vg4-story-title">IBM the Robot and the Marshmallow Party</p>
    </div>
    <div class="vg4-story-body">
      <p>Once upon a time, in a land of giggles and sparkles, there lived a silly little robot named IBM. Now, IBM wasn&#8217;t your everyday robot who danced or painted; oh no! He was known as a &#8220;computer,&#8221; which is a magic box that helps people do all sorts of amazing things!</p>
      <p>One sunny day, IBM decided to throw a party for all his robot friends. He said, &#8220;Let&#8217;s make it the best party ever! I&#8217;ll invite my buddy, Printer Pete, and my bestie, Codey the Coder!&#8221; But IBM accidentally ordered 1,000 bags of rainbow-colored marshmallows instead of snacks — and chaos ensued!</p>
      <p>The party turned into a marshmallow-filled adventure with pillow fights, marshmallow towers, and lots of laughs. In the end, IBM and his friends agreed: whether it&#8217;s chips or marshmallows, any party is fun when friends are around!</p>
    </div>
    <div class="vg4-story-meta">
      <p class="vg4-story-meta-item">Model<span>GPT-4</span></p>
      <p class="vg4-story-meta-item">Temperature<span>0.9</span></p>
      <p class="vg4-story-meta-item">Word Count<span>~150 words</span></p>
      <p class="vg4-story-meta-item">Nodes Used<span>5</span></p>
    </div>
  </div>
</div>

<!-- INTERVIEW CHEAT SHEET -->
<div class="vg4-interview-section">
  <p class="vg4-interview-eyebrow">Interview Prep</p>
  <h2>Cheat sheet — <em>quick definitions to remember</em></h2>
  <div class="vg4-qa-list">

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Define</span><br>What is an AI agent?</div>
      <div class="vg4-qa-a"><strong>An autonomous module</strong> that combines a language model, logic, and optionally external tools to complete a task without step-by-step human instruction. It receives a goal, plans sub-steps, and executes them independently.
        <div class="vg4-pills"><span class="vg4-pill t">Autonomous</span><span class="vg4-pill t">Goal-driven</span><span class="vg4-pill">Tool-using</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal vg4-d1">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Explain</span><br>What is the Supervisor / Worker pattern?</div>
      <div class="vg4-qa-a">A <strong>Supervisor node</strong> coordinates the overall workflow and delegates tasks to <strong>Worker nodes</strong>, each of which handles one focused sub-task. This mirrors microservices architecture — single responsibility per agent, composable into larger pipelines.
        <div class="vg4-pills"><span class="vg4-pill t">Supervisor = orchestrator</span><span class="vg4-pill t">Worker = specialist</span><span class="vg4-pill a">Single responsibility</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Define</span><br>What does temperature control in an LLM?</div>
      <div class="vg4-qa-a"><strong>Randomness in token sampling.</strong> Low temperature (0.1–0.4) = deterministic, factual, conservative outputs. High temperature (0.8–1.0) = creative, surprising, occasionally incoherent. For storytelling, 0.9 hits the sweet spot of imaginative without losing coherence.
        <div class="vg4-pills"><span class="vg4-pill">Low = deterministic</span><span class="vg4-pill a">High = creative</span><span class="vg4-pill t">0.9 for stories</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal vg4-d1">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Compare</span><br>No-code (Flowise) vs code-first (LangChain) — when to use which?</div>
      <div class="vg4-qa-a">Use <strong>Flowise</strong> for rapid prototyping, demos, non-developer stakeholders, or when the workflow is straightforward and visual. Use <strong>LangChain / LangGraph in code</strong> when you need version control, CI/CD, complex branching, custom tool integrations, or production-grade observability.
        <div class="vg4-pills"><span class="vg4-pill t">Flowise = prototype fast</span><span class="vg4-pill a">LangChain = production</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Explain</span><br>Why split story generation and title extraction into separate nodes?</div>
      <div class="vg4-qa-a"><strong>Focused prompts outperform omnibus prompts.</strong> A prompt that must write a story, extract a title, and format output all at once tends to trade off quality across tasks. Separate nodes give each sub-task its own context window, model parameters, and success criteria — and makes each step independently testable and replaceable.
        <div class="vg4-pills"><span class="vg4-pill t">One node, one job</span><span class="vg4-pill">Better quality</span><span class="vg4-pill a">Independently testable</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal vg4-d1">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Use Case</span><br>What other use cases suit a Flowise multi-agent setup?</div>
      <div class="vg4-qa-a"><strong>Any pipeline with distinct sequential sub-tasks:</strong> customer support (intent classification → knowledge retrieval → response drafting), content pipelines (research → outline → write → SEO optimize), data workflows (extract → validate → transform → summarize).
        <div class="vg4-pills"><span class="vg4-pill t">Customer support</span><span class="vg4-pill t">Content pipelines</span><span class="vg4-pill t">Data workflows</span><span class="vg4-pill">Code review agents</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Gotcha</span><br>What are the main limits of no-code agent builders?</div>
      <div class="vg4-qa-a">Three key limitations: <strong>(1) Observability</strong> — debugging visual workflows is harder than reading stack traces. <strong>(2) Version control</strong> — workflow JSON doesn&#8217;t diff cleanly in Git. <strong>(3) Custom logic</strong> — complex conditional branching, stateful memory, and custom tool integrations are much easier in code-first frameworks.
        <div class="vg4-pills"><span class="vg4-pill a">Hard to debug</span><span class="vg4-pill a">No clean Git diff</span><span class="vg4-pill a">Limited branching</span></div>
      </div>
    </div>

  </div>
</div>

<!-- FOOTER -->
<div class="vg4-footer">
  <p><strong>GenAI Mastery Series</strong> — vijay-gokarn.com · Vijay Gokarn</p>
  <a href="https://vijay-gokarn.com" class="vg4-back-btn">Back to Blog ↗</a>
</div>

</div><!-- /vg4 -->

<script>
(function(){
  var obs = new IntersectionObserver(function(e){
    e.forEach(function(x){ if(x.isIntersecting) x.target.classList.add('vg4-vis'); });
  }, {threshold: 0.08});
  document.querySelectorAll('.vg4-reveal').forEach(function(el){ obs.observe(el); });
})();
</script><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=DM+Sans:wght@300;400;500&#038;family=DM+Mono:wght@400&#038;display=swap" rel="stylesheet">

<style>
.vg4 {
  --ink: #0e0e0e; --paper: #f7f4ef; --paper-dark: #ede9e1;
  --teal: #0f6e56; --teal-light: #1d9e75; --teal-muted: #e1f5ee;
  --amber: #ba7517; --amber-light: #fac775; --amber-muted: #faeeda;
  --charcoal: #2c2c2a; --muted: #888780;
  --border: rgba(14,14,14,0.12); --border-strong: rgba(14,14,14,0.25);
  font-family: 'DM Sans', sans-serif; font-weight: 300;
  color: var(--ink); background: var(--paper); line-height: 1.75; font-size: 16px; overflow-x: hidden;
}
.vg4 *, .vg4 *::before, .vg4 *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* HERO */
.vg4-hero { background: var(--ink); padding: 5rem 4rem 4rem; position: relative; overflow: hidden; }
.vg4-hero::before {
  content: '⬡'; font-family: 'Cormorant Garamond', serif; font-size: 24rem;
  color: rgba(255,255,255,0.025); position: absolute;
  right: -2rem; bottom: -5rem; line-height: 1; pointer-events: none;
}
.vg4-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.vg4-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal-light); font-weight: 500; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.vg4-eyebrow::before { content: ''; display: inline-block; width: 1.5rem; height: 1px; background: var(--teal-light); }
.vg4-hero h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300; line-height: 1.1; color: var(--paper); letter-spacing: -0.02em;
  margin-bottom: 1.5rem; max-width: 26ch;
}
.vg4-hero h1 em { font-style: italic; color: var(--amber-light); }
.vg4-meta-row { display: flex; gap: 2rem; flex-wrap: wrap; }
.vg4-meta { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,244,239,0.35); }
.vg4-meta span { color: rgba(247,244,239,0.7); margin-left: 0.4rem; }

/* PILL BAND */
.vg4-pill-band {
  background: var(--teal); padding: 1.25rem 4rem;
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
}
.vg4-pill-band-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,239,0.5); font-weight: 400; margin-right: 0.5rem; }
.vg4-band-pill { font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.3rem 0.9rem; background: rgba(247,244,239,0.12); color: var(--paper); border: 0.5px solid rgba(247,244,239,0.2); }

/* INTRO */
.vg4-intro { background: var(--teal-muted); padding: 2.5rem 4rem; border-left: 4px solid var(--teal); }
.vg4-intro p { font-size: 1.05rem; line-height: 1.85; color: var(--charcoal); font-weight: 300; max-width: 80ch; }
.vg4-intro strong { color: var(--teal); font-weight: 500; }

/* BODY */
.vg4-body { max-width: 900px; margin: 0 auto; padding: 4rem; }
.vg4-section { margin-bottom: 3.5rem; }
.vg4-section-label {
  font-size: 0.63rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal); font-weight: 500; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.vg4-section-label::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--teal); }
.vg4-section h2 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 300; line-height: 1.2; color: var(--ink); margin-bottom: 1.25rem;
}
.vg4-section h2 em { font-style: italic; color: var(--teal); }
.vg4-section p { font-size: 0.93rem; line-height: 1.9; color: var(--charcoal); font-weight: 300; margin-bottom: 1rem; }
.vg4-section p strong { color: var(--ink); font-weight: 500; }
.vg4-divider { border: none; border-top: 0.5px solid var(--border); margin: 3rem 0; }

/* CALLOUT */
.vg4-callout {
  background: var(--paper-dark); border-left: 3px solid var(--amber);
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
  font-size: 0.87rem; line-height: 1.8; color: var(--charcoal);
}
.vg4-callout strong { color: var(--amber); font-weight: 500; }
.vg4-callout.teal { border-color: var(--teal); }
.vg4-callout.teal strong { color: var(--teal); }
.vg4-callout code { font-family: 'DM Mono', monospace; font-size: 0.8rem; background: rgba(14,14,14,0.07); padding: 0.1rem 0.4rem; }

/* CODE BLOCK */
.vg4-code { background: var(--ink); padding: 1.5rem 2rem; margin: 1.5rem 0; overflow-x: auto; }
.vg4-code-label { font-family: 'DM Sans', sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,239,0.3); margin-bottom: 0.6rem; display: block; }
.vg4-code code { font-family: 'DM Mono', monospace; font-size: 0.85rem; color: var(--amber-light); white-space: pre; display: block; line-height: 1.8; }
.vg4-code code .vg4-comment { color: rgba(247,244,239,0.3); }
.vg4-code code .vg4-cmd { color: var(--teal-light); }

/* NODE CARDS — WORKFLOW STEPS */
.vg4-nodes-section { background: var(--paper-dark); padding: 4rem; }
.vg4-nodes-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.vg4-nodes-eyebrow::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--teal); }
.vg4-nodes-section > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--ink); margin-bottom: 2.5rem; }
.vg4-nodes-section > h2 em { font-style: italic; color: var(--teal); }
.vg4-node-flow { display: flex; flex-direction: column; gap: 0; }
.vg4-node-item { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 2rem 0; border-top: 0.5px solid var(--border); align-items: start; }
.vg4-node-item:last-child { border-bottom: 0.5px solid var(--border); }
.vg4-node-left { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.vg4-node-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 300;
  background: var(--ink); color: var(--paper); flex-shrink: 0;
}
.vg4-node-num.teal { background: var(--teal); }
.vg4-node-num.amber { background: var(--amber); color: var(--paper); }
.vg4-node-connector { width: 1px; flex: 1; min-height: 20px; background: var(--border); }
.vg4-node-right {}
.vg4-node-type { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 0.35rem; }
.vg4-node-right h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--ink); margin-bottom: 0.6rem; }
.vg4-node-right p { font-size: 0.85rem; line-height: 1.8; color: var(--charcoal); font-weight: 300; margin-bottom: 0.75rem; }
.vg4-node-right p strong { color: var(--ink); font-weight: 500; }
.vg4-config-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.vg4-config-chip { font-family: 'DM Mono', monospace; font-size: 0.7rem; padding: 0.25rem 0.75rem; background: var(--paper); border: 0.5px solid var(--border-strong); color: var(--charcoal); letter-spacing: 0.04em; }
.vg4-config-chip.teal { border-color: var(--teal); color: var(--teal); background: var(--teal-muted); }
.vg4-prompt-box { background: var(--ink); padding: 1.1rem 1.25rem; margin-top: 0.75rem; font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--amber-light); line-height: 1.7; }
.vg4-prompt-box .vg4-prompt-label { font-family: 'DM Sans', sans-serif; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,244,239,0.3); margin-bottom: 0.4rem; display: block; }

/* STORY OUTPUT */
.vg4-story-section { background: var(--ink); padding: 4rem; }
.vg4-story-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber-light); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.vg4-story-eyebrow::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--amber-light); }
.vg4-story-section > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--paper); margin-bottom: 2rem; }
.vg4-story-section > h2 em { font-style: italic; color: var(--amber-light); }
.vg4-story-card { border: 0.5px solid rgba(247,244,239,0.12); padding: 2.5rem; position: relative; }
.vg4-story-card::before { content: '"'; font-family: 'Cormorant Garamond', serif; font-size: 8rem; font-weight: 300; color: rgba(250,199,117,0.1); position: absolute; top: -1rem; left: 1.5rem; line-height: 1; pointer-events: none; }
.vg4-story-title-row { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 0.5px solid rgba(247,244,239,0.1); }
.vg4-story-title-label { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,239,0.3); margin-bottom: 0.4rem; }
.vg4-story-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--amber-light); line-height: 1.2; }
.vg4-story-body { font-size: 0.9rem; line-height: 1.95; color: rgba(247,244,239,0.7); font-weight: 300; font-style: italic; }
.vg4-story-body p + p { margin-top: 1rem; }
.vg4-story-meta { display: flex; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 0.5px solid rgba(247,244,239,0.1); flex-wrap: wrap; }
.vg4-story-meta-item { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,244,239,0.3); }
.vg4-story-meta-item span { color: var(--amber-light); margin-left: 0.35rem; }

/* INTERVIEW */
.vg4-interview-section { background: var(--teal-muted); padding: 4rem; }
.vg4-interview-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.vg4-interview-eyebrow::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--teal); }
.vg4-interview-section > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--ink); margin-bottom: 2.5rem; }
.vg4-interview-section > h2 em { font-style: italic; color: var(--teal); }
.vg4-qa-list { display: flex; flex-direction: column; }
.vg4-qa-item { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; padding: 1.5rem 0; border-top: 0.5px solid rgba(14,14,14,0.1); align-items: start; }
.vg4-qa-item:last-child { border-bottom: 0.5px solid rgba(14,14,14,0.1); }
.vg4-qa-q { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 400; color: var(--ink); line-height: 1.4; }
.vg4-q-badge { font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--teal); color: var(--paper); padding: 0.15rem 0.5rem; margin-bottom: 0.5rem; display: inline-block; }
.vg4-qa-a { font-size: 0.83rem; line-height: 1.8; color: var(--charcoal); font-weight: 300; }
.vg4-qa-a strong { color: var(--teal); font-weight: 500; }
.vg4-qa-a code { font-family: 'DM Mono', monospace; font-size: 0.77rem; background: rgba(14,14,14,0.07); padding: 0.1rem 0.35rem; color: var(--ink); }
.vg4-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.vg4-pill { font-size: 0.67rem; letter-spacing: 0.06em; padding: 0.25rem 0.75rem; border: 0.5px solid var(--border-strong); color: var(--charcoal); }
.vg4-pill.t { border-color: var(--teal); color: var(--teal); background: var(--teal-muted); }
.vg4-pill.a { border-color: var(--amber); color: var(--amber); background: var(--amber-muted); }

/* FOOTER */
.vg4-footer { background: var(--ink); padding: 3rem 4rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.vg4-footer p { font-size: 0.82rem; color: rgba(247,244,239,0.35); font-weight: 300; }
.vg4-footer p strong { color: rgba(247,244,239,0.65); font-weight: 400; }
.vg4-back-btn { display: inline-block; padding: 0.65rem 1.75rem; background: var(--teal); color: var(--paper); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; font-weight: 400; }

/* REVEAL */
.vg4-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.vg4-reveal.vg4-vis { opacity: 1; transform: translateY(0); }
.vg4-d1 { transition-delay: 0.1s; } .vg4-d2 { transition-delay: 0.2s; } .vg4-d3 { transition-delay: 0.3s; }
</style>

<div class="vg4">

<!-- HERO -->
<div class="vg4-hero">
  <div class="vg4-hero-inner">
    <p class="vg4-eyebrow">GenAI Mastery Series · Agentic AI · Flowise Walkthrough</p>
    <h1>Building an AI Storytelling Agent with Flowise — <em>No Code Required</em></h1>
    <div class="vg4-meta-row">
      <p class="vg4-meta">Stack<span>Flowise · OpenAI GPT-4 · Supervisor/Worker Nodes</span></p>
      <p class="vg4-meta">Deployment<span>Local · Cloud-ready</span></p>
      <p class="vg4-meta">Output<span>IBM the Robot&#8217;s Marshmallow Party</span></p>
    </div>
  </div>
</div>

<!-- PILL BAND -->
<div class="vg4-pill-band">
  <span class="vg4-pill-band-label">Concepts Covered</span>
  <span class="vg4-band-pill">AI Agents</span>
  <span class="vg4-band-pill">Flowise Workflows</span>
  <span class="vg4-band-pill">Supervisor / Worker Pattern</span>
  <span class="vg4-band-pill">ChatOpenAI Node</span>
  <span class="vg4-band-pill">No-Code Orchestration</span>
  <span class="vg4-band-pill">Prompt Engineering</span>
</div>

<!-- INTRO -->
<div class="vg4-intro">
  <p>In today&#8217;s AI landscape, agents are becoming powerful tools to automate complex tasks — from chatbots to interactive storytelling. <strong>Flowise</strong> is a no-code AI workflow builder that makes it easy to design, deploy, and manage AI agents for a wide range of applications. This walkthrough builds a fully functional storytelling agent, locally deployable and cloud-ready.</p>
</div>

<!-- BODY -->
<div class="vg4-body">

  <!-- WHAT ARE AI AGENTS -->
  <div class="vg4-section vg4-reveal">
    <p class="vg4-section-label">Concepts</p>
    <h2>What are AI agents <em>in Flowise?</em></h2>
    <p>AI agents in Flowise are intelligent modules that can handle tasks <strong>autonomously</strong> by combining logic, AI models, and external tools. They process inputs, make decisions, and generate tailored outputs — without manual intervention at each step.</p>
    <p>In this project we use the <strong>Supervisor and Worker node pattern</strong> with OpenAI Chat. The supervisor coordinates the overall workflow; worker nodes each own a specific sub-task — here, storytelling and title assignment.</p>
    <div class="vg4-callout teal">
      <strong>Why multi-agent?</strong> Splitting responsibilities between nodes keeps each prompt focused and small. A dedicated Storyteller node generates better stories than one giant prompt trying to write a story, title it, and format it all at once. This mirrors how real engineering teams work — one job per role.
    </div>
  </div>

  <hr class="vg4-divider">

  <!-- SETUP -->
  <div class="vg4-section vg4-reveal">
    <p class="vg4-section-label">Step 1</p>
    <h2>Setting up <em>Flowise</em></h2>
    <p>Flowise runs as a local Node.js server you access through a browser-based canvas. Two commands are all you need to get started.</p>
    <div class="vg4-code">
      <span class="vg4-code-label">Terminal — Install &#038; Run</span>
      <code><span class="vg4-cmd">npm install</span> flowise
<span class="vg4-cmd">npx flowise</span> run</code>
    </div>
    <p>Once running, open your browser, log in, and click <strong>&#8220;New Workflow&#8221;</strong> to open the interactive canvas. You&#8217;ll drag, drop, and wire nodes together visually — no boilerplate code.</p>
    <div class="vg4-callout">
      <strong>Local vs Cloud:</strong> The setup above runs entirely on your machine. For cloud deployment, Flowise supports Railway, Render, and self-hosted Docker. The workflow JSON is portable — build locally, deploy anywhere.
    </div>
  </div>

</div><!-- /vg4-body -->

<!-- NODE WALKTHROUGH -->
<div class="vg4-nodes-section">
  <p class="vg4-nodes-eyebrow">Step 2 — Workflow Design</p>
  <h2>Building the agent — <em>node by node</em></h2>
  <div class="vg4-node-flow">

    <div class="vg4-node-item vg4-reveal">
      <div class="vg4-node-left">
        <div class="vg4-node-num teal">1</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Chat Model Node</p>
        <h3>ChatOpenAI — The Brain</h3>
        <p>Drag a <strong>ChatOpenAI Node</strong> onto the canvas and connect it as the model backend for all worker nodes. Configure GPT-4 with elevated temperature for imaginative outputs.</p>
        <div class="vg4-config-list">
          <span class="vg4-config-chip teal">Model: GPT-4</span>
          <span class="vg4-config-chip teal">Temperature: 0.9</span>
          <span class="vg4-config-chip">Max Tokens: 400–500</span>
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal vg4-d1">
      <div class="vg4-node-left">
        <div class="vg4-node-num teal">2</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Worker Node · Role: Storyteller</p>
        <h3>Storytelling Agent</h3>
        <p>Add a <strong>Worker Node</strong> and connect it to the ChatOpenAI node. Set its role as the Storyteller. This node owns the core creative generation task — it receives the theme prompt and writes the full story.</p>
        <div class="vg4-prompt-box">
          <span class="vg4-prompt-label">Worker Prompt</span>
          You are a storyteller. Write a fun and engaging story for kids aged 5–8. The main character is a robot named IBM. Make it funny, magical, and include a twist. Limit the story to 400 words.
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal vg4-d2">
      <div class="vg4-node-left">
        <div class="vg4-node-num amber">3</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Worker Node · Role: Title Assigner</p>
        <h3>Title Assigner Agent</h3>
        <p>Add a second <strong>Worker Node</strong> downstream of the Storyteller. This node&#8217;s sole job is to extract a short, engaging title from the generated story — a focused single-responsibility task.</p>
        <div class="vg4-prompt-box">
          <span class="vg4-prompt-label">Worker Prompt</span>
          Extract the title of the story you just created. Keep it short and engaging.
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal">
      <div class="vg4-node-left">
        <div class="vg4-node-num">4</div>
        <div class="vg4-node-connector"></div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Format Prompt Values Node</p>
        <h3>Output Formatter</h3>
        <p>Use the <strong>Format Prompt Values Node</strong> to combine the story and title from the two worker nodes into a clean, structured output ready for display.</p>
        <div class="vg4-config-list">
          <span class="vg4-config-chip">Title: {&#8216;{&#8216;}Title Extracted{&#8216;}&#8217;}</span>
          <span class="vg4-config-chip">Story: {&#8216;{&#8216;}Generated Story{&#8216;}&#8217;}</span>
        </div>
      </div>
    </div>

    <div class="vg4-node-item vg4-reveal vg4-d1">
      <div class="vg4-node-left">
        <div class="vg4-node-num teal">5</div>
      </div>
      <div class="vg4-node-right">
        <p class="vg4-node-type">Chat Output Node</p>
        <h3>Chat Output — Delivery</h3>
        <p>Connect the formatted output to the <strong>Chat Output Node</strong>. This is the interface layer — the final assembled story and title are surfaced here for users to read, copy, or embed.</p>
        <div class="vg4-config-list">
          <span class="vg4-config-chip teal">Displays story + title</span>
          <span class="vg4-config-chip">Embeddable chat widget</span>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- BODY CONTINUED — RUNNING -->
<div class="vg4-body">
  <div class="vg4-section vg4-reveal">
    <p class="vg4-section-label">Step 3</p>
    <h2>Running the <em>agent</em></h2>
    <p>With all nodes configured and wired together, save your workflow — name it something like <strong>&#8220;AI Storytelling Agent&#8221;</strong> — and hit Run. Enter a theme prompt or use the default storytelling instructions, and the agent pipeline fires automatically: ChatOpenAI powers the Storyteller worker, its output flows to the Title Assigner, both outputs merge in the Formatter, and the Chat Output displays the result.</p>
    <div class="vg4-callout teal">
      <strong>Tip:</strong> Experiment with different <code>temperature</code> values. At 0.7 the stories are coherent but predictable. At 0.95 you get genuinely surprising plot twists — which for kids&#8217; stories is exactly what you want.
    </div>
  </div>
</div>

<!-- STORY OUTPUT -->
<div class="vg4-story-section">
  <p class="vg4-story-eyebrow">Example Output</p>
  <h2>IBM&#8217;s <em>Marshmallow Party</em></h2>
  <div class="vg4-story-card vg4-reveal">
    <div class="vg4-story-title-row">
      <p class="vg4-story-title-label">Generated Title</p>
      <p class="vg4-story-title">IBM the Robot and the Marshmallow Party</p>
    </div>
    <div class="vg4-story-body">
      <p>Once upon a time, in a land of giggles and sparkles, there lived a silly little robot named IBM. Now, IBM wasn&#8217;t your everyday robot who danced or painted; oh no! He was known as a &#8220;computer,&#8221; which is a magic box that helps people do all sorts of amazing things!</p>
      <p>One sunny day, IBM decided to throw a party for all his robot friends. He said, &#8220;Let&#8217;s make it the best party ever! I&#8217;ll invite my buddy, Printer Pete, and my bestie, Codey the Coder!&#8221; But IBM accidentally ordered 1,000 bags of rainbow-colored marshmallows instead of snacks — and chaos ensued!</p>
      <p>The party turned into a marshmallow-filled adventure with pillow fights, marshmallow towers, and lots of laughs. In the end, IBM and his friends agreed: whether it&#8217;s chips or marshmallows, any party is fun when friends are around!</p>
    </div>
    <div class="vg4-story-meta">
      <p class="vg4-story-meta-item">Model<span>GPT-4</span></p>
      <p class="vg4-story-meta-item">Temperature<span>0.9</span></p>
      <p class="vg4-story-meta-item">Word Count<span>~150 words</span></p>
      <p class="vg4-story-meta-item">Nodes Used<span>5</span></p>
    </div>
  </div>
</div>

<!-- INTERVIEW CHEAT SHEET -->
<div class="vg4-interview-section">
  <p class="vg4-interview-eyebrow">Interview Prep</p>
  <h2>Cheat sheet — <em>quick definitions to remember</em></h2>
  <div class="vg4-qa-list">

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Define</span><br>What is an AI agent?</div>
      <div class="vg4-qa-a"><strong>An autonomous module</strong> that combines a language model, logic, and optionally external tools to complete a task without step-by-step human instruction. It receives a goal, plans sub-steps, and executes them independently.
        <div class="vg4-pills"><span class="vg4-pill t">Autonomous</span><span class="vg4-pill t">Goal-driven</span><span class="vg4-pill">Tool-using</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal vg4-d1">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Explain</span><br>What is the Supervisor / Worker pattern?</div>
      <div class="vg4-qa-a">A <strong>Supervisor node</strong> coordinates the overall workflow and delegates tasks to <strong>Worker nodes</strong>, each of which handles one focused sub-task. This mirrors microservices architecture — single responsibility per agent, composable into larger pipelines.
        <div class="vg4-pills"><span class="vg4-pill t">Supervisor = orchestrator</span><span class="vg4-pill t">Worker = specialist</span><span class="vg4-pill a">Single responsibility</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Define</span><br>What does temperature control in an LLM?</div>
      <div class="vg4-qa-a"><strong>Randomness in token sampling.</strong> Low temperature (0.1–0.4) = deterministic, factual, conservative outputs. High temperature (0.8–1.0) = creative, surprising, occasionally incoherent. For storytelling, 0.9 hits the sweet spot of imaginative without losing coherence.
        <div class="vg4-pills"><span class="vg4-pill">Low = deterministic</span><span class="vg4-pill a">High = creative</span><span class="vg4-pill t">0.9 for stories</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal vg4-d1">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Compare</span><br>No-code (Flowise) vs code-first (LangChain) — when to use which?</div>
      <div class="vg4-qa-a">Use <strong>Flowise</strong> for rapid prototyping, demos, non-developer stakeholders, or when the workflow is straightforward and visual. Use <strong>LangChain / LangGraph in code</strong> when you need version control, CI/CD, complex branching, custom tool integrations, or production-grade observability.
        <div class="vg4-pills"><span class="vg4-pill t">Flowise = prototype fast</span><span class="vg4-pill a">LangChain = production</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Explain</span><br>Why split story generation and title extraction into separate nodes?</div>
      <div class="vg4-qa-a"><strong>Focused prompts outperform omnibus prompts.</strong> A prompt that must write a story, extract a title, and format output all at once tends to trade off quality across tasks. Separate nodes give each sub-task its own context window, model parameters, and success criteria — and makes each step independently testable and replaceable.
        <div class="vg4-pills"><span class="vg4-pill t">One node, one job</span><span class="vg4-pill">Better quality</span><span class="vg4-pill a">Independently testable</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal vg4-d1">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Use Case</span><br>What other use cases suit a Flowise multi-agent setup?</div>
      <div class="vg4-qa-a"><strong>Any pipeline with distinct sequential sub-tasks:</strong> customer support (intent classification → knowledge retrieval → response drafting), content pipelines (research → outline → write → SEO optimize), data workflows (extract → validate → transform → summarize).
        <div class="vg4-pills"><span class="vg4-pill t">Customer support</span><span class="vg4-pill t">Content pipelines</span><span class="vg4-pill t">Data workflows</span><span class="vg4-pill">Code review agents</span></div>
      </div>
    </div>

    <div class="vg4-qa-item vg4-reveal">
      <div class="vg4-qa-q"><span class="vg4-q-badge">Gotcha</span><br>What are the main limits of no-code agent builders?</div>
      <div class="vg4-qa-a">Three key limitations: <strong>(1) Observability</strong> — debugging visual workflows is harder than reading stack traces. <strong>(2) Version control</strong> — workflow JSON doesn&#8217;t diff cleanly in Git. <strong>(3) Custom logic</strong> — complex conditional branching, stateful memory, and custom tool integrations are much easier in code-first frameworks.
        <div class="vg4-pills"><span class="vg4-pill a">Hard to debug</span><span class="vg4-pill a">No clean Git diff</span><span class="vg4-pill a">Limited branching</span></div>
      </div>
    </div>

  </div>
</div>

<!-- FOOTER -->
<div class="vg4-footer">
  <p><strong>GenAI Mastery Series</strong> — vijay-gokarn.com · Vijay Gokarn</p>
  <a href="https://vijay-gokarn.com" class="vg4-back-btn">Back to Blog ↗</a>
</div>

</div><!-- /vg4 -->

<script>
(function(){
  var obs = new IntersectionObserver(function(e){
    e.forEach(function(x){ if(x.isIntersecting) x.target.classList.add('vg4-vis'); });
  }, {threshold: 0.08});
  document.querySelectorAll('.vg4-reveal').forEach(function(el){ obs.observe(el); });
})();
</script>
<p>The post <a href="https://vijay-gokarn.com/creating-ai-storytelling-agents-using-flowise-a-step-by-step-guide/">Creating AI Storytelling Agents Using Flowise: A Step-by-Step Guide</a> appeared first on <a href="https://vijay-gokarn.com">Vijay Gokarn</a>.</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">227</post-id>	</item>
	</channel>
</rss>
