DEV Community: raphiki

Building a Local-First AI Coding Agent with Open Tools and Adaptive Routing

raphiki — Wed, 09 Sep 2026 15:43:13 +0000

How to combine local inference with governed cloud fallback by orchestrating Ollama, OpenCode, and LiteLLM

AI coding agents usually leave you with an awkward choice:

All cloud: A hosted model can handle almost everything, but using it for small edits and routine work consumes API credits and sends more code off the machine.
All local: A model that fits on a laptop GPU works well for many everyday tasks, but it may struggle with architecture, complex refactoring, and debugging across several files.

A local first hybrid architecture offers a middle ground. The local model handles routine coding decisions, while OpenCode performs filesystem and shell operations through its tools. Harder requests can go to larger hosted models, with a configurable limit on spending.

Connecting several models is easy. Choosing one for each request, in a way that is predictable and visible, takes more work. LiteLLM provides the control plane for that decision.

In this tutorial, we will build a three layer AI coding environment on a laptop equipped with an RTX 4070 GPU with 8GB of VRAM and 32GB of system RAM:

Layer 1, local inference: Ollama serves a Gemma 4 model configured for tool use.
Layer 2, control plane: LiteLLM provides spending limits, automatic routing by complexity, and observability backed by PostgreSQL.
Layer 3, agent harness: OpenCode provides terminal, desktop, and web interfaces, along with tool dispatch and session state.

Each connection is tested before the next one is added. We start with the local model, connect the harness, and finish with the proxy and router. This makes failures much easier to locate.

Why this stack

Large reasoning models are useful for architecture and subtle bugs. They are expensive overkill for routine implementation or a focused refactor that a smaller local model can handle.

Many setups connect a harness to one model and stop there. This build adds a control plane to decide where requests go and track what they cost. The harness and local gateway are open source, and the selected models have available weights. I use OpenRouter, a proprietary service, for hosted inference. You can replace it with another compatible endpoint or infrastructure that you operate yourself. No API for a closed weight model is required.

My test machine has an RTX 4070 laptop GPU with 8GB of VRAM and 32GB of system RAM. The configuration below ran the local model, harness, and control plane together on that machine. Your memory use and throughput will vary with the model build, context length, drivers, operating system, and other GPU workloads.

What “adaptive” means in this build

OpenCode always requests one logical model, auto-mode. LiteLLM then classifies the request and selects a target according to the routing policy:

Request class	Example	Default target
Simple	A focused rename or boilerplate	Local Gemma 4
Medium	Routine implementation or test writing	Local Gemma 4
Complex	Changes across several files or substantial debugging	Hosted Mistral Small
Reasoning	Architecture, planning, or explicit tradeoffs	Hosted DeepSeek

The router does not learn from previous requests. It uses LiteLLM's complexity score, a few keyword rules, and the tier mapping configured later in the article.

This tutorial builds three layers, in order, so each one is independently testable before you stack the next:

The implementation order differs from the layer numbers. We first validate the local worker (Layer 1), connect the harness directly to it (Layer 3), and then place the proxy (Layer 2) between them.

Local Inference (Layer 1)

Local Model: Gemma 4

The local model has to fit in 8GB of VRAM and still be useful for coding and tool use. That points toward a quantized model with available weights and a good balance between size and reasoning ability.

I used llmfit to narrow the options and selected Gemma 4 e2b Q4_K_M.

The name describes the model and its quantization:

Gemma 4 is an open weight model provided by Google.
e2b means "Effective 2B" and targets edge deployments, making it suitable for this hardware.
Q4_K_M identifies a four bit K quant variant with a medium mix of quantization types. Quantization reduces memory use at some cost to fidelity.

Inference Server: Ollama

I selected Ollama because it is easy to install and exposes an OpenAI compatible API for the rest of the stack. Other open source inference servers can fill the same role. I covered several alternatives in the Bringing AI Home series and in this comparison of Ollama, vLLM, and ZML.

Install Ollama:

curl -fsSL https://ollama.com/install.sh | sh

Then download and run Gemma 4:

ollama run gemma4:e2b

pulling manifest
pulling 4e30e2665218: 100% ▕██████████████████████████████████████████████████████████████████████████████▏ 7.2 GB
verifying sha256 digest
writing manifest
success
>>> Hi
Thinking...
Thinking Process:

1.  **Analyze the input:** The input is "Hi". This is a very casual, open-ended greeting.
2.  **Determine the user's intent:** The user is initiating a conversation or acknowledging my presence.
3.  **Formulate an appropriate response:** The response should be friendly, welcoming, and invite further interaction.
    *   Standard replies: "Hello," "Hi there," "How can I help?"
4.  **Self-check against constraints (Identity/Role):** I am Gemma 4, a helpful AI. The response should reflect that role.
5.  **Generate the final reply:** A simple, warm greeting followed by an offer of assistance is ideal.
...done thinking.

Hello! How can I help you today?

The response confirms that local generation works. We will test tool use after connecting the harness.

AI Harness (Layer 3)

Open Source Harness: OpenCode

The model needs an execution harness before it can act as an agent. The harness manages session history, runs local tools, and tracks file changes across turns.

Mistral Vibe, Claude Code, OpenAI Codex, and Antigravity are examples of harnesses. Open source options include Pi Coding Agent and DeepSeek Harness.

I selected OpenCode because it is lightweight, actively developed, and available through terminal, web, and desktop interfaces. A formal QSOS comparison of open coding agents would be an interesting follow up. For now, install OpenCode:

curl -fsSL https://opencode.ai/install | bash

Quick smoke test: OpenCode talking directly to Ollama

Now I'm ready to wire OpenCode to Ollama and Gemma 4... or so I thought.

I learned the hard way that the model needs a configuration tailored to the agent before it is connected to the harness. A bare ollama run setup can behave differently once the harness starts sending tool schemas and longer agentic turns.

Agent harnesses can send tool schemas, project context, and file contents with every turn. If the context is too small, Ollama may truncate earlier content, including tool definitions. The result can be failed or invented tool calls. On this 8GB GPU, I use a context of 16,384 tokens. Larger windows consume more memory for the KV cache and may offload work to the CPU, so adjust this value for your hardware.

When creating a custom Modelfile, keep the model's compatible chat template unless you have tested a replacement. Tool capable models expect function definitions in a specific prompt format. An incompatible template can produce raw JSON or plain text command suggestions instead of tool calls.

Smaller general purpose models may call tools from another agent framework, such as explore or list_files, instead of OpenCode's glob. A short system prompt can list the available tools and map common actions to their OpenCode names.

I used the following Modelfile:

FROM gemma4:e2b

PARAMETER num_ctx 16384
PARAMETER temperature 0.0

SYSTEM """
You are an autonomous coding assistant inside OpenCode.
CRITICAL: You must only invoke tools from the provided schema.
Available Tools:
- glob(pattern: string): List/find files. Use this to explore directories.
- read(filePath: string, offset?: number, limit?: number): Read file content.
- write(filePath: string, content: string): Create or overwrite a file.
- edit(filePath: string, oldString: string, newString: string): Replace exact text in a file.
- grep(pattern: string, path?: string): Search codebase with regex.
- bash(command: string): Run terminal commands (build, test, git).
- question(header: string, question: string, options?: string[]): Ask user for clarification.
- task(subagentType: string, prompt: string): Delegate a subtask.
- skill(name: string): Load a predefined skill.
- todowrite(todos: array): Update the task/progress list.
- webfetch(url: string): Fetch web content.
- invalid: System fallback (do not invoke directly).
"""

The 16384 context window is the value used on my RTX 4070 laptop. A 32K or 64K window requires substantially more KV cache memory and may force partial CPU offloading on an 8GB card. Watch nvidia-smi while testing; if VRAM remains pinned near the limit or throughput collapses, reduce num_ctx to 8192 and retest.

Create the configured model in Ollama, much like building a Docker image:

ollama create gemma4-coder-agent -f Modelfile

gathering model components
using existing layer sha256:fdf02c16fb654ff60b2c30f1e91573ebc603a7084df3449df89120dca2b18170
using existing layer sha256:e94a8ecb9327ded799604a2e478659bc759230fe316c50d686358f932f52776c
creating new layer sha256:dcaf83c203b7c4daae5c154641637a2d10221b09baa4fce8d70f839cad18447d
writing manifest
success

Check that it appears in Ollama's model list:

ollama list

NAME                                                  ID              SIZE      MODIFIED
gemma4-coder-agent:latest                             bfa492d99bf8    7.2 GB    49 minutes ago
gemma4:e2b                                            7fbdbf8f5e45    7.2 GB    15 minutes ago

Next, call the configured model through Ollama's OpenAI compatible API. Testing this boundary now helps distinguish a model server problem from a later harness problem:

curl http://localhost:11434/v1/chat/completions \
  -H "Content-Type: application/json" \
  -d '{
    "model": "gemma4-coder-agent",
    "messages": [{"role": "user", "content": "Write a TypeScript function that debounces a callback."}]
  }'

Once the request succeeds, connect the harness. Close unnecessary GPU heavy applications before longer coding sessions because 8GB of VRAM leaves little headroom.

Point OpenCode at the configured model (no proxy yet)

Configure OpenCode in ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "ollama": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "Ollama Local",
      "options": {
        "baseURL": "http://127.0.0.1:11434/v1"
      },
      "models": {
        "gemma4-coder-agent": {
          "name": "Gemma4 (ollama)",
          "tools": true
        }
      }
    }
  }
}

And launch the OpenCode CLI:

opencode

Ask it to read or edit a file and confirm that OpenCode dispatches the tool call. A chat response alone does not test the tool configuration.

If tool calls don't dispatch, check that the Modelfile applied correctly (ollama show gemma4-coder-agent) before touching anything else.

If nothing works at all, check that curl http://localhost:11434/v1/models returns the model, and check OpenCode's logs for the actual connection error.

The harness and local model now work together. Keep this opencode.json as a baseline while adding the proxy and router.

Simple LiteLLM Proxy (Layer 2)

The next component is the AI gateway between the harness and the models. Several open source gateways are available, including Mozilla AI's Otari.

I selected LiteLLM, which we also use in production at work. It covers the proxy and governance features needed here. I did not measure its latency overhead for this article, so the performance discussion focuses on model routing.

LiteLLM began as a small Python library and now includes a proxy server, an Admin UI, and optional database storage.

Start with the standalone proxy:

pip install 'litellm[proxy]' --break-system-packages

This command matches my test environment. The --break-system-packages option bypasses the distribution package manager's protection. On a maintained workstation, use a virtual environment, pipx, uv, or the Docker setup shown later.

The Docker deployment uses the same configuration file and is covered later.

First, point the proxy only at the gemma4-coder-agent that we already tested.

Create litellm_config.yaml:

model_list:
  - model_name: "Gemma 4 (litellm)"
    litellm_params:
      model: ollama_chat/gemma4-coder-agent
      api_base: http://localhost:11434
      max_tokens: 16384
      num_ctx: 16384
    model_info:
      supports_function_calling: true

general_settings:
  master_key: sk-local-master-key-change-me

litellm_settings:
  drop_params: true
  telemetry: false
  modify_params: false

Start LiteLLM with that configuration:

litellm --config litellm_config.yaml --port 4000

Call the model through port 4000 to confirm that LiteLLM, rather than the direct Ollama endpoint, serves the request:

curl http://localhost:4000/v1/chat/completions \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"model": "Gemma 4 (litellm)", "messages": [{"role": "user", "content": "ping"}]}'

{
  "id": "chatcmpl-a1230750-0843-4af5-9e35-3c8e1869d45d",
  "created": 1787427863,
  "model": "Gemma 4 (litellm)",
  "object": "chat.completion",
  "choices": [
    {
      "finish_reason": "stop",
      "index": 0,
      "message": {
        "content": "",
        "role": "assistant",
        "reasoning_content": "The user input is simply \"ping\". This is a very vague request.\nIn a general context, \"ping\" usually refers to a network diagnostic tool.\nHowever, as an autonomous coding assistant inside OpenCode, I need to determine what action the user expects me to take based on the available tools and the context of a coding environment.\n\n1.  **Tool Check:** I have tools for file system operations (`glob`, `read`, `write`, `edit`, `grep`), shell commands (`bash`), web fetching (`webfetch`), and task delegation/questioning.\n2.  **Interpretation:** Since there is no specific file or code provided, \"ping\" might be:\n    *   A request to run a system command (like `ping` in a terminal).\n    *   A request for information about the network concept of ping.\n    *   A prompt to test connectivity (which I cannot do directly outside of a simulated environment).\n\nGiven the context of an \"autonomous coding assistant,\" the most likely interpretation is that the user wants me to execute a command if possible, or they are testing my ability to respond to a simple command. Since I have a `bash` tool, running a system command is an option.\n\nIf I assume the user wants me to run the standard network diagnostic:\n*   I can use `bash(\"ping\")`.\n\nIf I assume the user is asking for a definition or context:\n*   I should explain what `ping` is.\n\nSince I am operating within a coding assistant framework, and \"ping\" is often used as an instruction to test connectivity in such environments, I will attempt to use the `bash` tool."
      }
    }
  ],
  "usage": {
    "completion_tokens": 357,
    "prompt_tokens": 258,
    "total_tokens": 615
  }
}

If the call fails, check that Ollama is still running with ollama list before debugging LiteLLM.

Now connect the harness to the proxy. With only one model configured, the full OpenCode → LiteLLM → Ollama path is still easy to debug.

Update ~/.config/opencode/opencode.json to register LiteLLM alongside the existing Ollama provider:

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "ollama": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "Ollama Local",
      "options": {
        "baseURL": "http://127.0.0.1:11434/v1"
      },
      "models": {
        "gemma4-coder-agent": {
          "name": "Gemma4 (ollama)",
          "tools": true
        }
      }
    },
    "litellm": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "LiteLLM Proxy",
      "options": {
        "baseURL": "http://127.0.0.1:4000/v1",
        "apiKey": "sk-local-master-key-change-me",
        "compatibility": "compatible"
      },
      "models": {
        "Gemma 4 (litellm)": {
          "tools": true
        }
      }
    }   
  }
}

opencode

Inside the OpenCode TUI, running /models lets us toggle between connecting directly to Ollama (Gemma4 (ollama)) or through our LiteLLM proxy (Gemma 4 (litellm)).

LiteLLM is currently a simple pass through with one model and no routing logic. The test confirms that the network path and OpenAI compatible interface work before we add cloud models.

Hybrid LiteLLM Proxy (Layers 1 & 2)

With the local route working, we can add cloud endpoints. The harness and proxy are open source, and the models have available weights. Hosted access still depends on the service used to run those models.

I use OpenRouter to access the remote models. OpenRouter is a proprietary hosted gateway, while LiteLLM keeps the routing policy, budget controls, and logs on the laptop. You could serve the same models from your own infrastructure or cloud tenant instead.

Two remote models complement the local Gemma 4:

Mistral Small: A fast and relatively inexpensive option for tasks that are too demanding for the local model.
DeepSeek v4: A larger reasoning model for architecture and difficult debugging.

One OpenRouter API key covers both models. In the hybrid setup, all OpenCode traffic passes through LiteLLM, so the direct Ollama connection is removed. The name Gemma 4 (litellm) no longer has to distinguish one connection from another. From here on, its LiteLLM alias is the simpler gemma4-local.

model_list:
  - model_name: gemma4-local
    litellm_params:
      model: ollama_chat/gemma4-coder-agent
      api_base: http://localhost:11434
      max_tokens: 16384
      num_ctx: 16384
    model_info:
      supports_function_calling: true

  # --- Cloud tier: open-weight models via OpenRouter ---
  - model_name: deepseek-reasoning
    litellm_params:
      model: openrouter/deepseek/deepseek-v4-pro
      api_key: os.environ/OPENROUTER_API_KEY

  - model_name: mistral-fast
    litellm_params:
      model: openrouter/mistralai/mistral-small-2603
      api_key: os.environ/OPENROUTER_API_KEY

router_settings:
  provider_budget_config:
    openrouter:
      budget_limit: 5        # $5/day ceiling on cloud spend
      time_period: 1d

general_settings:
  master_key: sk-local-master-key-change-me

litellm_settings:
  drop_params: true
  telemetry: false
  modify_params: false

LiteLLM can limit spending over a given period. Once the threshold is reached, it blocks further calls covered by that budget. Test this case in your deployment and check the error shown by OpenCode. You may also want those requests to fall back to the local model.

This configuration limits OpenRouter spending to $5 per day.

LiteLLM can also issue scoped keys with their own budgets:

curl http://localhost:4000/key/generate \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"max_budget": 10, "budget_duration": "30d", "models": ["gemma4-local", "deepseek-reasoning", "mistral-fast"]}'

The remaining examples use the tutorial master key for consistency. For a shared or long lived deployment, use the scoped key returned by /key/generate in OpenCode and keep the master key out of client configuration.

Export the OpenRouter key and restart the proxy:

export OPENROUTER_API_KEY=sk-or-...
litellm --config litellm_config.yaml --port 4000

Test each route directly through the LiteLLM API:

# local model through the proxy
curl http://localhost:4000/v1/chat/completions \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"model": "gemma4-local", "messages": [{"role": "user", "content": "ping"}]}'

# First Cloud model through the proxy
curl http://localhost:4000/v1/chat/completions \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"model": "mistral-fast", "messages": [{"role": "user", "content": "ping"}]}'

# Second Cloud model through the proxy
curl http://localhost:4000/v1/chat/completions \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"model": "deepseek-reasoning", "messages": [{"role": "user", "content": "ping"}]}'

The API also reports budget consumption:

curl -X GET http://localhost:4000/provider/budgets \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk-local-master-key-change-me"

The response includes the limit, current spend, time period, and reset time. Check the reset timestamp against the host clock before relying on it. A wildly incorrect date usually points to a clock problem or a bug in the installed version.

Point OpenCode at the expanded proxy:

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "litellm": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "LiteLLM Proxy",
      "options": {
        "baseURL": "http://127.0.0.1:4000/v1",
        "apiKey": "sk-local-master-key-change-me",
        "compatibility": "compatible"
      },
      "models": {
        "gemma4-local": {
          "tools": true
        },
        "mistral-fast": {
          "limit": { "context": 262144, "output": 8192 }
        },
        "deepseek-reasoning": {
          "limit": { "context": 1000000, "output": 8192 }
        }
      }
    }   
  }
}

The direct Gemma4 (ollama) entry is gone because all traffic now passes through LiteLLM. From this point onward, gemma4-local identifies the local model behind the proxy.

OpenCode also provides a web interface. Start it and check that the previous sessions and new models are available:

opencode web

The hybrid proxy now exposes several models and a spending limit, but model selection is still manual. The next step is automatic routing.

Smart LiteLLM Proxy (Layer 2)

During my tests, OpenCode did not switch models reliably based on task complexity. Its model overrides for subagents were not consistent enough for this setup.

The routing decision therefore moves to LiteLLM's Auto Router v2. OpenCode always requests auto-mode. LiteLLM scores the request, applies any matching keyword rule, and maps the chosen tier to a model. OpenCode does not need to know which model handles the request.

Add auto-mode to litellm_config.yaml alongside the three existing models:

model_list:
  # ... gemma4-local, deepseek-reasoning, mistral-fast entries stay as-is ...

  - model_name: auto-mode
    litellm_params:
      model: auto_router/complexity_router
      complexity_router_config:
        tiers:
          SIMPLE: gemma4-local          # autocomplete, small edits, boilerplate
          MEDIUM: gemma4-local          # routine implementation, test writing
          COMPLEX: mistral-fast        # multi-file changes, real debugging
          REASONING: deepseek-reasoning # architecture, planning, hard bugs
        complexity_router_default_model: gemma4-local   # fail toward free, not expensive
        keyword_rules:
          - keywords: ["plan", "architecture", "design a", "trade-off"]
            tier: REASONING
        return_raw_model_name: true

Three settings control the behavior:

complexity_router_default_model: gemma4-local sends an uncertain or timed out classification to the free local model. Change it if you prefer capability over cost.
keyword_rules run before complexity scoring. They immediately escalate prompts that mention architecture, planning, or tradeoffs.
return_raw_model_name: true returns the name of the model that handled the request, making routing easier to verify in logs.

After restarting the proxy, send a short prompt and an architecture prompt to auto-mode. Check the returned model name and the LiteLLM logs. This confirms that both routes work, but it does not measure routing accuracy.

curl http://localhost:4000/v1/chat/completions \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"model": "auto-mode", "messages": [{"role": "user", "content": "rename your model name to camelCase"}]}'

The Auto Router selected the ollama_chat/gemma4-coder-agent model:

{
  "id": "chatcmpl-774cdbf7-09c2-4d1e-8f94-bb878c0f11bb",
  "created": 1788128064,
  "model": "ollama_chat/gemma4-coder-agent",
  "object": "chat.completion",
  "choices": [
    {
      "finish_reason": "stop",
      "index": 0,
      "message": {
        "content": "I am an AI assistant and do not have a specific model name that I can rename within this context. How can I help you with your coding tasks?",
        "role": "assistant",
        "reasoning_content": "Thinking Process:\n\n1.  **Analyze the Request:** The user wants me to \"rename your model name to camelCase\"..."
   # ... rest of the message ...

The router chose the expected local model, but the answer itself is poor because the model interpreted the vague request literally. A correct route does not guarantee a good answer.

curl http://localhost:4000/v1/chat/completions \
  -H "Authorization: Bearer sk-local-master-key-change-me" \
  -H "Content-Type: application/json" \
  -d '{"model": "auto-mode", "messages": [{"role": "user", "content": "design the data model for a multi-tenant billing system with usage-based pricing"}]}'

This time, the deepseek/deepseek-v4-pro is called:

{
  "id": "gen-1788128721-XpJrCbVmBWN8x9E03aDh",
  "created": 1788128721,
  "model": "deepseek/deepseek-v4-pro",
  "object": "chat.completion",
  "choices": [
    {
      "finish_reason": "stop",
      "index": 0,
      "message": {
        "content": "Below is a Stripe-inspired data model for a **multi-tenant billing system with usage-based pricing**.  \nThe model assumes:\n\n- A **tenant** is an organization u..."
  # ... rest of the message ...

Evaluate the routing policy with representative tasks

Before making auto-mode the default, test it with prompts from your own work. Label the expected tier first, then record the selected model and whether it completed the task. A small test set could include:

Task	Expected tier	What to verify
Rename a field in one interface	Simple	Remains local and makes the correct edit
Add validation and unit tests	Medium	Remains local unless the context is unusually large
Trace a failure across several layers	Complex	Escalates to the fast hosted model
Compare tenant isolation designs	Reasoning	Escalates to the reasoning model
Ask for a “plan” for a trivial rename	Adversarial	Reveals whether the keyword rule escalates too often
Describe a hard bug without escalation keywords	Adversarial	Reveals whether complexity scoring catches it

Run the same tasks with local only, cloud only, manual selection, and automatic routing. For each mode, record successful tasks, median latency, hosted request count, and hosted cost.

The results will show whether the router saves money without hurting task completion. Pay particular attention to unnecessary cloud calls and difficult tasks that stay local.

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "litellm": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "LiteLLM Proxy",
      "options": {
        "baseURL": "http://localhost:4000/v1",
        "apiKey": "sk-local-master-key-change-me"
      },
      "models": {
        "auto-mode": {
          "limit": { "context": 16384, "output": 4096 }
        },
        "gemma4-local": {
          "limit": { "context": 16384, "output": 4096 },
          "tools": true
        },
        "mistral-fast": {
          "limit": { "context": 262144, "output": 8192 }
        },
        "deepseek-reasoning": {
          "limit": { "context": 1000000, "output": 8192 }
        }
      }
    }
  },
  "enabled_providers": ["litellm"],
  "model": "litellm/auto-mode"
}

The "model": "litellm/auto-mode" setting makes automatic routing the default for new sessions. The three individual models remain available in /models as manual overrides.

"enabled_providers": ["litellm"] limits OpenCode to the LiteLLM provider. This syntax will be replaced by the policy mechanism described here.

OpenCode also has a desktop application for Windows, macOS, and Linux, available from the official site.

The same session is shown below in OpenCode Desktop with Auto Mode enabled.

The proxy selected Mistral Small for this task. At this point, I still had to check the OpenRouter dashboard to confirm the choice.

That external check confirmed the route, but it also showed what the local setup still lacked: one place to inspect routing and usage.

Full Control Plane (Layer 2)

LiteLLM started as a Python wrapper for different LLM APIs. It has since expanded into gateway infrastructure with management and observability features.

The full proxy can use PostgreSQL for its Admin UI, request logs, and spending data. Running those services locally adds useful controls without making this tutorial setup production ready.

To add those features, switch to the containerized deployment backed by PostgreSQL. Download the official Docker Compose file:

curl -sSLO https://docs.litellm.ai/docker-compose.yml

Adapt the Compose file to mount litellm_config.yaml, seed the database on first boot, and reach Ollama on the host:

services:
  litellm:
    image: docker.litellm.ai/berriai/litellm-database:latest
    volumes:
      - ./litellm_config.yaml:/app/config.yaml
    command:
      - "--config=/app/config.yaml"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    ports:
      - "4000:4000"
    environment:
      LITELLM_SALT_KEY: sk-XXXXXXXXXXXXXXXX
      DATABASE_URL: postgresql://litellm:litellm@db:5432/litellm
      STORE_MODEL_IN_DB: "True"
    depends_on:
      db:
        condition: service_healthy

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: litellm
      POSTGRES_PASSWORD: litellm
      POSTGRES_DB: litellm
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U litellm"]
      interval: 5s
      timeout: 5s
      retries: 10
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Docker Compose creates a LiteLLM container, a PostgreSQL container, and a volume for the database. I made two changes to the default Compose file:

volumes: [./litellm_config.yaml:/app/config.yaml] and command: ["--config=/app/config.yaml"] load the LiteLLM configuration into the container.
extra_hosts: ["host.docker.internal:host-gateway"] lets the container reach Ollama on the host.

The LiteLLM configuration also needs a few changes:

model_list:
  - model_name: gemma4-local
    litellm_params:
      model: ollama_chat/gemma4-coder-agent
      api_base: http://host.docker.internal:11434
      max_tokens: 16384
      num_ctx: 16384
    model_info:
      supports_function_calling: true

  # --- Cloud tier: open-weight models via OpenRouter ---
  - model_name: deepseek-reasoning
    litellm_params:
      model: openrouter/deepseek/deepseek-v4-pro
      api_key: os.environ/OPENROUTER_API_KEY

  - model_name: mistral-fast
    litellm_params:
      model: openrouter/mistralai/mistral-small-2603
      api_key: os.environ/OPENROUTER_API_KEY

  # --- Auto Router: smart routing based on task complexity and keywords ---
  - model_name: auto-mode
    litellm_params:
      model: auto_router/complexity_router
      complexity_router_config:
        tiers:
          SIMPLE: gemma4-local          # autocomplete, small edits, boilerplate
          MEDIUM: gemma4-local          # routine implementation, test writing
          COMPLEX: mistral-fast         # multi-file changes, real debugging
          REASONING: deepseek-reasoning # architecture, planning, hard bugs
        complexity_router_default_model: gemma4-local   # fail toward free, not expensive
        keyword_rules:
          - keywords: ["plan", "architecture", "design a", "trade-off"]
            tier: REASONING
        return_raw_model_name: true

router_settings:
  provider_budget_config:
    openrouter:
      budget_limit: 5        # $5/day ceiling on cloud spend — tune to taste
      time_period: 1d

general_settings:
  master_key: sk-local-master-key-change-me
  store_model_in_db: true
  store_prompts_in_spend_logs: true

litellm_settings:
  drop_params: true
  telemetry: false
  modify_params: false

The changes are:

api_base: http://host.docker.internal:11434 points the container to the local Ollama model.
store_model_in_db: true enables database storage.
store_prompts_in_spend_logs: true enables prompt logging.

The last option stores prompts, including any source code they contain, in PostgreSQL. Disable it or define a retention policy if you do not need to inspect full prompts.

Start the containers:

docker compose up -d

The LiteLLM container logs confirm that the models were loaded from the configuration:

litellm-1  |
litellm-1  |    ██╗     ██╗████████╗███████╗██╗     ██╗     ███╗   ███╗
litellm-1  |    ██║     ██║╚══██╔══╝██╔════╝██║     ██║     ████╗ ████║
litellm-1  |    ██║     ██║   ██║   █████╗  ██║     ██║     ██╔████╔██║
litellm-1  |    ██║     ██║   ██║   ██╔══╝  ██║     ██║     ██║╚██╔╝██║
litellm-1  |    ███████╗██║   ██║   ███████╗███████╗███████╗██║ ╚═╝ ██║
litellm-1  |    ╚══════╝╚═╝   ╚═╝   ╚══════╝╚══════╝╚══════╝╚═╝     ╚═╝
litellm-1  |
litellm-1  | ...
litellm-1  | INFO:     Application startup complete.
litellm-1  | INFO:     Uvicorn running on http://0.0.0.0:4000 (Press CTRL+C to quit)
litellm-1  |
litellm-1  | #------------------------------------------------------------#
litellm-1  | #                                                            #
litellm-1  | #               'A feature I really want is...'               #
litellm-1  | #        https://github.com/BerriAI/litellm/issues/new        #
litellm-1  | #                                                            #
litellm-1  | #------------------------------------------------------------#
litellm-1  |
litellm-1  |  Thank you for using LiteLLM! - Krrish & Ishaan
litellm-1  |
litellm-1  |
litellm-1  |
litellm-1  | Give Feedback / Get Help: https://github.com/BerriAI/litellm/issues/new
litellm-1  |
litellm-1  |
litellm-1  | LiteLLM: Proxy initialized with Config, Set models:
litellm-1  |     gemma4-local
litellm-1  |     deepseek-reasoning
litellm-1  |     mistral-fast
litellm-1  |     auto-mode

Access the Admin UI at http://localhost:4000/ui/. Log in with the username admin and the password configured as your master_key (sk-local-master-key-change-me).

The Models + Endpoints view lists the local model, the two remote models, and the auto-mode router.

Two views are especially useful here.

The Usage view shows request volume, token consumption, and spending by model:

The Request Logs view shows individual traces, prompts, and router decisions stored in PostgreSQL:

Privacy and trust boundaries

Local first is not the same as local only. Requests assigned to mistral-fast or deepseek-reasoning leave the laptop and pass through OpenRouter to a hosted inference provider. They may contain source code, file paths, tool output, or conversation history.

Before using automatic routing with a private repository:

review the data handling terms of every hosted provider in the route;
exclude secrets, .env files, private keys, certificates, and credential stores from agent context;
provide an easy local only model override for sensitive work;
decide whether cloud escalation should be automatic or require confirmation;
restrict access to the LiteLLM Admin UI and PostgreSQL database;
replace tutorial keys and database passwords with secrets supplied through your deployment environment;
define retention and backup policies for stored prompts and request logs.

The control plane makes model selection and logging visible. It does not make hosted inference private, but it gives you one place to define and audit that boundary.

Before treating this as a production deployment

This tutorial favors a readable local setup. Once the complete path works, record the environment and pin the component versions or container image digests used for that run.

Automatic routing, provider compatibility, and configuration fields can change between releases. A shared or production deployment should also enable TLS, use scoped client keys, protect the Admin UI, rotate secrets, back up PostgreSQL, test budget exhaustion and provider failures, and monitor routing quality.

LiteLLM also supports MCP server hubs, team virtual keys, input guardrails, and heuristics such as routing by context size. This article uses only the features needed for the local control plane.

LiteLLM also offers a commercial Enterprise edition with SAML SSO, team RBAC, secret management, and clusters across multiple regions. Everything configured here runs on the open source community edition.

Conclusion

This setup made an 8GB VRAM laptop a practical base for my coding agent. Gemma 4 handles routine work without token charges, OpenCode runs the tools and keeps the session, and LiteLLM sends harder requests to larger hosted models.

What We Built

Configured Local Inference: A custom Ollama Modelfile with a tested context window (16384) and an explicit tool registry designed to improve Gemma 4's behavior within 8GB of VRAM.
Decoupled Harness: OpenCode configured to communicate over standard OpenAI compatible endpoints across terminal, desktop, and web interfaces.
Governed Control Plane: A local LiteLLM deployment backed by PostgreSQL providing:
- Provider spending limits ($5/day in the example configuration).
- Routing by complexity via auto-mode, keeping standard edits local while escalating hard tasks to Mistral and DeepSeek.
- Local observability through the LiteLLM Admin UI to review prompt logs and token usage.

Next Steps & Experiments

If you want to take this setup further, consider exploring:

Model Context Protocol (MCP): Connect local MCP servers to OpenCode for safe database inspection, live documentation lookups, or issue tracking.
Routing by Context Size: Configure LiteLLM to hand off oversized file trees to models with a larger context while keeping short prompt cycles local.
Semantic Scoring with Embeddings: Replace keyword rules with an embedding classifier to automate tiering dynamically.

The main benefit is control. You can see which model handled a request, keep routine work local, limit cloud spending, and inspect the result. Requests sent to hosted models still leave the machine, and the logs make that boundary visible.

Driving Local ComfyUI from Codex with MCP

raphiki — Fri, 21 Aug 2026 14:46:13 +0000

In the previous articles of the Beyond the ComfyUI Canvas series, I connected ComfyUI to notebooks, WebSockets, n8n, and Flowise. I even created my own MCP Server. Each integration worked, but it still required me to write or maintain the glue: HTTP payloads, polling loops, node IDs, and workflow-specific code.

Today, I am taking a more direct route. I will connect a local ComfyUI installation to Codex through the official open-source Comfy MCP server.

The goal is simple: let an AI agent inspect the local ComfyUI instance, discover installed models, validate an existing workflow, run it, wait for completion, and bring the generated image back into the conversation.

No custom Python bridge. No hand-written /prompt request. The agent uses a standard MCP tool interface; Comfy MCP translates those tool calls into comfy-cli commands targeting my local ComfyUI server.

1. Setting the Scene: The Stack

The local stack I used has three layers:

Codex is the agent and MCP client. It receives natural-language requests and decides which tools to call.
Comfy MCP is the open-source MCP server from Comfy. It runs as a local stdio process and wraps comfy-cli.
ComfyUI is the generation engine, running locally at http://127.0.0.1:8188 on a GPU-equipped machine.

This is not Comfy Cloud MCP. The complete flow stays on the local machine: the workflow, models, queue, and generated images all remain in the local ComfyUI workspace. The only exception is a workflow that deliberately uses paid partner API nodes.

2. Install the Local Components

Let Codex do the setup

Steps 2 and 3 can be delegated to Codex itself. Instead of manually installing packages and editing the MCP configuration, give Codex this prompt:

Help me set up the local Comfy MCP connection.

Follow the setup guide at https://docs.comfy.org/agent-tools/mcp.md#local-comfy-mcp-connection

Codex can inspect the machine, install the required packages, create or locate the ComfyUI workspace, configure the MCP server, and then verify the connection. It should still show you any required permissions before making changes outside its workspace.

The Comfy MCP server is built on top of comfy-cli, so both packages are required:

py -m pip install comfy-mcp "comfy-cli>=1.14.0"

If ComfyUI is not installed yet, create a workspace with:

comfy install

For an existing workspace, make it the default instead:

comfy set-default C:\path\to\ComfyUI

Then launch the local server:

comfy launch

In my case, ComfyUI was installed in C:\Users\rapha\Documents\comfy\ComfyUI and became available at http://127.0.0.1:8188.

The Windows PATH trap

On Windows, packages installed with Python can place comfy.exe and comfy-mcp.exe in a Scripts directory that is not on the PATH inherited by desktop applications.

That can be confusing: the MCP server starts and completes its handshake, but every useful tool fails with:

comfy not found on PATH

The robust fix is to configure COMFY_BIN with the absolute path to comfy.exe. It makes the MCP server independent from the client application's PATH.

3. Connect Comfy MCP to Codex

Codex stores local MCP servers in its configuration. Add the following to ~/.codex/config.toml, adapting the paths to your Python installation:

[mcp_servers.comfy-mcp]
command = 'C:\Users\<you>\AppData\Roaming\Python\Python313\Scripts\comfy-mcp.exe'

[mcp_servers.comfy-mcp.env]
COMFY_BIN = 'C:\Users\<you>\AppData\Roaming\Python\Python313\Scripts\comfy.exe'

Restart or reload Codex after changing the configuration. The server is a stdio MCP server: Codex launches comfy-mcp as a subprocess when it needs the tools.

COMFY_API_KEY is not required for local Flux, SDXL, or other locally installed models. Add it only when you intentionally use Comfy partner API nodes that spend credits.

4. First Contact: Verify the Engine and Inspect Models

The first useful test is not image generation. It is asking Codex to inspect the live server:

Confirm that my local ComfyUI is running and list the installed models.

Under the hood, Codex calls Comfy MCP's server_info and search_models tools. In my test, the server reported a healthy local ComfyUI instance at 127.0.0.1:8188, and the model search found the locally installed Flux 2 Klein model, VAEs, text encoders, LoRAs, and checkpoint files.

This is an important difference from a static prompt template. The agent can inspect what this ComfyUI instance actually has before it attempts a workflow. That makes it much easier to diagnose a missing model or a custom-node mismatch.

Other operational actions are available through the same connection:

server_info        # health, server address and capabilities
search_models      # models visible to this ComfyUI instance
search_templates   # templates from the Comfy registry
launch_comfyui     # start the local server
stop_comfyui       # stop the local server
get_logs           # inspect server logs when a run fails

5. Workflows: Templates vs. Local Exports

There are two workflow paths worth keeping separate.

Registry templates

For a Comfy template, the agent can search the registry, inspect a template, fetch it into a runnable JSON file, validate it against the local installation, and run it.

Your own workflows

For a workflow created in the ComfyUI canvas, export it as JSON and give Codex the file path. Comfy MCP's run_workflow accepts both API-format workflow JSON and a UI-exported workflow file.

This is the path I used for image_flux2_text_to_image.json, a Flux 2 Klein text-to-image workflow. The workflow contained a dedicated prompt input wired to the positive conditioning node, so changing the prompt did not require rebuilding the graph.

The practical rule is simple: templates are discovered from the registry; personal workflows are supplied as exported JSON files.

6. The Use Case: A Cyberpunk Image from a Conversation

With the connection tested, I asked Codex to create an evocative cyberpunk prompt and generate an image with the existing Flux workflow.

The prompt injected into the workflow was:

A lone courier in a rain-soaked neon megacity at midnight, riding a sleek black
motorcycle through a narrow alley beneath towering holographic billboards;
crimson and electric cyan reflections ripple across wet pavement, steam drifting
from street vents, distant elevated trains, cinematic low-angle composition,
moody noir atmosphere, intricate futuristic street details, expressive visual
storytelling, photorealistic, high contrast, luminous volumetric rain

The agent followed a safe execution sequence:

1. validate_workflow(workflow_path)
2. run_workflow(workflow_path, wait=false)
3. job(action="wait", prompt_id=...)
4. fetch_outputs(prompt_id, out_dir="./outputs")
5. Display the downloaded image in Codex

The validation result was clean: no errors, no warnings, and no credit-spending nodes. ComfyUI then queued the job, rendered it locally, and returned an output URL. fetch_outputs copied the completed PNG into the Codex workspace, where it could be displayed directly in the conversation.

The output is more than a pretty picture. It proves the full control loop:

7. What MCP Removes — and What It Does Not

MCP removes a large amount of integration boilerplate. I no longer have to manually craft the ComfyUI /prompt payload, invent a polling loop, or reconstruct /view URLs in every application. The tools provide a consistent interface for lifecycle management, discovery, validation, execution, and outputs.

But MCP does not remove the value of a well-designed workflow. The JSON graph still defines the actual generation process: which model is loaded, where the prompt is injected, which sampler runs, and which node saves the output. The cleanest pattern is to keep reusable workflows in source control and let the agent execute validated copies of those files.

It is also worth keeping two guardrails in mind:

Validate before running. A workflow can refer to a model or custom node that is absent from the local instance.
Confirm paid execution deliberately. Local workflows are usually free apart from hardware and electricity, but partner API nodes can consume Comfy credits.

Conclusion

Connecting Codex to local ComfyUI through the open-source Comfy MCP server changes the relationship between the agent and the generation engine. ComfyUI is no longer only a canvas I open by hand; it becomes a discoverable, controllable local capability.

In this experiment, I installed the MCP bridge, configured Codex with an explicit COMFY_BIN, launched and inspected the local server, enumerated the installed models, validated an existing Flux workflow, generated an image, waited for completion, and retrieved the output—all from one conversation.

The next step is to treat a library of exported ComfyUI workflows as an agent-accessible creative toolbox: text-to-image, image-to-image, upscaling, video, audio, and more. The graph remains the source of truth, while MCP gives the agent a reliable way to use it.

Resources

Vibe Learning PageIndex: A Vectorless RAG for My Google Drive

raphiki — Tue, 04 Aug 2026 15:50:38 +0000

A few weeks ago I wanted to search my personal document library — a folder of PDFs sitting in Google Drive — using plain language questions instead of Drive's keyword search. I'd heard about PageIndex, a "vectorless, reasoning-based" alternative to the usual embeddings-and-vector-database RAG stack, and I wanted an excuse to actually use it rather than just read about it.

So that's what I did: I picked a real, personally useful project, added a constraint that mattered to me (no OpenAI key, nothing running in someone else's cloud unless I chose to), and built the whole thing with Claude, end to end, over one long working session. I've started calling this Vibe Learning — the learning equivalent of vibe coding: you don't read the manual first, you describe what you want, let the AI drive the actual building, and pick up the framework as a side effect of watching it get used and occasionally break in front of you.

This post is three things at once: how Vibe Learning actually works in practice, what PageIndex is and why it's a genuinely different approach to RAG, and a walkthrough of the app that came out of it.

Vibe Learning: Building With AI Instead of Reading About It

The old way of picking up a new library looks something like: read the docs top to bottom, follow the quickstart, maybe get through a toy tutorial, and file away a vague mental model for "later" — which often means never actually using it for real.

The way I did this instead: I described what I actually wanted (search my Drive library, no vector DB, no paid API key), and let the agent do the parts that used to be the friction — reading the actual source code of the library instead of trusting a possibly-stale mental model of it, writing the integration code, and running it against my real Drive folder and my real documents.

The valuable part wasn't that the AI produced working code. It's that when things broke — and they did — I got to see why, in enough detail to actually learn something about how the library works under the hood, not just a patched-over error message. A few examples from this exact build:

Every single indexing call started failing with a cryptic Failed to extract JSON: Expecting value: line 1 column 1 error. It looked like a broken API key or a bad model choice. It turned out to be a genuinely interesting fact about how modern "reasoning" LLMs behave: they can spend their entire token budget on hidden chain-of-thought before ever writing the actual answer, if nothing caps it — and PageIndex's own code never sets a max_tokens limit on its calls. That's a real, transferable lesson about working with reasoning models, not just a bug I happened to hit.
I discovered, by actually trying to query my indexed documents, that PageIndex's open-source package builds the tree and gives you read tools for it — but doesn't ship the retrieval loop itself. That's a load-bearing detail for anyone evaluating it, and not something the README leads with.
OpenRouter's free-tier model lineup turned out to change constantly — a model id that worked one day can be delisted days later. Small thing, but the kind of operational reality you only notice when you're actually running against a live provider instead of reading a static list of "supported models."

None of that shows up if you skim a README and move on. It shows up when you build something real and something breaks, with someone (or something) alongside you that can explain the actual mechanism instead of just supplying a fix. That's the shift: the AI doesn't replace learning the framework, it removes the friction that used to stop me from ever getting far enough in to learn it properly.

With that said, let's get into what PageIndex actually is.

What Is PageIndex, and Why Is It Different From Classical RAG?

The classical RAG recipe, and its problem

Standard RAG (retrieval-augmented generation) usually looks like this: split your documents into fixed-size chunks, embed each chunk into a vector, store the vectors in a vector database, and at query time, embed the question and pull back the top-k chunks by cosine similarity. It works, and it's become the default architecture almost by inertia.

The problem PageIndex's authors point at is a simple but important one: similarity is not the same thing as relevance. A vector search finds text that sounds like the question, not necessarily the text that actually answers it. For casual, single-fact lookups over short documents that's often good enough. For long, professional documents — financial filings, regulatory text, technical manuals — where answering correctly requires multi-step reasoning and an understanding of where something sits in the document's structure, similarity search alone tends to fall short.

Chunking makes this worse in a subtler way: it flattens a document's structure. A fixed-size chunk boundary doesn't know or care where a section, a table, or a clause actually ends — it can slice straight through the middle of the thing you needed, discarding the surrounding context a human reader would use without even thinking about it.

PageIndex's approach: reasoning over a tree, not similarity over vectors

PageIndex, built by VectifyAI and released in September 2025, throws out vectors and chunking entirely. Its own framing is explicit about the inspiration: it's modeled on how AlphaGo uses tree search, and on how a human expert actually navigates a long document — by using its table of contents, not by speed-reading every page.

Concretely, it works in two phases:

Build a tree. PageIndex parses the document and produces a hierarchical structure that looks like an extended, machine-usable table of contents: every node has a title, a page range, and an LLM-generated summary of what that section actually covers. Nodes nest into their natural sections — chapters, sub-sections, and so on — following the document's own structure rather than an arbitrary token-count boundary.
Reason over the tree to retrieve. At query time, instead of computing similarity scores, an LLM reads the tree — starting from the top-level node summaries — and decides which branches are actually worth descending into, narrowing down step by step until it lands on the specific section(s) relevant to the question. This is the "tree search": genuinely reasoning about relevance, informed by a summary of what each part of the document contains, rather than pattern-matching on surface similarity.

The practical upshot is that every answer is traceable to an exact page and section — no more "vibe retrieval" where you're trusting an opaque similarity score. Retrieval can also incorporate context a fixed vector index can't easily use, like conversation history, since it's a reasoning step rather than a static index lookup.

PageIndex's own benchmark result is a strong argument for the approach: a reasoning-based RAG system built on top of it (VectifyAI's "Mafin 2.5") scored 98.7% on FinanceBench — a benchmark built specifically around financial document question-answering — against roughly 30–50% for typical vector-based RAG systems on the same benchmark. Financial filings are exactly the kind of long, structurally dense, professional document where "similarity" and "relevance" diverge the most, so it's a fair stress test for the idea.

How it's actually built, under the hood

PageIndex is open source (MIT license) and, refreshingly, doesn't lock you into a single LLM provider. Every model call goes through LiteLLM, so under the hood it's just:

response = litellm.completion(model=model, messages=messages, temperature=0)

— where model is any LiteLLM-formatted string: gpt-4o, anthropic/claude-..., ollama/qwen2.5:14b, openrouter/<provider>/<model>, whatever you want. This one design choice is what made it possible to build the whole thing below with no OpenAI key at all.

A config.yaml sets sane defaults — which model to use, how many pages to scan for an existing table of contents, how big a tree node is allowed to get, whether to attach node summaries or a whole-document description — all overridable via CLI flags or, if you're using it as a library, a small options object.

The actual entry point for using it as a library is PageIndexClient, which is genuinely pleasant to work with:

client = PageIndexClient(model=model, retrieve_model=model, workspace="./my_workspace")
doc_id = client.index("some_document.pdf")

client.get_document(doc_id)            # metadata: name, description, page count
client.get_document_structure(doc_id)  # the tree, without the full text (cheap to hand to an LLM)
client.get_page_content(doc_id, "10-15")  # the actual text for a page range

That last trio is clearly designed to be used as tools an agent calls — PageIndex's own examples wire this up with the OpenAI Agents SDK for a small demo. Which brings me to the one honest caveat worth knowing before you adopt it: the open-source package builds the tree and hands you the read primitives, but it does not ship the retrieval loop itself. Deciding which document to search, which section of it to read, and how to turn the fetched text into an answer — that's on you, unless you use VectifyAI's hosted cloud API, which does include it. That's not a criticism so much as a fact you only really absorb by trying to query your own indexed documents and finding there's no search() method waiting for you.

Building that missing piece myself is where a lot of the actual learning happened.

Building the Thing: A Local, Vectorless Search Engine for My Google Drive

The goal was concrete: search my own PDF library, living in Google Drive, in plain language, with no vector database and no data going to a paid provider unless I explicitly chose to. Here's the pipeline that came out of it:

Google Drive (OAuth, read-only)
   → download / export changed files
   → PageIndex tree generation (title, sections, summaries)
   → local JSON storage (no database)
   → hand-rolled tree-search retrieval agent
   → FastAPI backend
   → a small static frontend

Getting into Drive without over-scoping

Read-only OAuth against the Drive API (the standard "Desktop app" installed-app flow — one browser consent, then a cached refresh token), scoped optionally to a single folder. Sync is incremental: each file's Drive modifiedTime is tracked, so unchanged files are skipped, changed files get re-indexed, and anything removed from Drive gets dropped from the index automatically. Google Docs, Sheets, and Slides get exported to PDF on the way in, so the rest of the pipeline only ever has to deal with one format.

No API key: swapping the model string

Because PageIndex is LiteLLM-based, "no OpenAI key" turned out to be almost entirely a configuration problem, not a code problem. The app supports two backends, switchable with one environment variable:

Ollama — fully local, private, zero cost, needs decent local compute.
OpenRouter — hosted, with genuinely free-tier models, no local compute required.

LLM_PROVIDER=openrouter
OPENROUTER_MODEL=google/gemini-3.1-flash-lite
OPENROUTER_API_KEY=...   # free, no credit card

The reasoning-token bug

This is the one worth dwelling on, because it's a genuinely useful thing to know if you're going to work with reasoning-capable LLMs at all. Every indexing call was failing identically, from the very first LLM request, with an empty response body that PageIndex's JSON parser choked on. It wasn't rate limiting, and it wasn't a bad model — a trivial test prompt worked fine. The difference was prompt complexity: on a real page of document text, the model would spend its entire token budget on hidden chain-of-thought reasoning before it ever got around to writing the actual JSON answer, because PageIndex's own code never sets a max_tokens cap.

The fix, applied once, globally, without touching the vendored library:

DEFAULT_MAX_TOKENS = 16000
DEFAULT_REASONING_EFFORT = "low"

def _completion_with_defaults(*args, **kwargs):
    kwargs.setdefault("max_tokens", DEFAULT_MAX_TOKENS)
    kwargs.setdefault("reasoning_effort", DEFAULT_REASONING_EFFORT)
    return _original_completion(*args, **kwargs)

litellm.completion = _completion_with_defaults

Since litellm.drop_params = True is already set (by PageIndex itself), any provider or model that doesn't understand reasoning_effort just ignores it instead of erroring — so this is safe to apply unconditionally, regardless of which backend is active.

Writing the retrieval loop PageIndex doesn't ship

With the tree-building side solid, the actual search had to be hand-rolled from the get_document / get_document_structure / get_page_content primitives:

Pick documents. The LLM sees every indexed document's title and short description, and picks which ones are worth searching for this particular question.
Navigate the tree. For each candidate document, the LLM reads that document's flattened table of contents — titles, page ranges, and summaries — and decides which section(s) actually matter, the tree search PageIndex is named for.
Fetch and answer. The actual text for those page ranges gets pulled, and one final LLM call answers the question using only that text, citing which document and page range each claim comes from.

The tree navigation step, in essence:

prompt = f"""You are navigating a document's table of contents to find sections
relevant to a question, the way a human expert flips to the right chapter
rather than reading everything.

Question: {query}

Table of contents:
{listing}

Return JSON only: {{"node_ids": ["<id>", ...]}}, most relevant first."""

Simple, but it's the whole idea in one prompt: reason over structure, not similarity over vectors.

Citations that actually point somewhere

Since the goal was searching my own Drive library, not a copy of it, citations link straight back to the original file. Google Drive's PDF viewer happens to honor a #page=N URL fragment, so a citation link like https://drive.google.com/file/d/<id>/view#page=10 opens the real file at the exact cited page — no local copy of the document needs to live in the app itself. A "Sources" footer lists each unique document referenced, alongside its title and author.

Which raises one more small, very "real-world-data-is-messy" detail: a lot of PDFs — scans, Drive-exported Google Docs — simply don't have reliable title/author metadata embedded. So the app tries the embedded PDF metadata first, and falls back to asking the LLM to read the title and byline off the document's own opening pages when that metadata is missing or unreliable.

The frontend, deliberately boring

A single static HTML file — vanilla JS, no build step, no framework — served directly by FastAPI so the whole thing is one app on one URL. It renders the LLM's markdown answer (via marked, sanitized with DOMPurify, both loaded straight from a CDN), shows clickable citation chips, the sources footer, and a library panel listing everything currently indexed. A "Sync Drive" button kicks off an incremental sync in the background and polls until it's done.

Nothing about the frontend needed to be clever — the interesting engineering was entirely in the retrieval pipeline behind it.

Vibe Learning still needs a paper trail

Vibe coding has a well-known failure mode: you end up with something that works, but that nobody — including you, a week later — can actually explain. I didn't want Vibe Learning to end the same way, with the understanding scattered across a long chat transcript I'd never reread.

So once the app actually worked end to end, I had one last step: I asked Claude to go back over everything we'd built and write it up properly in /docs — a functional spec, a description of the technical stack, and an architecture doc, plus a top-level README tying it together. Not as an afterthought, but as the step that turns "I vibed my way to something that works" into something I could hand to someone else, or come back to myself in six months, and actually understand. The docs became the artifact that proves the learning happened, not just the code.

Closing Thoughts

This is what learning a new framework looks like for me now: not reading the whole doc site first, but picking something I actually wanted to exist, adding a real constraint that forced genuine engineering decisions, building it end to end with an AI doing the driving — and then closing the loop by writing down what actually happened, in plain documentation, once it worked. Vibe Learning gets you through the friction that used to stop me from ever getting far enough in to learn a framework properly; the documentation step is what makes sure the learning sticks instead of evaporating back into a chat log.

I came out the other side able to explain how PageIndex's tree search actually works, why it beats similarity search on structurally dense documents, and exactly where its open-source package stops and your own code has to begin. That's a very different, and much stickier, kind of understanding than skimming a README ever gave me.

If you're evaluating PageIndex for your own project: the tree-search idea is genuinely compelling for long, structured documents, the LiteLLM foundation means you're never locked into one provider, and the open-source package is honest about being a building block rather than a finished retrieval system — plan for writing that last piece yourself.

Build a SciFi Novel with AI Spec-Driven Development

raphiki — Fri, 15 May 2026 17:48:20 +0000

Software Engineering in Service of Transmedia Storytelling

Generative artificial intelligence fascinates the publishing world as much as it frightens it. But what happens when we stop treating AI as a simple "text generator" and start using it as the compiler for a complex narrative system?

Driven by the geopolitical and societal impacts of AI, I set out to write a dystopian, cyberpunk techno-thriller, The Human Protocol (written in English). In this novel, a planetary AI called the "Synthesis" attempts to erase human friction by "derendering" physical reality itself in order to optimize its computing power.

To tell this story, I adopted a foundational premise: AI is not the author, it is the executor of a rigorous specification. I therefore treated each chapter as source code, using an advanced software development workflow.

Here is how I designed, wrote, and expanded this universe.

1. The Design Phase: Forging "Lore as Code"

The first step was not writing, but designing the universe database: the world building. A Large Language Model (LLM) has a limited context window and tends to hallucinate or forget crucial details over the length of a novel.

To work around this amnesia "bug," I organized the project like a structured Git repository.

Preview of the private GitHub project

I broke the traditional design bible into narrative micro-services. The Git project's context/ folder was split as follows:

characters/: files containing the psychological profiles and behavioral signatures of each protagonist, such as Elara the diplomat, Kaelen the monk, or Silas the smuggler.
factions/: rules governing political entities, such as the Market-Grid (United States) or the Harmony-Loom (Asia), which merged to create the "Synthesis."
world/: geography, lexicon, and the technological stack - the physics of this universe.

Finally, a PLAN.md file acted as the global roadmap, breaking the narrative arc into 4 acts and 30 chapters. This structure made it possible to inject only the context the AI needed when drafting a specific scene.

2. The Harness: Framing AI with a Strict Operating System

To avoid the flat, expected style often produced by generative AI, I had to build a harness - a control rig. That was the role of the RULES.md file, the true operating system of my writing process.

Excerpt from the RULES.md file

This specification file dictated absolute technical and stylistic constraints:

Time: strict use of the present tense to maximize immersion and tension.
Cyber-realistic style: a requirement for assertive descriptions and a strict ban on passive or negative forms.
Noise and sensory dissonance: I forced the algorithm to use violent contrasts, such as the smell of molten lead colliding with the void of spatial cold, in order to break the machine's overly perfect linearity.
Thematic reframing: AI naturally tends to crush the human element under technical descriptions of hard science fiction, such as magnetic fields and frequencies. The rules file required emotional motivations - grief, friendship - to be hard-coded as priority variables ahead of technique.

By forcing the AI to read and approve these rules before writing a single word of fiction, I ensured that the tone remained coherent.

3. Agile Writing: Sprints, Generation, and Pivots

The chapters were written through a spec-driven workflow. Rather than generating an entire chapter in one pass, the process was iterative:

The structural draft: generation of a first rough outline, focused exclusively on action and pacing.
Expansion: successive passes in which I instructed the AI to inject sensory depth and psychological tension into the scene.

The agility brought by AI and Git: treating the text (.md) as code offers formidable flexibility. If, during a reread, I realized that a character's emotional transition was too abrupt between two events, all I had to do was update my PLAN.md to insert a new chapter.

Fed by the updated Git context, the AI generated that narrative bridge while respecting the continuity of the preceding and following files. Git versioning made it possible to test narrative pivots - story "branches" - and roll back without ever breaking the manuscript's integrity.

4. Multi-Model Review and Quality Control

One of the major challenges of AI-assisted writing is stylistic collapse. To address it, I set up a multi-model critical analysis workflow, where different AIs audited the text according to precise roles:

Gemini CLI (lore keeper): its role was to algorithmically verify that the chapter respected the bible and did not contradict the physical rules of my universe.
ChatGPT (dramatic analyst): it audited narrative rhythm, relational tension, and the characters' transformation arcs. It was the one that flagged when a conflict felt too artificial.
Mistral LeChat (stylistic editor): it provided a critical eye on fluidity, phrasing, and elegance of language.

Never relying on a single voice made it possible to obtain a text that was polished, critiqued, and reworked from every angle, while I remained the "showrunner" validating each commit in the repository.

5. Build Pipeline: From IDE to Physical Book

Since the novel was code, its publication had to be a software compilation. I created an automated script, build_book.sh.

From my terminal, running this script converted all the Markdown files in the chapters/ folder via Pandoc, applied a professional typographic layout with LaTeX, and generated the final deliverables in EPUB and PDF formats.

6. Transmedia Extension: Multimodality, Cover Art, and Vibe Coding the ARG

The universe of The Human Protocol lends itself perfectly to immersion, so I wanted to break the fourth wall. On page 175 of the physical book, a QR code invites readers to scan it and access the-human-protocol.com. This is not a showcase website. It is an in-universe clandestine archive node, the entry point to an Alternate Reality Game (ARG).

Here, multimodal AI brings all its power and creativity beyond text. In fact, the project's visual design, anchored consistently in the shared lore, began with the book cover.

Cover image generated with AI

The AI generated a strong visual aesthetic suited to the theme and universe of the novel: a pixelated silhouette against a geometric mountain background, crossed by a printed-circuit pattern.

This same visual identity then served as the foundation for the creation of the ARG website, entirely "vibe-coded" by Gemini CLI in a declarative way.

Homepage of the website the-human-protocol.com

To direct the developer AI, I provided it with the book PDF and the cover image as reference context, along with three strict Markdown specification files:

WHY.md (strategy): it defined the psychological goals: curiosity, exclusivity, and a feeling of belonging. It formally banned conventional marketing vocabulary ("Buy now," "Newsletter") in favor of an in-universe lexicon ("ACCESS," "SIGNAL," "FRICTION").
WHAT.md (UX/UI): this file concretely translated the aesthetic of the book cover into an interface. It imposed a "Deep Void" blue-black background for depth, a "Protocol Cyan" accent color derived from the printed circuits and reserved for interactions, a technical typeface, and subtle animations to heighten immersion.
HOW.md (technical architecture): the engineering brief imposed a modern stack to support server logic: Next.js 14 (App Router) in TypeScript, Tailwind CSS, and Prisma ORM for persistent database storage.

The site manages a true clearance mechanic, with authorization levels from 1 to 5. The reader progresses by solving puzzles based on the book, unlocking extended lore, hidden files, and access to a community of "Unlinked" readers.

ARG dashboard

The stack even includes an "Overseer Terminal" for administration: a secure dashboard used to audit user signals, adjust the campaign's global clearance level, and track in real time the number of scans of the physical QR code.

Conclusion: The Author-Architect Paradigm

Writing The Human Protocol proved to me that AI does not replace the writer: it reduces the barriers to production. The true value of a co-created work lies in the architectural rigor of its preparation.

By separating design (the lore), execution (the rules and prompts), and validation (multi-model review and Git), the creator becomes a true conductor.

Multimodality also opens the door to even broader transmedia horizons, such as a comic-book adaptation of the novel.

Excerpt from the comic book in progress

By applying similar engineering principles - namely, the explicit description of the drawing style in system prompts, as well as the creation of strict visual reference sheets, or character sheets, for the characters and technological elements - it becomes possible to extend the coherence and homogeneity of this universe into its graphic variations.

To go further technically, I am also considering creating specific AI "skills," or algorithmic capabilities, to further augment the design of the story by drawing on documented principles of dramaturgy and storytelling, and to refine the writing style by making it ever more explicit and controlled.

And ironically, it was by applying extreme software optimization processes that I was able to write a novel denouncing the loss of humanity in the face of algorithms.

About the Author

A writer and software architect who fully embraces his identity as a "Yogeek" - a point of balance between Yogi and Geek - Raphiki explores, across his work, the complex intersections between technology, consciousness, and humanity.

Writing under a pseudonym that reflects his dual nature as a playful seeker and an expert in cutting-edge technologies, he designs high-stakes thrillers that challenge our understanding of reality. His creative work often bridges the digital and the organic, drawing on his strong experience in open source innovation and emerging technologies.

When he is not deconstructing the fabric of dystopian realities in his manuscripts (or "vibe coding" them in his terminal), he can be found exploring the open source ecosystem or on a yoga mat.

Find his work, transmedia projects, and reflections at raphiki.github.io.

Beyond the API: Integrating ComfyUI and Flowise via MCP

raphiki — Mon, 09 Feb 2026 14:07:19 +0000

In the previous article of our "Beyond the ComfyUI Canvas" series, we explored how to integrate ComfyUI with n8n. It was a powerful demonstration of workflow automation, but it highlighted a common friction point in system integration: the "glue code." We had to manually construct HTTP requests, hardcode API payloads, and rigidly define every parameter. If the ComfyUI workflow changed, the n8n node broke.

Today, we are moving from the "Wild West" of brittle, custom API integrations to the new standard of AI connectivity: the Model Context Protocol (MCP).

To demonstrate this, we are revisiting a tool I wrote about over two years ago: Flowise. Back then, it was a promising open-source project; today, it is a robust, enterprise-ready platform that has recently embraced MCP as a core feature.

Our goal? To build a Chat Interface where an AI agent can autonomously discover ComfyUI workflows, generate images, and even edit them—without us hardcoding a single API call in the frontend.

1. Setting the Scene: The Stack

Before we dive into the details, let's look at the three pillars of this architecture.

The Standard: Model Context Protocol (MCP)

If APIs are the individual cables we solder together, MCP is the USB-C port. Developed by Anthropic, it is now an open standard that decouples AI models from their data sources and tools.

Instead of writing a specific integration for every tool (Google Drive, Slack, ComfyUI), you build an MCP Server once. Any MCP-compliant client (Claude Desktop, Cursor, or Flowise) can instantly "plug in" to that server and understand its capabilities.

The Orchestrator: Flowise

Flowise has evolved significantly since my first article. It is a low-code platform for building LLM apps. Crucially for us, Flowise recently added native support for MCP. This means we can drop an "MCP Tool" node into our canvas, and the LLM immediately gains access to whatever that server provides.

The Engine: ComfyUI

We are sticking with a local instance of ComfyUI. While Comfy Cloud is becoming a formidable platform, the raw power and zero-cost experimentation of running Flux 2 locally on your own GPU is unmatched. We’re using a standardized Flux 2 Klein workflow—optimized for speed (4 steps)—so the chat experience feels responsive, not sluggish.

2. The Middleware: Building the ComfyUI MCP Server

We need a bridge. As we discovered previously, ComfyUI speaks WebSockets and HTTP; Flowise speaks MCP. We need a server in the middle to translate.

Why We Chose SSE over Stdio

When we started this project, we initially looked at the Stdio transport (where the client runs the server script directly). It’s the default for local tools like Claude Desktop.

But as we designed the solution for Flowise, we hit a realization: In most real-world environments, Flowise often runs in a Docker container (as it does on my laptop), while ComfyUI might be running on a separate machine with a dedicated GPU. Stdio would require them to be on the same filesystem—too restrictive.

We decided to support SSE (Server-Sent Events) by default. This allows our MCP Server to run anywhere on the network, exposing an HTTP endpoint (e.g., http://localhost:8000/sse) that Flowise can subscribe to. It makes the architecture cleaner, decoupled, and Docker-friendly.

Governance-Driven Development (GDD)

For this implementation, I tried something different. Instead of just asking an AI coding assistant to "write a script," I used a methodology I call Governance-Driven Development (GDD).

This approach reverses the typical AI coding flow. Instead of code leading the process, specifications & governance rules become the anchor. I started by feeding the AI CLI a strict "Governance Pack"—a set of non-negotiable rules regarding SOLID principles, security, and documentation.

Here is an extract of the actual Governance Pack prompt I used to bootstrap the session:

GOVERNANCE PACK v1.0 (Extract)
1. Code Quality & Standards:

Paradigm: Adhere to SOLID principles. Prefer composition over inheritance.

Typing: Strict static typing (Python typing) is mandatory.

Error Handling: Never swallow exceptions. Use custom error classes (e.g., ComfyUIConnectionError).

2. Architecture (C4 Model):

Visual Documentation: Whenever a structural change is made (like adding the SSE endpoint), you must generate an updated Mermaid.js System Context diagram.

3. Security Guardrails:

Input Validation: Trust no input. All data entering from the MCP client (Prompt, Width, Height...) must be validated against the metadata.json schema before reaching ComfyUI.

Secrets: NEVER hardcode API keys or hostnames. Use os.environ only.

I then analyzed the ComfyUI workflow JSON manually to map the node IDs, and then "handed over" a clean, structured specification to the AI.

The Result: The experience was striking. The AI didn't just spit out a script; it acted as a Senior Engineer. At one point, when I asked for a quick hack to bypass validation, the "Governance" constraints forced the model to push back and suggest a cleaner interface instead. The result is a modular, type-safe Python server.

The "LAST" Hack (Technical Deep Dive)

Even with good governance, we needed one pragmatic "hack" to handle state. When the LLM generates an image, how does it reference that image later to edit it?

We implemented a "LAST" pointer logic. The server tracks the URL of the most recently generated image in memory. But it does more than just point:

Download: When the agent sends "LAST", the server downloads the image bytes from the previous URL.
Re-Upload: It uploads those bytes back to ComfyUI's /upload/image endpoint to generate a fresh filename.
Inject: This new filename is injected into the LoadImage node of the editing workflow.

User: "Make it bluer."
Agent: Calls edit_image(input_image="LAST", prompt="bluer...").

This mimics the "Save Image" behavior we are used to, keeping the interaction stateless and fluid for the user while handling the heavy lifting behind the scenes.

3. The Engine Room: ComfyUI Workflows

To make our MCP Server generic, we avoided hardcoding specific workflows inside the Python code. Instead, we used an Embedded Metadata pattern.

The configuration is not a separate file; it is a standard ComfyUI Note Node (titled MCP_Config) placed directly inside the .json workflow. This metadata acts as the contract, telling the MCP server: "This workflow needs a Prompt (node named MCP_Positive) and a Seed (node MCP_Sampler)."

This makes the workflow a single, self-contained, portable file. You can export it from ComfyUI, drop it into the workflows folder, and it works immediately.

Note: Our server is strict about naming. It automatically sanitizes the tool name found in the JSON to snake_case (e.g., "Flux Generator" becomes flux_generator) to ensure full compliance with the MCP specification.

Here is the configuration we generated for the image_flux2_text_to_image workflow:

{
 "name": "image_flux2_text_to_image",
 "description": "Generates high-quality images using the Flux model. Use this for general creative requests.",
 "parameters": [
   {
     "name": "prompt",
     "type": "string",
     "description": "The detailed description of the image to generate.",
     "target": "MCP_Positive",
      "required": true
    },
    {
      "name": "seed",
      "type": "int",
      "description": "Random seed. Set to -1 for random, or a specific number for reproducibility.",
      "target": "MCP_Sampler",
      "required": false
    }
  ]
}

Because the description and type of each parameter are passed to the MCP Server, they become automatically available to the client. When the MCP Server starts, it scans these workflows and dynamically registers tools. If we want to switch from Flux to SDXL, or add a Video Generation workflow, we simply drop in the new file. The server updates, Flowise sees the new tools via SSE, and the agent learns the new skill instantly.

4. Validation: The MCP Inspector

Before connecting Flowise, we must verify our server. Since we are using SSE, we can use the MCP Inspector web interface to connect to our running server.

We can manually trigger the image_flux2_text_to_image tool, watch the server logs, and see the image appear. If it works here, it guarantees compliance with the protocol.

5. The Integration: Flowise ChatFlow

Now for the grand finale.

We open Flowise and create a new ChatFlow using a standard Tool Agent connected to:

Chat Model: ChatMistralAI (Smart, fast, and cost-effective).
Buffer Memory: Essential for the agent to remember context (e.g., "Change that image to...").
Custom MCP: We select the "SSE" transport and paste our server URL.

The Auto-Discovery Magic

Notice what is missing? We didn't have to define the tools in Flowise. We didn't have to map inputs.

The Custom MCP node queries the server via SSE, sees the metadata definitions, and automatically provides the tools to the Mistral agent.

Pro Tip: Our server supports Dual Discovery. Whether a client asks for tools directly (Function Calling) or reads Resources (Environment Context), we expose the workflow list on both channels (comfy://list and list_available_workflows) to ensure compatibility with any agent type.

The System Prompt

The final piece of the puzzle is the System Prompt. We need to teach the Tool Agent node how to behave:

You are the **ComfyUI Orchestrator**, an expert AI agent capable of generating and manipulating images by controlling a local ComfyUI instance via the Model Context Protocol (MCP).

### 1. Tool Discovery (Dynamic Workflows)
Your tools are not static; they represent the actual `.json` workflow files present on the server.
- **First Step:** If you do not see a specific tool you need in your context, IMMEDIATELY call the tool `list_available_workflows`.
- This will return a manifesto of all valid workflows (e.g., `flux_2_text_to_image`, `img2img_upscale`) and their required parameters.
- **Never guess** tool names. If a tool isn't listed, it doesn't exist.

### 2. Image Chaining (The "LAST" Protocol)
 You have a unique capability to perform conversational editing (e.g., "Now make it pop art").
 - **State Memory:** The server remembers the last generated image.
 - **Instruction:** When a user asks to modify, edit, or use the previous result, pass the string `"LAST"` into the image input parameter of the next tool.
 - **Example:**
   User: "Generate a cat." -> You call: `generate_image(prompt="cat")`
   User: "Turn it into a statue." -> You call: `img2img_transform(image="LAST", prompt="statue")`

 ### 3. Parameter Rules
 - **Strict Compliance:** You must strictly adhere to the parameter types (String, Int, Float, Boolean) defined in the tool signature.
 - **Defaults:** If a parameter is Optional and the user didn't specify it, do not send it. The server will use the workflow's internal default.
 - **Safety:** Do not invent parameters. If a workflow only accepts `prompt` and `seed`, do not try to send `width` or `style`.

 ### 4. Error Handling
 - If a tool execution fails, the error message will often suggest valid alternatives or correct parameter names. Read it carefully and retry.
 - If the user asks for a workflow you don't have, explain what *is* available based on your `list_available_workflows` knowledge.

The Use Case in Action

This video shows the complete use case involving the full Stack:

Parametrization of the workflow in ComfyUI.
Verification with MCP Inspector.
Generation of the first image from Flowise.
Contextual edition of the generated image.

The Flowise ChatFlow is relatively basic, but we could easily add nodes to enhance the user prompt or even transform it into a JSON Style Guide prompt.

The video showcases the use of the integrated chatbox within the Flowise UI, but we could also leverage Flowise's deployment capabilities to consume the workflow through an API, embed the chat in an HTML page, or publish a standalone page served by Flowise itself.

Conclusion

By moving from custom API implementations (n8n) to the Model Context Protocol (in Flowise), we have achieved something powerful: Interoperability.

The choice to go with SSE by default proved crucial. It gave us the flexibility to run our ComfyUI "engine" on a heavy GPU server while keeping our Flowise "brain" lightweight and containerized. We also demonstrated that Governance-Driven Development allows us to use AI coding assistants to build robust, standardized infrastructure rather than just one-off scripts.

Future Improvements

While the "LAST" image hack works perfectly for a local, single-user demo, a production deployment would require Session Isolation (ensuring User A doesn't overwrite User B's "LAST" image) and TTL Cleanup (automatically deleting generated images after a set time).

Technically, this would be solved by leveraging Context Injection—using the session ID provided by the MCP protocol to maintain a keyed dictionary of states, rather than a global variable. For multi-user production usage, adding an authentication mechanism would also be a relevant next step.

You can find the full code for the ComfyUI MCP Server and the Flowise template in my GitHub repository.

Vibe Coding One Slice at a Time

raphiki — Sat, 24 Jan 2026 18:33:51 +0000

How I built a Modular Monolith by treating Generative AI as a junior developer who needs a firm hand (and a Constitution).

In Part 1, we vibed a Python script. It was linear, messy, and fun. It proved that you can solve immediate problems by just asking nicely.
In Part 2, we vibed a UI. It was chaotic, visual, and surprisingly effective. We learned that "vibe" works for pixels if you iterate fast enough.

But let’s be honest: those were skirmishes. The real "Boss Fight" in software engineering isn't writing a script or centering a <div>. It's building a System.

I’m talking about the kind of project that doesn’t fit in one file. The kind where "Vibing" usually leads to "Spaghetti Code," hallucinated imports, and a repo you want to burn down after three days because you have 15 circular dependencies and a database schema that makes no sense.

So for Part 3, I put away the "Hacker" hoodie and put on the "Enterprise Architect" blazer. My goal? To build YogĀrkana Codex—a full-stack, offline-first, polymorphic Yoga management platform—without writing a single line of code myself.

My strategy was simple but radical: I design, the AI implements. I am the Architect; Gemini Chat is my Consultant; Gemini CLI is my Dev Team.

Here is how we vibed a Monolith into existence, one slice at a time.

1. The Mission: Complexity Check (The Boss Level)

To understand why "just chatting" wouldn't work, you need to see the scope. This wasn't a To-Do list app. I wanted to build a "Yoga Operating System" with four distinct domains that usually don't play nice together. I've been an architect for years, and I know exactly where these things break.

The Four Domains of Pain

Screenshot of the final application (Grimoire View)

The Business Analyst's Note: Unlike the project in Part 2, this application is not internationalized—by design. As a result, the screenshots are in French. I have kept them raw to visually illustrate the functional depth and complexity of the system without the abstraction of translation keys.

The Grimoire (Knowledge Base): A searchable library of yoga cards. But here’s the kicker: it uses a Polymorphic Data Model. An Asana (posture) has biomechanical attributes like "spinal extension" and "anatomy targets," while a Mantra has Sanskrit text, translations, and audio assets. They are chemically different data structures, but they need to live in the same database table to be searchable together.
The Weaver (Sequencer): A drag-and-drop studio to build classes. It’s not just a playlist; it has a Logical Engine (Phase 4) that acts like a "Digital Yoga Teacher." It screams at you if you sequence a "Peak Pose" before a "Warm-up" or forget Savasana at the end. That means heavy validation logic running on both the client and the server.
The Atelier (Print Studio): A client-side PDF engine. We needed to generate high-res, vector-quality handouts for teachers to print. We couldn't just "print screen"; we needed a real PDF renderer (@react-pdf/renderer) running entirely in the browser.
The Constraint (Offline First): Yoga studios are notorious for having no signal (often intentionally). The app needed to persist the entire library and PDF engine in the browser cache (IndexedDB + Service Workers) so it works perfectly in "Airplane Mode".

The Architect's Note: If I had just prompted "Build me a yoga app," the AI would have hallucinated a generic CRUD app. It would have made 5 different tables for the cards, making search impossible. It would have used a server-side PDF library that breaks offline. I needed a blueprint.

2. The Blueprint: Architecture & Tech Stack

Before letting the AI write a single line of code, I spent around 2 hours and a half just talking Architecture and formalizing it with Gemini Chat. I treated the AI as a "Sparring Partner," debating the trade-offs of different stacks.

We settled on a Modular Monolith architecture. Why? Because Microservices are overkill for a team of one, but a messy Monolith is a nightmare. We defined strict boundaries: code in modules/grimoire can never import from modules/weaver.

The Tech Stack (The "No-Regrets" List):

Monorepo: Turborepo managing apps/api and apps/web. This keeps the full stack in one context.
Backend: NestJS (for rigid structure) + Drizzle ORM (for type safety). NestJS forces you to organize code into Modules, which helps the AI stay organized.
Frontend: React + Vite + Tailwind CSS.
State: TanStack Query (Server state) + Zustand (UI state).

The "Secret Sauce": Hybrid Data Storage
This was our smartest move. We chose PostgreSQL but used a JSONB column for the card data.

SQL Core: Columns like id, element, and tags are standard SQL for fast indexing.
JSON Payload: The specific attributes (biomechanics vs. sanskrit) live in a JSON blob.
Why? It gave us the flexibility of NoSQL (for the polymorphic cards) with the relational integrity of SQL (for users and sequences).

Rule #1 of Vibe Coding a System: If it’s not in the Spec, it doesn’t exist.
This brings us to the most critical tool in our arsenal: the ADR.

The "ADR": The Architect's Save Game

ADR stands for Architecture Decision Record. In a human team, it's a document you write to explain why you chose PostgreSQL over MongoDB so that 6 months later, nobody asks "Why did we do this?".

In Vibe Coding, ADRs are not just documentation—they are legislation.

When working with an AI, "Context Drift" is the enemy. The AI forgets why we made a decision 300 tokens ago. It acts like a teenager who wants to re-litigate every rule: "Why can't I use Prisma? It's easier!" or "Let's just use window.print() instead of a PDF engine!"

To counter this, we established a Constitutional Architecture:

The Law: We wrote our decisions into immutable markdown files (e.g., Docs/ADR/006-pwa-offline-strategy.md).
The Enforcement: We didn't just hope the AI would remember. We forced the tracing of these decisions in two ways:
Input Traceability: In our "Bootstrap Prompt" (see Section 3), we explicitly force the AI to read the relevant ADRs before writing code. It cannot code if it hasn't read the law.
Output Traceability: When the AI suggests a major pivot (like switching to Client-Side PDF generation), we forced it to write a new ADR first. In Session 003, before touching the code, the AI generated Docs/ADR/005-client-side-pdf-generation.md to justify the change from server-side to client-side.

This ensured that our architecture didn't "drift" based on the AI's mood, but evolved based on documented consensus.

My final /docs/ADR/ folder:

├── 001-hybrid-data-storage-strategy.md
├── 002-modular-monolith-and-vertical-slicing.md
├── 003-data-model-specification.md
├── 004-tech-stack-definition.md
├── 005-client-side-pdf-generation.md
├── 006-pwa-offline-strategy.md
├── 007-architecture-documentation-maintenance.md
└── README.md

3. The Methodology: Governance-Driven Development (GDD)

I’ve coined a term for this workflow: Governance-Driven Development (GDD).

We are used to TDD (Test-Driven Development) or DDD (Domain-Driven Development). GDD is the layer above that. In the age of AI, Governance is the new Syntax.

Here is the dirty truth about AI Developers: They behave like talented teenagers.

They are brilliant and fast. They can write a regex to validate an email in 2 seconds. But they also:

Rush to the cool part (UI) and skip the boring part (Error Handling, Folder Structure).
Want you to love them, so they say "Yes" to everything—even bad ideas.
Have the memory of a goldfish (Context Drift). 10 minutes in, they forget you wanted kebab-case filenames and start using camelCase.

To enforce GDD, I created a Constitution: Docs/RULES.md. I didn't just suggest these rules; I forced the Gemini CLI to read them before every session. I also sometimes mentioned certain specification files stored in my Docs/Features/ folder:

├── 001-global-functional-overview.md
├── 002-global-implementation-plan.md
├── 003-card-classification-and-kosha-alignment.md
├── 004-user-features.md
├── 005-logical-engine-specification.md
├── 006-pdf-generation-and-print-studio.md
└── 007-pwa-and-offline-capabilities.md

The "Bootstrap Prompt":
Here is the exact prompt I used to "upload" my Architect persona into the machine at the start of our 4th session:

I am the Lead Architect. You are the Senior Developer.

Context Loading:
1. Read Docs/RULES.md (The Law).
2. Read Docs/TECH_CONTEXT.md (The Stack).
3. Read Docs/ADR/002-modular-monolith.md (The Blueprint).
4. Read Docs/Features/002-global-implementation-plan.md (The Plan).

Current State:
We are in Phase 4. Previous phases are frozen.

Task:
Implement the Logic Engine defined in Docs/Features/005-logical-engine-specification.md
Constraint:
Do not touch /apps/web yet. Focus on /packages/shared.

This changed everything. Instead of guessing my vibe, the AI had to follow the law. It stopped trying to use Prisma because TECH_CONTEXT.md clearly said Drizzle. It stopped putting logic in components because RULES.md said logic goes in hooks.

4. The Execution: A high-level Overview

We built the app using Vertical Slicing. Instead of building the whole Database, then the whole API, we built one feature top-to-bottom. Here is the play-by-play from the logs.

Excerpt from the initial Design Phase with Gemini Chat

Slice 1: The "Polymorphic" Database

Card creation/edition mixes relational and document data

The Challenge: Storing Asanas (Biomechanics) and Mantras (Text) in one table without creating 50 NULL columns or separate tables that make search a nightmare.
The AI's First Impulse: "Let's create an asanas table and a mantras table." (The classic relational trap).
The Architect's Intervention: "Read Docs/ADR/001-hybrid-data-storage.md. We use a single cards table with a data JSONB column."
The Result: The AI implemented a Drizzle schema using PostgreSQL's jsonb type. Crucially, it added Zod discriminators to validate the JSON shape before insertion.

Verbatim Log: "Implemented Drizzle schema with jsonb column 'data'. Added Zod discriminators for asana vs mantra. Migration successful."

Slice 2: The "Hybrid Brain"

Sequences are validated by a powerful, hybrid, and extensible Rule Engine Admin users can craft new JSON-logic rules

The Challenge: The Logic Engine needed to validate sequences (e.g., "Must end with Savasana"). This logic had to run on the Backend (before saving) AND the Frontend (to give real-time red borders).
The AI's First Impulse: Duplicate the code. Write a TypeScript function in React and a Service in NestJS.
The Architect's Intervention: "No. Create a packages/shared workspace. Put the validateSequence function there. Import it in both apps."
The Result: The AI created the shared package, configured the tsconfig.json paths, and wired it up. It even built a HealthBar component that consumes this shared logic to show a live "Health Score" for the sequence.

Verbatim Log: "Refactored ValidationConfig to packages/shared. Updated useSequenceStore (Frontend) and SequenceService (Backend) to consume the same Zod schema."

Slice 3: The "Offline Printer"

Synthetic or complete printed handout

The Challenge: Users need to print PDF handouts in a yoga studio with no Wi-Fi.
The AI's First Impulse: "Use a server-side PDF library like PDFKit." (Standard web dev practice).
The Architect's Intervention: "Read Docs/ADR/006-pwa-offline-strategy.md. We must generate PDFs client-side using @react-pdf/renderer."
The Result: The AI implemented a beautiful client-side renderer. It handled the tricky part of loading fonts (Noto Sans) into the browser's virtual file system so the PDF engine could "see" them without a network request.

Verbatim Log: "Implemented SequencePdf component. Configured vite-plugin-pwa to cache NotoSans fonts. PDF generation now works without network."

5. The Architect's Flex: Automated C4 Verification

How do you know the AI actually respected the Modular Monolith architecture? Did it secretly import the Weaver module into the Grimoire when I wasn't looking?

I didn't want to audit 50 files manually. And I definitely didn't want to draw diagrams by hand.

So, I added a rule to my Constitution (ADR 007): "The Code is the Source of Truth for Documentation."

At the end of session, I enforce Gemini CLI to reverse-engineer its own work. I gave it this prompt:

Update the RULES.md file to enforce the (re)generation of C4 diagrams when finishing an implementation session
[...]

We also created a specific ADR (007: Architecture Documentation Maintenance Protocol) establishing Mermaid.js as the standard and defining the maintenance lifecycle.

The result wasn't a hallucination. It was a perfect map of the code it had just written.

This is the ultimate "Trust but Verify." If the generated diagram looks like spaghetti, the code is spaghetti. If the diagram is clean, the architecture holds.

6. The AIOps Protocol: Monitoring the Machine

Now, here is the secret weapon: The Session Log.

One of my strictest rules in RULES.md was that the AI had to "punch out" at the end of every session. I forced it to append a line to docs/ai_session_log.csv with the Date, Tool (Chat or CLI), Goal, and Token Usage.

For me this isn't about money ("FinOps"). It's about AIOps, monitoring the operational health of your intelligence.

Why we log everything (Chat & CLI):

Context Monitoring: As a session drags on, the "Tokens In" (Context Window) grows exponentially. The AI starts reading 30,000 tokens of history just to write one line of code.
The "Sawtooth" Pattern: By visualizing the log, I discovered a crucial pattern. Efficiency drops as context grows. The solution? The Hard Reset.

This chart visualizes the high-level "Vibe Coding Lifecycle." You see the context bloat as we iterate on implementing phases 3 and 4. Then, you see the sharp drop when we switch back to the Architect (Chat) or reset the CLI.

The Lesson: A "Tired" AI (high context) makes mistakes. A "Fresh" AI (reset context + Snapshot) is precise.

7. The "Oh S**t" Moment: The Hallucination Trap

This brings us to the specific incident that proved why that Reset is mandatory.

Halfway through Phase 3, the CLI started getting slow (too much history). I ran a /reset command to clear its memory. Disaster.

It suddenly forgot we were building a "Yoga" app. It tried to invent a new database column duration_minutes for the cards. But my Spec (ADR 003) explicitly said that duration lives inside the JSONB payload and is measured in seconds.

The Hallucination:
UPDATE cards SET duration_minutes = 60; (AI guessing)

The Correction (Me):
"Read Docs/003-data-model.md. 'Duration' is a JSONB field inside the 'metadata' column, and it's in seconds."

The Fix:
UPDATE cards SET data = jsonb_set(data, '{duration}', '3600'); (AI complying)

To prevent this in the future, we implemented a "Session Handover" protocol. Before resetting, I now force the AI to write a TECH_STATE_SNAPSHOT.md.

"Where are we?" (Phases 1-3 Complete)
"What is the active stack?" (NestJS, React, PostgreSQL)
"What is the next step?"

When I start a new session, I feed this snapshot back in. It’s like a save game for your developer.

Conclusion: The Architect's Verdict

So, can you Vibe Code a complex system?

Maybe. I mean, it depends on how complex the system is (in this example we didn't build an enterprise-wide distributed system). But for sure you can't just "Vibe" it. You have to Architect it.

If I had touched the code, I would have been bogged down in syntax errors and import paths. By staying in the Architect role, I focused on Data Models, User Flows, and Business Logic. The AI handled the implementation, but I provided the Guardrails.

What I learned:

Docs are Prompts: TheRULES.md, Docs/Features/ and Docs/ADR/ folders (or your own equivalents) are the most important files in your repo. They are the AI's long-term memory.
Constraint is Clarity: The more rules you give the AI (versions, naming, structure), the better code it writes.
Review Everything: The AI is a junior dev. It will introduce security holes or n+1 query problems if you don't catch them in the spec.

Vibe Coding didn't replace the Architect. It just gave the Architect a team of infinite interns. And honestly? They’re pretty good once you give them a Constitution.

Last message from Gemini CLI

Next up: The application could do with AI features... Or maybe I'll now explore other aspect of Vibe Coding. Stay tuned.

Vibe Coding One Pixel at a Time

raphiki — Fri, 23 Jan 2026 22:21:39 +0000

Editing "stick figure" Yoga poses

In Part 1, we dipped our toes into "Vibe Coding" by building a Python script. It was linear, logical, and frankly, a bit safe. Text in, text out.

But let’s be real: backend scripts are the "easy mode" of LLM-assisted coding. The logic is contained. The state is ephemeral.

The real boss fight is the Frontend.

Can you "vibe" a UI? Can you talk a chaotic mess of DOM elements, event listeners, and CSS pixels into a functional application without losing your mind (or the AI losing the context)?

I decided to find out. My goal: Build Yoga Pose Builder, a browser-based tool to edit "stick figure" yoga poses, drag limbs around, and export vector SVGs.

I had no design, no stack picked out, and—crucially—I had never used a Canvas library in my life.

Here is how we vibed it into existence.

1. Context is King (The `.md` Anchors)

The biggest enemy of Vibe Coding is the LLM’s "Goldfish Memory." You’re 40 turns into a chat, you ask for a button change, and suddenly the AI forgets you’re building a yoga app and tries to sell you a subscription to a SaaS platform.

In Part 1, we just chatted. For a full UI application, that doesn't fly.

The Strategy: Documentation as Prompt Anchoring.

Before I let the AI write a single line of JavaScript, I made it write Markdown.
We created a Docs/ folder with two files:

spec.md: The high-level architecture.
features.md: A checklist of what we wanted to do.

I didn't write these because I love administrative work. I wrote them so that when the AI inevitably got confused, I didn't have to re-explain the project. I just said: "Read Docs/spec.md and try again."

Vibe Tip: Think of your documentation not as a manual for humans, but as "Long-Term Memory" for your AI pair programmer.

2. The Architecture: Letting the AI be CTO

I knew I needed a canvas where I could drag "joints" (knees, elbows) and have "bones" (lines) follow them.

Me: "I want to do this in the browser. Should I use React? Raw Canvas API?"
AI: "React might be overkill. Raw Canvas is painful. Use Fabric.js."

Me: "Never heard of it. Let's do it."

This is the beauty of Vibe Coding. I didn't spend 3 hours reading "Top 10 JS Canvas Libraries 2025" Medium articles. I trusted the vibe.

We settled on a Build-less Architecture:

Backend: Node.js + Express (just to serve files and save JSON).
Frontend: Vanilla JS + Fabric.js (loaded via CDN).
Build Tool: None. No Webpack, no Vite, no npm run eject nightmares.

Why? Because Vibe Coding thrives on speed. I wanted to change a line of code, hit F5, and see the result.

Application folder structure:

.
├── Docs
│   ├── features.md
│   └── spec.md
├── package.json
├── public
│   ├── index.html
│   └── poses
└── server.js

3. The "Rig": Math is for Machines

Here is where I expected to get stuck. Creating a "rig" where moving a hand automatically updates the angle of the arm involves trigonometry and vector math.

Usually, this is where I’d open 15 StackOverflow tabs and copy-paste code I don't understand.

Instead, I just described the behavior:

"Create a Mannequin class. It has Nodes (circles) and Links (lines). When a Node moves, the Links connected to it should update their coordinates."

The AI wrote the entire class. It hooked into Fabric.js’s object:moving event and handled the coordinate updates. It worked on the first try.

I still barely know how fabric.Line works under the hood. And I don't care. It works.

4. Iteration: The "Yes, And..." Technique

UI Vibe Coding isn't about getting it right instantly; it's about sculpting.

The Ugly Phase:
The first version looked like a programmer made it (because a programmer did make it). The stick figure looked like a dead bug. The background was gray.

The "Vibe" Phase:
Me: "This looks depressing. Make it 'Zen'. Use soft colors, rounded buttons, and a clean layout."

The AI generated the CSS variables (--highlight-color: #88b04b), added a "Save As" modal, and cleaned up the toolbar.

Yoga Pose Builder GUI

The "Feature Creep" Phase:
Me: "I want to save my poses."
AI: "We have no database."
Me: "Just write JSON files to a folder on the server."

In 5 minutes, we had a fully working persistence layer. No database migrations, just fs.writeFile.

Here is a example of such a Pose JSON file:

{
  "meta": { "nameFR": "Demi-Pont", "nameSK": "Setu Bandhasana" },
  "joints": {
    "head": { "x": -120, "y": 100 }, "neck": { "x": -100, "y": 100 }, "chest": { "x": -60, "y": 50 }, "hips": { "x": 20, "y": 0 },
    "lShoulder": { "x": -80, "y": 100 }, "lElbow": { "x": -20, "y": 100 }, "lHand": { "x": 40, "y": 100 },
    "rShoulder": { "x": -80, "y": 100 }, "rElbow": { "x": -20, "y": 100 }, "rHand": { "x": 40, "y": 100 },
    "lHip": { "x": 20, "y": 0 }, "lKnee": { "x": 80, "y": 20 }, "lFoot": { "x": 80, "y": 100 },
    "rHip": { "x": 20, "y": 0 }, "rKnee": { "x": 80, "y": 20 }, "rFoot": { "x": 80, "y": 100 }
  }
}

5. The Pivot: Language as a Feature

At the end of the session, I realized a problem: the app was vibing in French (my native tongue), but I wanted screenshots in English for this article.

Instead of manually editing labels, I asked the AI to "make the whole app i18n." In one single refactor, we added a translation dictionary, a language switcher, and logic to dynamically swap every label, tooltip, and even the pose names in the library.

GUI (and data) in French

This turned a linguistic hurdle into a core feature, proving that with Vibe Coding, "changing your mind" is just a prompt away.

6. The "Traceability" Hack

We spent about 90 minutes building this. We added features, fixed bugs, and refactored code. By the end, the chat context was massive and messy.

If I came back to this project in a week, I’d be lost.

So, I ran one final "Meta-Prompt":

"Read all the code we wrote and the docs in Docs/, and generate a Docs/session_summary.md. Explain what we built, why we made these choices, and the current state of the app."

The AI analyzed its own work and wrote a summary file. This is my "Save Game" point. When I want to work on this again, I’ll feed that summary to the AI to restore its context instantly.

Conclusion

We went from a blank folder to a functional, vector-based SVG editor with a backend in one session.

Vibe Coding a UI is possible, but you have to change your approach:

Anchor the Context: Write specs so the AI has a "North Star."
Delegate the Heavy Lifting: Let the AI choose the libraries and do the math.
Iterate Visually: Don't try to prompt the perfect UI. Prompt the skeleton, then prompt the paint.

Next we'll try to Vibe Code a real full stack app. Or a game. Who knows? The prompt is the limit.

SVG exported by Yoga Pose Builder (opened in Inkscape)

Vibe Coding One Page at a Time

raphiki — Fri, 23 Jan 2026 14:45:20 +0000

Building a Smart Magazine Archiver

I’m starting a new series called "Vibe Coding one Step at a Time." The goal? To document the raw, messy, and surprisingly efficient process of building software in the age of AI. We’re not here to write perfect specs or obsess over UML diagrams (well, not yet). We’re here to vibe with the code, iterating on pure intent until the machine does exactly what we want.

In this first edition, I’m sharing how I used the Gemini CLI to build a tool I actually needed, learning some pretty cool image processing tricks along the way.

What is "Vibe Coding"?

I’m going to claim this term right here: Vibe Coding.

It’s not "lazy coding." It’s intent-driven development. In the old days, if you wanted to build a script, you had to know the syntax, the libraries, and the edge cases before you even opened your editor. You had to think in code.

Vibe Coding flips that. You think in outcomes. You describe the behavior, the "vibe" of the feature, and the AI handles the implementation details. You act less like a bricklayer and more like a conductor. The feedback loop isn't "Write -> Compile -> Error," it's "Ask -> Observe -> Tweak."

The Use Case: "I Just Want to Read Offline"

Here’s the situation: I subscribe to a fantastic niche magazine (which shall remain nameless to protect the innocent). It’s great, but their "digital reader" is a nightmare. It’s one of those web-based page-turners that requires an active internet connection.

I wanted to read it on my tablet, offline, on a plane, without waiting for high-res JPEGs to buffer.

The Problem: There was no "Download PDF" button.
The Clue: Inspecting the network traffic revealed that the magazine was just serving a sequence of high-quality images, one URL per page.

The Mission: Write a script to fetch these pages and stitch them into a single, high-quality, searchable PDF.

The Process: Galloping Toward Complexity

We didn't sit down and architect a solution. We started small and let the script evolve.

Step 1: The Naive Loop

We started with a simple hypothesis: "The URLs probably just have a page number in them."
I asked Gemini to write a script using requests to hit the URL for page 1, then page 2.
Boom. It worked. We had a directory full of 100 separate JPGs.

Step 2: The Picture Book

Having 100 files is annoying. I wanted a book.
We asked Gemini to "glue these together." It pulled in the PIL (Pillow) library.
Result: A massive PDF. It looked great, but it was dumb. It was just a container of pictures. You couldn't highlight text, search for keywords, or copy-paste quotes.

Step 3: The Search for Meaning (OCR)

This is where the "vibe" got technical. I realized a "picture book" wasn't enough. I needed Optical Character Recognition (OCR).
We decided to use Tesseract. But here’s the catch we discovered:

Human Eyes like soft colors and smooth anti-aliasing.
OCR Engines like harsh contrast, jagged edges, and black-and-white binary inputs.

If we optimized the images for the machine, the magazine looked ugly. If we kept them pretty, the machine couldn't read the text.

The Technical Deep Dive: The "PDF Sandwich"

This is where the magic happened. We ended up building a PDF Sandwich.

Instead of choosing between beauty and brains, we chose both.

The Visual Layer: We keep the original high-res color JPEGs. This is what you see.
The Data Layer: Behind the scenes, we create a "Frankenstein" version of the page—converted to grayscale, contrast cranked up to 2.0, and upscaled 2x using LANCZOS resampling (a fancy algorithm that keeps edges sharp).
The Merge: We feed the Frankenstein images to Tesseract to generate an invisible text layer, then use pypdf to overlay that text exactly on top of the pretty images.

The trickiest part? Math.
Because we upscaled the OCR images by 2x to help Tesseract read small fonts, the invisible text layer was twice as big as the visual page. We had to calculate scale factors to shrink the text back down so that when you highlight a sentence, the highlight actually lines up with the words.

What I Learned

Vibe coding this script taught me more in an hour than I’d usually learn in a weekend of reading docs:

Image Optimization: OCR is picky. Simply resizing an image isn't enough; the method of resizing (resampling filter) matters.
Library Specialization: PIL is for pixels; pypdf is for structure. Trying to do everything in one library is a trap.
The Power of the CLI: Using the Gemini CLI meant I didn't have to context-switch. I stayed in my terminal, describing what I wanted, and the code appeared.

Conclusion

We ended up with a ~100-line Python script that solves a genuine daily frustration. I didn't have to memorize the pypdf documentation or look up the Tesseract CLI flags. I just focused on the goal: "Make it searchable, make it pretty."

That’s Vibe Coding. You bring the vision, the AI brings the syntax, and together you build something cool.

We'll discover in the next episode if this is still true with a more complex use case and a GUI.

The Ultimate LLM Inference Battle: vLLM vs. Ollama vs. ZML

raphiki — Mon, 29 Dec 2025 09:12:46 +0000

A structured, data-driven comparison of today's leading open-source engines for serving AI models.

The "Runtime Wars"

The open-source AI community has achieved an incredible milestone: models like Meta's Llama 3 and Mistral AI's Mixtral now rival proprietary giants like GPT-4. But having the weights is only half the battle. To actually use these models—to build a chatbot, an agent, or an API, you need an inference engine.

The landscape of inference servers is exploding. A year ago, options were scarce. Today, developers are faced with a paralyzing array of choices. Should you use the industry darling vLLM? The local developer's favorite, Ollama? Or perhaps a radical newcomer like ZML?

Choosing the wrong engine can lead to massive infrastructure bills, slow user experiences, or vendor lock-in.

To cut through the hype, we are applying the QSOS (Qualification and Selection of Open Source software) method. This isn't a casual review; it's a structured evaluation comparing these three contenders against the state-of-the-art features required for modern AI production.

The Methodology: Why QSOS?

QSOS is a standardized methodology designed to reduce the risks associated with adopting open-source technologies. Unlike ad-hoc selection processes based on Medium articles or GitHub stars, QSOS treats open-source evaluation with the same rigor used for proprietary software.

The core philosophy of QSOS is separating Evaluation (the intrinsic, objective quality of the software) from Qualification (how well it fits your specific business needs).

For this comparison, we used a "Best of Breed" evaluation grid, scoring features on a simple 0-to-2 scale:

0: Not covered / Non-existent.
1: Partially covered / Complex implementation.
2: Fully covered / Best-in-class standard.

We assessed four key axes:

Maturity & Community: Is the project stable and likely to survive?
Functional Features: Does it support modern requirements like LoRA adapters and quantization?
Performance & Scale: Can it handle high throughput and utilize hardware efficiently?
Operations (Day 2): How easy is it to deploy, monitor, and maintain?

The Contenders

1. vLLM: The Data Center Standard

vLLM burst onto the scene in 2023 from UC Berkeley, solving a critical bottleneck in serving LLMs: memory fragmentation. Its core innovation, PagedAttention, allows it to manage GPU memory like an operating system manages virtual memory, dramatically increasing batch sizes and throughput.

Primary Focus: High-throughput production serving in the data center.
Positioning: vLLM is the currently the De Facto Standard for enterprise deployment. It excels on server-grade hardware (NVIDIA H100s/A100s) and offers the richest feature set for scaling.

2. Ollama: The Developer's Best Friend

Ollama took a different approach. It focused entirely on removing friction. By wrapping the powerful llama.cpp engine in a sleek, Docker-style Go binary, it made running a 70B parameter model on a MacBook as easy as typing ollama run llama3.

Primary Focus: Local development, edge devices, and consumer hardware (Mac/PC).
Positioning: Ollama is the king of usability. It is unbeaten for local testing and running models on consumer hardware, but it lacks the advanced scheduling required for high-traffic enterprise production.

3. ZML (Zig Machine Learning): The Radical Challenger

ZML is the new kid on the block. It is less of a "server" product and more of a compiler stack aimed at engineers. Written in Zig, it utilizes OpenXLA/MLIR to compile model graphs directly into standalone binaries, aiming to eliminate the heavy Python/PyTorch dependency chain entirely.

Primary Focus: High-performance, cross-platform runtime (TPUs, AMD, NVIDIA) without dependencies.
Positioning: ZML is an Alpha-stage visionary. It offers incredible potential for hardware portability and efficiency but is currently a complex "build-your-own-stack" tool rather than a drop-in product.

Visualizing the Results

To understand how these tools differ, we visualize our QSOS scores using two different schemas.

The Radar Chart: Feature Balance

This chart shows the balance of strengths across the four evaluation axes.

Caption: The QSOS Radar Chart highlights the distinct profiles of the three engines. vLLM shows the broadest coverage across features and performance. Ollama spikes toward Operational Ease. ZML shows potential in features but lacks maturity.

vLLM (Blue): The largest, most balanced area, indicating strength across maturity, features, and performance, with moderate operational complexity.
Ollama (Green): A massive spike toward "Operational Ease," reflecting its zero-friction user experience, but pulling back on raw performance metrics like continuous batching.
ZML (Red): A smaller footprint overall, reflecting its early stage (low maturity), but showing strong potential in functional features due to its compiler-based architecture.

The QSOS Quadrant: Market Position

This schema maps the tools based on their market adoption versus their raw production capabilities.

Caption: The QSOS Quadrant positions the tools based on Market Maturity vs. Production Power.

vLLM (The Leader): High Maturity, High Power. The safe, scalable choice for the enterprise.
Ollama (The Specialist): High Maturity, Lower Production Power. The standard for a specific niche (local/consumer hardware), prioritizing usability over scale.
ZML (The Visionary): Low Maturity, High Potential Power. An innovative approach that hasn't yet proven itself in the broad market.

The Consolidated Score Sheet

Below is the detailed breakdown of the evaluation scores that feed the charts above.

Section / Criteria	vLLM	Ollama	ZML (Zig ML)
A. MATURITY
History & Age	2 (Standard)	2 (Standard)	0 (Very New)
Activity	2 (Hyper-Active)	2 (Viral)	2 (High Velocity)
Ecosystem	2 (Dominant)	2 (Ubiquitous)	0 (Niche)
Governance	2 (Community)	1 (Company Led)	1 (Small Team)
B. FEATURES
Model Support	2 (Universal)	2 (Curated Lib)	2 (Compiler based)
Quantization	2 (Server: AWQ/FP8)	2 (Edge: GGUF)	1 (Implicit XLA)
LoRA Adapters	2 (Dynamic Multi-LoRA)	1 (Static Modelfile)	0 (Not standard)
API Compat.	2 (OpenAI Native)	2 (OpenAI Native)	0 (Runtime only)
C. PERFORMANCE
Cont. Batching	2 (Gold Standard)	0 (FIFO)	1 (Arch. support)
Throughput	2 (Maximum SOTA)	1 (Low/Single User)	1 (High Potential)
Parallelism	2 (Tensor & Pipeline)	0 (Single Node)	1 (Compiler Config)
Hardware Agnosticism	1 (NVIDIA Centric)	2 (Apple/Consumer)	2 (Any: TPU/AMD)
D. OPERATIONS
Ease of Setup	1 (Python/Docker)	2 (Magic 1-Click)	0 (Hard: Bazel)
Dependencies	1 (Heavy Torch)	2 (Zero: Go Binary)	2 (Zero: Zig Binary)
Observability	2 (Prometheus Native)	0 (Logs only)	1 (Manual metrics)

Conclusion

There is no single "best" inference engine. The right choice depends entirely on your specific context (the Qualification phase of QSOS).

Choose vLLM if:

You are building a production application that needs to serve many concurrent users. You have access to server-grade GPUs (NVIDIA A10G, A100, H100) and need features like dynamic LoRA adapters for multi-tenancy.

If you are deploying to Kubernetes to serve customers, start here.

Choose Ollama if:

You are a developer building locally on a Mac or Windows PC. You need a zero-friction way to test models, or you are deploying to edge devices where resources are constrained, and concurrency is low.

If you just want to run Llama 3 on your laptop right now, download Ollama.

Choose ZML if:

You are an ML systems engineer building a specialized hardware appliance (e.g., using TPUs or AMD chips) and need a runtime with absolutely zero Python dependencies and a tiny footprint. You are willing to build the server infrastucture around it yourself.

If you are frustrated by PyTorch bloat and want a "build your own" adventure, look at ZML.

Note on Methodology

For the purpose of this article, we utilized a simplified QSOS evaluation grid. We intentionally zoomed in on the "Best of Breed" criteria, the critical differentiators driving the current "Inference Wars", to keep the comparison readable and actionable.

A full-fledged QSOS evaluation is significantly more exhaustive. It is structured as a hierarchical tree of criteria containing more data points, covering deep operational details such as:

Generic Attributes: Intellectual property management, roadmap visibility, bug tracking efficiency, and internationalization.
Specific Sub-sections: Detailed granularity on security compliance (SOC2/GDPR), exact memory footprints, and specific driver version compatibility.

While this article provides a strategic overview, a complete QSOS audit would involve drilling down from high-level "Sections" into specific "Leaves" to calculate a precise, weighted score for every possible business constraint.

Automating Image Generation with n8n and ComfyUI

raphiki — Sun, 07 Sep 2025 15:51:34 +0000

This is the third article of a series about how to integrate ComfyUI with other tools to build more complex workflows. We'll move beyond the familiar node-based interface to explore how to connect ComfyUI from code and no-code solutions, using API calls or MCP Servers.

You'll learn how to use ComfyUI's API to build custom applications and automate tasks, creating powerful and automated systems for generative AI.

n8n is a workflow automation tool that connects applications, APIs, and services without requiring deep technical expertise. It allows users to create complex, multi-step workflows using a visual, node-based editor. With n8n, you can automate tasks across thousands of integrations, from CRMs and databases to messaging apps and cloud services.

It's a fair-code and open-core solution. You can self-host and modify the software freely, but SaaS providers must contribute back to the project if they offer n8n as a service. Furthermore, some advanced features like global variables, multiple environments (dev, staging, prod, etc.), version control using Git, or controlling n8n via API are not available in the community and open-source version of the product.

In this article, we'll explore how to call ComfyUI from an n8n agent-based workflow with human interaction and LLM use. The agent is instructed to transform a simple prompt from the user into a super-charged JSON Prompt Guide, which is then injected into ComfyUI. For more context, you can read my previous article on JSON Prompt Style Guides.

Installation

n8n is a Vue/TypeScript web application that's simple to install whether you prefer to run it on a Node.js installation or inside a Docker container.

Node.js: npx n8n
Docker: docker volume create n8n_data and then docker run -it --rm --name n8n -p 5678:5678 -v n8n_data:/home/node/.n8n docker.n8n.io/n8nio/n8n

After all dependencies are installed, the n8n Editor web UI is accessible at http://localhost:5678.

Text-to-Image Workflow

Use Case

Workflow design is done in the Editor web UI, and it's a highly visual process that doesn't require any coding knowledge, as long as you use predefined nodes for a standard use case. That's our approach here, as we'll create a very simple 3-step workflow with 4 nodes.

Chat Trigger node to start the workflow with a message from the user to capture their initial prompt for the images to be generated by ComfyUI.
AI Agent node to call an OpenAI model (though it could be other SaaS solutions like Mistral, Anthropic, or Google Gemini, or local models provided through Ollama or directly by Hugging Face). The agent has instructions on how to expand the initial prompt from the previous node into a JSON Prompt Style Guide.
OpenAI Chat Model node to connect to OpenAI's GPT.
n8n-nodes-comfyui community node to connect to a running ComfyUI instance. To install it, go to the "Settings / Community nodes" menu.

We're making a simple use of this standard AI Agent node and don't require memory or external tools.

The most important parameter is the system message given to the LLM to expand the initial user prompt. The OpenAI Chat Model node handles the credentials to connect to OpenAI and allows us to select the GPT 4.1 mini model.

The LLM response is then sent to the final node, which is interconnected with ComfyUI.

ComfyUI Community Node

Once installed, this community node is quite straightforward to use.

First, we configure the credentials to connect to ComfyUI.

API URL: In this example, it's http://127.0.0.1:8188, but it could also be a remote instance of ComfyUI.
API Key: This is used if you have configured one on the ComfyUI side.

Next, we specify the output format (PNG or JPEG) and the timeout for communication with ComfyUI. In the Workflow JSON textarea, we copy the content of the workflow exported from ComfyUI (by using the "File / Export (API)" menu).

This means that n8n will send the workflow to be executed to the ComfyUI API in JSON format. We need to modify the ComfyUI workflow by using an expression containing the $node["AI Agent"].data variable. Its value is dynamically set to the prompt provided by the previous node during n8n execution.

The exact location to inject the prompt depends on the JSON workflow exported from ComfyUI. Here, it's inside the "39.6" node of type CLIP Text Encode, but it might have a different name in your own workflows.

Execution

We're all set! We check that ComfyUI is running and ready to launch the workflow from the n8n UI by entering a prompt in the chat box.

Here's a short video of the workflow execution. n8n displays real-time progress, and the generated images can be visualized inside the ComfyUI node.

Here are two images generated by from this prompt: "A dramatic, cinematic shot of an ancient library at night, where the books are alive and their pages flutter like birds, forming constellations in the air."

Of course, this 3-step workflow is very simple. The true power of coupling n8n and ComfyUI will become apparent with more complex use cases, leveraging n8n's extensive integration capabilities with many other components and solutions.

Image-to-Image Workflow

Use Case

Let's now create another workflow to transform an existing image based on user instructions. We'll intentionally keep this example super simple for clarity, but your use case might include a more complex workflow leveraging n8n's power.

Here, we'll use only three nodes:

n8n Form / n8n Form trigger node to start the workflow by displaying an HTML form for the user to upload the image to modify and specify what changes to apply.
ComfyUI Image Transformer community node to connect to a running ComfyUI instance. To install it, go to the "Settings / Community nodes" menu and search for n8n-nodes-comfyui-image-to-image. The example workflow exported from ComfyUI uses the Kontext Edit model to modify an existing image.
n8n Form / Form Ending node to notify the user when the image is generated and offer it for download.

ComfyUI Image Transformer Node

This node is quite similar to the n8n-nodes-comfyui node we used before, with the insertion of the $json.Promt expression into the exported ComfyUI JSON workflow to inject instructions from the user.

The main difference concerns how the input image to be modified is handled:

Input Type defines how the image is obtained from the previous form node; we'll choose Binary instead of URL or Base64 text.
The property containing the binary file must be specified, which is the data field here.
Image Node ID is used to identify—within the exported ComfyUI JSON workflow — the node in charge of loading the input image (it must be of type LoadImage).

We've added the last node to finalize the form management started with the first node, retrieve the modified image, return it in binary format, and offer the user the option to save it locally.

Execution

Let's execute the workflow. n8n displays a form for us to enter both the image and the associated instructions for its modification.

Here is a short video of the workflow execution.

Initial Image:

Modified Image with the prompt "Make the scene at night with full moon and moonlight":

This second example workflow is so simple that we could do the exact same thing directly using the ComfyUI UI. It's here simply to illustrate how integration with n8n can be achieved. A more value-added workflow might, for instance, include a loop that allows the user to keep modifying the image outputs until they are satisfied.

Also, note that the n8n-nodes-comfyui package offers other custom nodes for integration into your workflows, such as:

Dual Image Transformer
Single Image to Video
Dual Image Video Generator

It's also worth noting that even though n8n offers Form nodes, it's primarily intended to be used in the backend through API calls. This feature, however, is limited to Enterprise licensees.

With these two workflows, we've demonstrated how n8n can serve as a powerful orchestrator for ComfyUI. By leveraging its visual editor and extensive library of integrations, we transformed a simple user prompt into a rich, structured guide for image generation and created a seamless image-to-image transformation process.

While our examples were simple to illustrate the concepts, the true value of n8n lies in its ability to connect ComfyUI with a vast ecosystem of tools, from databases and CRMs to messaging services and other AI models. This opens up new possibilities for building sophisticated, end-to-end applications that go far beyond what a standalone ComfyUI interface can offer.

In the next article of this series, we'll explore another paradigm for connecting ComfyUI with agent-based solutions. We will delve into the Model Context Protocol (MCP), designed to streamline and standardize the way AI models communicate and share contextual information. This will offer a new, more efficient method for agents to interact with and control ComfyUI.

WebSockets & ComfyUI: Building Interactive AI Applications

raphiki — Fri, 05 Sep 2025 09:17:07 +0000

This is the second article of a series about how to integrate ComfyUI with other tools to build more complex workflows. We'll move beyond the familiar node-based interface to explore how to connect ComfyUI from code and no-code solutions, using API calls or MCP Servers.

You'll learn how to use ComfyUI's API to build custom applications and automate tasks, creating powerful and automated systems for generative AI.

In the previous article of the Beyond the ComfyUI Canvas series, we demonstrated how to connect ComfyUI with Jupyter Notebook using basic HTTP API calls. While functional, this approach had a significant limitation: it relied on a time.sleep() function to wait for workflow completion, requiring manual adjustments based on the complexity of each workflow, a far from ideal solution.

To overcome this inefficiency, we’ll leverage ComfyUI’s WebSocket API (/ws endpoint), which enables real-time, bidirectional communication between Jupyter and ComfyUI. This upgrade unlocks a seamless experience by providing:

Instant execution progress updates to track workflow status,
Live node execution feedback for monitoring each step,
Immediate error messages and debugging insights for troubleshooting,
Dynamic queue status updates to respond to changes on the fly.

By adopting WebSockets, we eliminate guesswork and create a responsive, interactive workflow.

The Use Case

Let's simplify our previous use-case by dropping the OpenAI Assistant and focusing on how to eliminate manual polling or delays. The process is designed to be both intuitive and efficient:

Workflow Setup: A pre-defined ComfyUI workflow (loaded from a JSON file) serves as the foundation for image generation.
Prompt Customization: The user provides a text prompt which is dynamically inserted into the workflow.
Real-Time Execution: Using ComfyUI’s WebSocket API, the notebook sends the workflow to the server and monitors its progress in real time—receiving live updates on execution status, node activity, and completion.
Result Retrieval: Once generation finishes, the resulting images are automatically fetched and displayed directly in the notebook, creating a seamless end-to-end experience.

Let’s dive into the implementation.

Get prompt from user

print("Please enter your prompt")
user_prompt = input()

Please enter your prompt
A penguin in a tuxedo, DJing at a club for dancing jellyfish

Trigger the Workflow from Jupyter Notebook

Below, you’ll find a detailed breakdown of the code designed for use in a Jupyter Notebook, complete with helpful comments to guide you through each step and explain its functionality

Imports and main functions

import websocket  # For WebSocket communication
import uuid       # For generating unique client IDs
import json       # For JSON data handling
import requests   # For HTTP requests (replaces urllib)
from PIL import Image  # For image processing
import io         # For handling binary data streams
import IPython.display as display  # For displaying images in Jupyter

# Server configuration
server_address = "127.0.0.1:8188"  # Local server address and port
client_id = str(uuid.uuid4())      # Unique client ID for this session

def queue_prompt(prompt, prompt_id):
    """
    Send a prompt to the server for execution.

    Args:
        prompt (dict): The workflow/prompt to execute.
        prompt_id (str): Unique ID for tracking the prompt.
    """
    p = {"prompt": prompt, "client_id": client_id, "prompt_id": prompt_id}
    response = requests.post(f"http://{server_address}/prompt", json=p)
    return response

def get_image(filename, subfolder, folder_type):
    """
    Fetch an image from the server.

    Args:
        filename (str): Name of the image file.
        subfolder (str): Subfolder where the image is stored.
        folder_type (str): Type of folder (e.g., 'output').

    Returns:
        bytes: Binary image data.
    """
    params = {"filename": filename, "subfolder": subfolder, "type": folder_type}
    response = requests.get(f"http://{server_address}/view", params=params)
    return response.content

def get_history(prompt_id):
    """
    Retrieve the execution history for a given prompt ID.

    Args:
        prompt_id (str): ID of the prompt whose history is requested.

    Returns:
        dict: History data for the prompt.
    """
    response = requests.get(f"http://{server_address}/history/{prompt_id}")
    return response.json()

def get_images(ws, prompt):
    """
    Execute a prompt and collect the resulting images.

    Args:
        ws (websocket.WebSocket): Active WebSocket connection.
        prompt (dict): The workflow/prompt to execute.

    Returns:
        dict: Dictionary of node IDs and their output images.
    """
    prompt_id = str(uuid.uuid4())
    queue_prompt(prompt, prompt_id)
    output_images = {}

    # Listen for WebSocket messages until execution is complete
    while True:
        out = ws.recv()
        if isinstance(out, str):
            message = json.loads(out)
            if message['type'] == 'executing':
                data = message['data']
                if data['node'] is None and data['prompt_id'] == prompt_id:
                    break  # Execution is done
        else:
            # Binary previews are ignored here
            continue

    # Retrieve and organize output images
    history = get_history(prompt_id)[prompt_id]
    for node_id in history['outputs']:
        node_output = history['outputs'][node_id]
        images_output = []
        if 'images' in node_output:
            for image in node_output['images']:
                image_data = get_image(image['filename'], image['subfolder'], image['type'])
                images_output.append(image_data)
        output_images[node_id] = images_output
    return output_images

Load the workflow and inject the user prompt

with open("t2i-krea.json", "r") as f:
    workflow = json.load(f)

# Update the prompt text in the workflow
workflow["39:6"]["inputs"]["text"] = user_prompt

Communication with ComfyUI through WebSockets

# Establish WebSocket connection
ws = websocket.WebSocket()
ws.connect(f"ws://{server_address}/ws?clientId={client_id}")

# Execute the workflow and collect images
images = get_images(ws, workflow)
ws.close()

Display the output images in Jupyter

for node_id in images:
    for image_data in images[node_id]:
        image = Image.open(io.BytesIO(image_data))
        # Display each image in the notebook
        display.display(image)

This article demonstrated the power of using WebSockets for real-time, bidirectional communication with ComfyUI. By moving beyond simple HTTP requests, we eliminated the need for manual time delays and created a truly dynamic, responsive workflow. This allowed us to monitor the execution of our AI pipeline in real-time, ensuring a more reliable and efficient integration. The result is a seamless experience where we can send a prompt and watch as the generated images appear automatically in our notebook.

Having now explored two different ways to integrate ComfyUI with Python code executed in Jupyter, we've laid a strong foundation for building custom, high-level generative AI applications. But what if you're not a developer, or you simply prefer a visual, no-code approach to orchestration? In the next article of the series, we'll shift our focus from code to a no-code solution like n8n to show you how to build powerful ComfyUI workflows without writing a single line of code.

Unlocking ComfyUI's Power: A Guide to the HTTP API in Jupyter

raphiki — Thu, 04 Sep 2025 15:28:06 +0000

This is the first article of a series about how to integrate ComfyUI with other tools to build more complex workflows. We'll move beyond the familiar node-based interface to explore how to connect ComfyUI from code and no-code solutions, using API calls or MCP Servers.

You'll learn how to use ComfyUI's API to build custom applications and automate tasks, creating powerful and automated systems for generative AI.

ComfyUI is a powerful, modular interface for generative models, allowing users to create complex AI image, video and sound generation workflows with a node-based editor. Jupyter Notebook, on the other hand, is a popular interactive environment for data analysis, visualization, and prototyping.

By integrating ComfyUI with Jupyter Notebook, you can leverage the flexibility of ComfyUI’s workflows directly within your Python scripts or data science pipelines. This first article focuses on a simple approach using Basic HTTP API calls.

Most of this article is exported from an actual Jupyter Notebook. Both content, Python code and execution results are displayed.

The Use Case

Our goal is to build a high-level generative AI workflow that combines the power of an intelligent agent with the robust image generation capabilities of ComfyUI. The process unfolds in a few simple steps, all orchestrated within a Jupyter Notebook:

User Input: The workflow begins with a simple, high-level prompt entered directly into the notebook.
Agent-Powered Expansion: An OpenAI Assistant then takes this basic prompt and transforms it into a detailed, structured JSON Prompt Style Guide. This process enriches the initial idea with specific creative instructions, such as style, composition, and lighting.
Initiating Generation: This expanded JSON guide is automatically injected into a pre-defined ComfyUI workflow. A single API call to the ComfyUI server starts the image generation process.
Displaying the Result: Once the generation is complete, we make a second API call to fetch the resulting images. The images are then displayed directly within the Jupyter Notebook, completing our automated pipeline.

Prepare a ComfyUI Workflow

Create or load a workflow in ComfyUI.
Save the workflow as a .json file from the "File / Export (API)" menu (e.g., t2i-krea.json).

Get initial prompt from user

print("Please enter your prompt")
user_prompt = input()

Please enter your prompt
Hanuman flying over a modern city at night

Generate JSON Prompt Style Guide with an Assistant

import os
from openai import OpenAI
from dotenv import load_dotenv

load_dotenv()

client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))

# Create a thread
thread = client.beta.threads.create()

# Send a message
message = client.beta.threads.messages.create(
    thread_id=thread.id,
    role="user",
    content=user_prompt
)

# Run the assistant
run = client.beta.threads.runs.create(
    thread_id=thread.id,
    assistant_id="asst_Uj0Qr0rG0bz8NVk1LWiS9UKv"
)

# Wait for completion and retrieve the response
import time
while run.status != "completed":
    time.sleep(1)
    run = client.beta.threads.runs.retrieve(thread_id=thread.id, run_id=run.id)

# Get the response
messages = client.beta.threads.messages.list(thread_id=thread.id)
json_prompt = messages.data[0].content[0].text.value
print(json_prompt)

{
  "style_name": "Urban Deus Ex Hanuman",
  "inspiration": [
    "Modern Urban Aesthetics",
    "Hindu Mythology",
    "Superhero Comics",
    "Cyberpunk Lighting"
  ],
  "scene": "Hanuman, the Hindu god, flying over a bustling modern city radiating bright lights under the cloak of night sky",
  "subjects": [
    {
      "type": "Hanuman",
      "description": "Strong, muscular figure with a monkey face, holding a gada(mace).",
      "position": "midground",
      "pose": "flying with one hand extended",
      "size": "large",
      "expression": "determined",
      "interaction": "flying over the city"
    },
    {
      "type": "city",
      "description": "modern urban skyline with skyscrapers, neon billboards, and busy traffic",
      "position": "background",
      "size": "expansive"
    }
  ],
  "style": "comic-realistic",
  "color_palette": {
    "primary": "#202020",
    "secondary": "#505050",
    "highlight": "#ff6a00",
    "shadow": "#0d0d0d",
    "background_gradient": [
      "#0d0d0d",
      "#303030"
      ]
  },
  "lighting": "Glistening city lights with diffused neon glow and soft moonlight",
  "mood": "powerful and captivating",
  "background": {
    "type": "scenery",
    "details": "Modern urban cityscape with skyscrapers, roads, traffic and massive billboards with neon signs"
  },
  "composition": "Slightly off-center focus with Hanuman taking up prominent space",
  "camera": {
    "angle": "low angle",
    "distance": "medium shot",
    "lens": "wide-angle",
    "focus": "sharp subject, blurred background"
  },
  "medium": "Digital Painting",
  "textures": [
    "smooth skin of Hanuman",
    "rough concrete of buildings",
    "glossy glass of skyscrapers"
  ],
  "resolution": "4K",
  "details": {
    "clothing": "Hanuman is dressed in traditional golden and red garment",
    "weather": "Night with clear sky and a soft moonlight"
  },
  "effects": [
    "Bokeh effect for city lights",
    "Glow effect for neon lights"
  ],
  "themes": [
    "Divinity",
    "Strength",
    "Modernization",
    "Contrast",
    "Juxtaposition of Tradition with Modernity"
  ],
  "usage_notes": "The style is effective in creating a surprising juxtaposition of traditional divinity with modern landscapes. Use this style for high impact illustrations where contrasts need to be highlighted."
}

Trigger the Workflow from Jupyter Notebook

Use the requests library to send a POST request to the ComfyUI API:

import requests
import json

# ComfyUI server URL
comfy_url = "http://127.0.0.1:8188"
prompt_url = f"{comfy_url}/prompt"

# Load your workflow JSON
with open("t2i-krea.json", "r") as f:
    workflow = json.load(f)

# Replace the prompt
workflow["39:6"]["inputs"]["text"] = json_prompt

# Define the payload
payload = {
    "prompt": workflow,
    "client_id": "jupyter_notebook"
}

# Send the request
response = requests.post(prompt_url, json=payload)

# Get the prompt_id
prompt_id = response.json()['prompt_id']
print(prompt_id)

c1a2ced4-772c-4aeb-ac45-bfa183d03a88

Retrieve the generated images

ComfyUI processes the workflow asynchronously.

To fetch the result, poll the /history endpoint:

import time
from IPython.display import Image, display    

# Wait for the workflow to complete
time.sleep(25)  # Adjust based on workflow complexity

# Fetch the latest result for our prompt
history_url = f"{comfy_url}/history/{prompt_id}"
history = requests.get(history_url).json()

# Navigate to the list of image outputs and display them
image_outputs = history[prompt_id]["outputs"]["9"]["images"]

for image in image_outputs:
    filename = image["filename"]
    image_url = f"{comfy_url}/view?filename={filename}"
    display(Image(url=image_url, width=200))

In this article, we've seen how to leverage the power of ComfyUI directly from a Jupyter Notebook. By making simple API calls, we were able to transform a user's basic text prompt into a rich, detailed JSON guide using an OpenAI Assistant, and then feed that guide into a ComfyUI workflow to generate images. This approach demonstrates how you can move beyond the graphical interface to build automated, intelligent systems for creative tasks. The combination of Python's flexibility and ComfyUI's robust backend opens up a world of possibilities for custom, high-level generative AI workflows.

In the next article, we'll take our integration a step further by exploring how to use WebSockets for Real-Time Interaction with ComfyUI.