@cloudgrid-io/mcp 0.11.2 → 0.13.0

package/src/corpus/templates/task-manager/services/web/app/api/tasks/route.js

@@ -0,0 +1,77 @@
+// App Router route handler for the `tasks` collection.
+// GET -> list tasks, POST -> add a task, PATCH -> toggle done, DELETE -> remove
+// a task by id.
+//
+// To adapt this app, rename the collection or change the fields.
+import { NextResponse } from "next/server";
+import { ObjectId } from "mongodb";
+import { getDb } from "../../../lib/db.js";
+
+// Never cache — always read/write live data.
+export const dynamic = "force-dynamic";
+
+const PRIORITIES = ["low", "medium", "high"];
+
+async function tasks() {
+  const db = await getDb();
+  return db.collection("tasks");
+}
+
+function shape(t) {
+  return {
+    id: t._id.toString(),
+    title: t.title || "",
+    done: !!t.done,
+    due: t.due || "",
+    priority: PRIORITIES.includes(t.priority) ? t.priority : "medium",
+  };
+}
+
+// GET /api/tasks — list all tasks, newest first.
+export async function GET() {
+  const col = await tasks();
+  const items = await col.find({}).sort({ createdAt: -1 }).toArray();
+  return NextResponse.json(items.map(shape));
+}
+
+// POST /api/tasks — add a task. Body: { title, due, priority }.
+export async function POST(request) {
+  const body = await request.json().catch(() => ({}));
+  const title = typeof body.title === "string" ? body.title.trim() : "";
+  if (!title) {
+    return NextResponse.json({ error: "title is required" }, { status: 400 });
+  }
+  const doc = {
+    title,
+    done: false,
+    due: typeof body.due === "string" ? body.due.trim() : "",
+    priority: PRIORITIES.includes(body.priority) ? body.priority : "medium",
+    createdAt: new Date(),
+  };
+  const col = await tasks();
+  const res = await col.insertOne(doc);
+  return NextResponse.json({ id: res.insertedId.toString(), ...doc }, { status: 201 });
+}
+
+// PATCH /api/tasks — toggle a task's done state. Body: { id, done }.
+export async function PATCH(request) {
+  const body = await request.json().catch(() => ({}));
+  const { id, done } = body;
+  if (!id || !ObjectId.isValid(id) || typeof done !== "boolean") {
+    return NextResponse.json({ error: "valid id and done (boolean) required" }, { status: 400 });
+  }
+  const col = await tasks();
+  await col.updateOne({ _id: new ObjectId(id) }, { $set: { done } });
+  return NextResponse.json({ ok: true });
+}
+
+// DELETE /api/tasks?id=<id> — remove a task.
+export async function DELETE(request) {
+  const id = new URL(request.url).searchParams.get("id");
+  if (!id || !ObjectId.isValid(id)) {
+    return NextResponse.json({ error: "valid id is required" }, { status: 400 });
+  }
+  const col = await tasks();
+  await col.deleteOne({ _id: new ObjectId(id) });
+  return NextResponse.json({ ok: true });
+}

package/src/corpus/templates/task-manager/services/web/app/layout.js

@@ -0,0 +1,39 @@
+// Root layout + plain inline CSS (no external CDNs, fonts, or stylesheets).
+export const metadata = {
+  title: "Task manager",
+  description: "A persistent task manager on CloudGrid, backed by grid-shared Mongo.",
+};
+
+const css = `
+  :root { color-scheme: light dark; }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
+  main { max-width: 44rem; margin: 3rem auto; padding: 0 1.25rem; }
+  h1 { margin: 0 0 .25rem; }
+  .hint { margin: 0 0 1.5rem; opacity: .7; font-size: .9rem; }
+  .row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
+  input, select { padding: .5rem .75rem; border: 1px solid #8886; border-radius: .5rem; font: inherit; }
+  input[type="text"] { flex: 1; min-width: 10rem; }
+  button { padding: .5rem .9rem; border: 1px solid #8886; border-radius: .5rem; background: #6663; font: inherit; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  .filters { display: flex; gap: .4rem; margin-bottom: 1rem; }
+  .filters button.active { background: #6669; }
+  ul { list-style: none; padding: 0; margin: 0; }
+  li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid #8883; }
+  li.done .title { text-decoration: line-through; opacity: .6; }
+  li .title { flex: 1; }
+  li .meta { font-size: .8rem; opacity: .7; }
+  .pri { font-size: .75rem; padding: .1rem .45rem; border: 1px solid #8886; border-radius: 1rem; }
+  .empty { opacity: .6; }
+`;
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <style dangerouslySetInnerHTML={{ __html: css }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/src/corpus/templates/task-manager/services/web/app/page.js

@@ -0,0 +1,33 @@
+// Home page: a server component reads the tasks straight from Mongo, and a small
+// client list toggles / adds / removes them via the API route. Data persists
+// across refresh and across users because it lives in the grid-shared Mongo, not
+// in memory.
+import { getDb } from "../lib/db.js";
+import TaskList from "./task-list.js";
+
+export const dynamic = "force-dynamic";
+
+const PRIORITIES = ["low", "medium", "high"];
+
+async function listTasks() {
+  const db = await getDb();
+  const items = await db.collection("tasks").find({}).sort({ createdAt: -1 }).toArray();
+  return items.map((t) => ({
+    id: t._id.toString(),
+    title: t.title || "",
+    done: !!t.done,
+    due: t.due || "",
+    priority: PRIORITIES.includes(t.priority) ? t.priority : "medium",
+  }));
+}
+
+export default async function Page() {
+  const tasks = await listTasks();
+  return (
+    <main>
+      <h1>Tasks</h1>
+      <p className="hint">Persisted in the grid-shared Mongo — survives refresh.</p>
+      <TaskList initialTasks={tasks} />
+    </main>
+  );
+}

package/src/corpus/templates/task-manager/services/web/app/task-list.js

@@ -0,0 +1,110 @@
+"use client";
+
+// Small client component: renders the task list with a complete-toggle + filter
+// and posts to /api/tasks.
+import { useState } from "react";
+
+const PRIORITIES = ["low", "medium", "high"];
+const FILTERS = ["all", "active", "done"];
+
+export default function TaskList({ initialTasks }) {
+  const [tasks, setTasks] = useState(initialTasks);
+  const [title, setTitle] = useState("");
+  const [due, setDue] = useState("");
+  const [priority, setPriority] = useState("medium");
+  const [filter, setFilter] = useState("all");
+  const [busy, setBusy] = useState(false);
+
+  async function add(e) {
+    e.preventDefault();
+    const value = title.trim();
+    if (!value) return;
+    setBusy(true);
+    const res = await fetch("/api/tasks", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ title: value, due, priority }),
+    });
+    if (res.ok) {
+      const task = await res.json();
+      setTasks((prev) => [task, ...prev]);
+      setTitle("");
+      setDue("");
+      setPriority("medium");
+    }
+    setBusy(false);
+  }
+
+  async function toggle(id, done) {
+    setBusy(true);
+    const res = await fetch("/api/tasks", {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ id, done }),
+    });
+    if (res.ok) setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, done } : t)));
+    setBusy(false);
+  }
+
+  async function remove(id) {
+    setBusy(true);
+    const res = await fetch(`/api/tasks?id=${encodeURIComponent(id)}`, { method: "DELETE" });
+    if (res.ok) setTasks((prev) => prev.filter((t) => t.id !== id));
+    setBusy(false);
+  }
+
+  const shown = tasks.filter((t) =>
+    filter === "all" ? true : filter === "done" ? t.done : !t.done,
+  );
+
+  return (
+    <div>
+      <form onSubmit={add} className="row">
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Add a task…"
+          aria-label="New task"
+        />
+        <input type="date" value={due} onChange={(e) => setDue(e.target.value)} aria-label="Due date" />
+        <select value={priority} onChange={(e) => setPriority(e.target.value)} aria-label="Priority">
+          {PRIORITIES.map((p) => (
+            <option key={p} value={p}>{p}</option>
+          ))}
+        </select>
+        <button type="submit" disabled={busy}>Add</button>
+      </form>
+      <div className="filters">
+        {FILTERS.map((f) => (
+          <button
+            key={f}
+            type="button"
+            className={filter === f ? "active" : ""}
+            onClick={() => setFilter(f)}
+          >
+            {f}
+          </button>
+        ))}
+      </div>
+      <ul>
+        {shown.length === 0 && <li className="empty">No tasks.</li>}
+        {shown.map((t) => (
+          <li key={t.id} className={t.done ? "done" : ""}>
+            <input
+              type="checkbox"
+              checked={t.done}
+              onChange={(e) => toggle(t.id, e.target.checked)}
+              disabled={busy}
+              aria-label="Done"
+            />
+            <span className="title">{t.title}</span>
+            <span className="pri">{t.priority}</span>
+            {t.due && <span className="meta">{t.due}</span>}
+            <button type="button" onClick={() => remove(t.id)} disabled={busy}>Delete</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/corpus/templates/task-manager/services/web/lib/db.js

@@ -0,0 +1,32 @@
+// Cached MongoDB client for the App Router.
+//
+// The grid injects the connection string as the DATABASE_MONGODB_URL environment
+// variable (plus the legacy MONGODB_URL alias) at dev-time (`grid dev`) and
+// runtime (after `grid plug`). Read the canonical var first, fall back to the
+// legacy alias. Never hardcode a connection string here and never commit a secret.
+//
+// The env var and client are resolved LAZILY (inside getDb), never at module top
+// level — otherwise `next build` throws when it imports this module for route
+// analysis, before the grid injects the var.
+import { MongoClient } from "mongodb";
+
+function clientPromise() {
+  const uri = process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL;
+  if (!uri) {
+    throw new Error(
+      "DATABASE_MONGODB_URL is not set. The grid injects it automatically — run " +
+        "this app with `grid dev` locally, or deploy it with `grid plug` (the grid " +
+        "injects the DB connection string at runtime). Do not set it by hand.",
+    );
+  }
+  if (!globalThis.__mongoClientPromise) {
+    globalThis.__mongoClientPromise = new MongoClient(uri).connect();
+  }
+  return globalThis.__mongoClientPromise;
+}
+
+export async function getDb() {
+  const client = await clientPromise();
+  // The default DB comes from the connection-string path segment the grid injects.
+  return client.db();
+}

package/src/corpus/templates/task-manager/services/web/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "my-tasks",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "mongodb": "^6.12.0"
+  }
+}

package/src/corpus/templates/waitlist/README.md

@@ -0,0 +1,38 @@
+# waitlist
+
+A single self-contained HTML launch waitlist / coming-soon page: a hero, an email capture form, and a social-proof counter.
+
+Static inspiration — a single self-contained `index.html` (inline CSS and JS,
+no external CDNs). It deploys instantly via `gridctl_drop` and works on every
+CloudGrid edition, including hosted.
+
+## Fill it in
+
+Fetch the template with `gridctl_fetch("template", "waitlist")`, then replace the
+placeholders:
+
+   - The product name, coming-soon headline, and subheadline.
+   - The signup counter and any social-proof line.
+   - The form action: set the `<form>` `action` to a `mailto:` address or an external form endpoint (for example a hosted form provider). The default is a `mailto:` that opens the visitor's mail client.
+
+Keep it a single self-contained HTML file. Do not add external scripts,
+stylesheets, fonts, or large embedded media.
+
+## Deploy
+
+- Hosted MCP edition: call the drop tool with the HTML.
+- Local MCP / CLI edition: write the HTML to a file and run `gridctl plug`.
+
+It deploys as an inspiration and returns a live share URL right away. Re-deploy
+with the same entity id to update the same URL.
+
+## Note on storing signups
+
+The signup form here is **static**. It posts to a configurable action — a
+`mailto:` (the default) or an external form endpoint you set on the `<form>`.
+It does NOT store submissions anywhere on CloudGrid.
+
+To actually **store** waitlist signups (persist them, count them, export them),
+you need a runtime app with a database — `needs: { database: true }`. That is a
+CRUD app, coming in the crud-app archetype (Wave 1b). Do not pretend this static
+page persists data.

package/src/corpus/templates/waitlist/cloudgrid.yaml

@@ -0,0 +1,10 @@
+# static — deploys as an inspiration (instant, works on hosted) via gridctl_drop;
+# this yaml is only for plugging it as an OWNED static runtime (async, local
+# edition only). To publish the page, prefer gridctl_drop, not grid plug.
+#
+# needs: {}  # none — static, no infrastructure
+name: waitlist
+services:
+  web:
+    type: static
+    path: /

package/src/corpus/templates/waitlist/index.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>{{PRODUCT_NAME}} — {{TAGLINE}}</title>
+<style>
+  :root {
+    --bg: #0b0f17; --panel: #121826; --fg: #e8edf5; --muted: #9aa7bd;
+    --accent: #5b8cff; --accent-2: #7c6bff; --border: #223049; --ok: #34d399;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background:
+      radial-gradient(1200px 600px at 50% -10%, rgba(91,140,255,0.16), transparent 60%),
+      var(--bg);
+    color: var(--fg); min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased; line-height: 1.55;
+    display: grid; place-items: center; padding: 1.5rem;
+  }
+  .card { width: 100%; max-width: 560px; text-align: center; display: grid; gap: 1.5rem; }
+  .eyebrow { color: var(--accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
+  h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); letter-spacing: -0.02em; line-height: 1.05; }
+  .sub { color: var(--muted); font-size: clamp(1.05rem, 3vw, 1.3rem); max-width: 44ch; margin: 0 auto; }
+
+  /* Static form: posts to the action below (mailto by default, or an external
+     form endpoint). It does NOT store signups on CloudGrid. See README. */
+  form { display: flex; gap: 0.6rem; max-width: 440px; margin: 0.5rem auto 0; flex-wrap: wrap; }
+  input[type="email"] {
+    flex: 1 1 220px; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--border);
+    background: var(--panel); color: var(--fg); font-size: 1rem;
+  }
+  input[type="email"]::placeholder { color: var(--muted); }
+  button {
+    padding: 0.85rem 1.5rem; border-radius: 10px; border: none; cursor: pointer;
+    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
+    font-weight: 600; font-size: 1rem;
+  }
+  button:hover { filter: brightness(1.08); }
+
+  .proof { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--muted); font-size: 0.92rem; }
+  .proof .count { color: var(--fg); font-weight: 700; }
+  .proof .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
+  footer { color: var(--muted); font-size: 0.85rem; margin-top: 1rem; }
+</style>
+</head>
+<body>
+  <main class="card">
+    <span class="eyebrow">{{HERO_EYEBROW}}</span>
+    <h1>{{HEADLINE}}</h1>
+    <p class="sub">{{SUBHEAD}}</p>
+
+    <!-- Static form. Set `action` to a mailto: address or an external form
+         endpoint (for example a hosted form provider). Default = mailto. -->
+    <form action="mailto:{{SIGNUP_EMAIL}}" method="post" enctype="text/plain">
+      <input type="email" name="email" placeholder="you@example.com" required aria-label="Email address" />
+      <button type="submit">{{CTA_LABEL}}</button>
+    </form>
+
+    <div class="proof">
+      <span class="dot"></span>
+      <span><span class="count">{{SIGNUP_COUNT}}</span> {{SOCIAL_PROOF_TEXT}}</span>
+    </div>
+
+    <footer>{{FOOTER_TEXT}}</footer>
+  </main>
+</body>
+</html>

package/src/corpus/templates/waitlist/index.md

@@ -0,0 +1,41 @@
+# Template: waitlist (static)
+
+A single self-contained HTML launch waitlist / coming-soon page: a hero, an email capture form, and a social-proof counter. **No infrastructure** — no database, no backend, no `needs:`.
+State (if any) lives only in memory and is lost on refresh.
+
+## How it deploys
+
+To publish this page, use **`gridctl_drop`** (or `gridctl_plug` with the inline
+HTML): it deploys as an **inspiration** — instant, and works on the **hosted**
+edition (Claude Web) as well as local. The reference `cloudgrid.yaml` in this
+directory (`type: static`) is ONLY for plugging the page as an OWNED static
+runtime (async, local edition only); the fast path is `gridctl_drop`.
+
+The fillable HTML is the real template — fetch it with
+`gridctl_fetch("template", "waitlist")` and fill in the user's content.
+
+## Note on storing signups
+
+The signup form here is **static**. It posts to a configurable action — a
+`mailto:` (the default) or an external form endpoint you set on the `<form>`.
+It does NOT store submissions anywhere on CloudGrid.
+
+To actually **store** waitlist signups (persist them, count them, export them),
+you need a runtime app with a database — `needs: { database: true }`. That is a
+CRUD app, coming in the crud-app archetype (Wave 1b). Do not pretend this static
+page persists data.
+
+## cloudgrid.yaml (reference only)
+
+```yaml
+# static — deploys as an inspiration (instant, works on hosted) via gridctl_drop;
+# this yaml is only for plugging it as an OWNED static runtime (async, local
+# edition only). To publish the page, prefer gridctl_drop, not grid plug.
+#
+# needs: {}  # none — static, no infrastructure
+name: waitlist
+services:
+  web:
+    type: static
+    path: /
+```

package/src/corpus/workflows/admin-dashboard.md

@@ -0,0 +1,102 @@
+---
+name: admin-dashboard
+when: admin dashboard, admin panel, back-office, CRUD admin, manage records — a persistent admin over one or two Mongo collections with a metrics header + management table. Needs a database → runtime → local edition.
+needs: database
+deploy: runtime
+editions: local
+capabilities_note: persistent — needs a database (Mongo). Runtime app, async build, local edition only. Declare the canonical `needs: { database: true }`; the deployer injects DATABASE_MONGODB_URL (+legacy MONGODB_URL).
+summary: Build a persistent Next.js + Mongo admin panel on the grid — a couple of resource collections (e.g. users, orders) with a metrics header (counts + revenue) and a management table (add/delete). Edition-gate first, scaffold, put the app under services/web/, wire process.env.DATABASE_MONGODB_URL (legacy MONGODB_URL fallback) lazily, declare needs:{database:true} (not requires:), deploy async, poll to a live URL.
+---
+
+# Workflow: admin-dashboard
+
+The user wants an admin panel / back-office to **manage records** — a couple of
+resources (e.g. users and orders) with a metrics header (counts, revenue) and a
+management table (add / delete), all persisted across refresh and shared across
+sessions. That is a **runtime app** backed by the grid's shared Mongo, not a
+static dashboard page. It is the same proven shape as `app-with-data`, generalised
+over one or two Mongo collections. (For a display-only metrics page with baked-in
+data, use the static `dashboard` template instead.)
+
+Follow this recipe. Be honest that a runtime deploy is async (not instant like a
+static drop) and that it needs the local edition.
+
+## 1. Edition check FIRST (hard gate)
+
+A persistent app is a built + deployed container. It requires the **local
+edition** (Claude Desktop / Claude Code) or the CLI.
+
+- **Hosted edition (Claude Web / hosted MCP):** you CANNOT build a runtime app —
+  hosted is inline-only and can only publish static pages. Tell the user
+  plainly, offer a **static version** instead, and STOP the runtime path here.
+- **Local edition:** continue.
+
+## 2. Auth + grid
+
+1. Ensure signed in: `gridctl_login_status`; if not, `gridctl_login`.
+2. A grid is required. Respect the grid picker: if the user has more than one
+   grid, ask which to use; do not assume a target.
+
+## 3. Scaffold
+
+`gridctl_init` an app `<name>`. `init` creates the entity + `.cloudgrid/link.json`
+and writes a `cloudgrid.yaml` with an EMPTY `services: {}`. `plug` needs a linked
+directory, so run `init` FIRST. Then (a) write the app under **`services/web/`**,
+and (b) fill `cloudgrid.yaml` to the shape below (`services.web` + `needs:
+{ database: true }`).
+
+## 4. Add the datastore + wire Mongo
+
+1. Set `cloudgrid.yaml`. **App code MUST live under `services/<name>/`** —
+   `path:` is the URL mount, NOT the filesystem path.
+   ```yaml
+   name: my-admin
+   services:
+     web:
+       type: nextjs
+       path: /
+   needs:
+     database: true
+   ```
+   **Declare the datastore with `needs: { database: true }`** — the canonical
+   shape. The deployer provisions Mongo and injects `DATABASE_MONGODB_URL` (plus
+   the legacy `MONGODB_URL` alias). `requires:` is the deprecated v1 alias; don't
+   author new yaml with it, and never set `needs:` and `requires:` together (the
+   validator rejects it).
+2. Fetch the template for the Mongo wiring + CRUD shape:
+   `gridctl_fetch("template", "admin-dashboard")`. It is a minimal, real Next.js
+   + `mongodb`-driver admin panel under `services/web/`: a lazy client in
+   `services/web/lib/db.js`, two App-Router GET/POST/DELETE routes (`users` and
+   `orders`), a server-component page that computes a metrics header, and a
+   reusable client management table.
+3. Adapt it (rename or replace the resource collections, change fields, adjust
+   the metrics). **Read the DB from `process.env.DATABASE_MONGODB_URL`** (legacy
+   `process.env.MONGODB_URL` fallback) — the grid injects it at dev-time and
+   runtime.
+   - **Put the DB connection behind a lazy getter — never read the connection
+     string at module top level, or `next build` fails.**
+
+## 5. (Optional) Run locally
+
+Mention that the user can `grid dev` to run locally against the injected Mongo
+before deploying. Don't require it.
+
+## 6. Config
+
+- API keys / secrets → `gridctl_secrets`. Non-secret config → `gridctl_env`.
+- Do **NOT** set the DB connection vars yourself (`DATABASE_MONGODB_URL` or the
+  legacy `MONGODB_URL`) — the grid injects them.
+
+## 7. Deploy (async)
+
+Deploy the folder with `gridctl_plug`. A **runtime deploy is ASYNC**: the first
+response is `status: "building"`, NOT a live URL yet.
+- Poll `gridctl_status` (or the returned poll_url) until the entity is live.
+- Surface a liveness signal while it builds — never a bare silent wait.
+- Only once it is live, return the deployed app URL (NOT the build/log link).
+
+## 8. Return the live URL + iterate
+
+Give the user the live app URL — that is the deliverable. To iterate, re-plug the
+SAME entity so it updates the same URL. Keep it honest: async build, local-edition
+only, credentials injected by the grid.