Why? Multi-tenant environments. First, we need to understand a few differences between environments:

• End-user UI
• Agent Runtime Environment
• LLM Server

So

• When you run Claude Code on your local MacBook, the first two are always local. The third is usually the Claude.ai server.
• When you ssh to a virtual private server (VPS) and install Claude Code there, the first two are your remote server. The third is still the Claude.ai server.
• When you run Claude RC on your virtual private server and code from your iPad using the Claude app, the end-user UI is on your iPad, the agent runtime environment is on your VPS, and the server is still Claude.ai.

Most people physically separate their tenancy, such as Claude Code, from their personal vs. work laptops. So in most cases, it's not a big deal.

But when you need multi-tenancy, it becomes super stressful. For example, say you have two different toolkits:

• personal toolkits (personal Notion, personal Sentry, personal Linear)
• workplace toolkits (company Notion, company Sentry, company Linear)

Most MCP auth states or code harnesses don't support profiles, so you can only log in to one.

So therefore... a natural evolution was to have both:

• a personal VPS with all personal toolkits set up
• a workplace VPS with all workspace toolkits set up

to physically isolate tenancies.

Now we've solved the multiple-profile issue, but the client's problems persist. Now let's get back to the environments:

• End-user UI
• Agent Runtime Environment
• LLM Server

All MCP auth or toolkit auth info should always be saved in the Agent Runtime Environment IMHO. However, a surprising number of harnesses tie them to the LLM server (such as Codex Apps or Claude.ai Plugins) or put them in the end-user UI (Claude Desktop or Codex Desktop).

Now the problem is:

• If the auth data is put on the LLM server, you cannot reuse LLM accounts across tenants
• If the auth data is put on the end-user UI, you cannot use the same app to access multi-tenants.

The only way to reliably isolate different auth information is thus:

• You ssh to a virtual private server (VPS) and run Claude Code there. Never use LLM server plugins.

Then

• End-user UI
• Agent Runtime Environment

are both isolated VPS, and

• LLM Server holds no information on the tenancy

This way, you can provide different toolkits, creating multiple dev environments.

200711

So, this blog runs on Ghost. At the footer of this website, I wanted to keep the message "Ghost version self-hosted on DigitalOcean distributed by Cloudflare." But that meant every time I updated Ghost, I had to manually update that string in my theme package and re-upload those. While I automated theme deployment with GitHub Actions (you can find the post here), it was a hassle to ① clone the theme package ② fix the string ③ commit and push it back. Then I thought it would be great to automatically insert the current Ghost version so that I don't have to update it every time manually. At first, I investigated the Ghost engine side to make the Node.js include the value before responding to the client browser, but I figured that there was a much simpler way after a while.

Extracting the Ghost version on client-side

Every Ghost blog includes a tag like the following for SEO and statistical reasons unless you manually disabled it.

<meta name="generator" content="Ghost 3.13" />

That content thing was what I wanted to use. Extract that value with JS.

document.getElementsByName("generator")[0].content;

Of course, if you made some other HTML tag with a name generator before this generator, this wouldn't work. But you really shouldn't do that - generator tags should only be used by automatic software and aren't supposed to be edited. So either leave this tag as-is or remove it altogether.

Displaying the extracted Ghost version

The footer's HTML is generated with a handlebars file.

{  {    {      t "{ghostlink} self-hosted on {cloudlink} distributed by {CDN}"      ghostlink = "<a href = \"https://github.com/TryGhost/Ghost\">Ghost</a>"      cloudlink = "<a href = \"https://www.digitalocean.com/\">DigitalOcean</a>"      CDN="<a href=\"https://www.cloudflare.com/\">Cloudflare</a>"    }  }}.

I added an id property to ghostlink.

ghostlink="<a id = \"ghost-version\" href=\"https://github.com/TryGhost/Ghost\">Ghost</a>"

Then input the string to the corresponding tag with JS.

<script>  document.getElementById("ghost-version").innerText =  document.getElementsByName("generator")[0].content;</script>

Paste this to Admin Panel → Code Injections → Site Footer.

You are good to go. See this in action down at the footer. ↓

One less hard-coded magic number!