The big picture

Three moving parts, one simple flow:

Visitor's browser
      │  1. types a question
      ▼
Chat widget (HTML/JS)
      │  2. POST { message, history } to Worker URL
      ▼
Cloudflare Worker  ──►  Cloudflare Workers AI
      │                     │
      │  3. system prompt   │  4. returns answer
      │     + message       │
      ◄─────────────────────┘
      │  5. forwards { reply }
      ▼
Chat widget displays reply

The widget is an inline HTML+JS block in index.qmd. It captures the visitor’s message and sends it to the Worker.

The Worker is a tiny JavaScript function running on Cloudflare’s global edge network. It prepends a system prompt containing your full background, then forwards the conversation to Cloudflare Workers AI using the env.AI binding — no external API key required.

The key insight is that the browser never talks to the AI model directly — everything goes through your Worker, where you can add rate limits or filters later if you need them.

Part 1 — The Cloudflare Worker

Wrangler is the official Cloudflare CLI. Install it once, authenticate, and you’re ready to deploy:

npm install -g wrangler
wrangler login   # opens a browser window for OAuth

The project needs two files inside a worker/ directory at your site root.

website/
├── assets/
│   └── dark.scss          # site theme — includes chat widget styles
├── posts/
│   └── resume-chat/
│       └── index.qmd      # this post
├── worker/
│   ├── index.js           # Cloudflare Worker — calls Workers AI, returns reply
│   └── wrangler.toml      # Worker config — AI binding, model var, deployment
├── _quarto.yml            # site-wide Quarto config
└── index.qmd              # landing page — embeds the chat widget

wrangler.toml is the configuration:

name = "resume-chat"
main = "index.js"
compatibility_date = "2024-09-01"

[ai]
binding = "AI"

[vars]
AI_MODEL = "@cf/meta/llama-3.1-8b-instruct"

name sets the subdomain (resume-chat.<account>.workers.dev); main points to the Worker entry-point. The [ai] binding gives the Worker access to env.AI — Cloudflare’s built-in AI runtime, no external API key needed. AI_MODEL in [vars] makes the model configurable: change it in wrangler.toml and redeploy without touching any code.

The real work happens in index.js. Scroll through the walkthrough below.

const SYSTEM_PROMPT = `You are an AI assistant representing Guillaume Gilles.
Answer questions based strictly on the information below.
Be concise, friendly, and professional.
If asked about something not covered, say you don't have that information.

--- PROFILE / EXPERIENCE / EDUCATION / SKILLS ---
…`;

const CORS_HEADERS = {
  "Access-Control-Allow-Origin": "https://ggilles.dev",
  "Access-Control-Allow-Methods": "POST, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type",
};

export default {
  async fetch(request, env) {

    if (request.method === "OPTIONS") {
      return new Response(null, { headers: CORS_HEADERS });
    }

    let body;
    try {
      body = await request.json();
    } catch {
      return new Response("Invalid JSON", { status: 400 });
    }

    const { message, history = [] } = body;
  },
};

const messages = [
  { role: "system", content: SYSTEM_PROMPT },
  ...history.slice(-6),
  { role: "user", content: message },
];

let reply;
try {
  const aiRes = await env.AI.run(
    env.AI_MODEL ?? "@cf/meta/llama-3.1-8b-instruct",
    { messages, max_tokens: 400 }
  );
  reply = aiRes.response;
} catch (err) {
  return new Response(
    JSON.stringify({ error: "AI service unavailable. Please try again later." }),
    { status: 502, headers: { "Content-Type": "application/json", ...CORS_HEADERS } }
  );
}

return new Response(JSON.stringify({ reply }), {
  headers: { "Content-Type": "application/json", ...CORS_HEADERS },
});

cd worker/
wrangler deploy
# → Deployed: https://resume-chat.<account>.workers.dev

curl -X POST https://resume-chat.<account>.workers.dev \
  -H "Content-Type: application/json" \
  -d '{"message": "What is his current job?"}'
# → {"reply":"Guillaume is currently a Regional Economist at the Banque de France…"}

Part 2 — The chat widget

The widget is a raw HTML block embedded directly in index.qmd using Quarto’s {=html} fence. It has two parts: markup and JavaScript.

<div id="chat-box">
  <div id="chat-messages">
    <div class="chat-msg bot">
      Hi! I'm an AI assistant. Ask me anything
      about Guillaume's background. 👋
    </div>
  </div>
  <div id="chat-input-row">
    <input id="chat-input" type="text"
           placeholder="e.g. What's his Python experience?"
           autocomplete="off" />
    <button id="chat-send">Send</button>
  </div>
</div>

(function () {
  const WORKER_URL = "https://resume-chat.<account>.workers.dev";

  const msgs  = document.getElementById("chat-messages");
  const input = document.getElementById("chat-input");
  const send  = document.getElementById("chat-send");
  let history = [];
  let busy    = false;

  send.addEventListener("click", sendMessage);
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault(); sendMessage();
    }
  });
})();

function appendMsg(text, role) {
  const div = document.createElement("div");
  div.className = `chat-msg ${role}`;
  div.textContent = text;
  msgs.appendChild(div);
  msgs.scrollTop = msgs.scrollHeight;
  return div;
}

async function sendMessage() {
  const text = input.value.trim();
  if (!text || busy) return;
  busy = true; send.disabled = true; input.value = "";

  appendMsg(text, "user");
  const thinking = appendMsg("Thinking…", "bot typing");

  try {
    const res = await fetch(WORKER_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: text, history }),
    });
    const data = await res.json();
    const reply = data.reply || data.error || "Something went wrong.";
    thinking.className = "chat-msg bot";
    thinking.textContent = reply;
    history.push({ role: "user",      content: text  });
    history.push({ role: "assistant", content: reply });
  } catch {
    thinking.className = "chat-msg bot";
    thinking.textContent = "⚠️ Could not reach the assistant.";
  }

  busy = false; send.disabled = false;
  input.focus(); msgs.scrollTop = msgs.scrollHeight;
}

Part 3 — Integrating with Quarto

Quarto’s {=html} raw block passes content through to the rendered page verbatim. Drop the widget anywhere in a .qmd file:

```{=html}
<div id="chat-box">
  …
</div>
<script>
(function () {
  const WORKER_URL = "https://resume-chat.<account>.workers.dev";
  …
})();
</script>
```

Because the block is scoped to index.qmd, the widget only appears on the landing page — not on blog posts or teaching pages, where it would be out of place. If you later want it site-wide, Quarto’s include-after-body option in _quarto.yml can inject an HTML file into every page instead.

Putting it all together

# 1. Install Wrangler
npm install -g wrangler

# 2. Authenticate with Cloudflare (creates a free account if needed)
wrangler login

# 3. Deploy the Worker (the [ai] binding in wrangler.toml is all you need)
cd worker/
wrangler deploy
# Note the URL printed: https://resume-chat.<subdomain>.workers.dev

# 4. Update the widget with your Worker URL
# Open index.qmd and change:
#   const WORKER_URL = "https://resume-chat.YOUR-SUBDOMAIN.workers.dev";
# to your actual URL.

# 5. Rebuild the landing page
cd ..
quarto render index.qmd

# 6. Publish
git add -A
git commit -m "Add AI résumé chat assistant"
git push

What to customise

Update the résumé content — open worker/index.js and edit the SYSTEM_PROMPT string. Then run wrangler deploy again to push the update. The website itself does not need to be rebuilt.

Show the widget on every page — instead of embedding it in index.qmd, use Quarto’s include-after-body option in _quarto.yml:

format:
  html:
    include-after-body: _partials/chat-widget.html

Move the HTML+JS block to _partials/chat-widget.html and quarto render will inject it at the bottom of every page.

Update the CORS origin — the Worker is already restricted to a single origin. When you adapt this for your own site, change ggilles.dev to your domain in worker/index.js:

"Access-Control-Allow-Origin": "https://your-domain.com",

Swap the model — edit AI_MODEL in wrangler.toml and run wrangler deploy. No code change needed:

[vars]
AI_MODEL = "@cf/mistral/mistral-7b-instruct-v0.1"

Browse the full catalogue at developers.cloudflare.com/workers-ai/models.

Closing thoughts

The whole implementation is roughly 150-200 lines of code spread across three files (worker/index.js, assets/dark.scss, and the raw HTML block in index.qmd). Despite its small footprint, it covers several important concepts that show up in many real-world projects: serverless functions, CORS, prompt engineering, and progressive enhancement (the site works perfectly for visitors who never open the chat).

If you replicate this on your own site, feel free to open a GitHub issue or reach out on LinkedIn — I’d be happy to help you debug it.

The template

I built a ready-to-use template repository that bundles everything you need to write and publish Quarto documents without installing anything locally. Click the button below to launch it instantly:

When the codespace starts, you get:

• The Quarto CLI (latest), ready to render .qmd files
• Python with jupyter, matplotlib, and plotly pre-installed
• VS Code for the web with the Quarto, Python, and Jupyter extensions
• A live preview of hello.qmd that opens automatically in the side panel

All of this is driven by a single configuration file: .devcontainer/devcontainer.json.

Walking through devcontainer.json

The .devcontainer/devcontainer.json file is the heart of any Codespaces setup. It tells GitHub exactly what container image to use, what tools to install, and how to configure the editor. Scroll through the story below to see how each piece of this file works.

{
  "name": "Quarto Codespaces",

  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",

  "features": {
    "ghcr.io/devcontainers/features/python:1": {
      "version": "latest"
    },
    "ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {
      "version": "latest"
    }
  },

  "hostRequirements": {
    "cpus": 4
  },

  "waitFor": "onCreateCommand",
  "updateContentCommand": "python3 -m pip install -r requirements.txt",
  "postAttachCommand": {
    "server": "quarto preview hello.qmd --no-browser --port 8000"
  },
  "portsAttributes": {
    "8000": {
      "label": "Quarto Preview",
      "onAutoForward": "openPreview"
    }
  },

  "customizations": {
    "codespaces": {
      "openFiles": ["hello.qmd"]
    },
    "vscode": {
      "extensions": [
        "quarto.quarto",
        "ms-python.python",
        "ms-toolsai.jupyter"
      ]
    }
  },

  "forwardPorts": [8000]
}

Using the template

The quickest way to get started is to click the badge above. Alternatively, you can use it to seed your own repository:

1. Go to github.com/guillaumegilles/codespaces-quarto
2. Click “Use this template” → “Create a new repository”
3. Open your new repo and click “Code” → “Codespaces” → “Create codespace on main”

Within about 90 seconds the container will be built, Python packages installed, and a live Quarto preview will open in your browser — ready to write.

Going further

Once you’re comfortable with the template, you can extend it by editing .devcontainer/devcontainer.json:

• Add R support by including the ghcr.io/rocker-org/devcontainer-features/r-rig:1 feature
• Add more Python packages by editing requirements.txt
• Pre-install more VS Code extensions by adding their IDs to the extensions list
• Change the base image to the universal image if you need a wider set of pre-installed runtimes

The configuration-as-code approach means any change you commit is instantly available to anyone who opens the repository in a codespace.

What to expect

Here is what the codespace looks like once it has finished loading: VS Code on the left with hello.qmd open, and the live Quarto preview rendering a polar plot on the right — no local setup required.