Merge pull request #3 from dydanz/blog/nanoclaw-pt-4

blog: NanoClaw Part 4 — LLM Routing

Author: dydanz

package-lock.json

@@ -21,6 +21,7 @@
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^16.14.0",
     "react-twitter-embed": "^3.0.3",
+    "remark-gfm": "^1.0.0",
     "sass": "^1.65.1"
   },
   "scripts": {

package.json

@@ -12,7 +12,7 @@ repo: https://github.com/dydanz/kandangkambing
 
 ---
 
-In [Part 1](01-why-i-built-this.md), I talked about why I built NanoClaw — the itch, the experiment, and the moment a weekend project grew legs. This post is about how the system is actually put together. Not the aspirational version, but the real one: what's in the repo, how the pieces connect, and where I made trade-offs I'm still thinking about.
+In [Part 1](/blog/why-i-built-nanoclaw), I talked about why I built NanoClaw — the itch, the experiment, and the moment a weekend project grew legs. This post is about how the system is actually put together. Not the aspirational version, but the real one: what's in the repo, how the pieces connect, and where I made trade-offs I'm still thinking about.
 
 If you want to follow along, the code is at [github.com/dydanz/kandangkambing](https://github.com/dydanz/kandangkambing). The repo is Python, built on top of NanoClaw's lightweight agent framework, with specs under `docs/specs/`, agent configurations in `.claude/`, and the core engine under `nanoclaw/`.
 

public/blogs/2026-04-19-nanoclaw-pt-2.md

@@ -12,7 +12,7 @@ repo: https://github.com/dydanz/kandangkambing
 
 ---
 
-The [previous post](02-architecture.md) described the architecture — agents, memory, worktrees, the workflow engine. That's the blueprint. This post is the actual construction site. I'm going to walk through what happens, step by step, when you type a message in Discord and wait for a PR to show up.
+The [previous post](/blog/nanoclaw-architecture) described the architecture — agents, memory, worktrees, the workflow engine. That's the blueprint. This post is the actual construction site. I'm going to walk through what happens, step by step, when you type a message in Discord and wait for a PR to show up.
 
 I'm using the health check endpoint as the example because it's simple, self-contained, and — more importantly — because it's one of the first features I actually ran through the system end-to-end. The early PRs in [kandangkambing](https://github.com/dydanz/kandangkambing) were built this way. There are 10 PRs in the repo now (9 merged, 1 open), and following this flow is how most of them got there.
 
@@ -328,4 +328,4 @@ In the next post, I'll dig into the LLM routing layer — why GPT-4o writes bett
 
 ---
 
-*Part 3 of 7 — [← Part 2: The Architecture](/blog/nanoclaw-architecture) · Part 4: Coming Soon*
+*Part 3 of 7 — [← Part 2: The Architecture](/blog/nanoclaw-architecture) · [Part 4: LLM Routing →](/blog/nanoclaw-llm-routing)*

public/blogs/2026-04-19-nanoclaw-pt-3.md

@@ -8,6 +8,13 @@
 // ALWAYS ADD NEW BLOGS (BASED ON DATE) TO THE TOP OF THE LIST
 
 const blogManifest = [
+  {
+    title: "LLM Routing: Why I Use Three Different AI Providers (And How I Stopped Overpaying)",
+    date: "2026-04-19",
+    slug: "nanoclaw-llm-routing",
+    excerpt: "Not every task needs the same model. How NanoClaw picks between Claude, GPT-4o, and Gemini — and the $40 mistake that made cost tracking non-negotiable.",
+    file: "/blogs/2026-04-19-nanoclaw-pt-4.md"
+  },
   {
     title: "From Discord Command to GitHub PR: What Actually Happens",
     date: "2026-04-21",

public/blogs/2026-04-19-nanoclaw-pt-4.md

@@ -209,6 +209,47 @@
   color: $textColorDark;
 }
 
+/* Tables inside blog posts */
+.blog-post-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.5em 0;
+  font-size: 15px;
+}
+
+.blog-post-content th,
+.blog-post-content td {
+  border: 1px solid $lightBoxShadowDark;
+  padding: 8px 12px;
+  text-align: left;
+  color: $subTitle;
+}
+
+.blog-post-content th {
+  background: $lightBackground3;
+  color: $titleColor;
+  font-weight: 600;
+}
+
+.blog-post-content tr:nth-child(even) td {
+  background: $lightBackground2;
+}
+
+.blog-post-content.dark-mode table th {
+  background: lighten($darkBackground, 6%);
+  color: $textColorDark;
+  border-color: lighten($darkBackground, 15%);
+}
+
+.blog-post-content.dark-mode table td {
+  color: darken($textColorDark, 10%);
+  border-color: lighten($darkBackground, 15%);
+}
+
+.blog-post-content.dark-mode table tr:nth-child(even) td {
+  background: lighten($darkBackground, 4%);
+}
+
 .blog-post-meta {
   font-size: 13px;
   color: $subTitle;

src/blogs/manifest.js

@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useContext} from "react";
 import {useParams, useHistory} from "react-router-dom";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import Header from "../../components/header/Header";
 import Footer from "../../components/footer/Footer";
 import ScrollToTopButton from "../topbutton/Top";
@@ -53,7 +54,7 @@ function BlogPostContent() {
       <div className={isDark ? "blog-post-content dark-mode" : "blog-post-content"}>
         <p className="blog-post-meta">{post.date}</p>
         <h1 className="blog-post-title">{post.title}</h1>
-        {loading ? <p>Loading...</p> : <ReactMarkdown>{content}</ReactMarkdown>}
+        {loading ? <p>Loading...</p> : <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>}
       </div>
     </div>
   );