@cloudgrid-io/mcp 0.11.2 → 0.13.0

package/src/corpus/templates/admin-dashboard/index.md

@@ -0,0 +1,78 @@
+# Template: admin-dashboard (persistent Next.js + Mongo admin panel)
+
+A real, deployable back-office. It manages two generic resources (`users` and
+`orders`) in the grid-shared MongoDB, so records survive refresh and are shared
+across sessions. Same proven shape as `app-with-data`, adapted to a metrics
+header (counts + revenue) over a couple of collections plus a management table
+with add/delete.
+
+**Key rules (all proven by the app-with-data end-to-end deploy):**
+
+1. **Service code MUST live under `services/<name>/`, not the repo/template
+   root.** `path:` in `cloudgrid.yaml` is the URL mount, NOT the filesystem path.
+   The service named `web` → the CLI looks for `services/web/`. App files at the
+   root fail with `Error: Service directory not found: …/services/web`.
+2. **Read the DB connection string LAZILY (inside the getter), never at module
+   top level.** The grid injects it as `DATABASE_MONGODB_URL` (plus the legacy
+   `MONGODB_URL` alias) at dev-time and runtime; the app reads
+   `process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL` inside `getDb`.
+   A top-level read fails `next build`. Never hardcode a connection string; never
+   commit a secret.
+3. **Declare the datastore with `needs: { database: true }`.** The deployer
+   provisions Mongo and injects the connection string. `requires:` is the
+   deprecated v1 alias; don't author new yaml with it, and never set `needs:` and
+   `requires:` together (the validator rejects the combination).
+
+## File tree
+
+```
+cloudgrid.yaml                          # name + services.web (nextjs) + needs: { database: true }
+services/web/package.json               # next, react, react-dom, mongodb driver only
+services/web/lib/db.js                  # lazy Mongo client from DATABASE_MONGODB_URL (legacy MONGODB_URL fallback)
+services/web/app/layout.js              # root layout + inline CSS
+services/web/app/page.js                # server component: reads users + orders, computes metrics
+services/web/app/resource-table.js      # generic client table (POST add / DELETE remove), reused per resource
+services/web/app/api/users/route.js     # GET / POST / DELETE on the users collection
+services/web/app/api/orders/route.js    # GET / POST / DELETE on the orders collection
+```
+
+## cloudgrid.yaml
+
+```yaml
+name: my-admin
+services:
+  web:
+    type: nextjs
+    path: /
+needs:
+  database: true
+```
+
+> **Capability:** this template's need is `database: true`. The deployer
+> provisions Mongo and injects `DATABASE_MONGODB_URL` (plus the legacy
+> `MONGODB_URL` alias). `requires:` is the deprecated v1 alias — don't mix it with
+> `needs:` (the validator rejects the combination). See the capability-map for
+> the full injection table.
+
+## The collections
+
+Two generic resources, each its own Mongo collection and App-Router route:
+
+- `users` — `{ name, email, role, createdAt }` (role: admin / member / viewer).
+- `orders` — `{ customer, amount, status, createdAt }` (status: pending / paid /
+  shipped).
+
+The page is a server component that reads both, computes a metrics header (user
+count, order count, total revenue), and renders a reusable client
+`ResourceTable` per resource. Each route does GET (list), POST (add), DELETE
+(remove).
+
+## Adapt it
+
+- Rename or replace the `users` / `orders` collections and routes with your own
+  resources.
+- Add or change fields by editing the `columns` config passed to `ResourceTable`
+  in `services/web/app/page.js` and the matching route's document shape.
+- Add PATCH (edit) or extra metrics as the panel grows.
+- Add `cache: true` to `needs:` only if you actually need Redis.
+- Run `grid dev` to test locally, `grid plug` to deploy (async — poll to live).

package/src/corpus/templates/admin-dashboard/services/web/app/api/orders/route.js

@@ -0,0 +1,64 @@
+// App Router route handler for the `orders` collection.
+// GET -> list orders, POST -> add an order, DELETE -> remove an order by id.
+//
+// This is the second of two generic admin resources (see also api/users). To
+// adapt, 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 STATUSES = ["pending", "paid", "shipped"];
+
+async function orders() {
+  const db = await getDb();
+  return db.collection("orders");
+}
+
+function shape(o) {
+  return {
+    id: o._id.toString(),
+    customer: o.customer || "",
+    amount: typeof o.amount === "number" ? o.amount : 0,
+    status: STATUSES.includes(o.status) ? o.status : "pending",
+  };
+}
+
+// GET /api/orders — list all orders, newest first.
+export async function GET() {
+  const col = await orders();
+  const items = await col.find({}).sort({ createdAt: -1 }).toArray();
+  return NextResponse.json(items.map(shape));
+}
+
+// POST /api/orders — add an order. Body: { customer, amount, status }.
+export async function POST(request) {
+  const body = await request.json().catch(() => ({}));
+  const customer = typeof body.customer === "string" ? body.customer.trim() : "";
+  if (!customer) {
+    return NextResponse.json({ error: "customer is required" }, { status: 400 });
+  }
+  const amount = Number(body.amount);
+  const doc = {
+    customer,
+    amount: Number.isFinite(amount) ? amount : 0,
+    status: STATUSES.includes(body.status) ? body.status : "pending",
+    createdAt: new Date(),
+  };
+  const col = await orders();
+  const res = await col.insertOne(doc);
+  return NextResponse.json({ id: res.insertedId.toString(), ...doc }, { status: 201 });
+}
+
+// DELETE /api/orders?id=<id> — remove an order.
+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 orders();
+  await col.deleteOne({ _id: new ObjectId(id) });
+  return NextResponse.json({ ok: true });
+}

package/src/corpus/templates/admin-dashboard/services/web/app/api/users/route.js

@@ -0,0 +1,63 @@
+// App Router route handler for the `users` collection.
+// GET -> list users, POST -> add a user, DELETE -> remove a user by id.
+//
+// This is one of two generic admin resources (see also api/orders). To adapt,
+// 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 ROLES = ["admin", "member", "viewer"];
+
+async function users() {
+  const db = await getDb();
+  return db.collection("users");
+}
+
+function shape(u) {
+  return {
+    id: u._id.toString(),
+    name: u.name || "",
+    email: u.email || "",
+    role: ROLES.includes(u.role) ? u.role : "member",
+  };
+}
+
+// GET /api/users — list all users, newest first.
+export async function GET() {
+  const col = await users();
+  const items = await col.find({}).sort({ createdAt: -1 }).toArray();
+  return NextResponse.json(items.map(shape));
+}
+
+// POST /api/users — add a user. Body: { name, email, role }.
+export async function POST(request) {
+  const body = await request.json().catch(() => ({}));
+  const name = typeof body.name === "string" ? body.name.trim() : "";
+  if (!name) {
+    return NextResponse.json({ error: "name is required" }, { status: 400 });
+  }
+  const doc = {
+    name,
+    email: typeof body.email === "string" ? body.email.trim() : "",
+    role: ROLES.includes(body.role) ? body.role : "member",
+    createdAt: new Date(),
+  };
+  const col = await users();
+  const res = await col.insertOne(doc);
+  return NextResponse.json({ id: res.insertedId.toString(), ...doc }, { status: 201 });
+}
+
+// DELETE /api/users?id=<id> — remove a user.
+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 users();
+  await col.deleteOne({ _id: new ObjectId(id) });
+  return NextResponse.json({ ok: true });
+}

package/src/corpus/templates/admin-dashboard/services/web/app/layout.js

@@ -0,0 +1,39 @@
+// Root layout + plain inline CSS (no external CDNs, fonts, or stylesheets).
+export const metadata = {
+  title: "Admin dashboard",
+  description: "A persistent admin panel 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: 60rem; margin: 3rem auto; padding: 0 1.25rem; }
+  h1 { margin: 0 0 .25rem; }
+  h2 { margin: 2rem 0 .75rem; font-size: 1.1rem; }
+  .hint { margin: 0 0 1.5rem; opacity: .7; font-size: .9rem; }
+  .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
+  .metric { border: 1px solid #8883; border-radius: .5rem; padding: .9rem 1rem; }
+  .metric .n { font-size: 1.8rem; font-weight: 600; }
+  .metric .l { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
+  .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 { flex: 1; min-width: 8rem; }
+  button { padding: .5rem .9rem; border: 1px solid #8886; border-radius: .5rem; background: #6663; font: inherit; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
+  th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid #8883; }
+  th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
+  .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/admin-dashboard/services/web/app/page.js

@@ -0,0 +1,73 @@
+// Home page: a server component reads two collections (users + orders) straight
+// from Mongo, shows a metrics header (counts + revenue), and hands each resource
+// to a client management table (add / delete). 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 ResourceTable from "./resource-table.js";
+
+export const dynamic = "force-dynamic";
+
+const USER_ROLES = ["admin", "member", "viewer"];
+const ORDER_STATUSES = ["pending", "paid", "shipped"];
+
+async function load() {
+  const db = await getDb();
+  const [users, orders] = await Promise.all([
+    db.collection("users").find({}).sort({ createdAt: -1 }).toArray(),
+    db.collection("orders").find({}).sort({ createdAt: -1 }).toArray(),
+  ]);
+  return {
+    users: users.map((u) => ({
+      id: u._id.toString(),
+      name: u.name || "",
+      email: u.email || "",
+      role: USER_ROLES.includes(u.role) ? u.role : "member",
+    })),
+    orders: orders.map((o) => ({
+      id: o._id.toString(),
+      customer: o.customer || "",
+      amount: typeof o.amount === "number" ? o.amount : 0,
+      status: ORDER_STATUSES.includes(o.status) ? o.status : "pending",
+    })),
+  };
+}
+
+export default async function Page() {
+  const { users, orders } = await load();
+  const revenue = orders.reduce((sum, o) => sum + (o.amount || 0), 0);
+
+  return (
+    <main>
+      <h1>Admin</h1>
+      <p className="hint">Persisted in the grid-shared Mongo — survives refresh.</p>
+
+      <div className="metrics">
+        <div className="metric"><div className="n">{users.length}</div><div className="l">Users</div></div>
+        <div className="metric"><div className="n">{orders.length}</div><div className="l">Orders</div></div>
+        <div className="metric"><div className="n">${revenue.toLocaleString()}</div><div className="l">Revenue</div></div>
+      </div>
+
+      <h2>Users</h2>
+      <ResourceTable
+        resource="users"
+        columns={[
+          { key: "name", label: "Name", input: "text", required: true },
+          { key: "email", label: "Email", input: "text" },
+          { key: "role", label: "Role", input: "select", options: USER_ROLES },
+        ]}
+        initialRows={users}
+      />
+
+      <h2>Orders</h2>
+      <ResourceTable
+        resource="orders"
+        columns={[
+          { key: "customer", label: "Customer", input: "text", required: true },
+          { key: "amount", label: "Amount", input: "number" },
+          { key: "status", label: "Status", input: "select", options: ORDER_STATUSES },
+        ]}
+        initialRows={orders}
+      />
+    </main>
+  );
+}

package/src/corpus/templates/admin-dashboard/services/web/app/resource-table.js

@@ -0,0 +1,94 @@
+"use client";
+
+// Generic client management table for one admin resource. Renders a row of
+// inputs (driven by `columns`) and the current rows, and posts to
+// /api/<resource> (POST to add, DELETE to remove). Reused for users + orders.
+import { useState } from "react";
+
+function blankDraft(columns) {
+  const d = {};
+  for (const c of columns) d[c.key] = c.input === "select" ? c.options[0] : "";
+  return d;
+}
+
+export default function ResourceTable({ resource, columns, initialRows }) {
+  const [rows, setRows] = useState(initialRows);
+  const [draft, setDraft] = useState(() => blankDraft(columns));
+  const [busy, setBusy] = useState(false);
+
+  function set(key, value) {
+    setDraft((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function add(e) {
+    e.preventDefault();
+    const required = columns.find((c) => c.required);
+    if (required && !String(draft[required.key]).trim()) return;
+    setBusy(true);
+    const res = await fetch(`/api/${resource}`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(draft),
+    });
+    if (res.ok) {
+      const row = await res.json();
+      setRows((prev) => [row, ...prev]);
+      setDraft(blankDraft(columns));
+    }
+    setBusy(false);
+  }
+
+  async function remove(id) {
+    setBusy(true);
+    const res = await fetch(`/api/${resource}?id=${encodeURIComponent(id)}`, { method: "DELETE" });
+    if (res.ok) setRows((prev) => prev.filter((r) => r.id !== id));
+    setBusy(false);
+  }
+
+  return (
+    <div>
+      <form onSubmit={add} className="row">
+        {columns.map((c) =>
+          c.input === "select" ? (
+            <select key={c.key} value={draft[c.key]} onChange={(e) => set(c.key, e.target.value)} aria-label={c.label}>
+              {c.options.map((o) => (
+                <option key={o} value={o}>{o}</option>
+              ))}
+            </select>
+          ) : (
+            <input
+              key={c.key}
+              type={c.input === "number" ? "number" : "text"}
+              value={draft[c.key]}
+              onChange={(e) => set(c.key, e.target.value)}
+              placeholder={c.label}
+              aria-label={c.label}
+            />
+          ),
+        )}
+        <button type="submit" disabled={busy}>Add</button>
+      </form>
+      <table>
+        <thead>
+          <tr>
+            {columns.map((c) => <th key={c.key}>{c.label}</th>)}
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 && (
+            <tr><td className="empty" colSpan={columns.length + 1}>No {resource} yet.</td></tr>
+          )}
+          {rows.map((r) => (
+            <tr key={r.id}>
+              {columns.map((c) => <td key={c.key}>{String(r[c.key] ?? "")}</td>)}
+              <td>
+                <button type="button" onClick={() => remove(r.id)} disabled={busy}>Delete</button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/corpus/templates/admin-dashboard/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/admin-dashboard/services/web/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "my-admin",
+  "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/ai-app/README.md

@@ -0,0 +1,95 @@
+# ai-app template — AI chatbot on Next.js + the grid AI gateway + Mongo
+
+A minimal but real, deployable AI chatbot. A Next.js App Router app that calls
+the grid AI gateway (via `@cloudgrid-io/ai`) for replies and persists the
+conversation to the grid-shared MongoDB, so history survives refresh and is
+shared across sessions.
+
+## How the grid gives you AI + a database
+
+You do **not** set an API key or provision a database. In `cloudgrid.yaml` you
+declare `needs: { ai: true, database: true }`, and the grid:
+
+- wires the **AI gateway** with the app's in-grid identity — `@cloudgrid-io/ai`
+  `createClient()` auto-detects it, so there is **no API key to set**; and
+- provisions shared Mongo and injects the connection string as the
+  **`DATABASE_MONGODB_URL`** environment variable (plus the legacy `MONGODB_URL`
+  alias) — at dev-time (`grid dev`) and at runtime (after `grid plug`).
+
+### The AI call
+
+```js
+import { createClient } from "@cloudgrid-io/ai";
+const client = createClient();                       // zero-arg, no key
+const r = await client.chat({ messages: [{ role: "user", content: text }] });
+const reply = r.text ?? r.content;                   // reply text
+```
+
+`createClient()` takes no key — it uses the in-grid identity, so it only works
+inside a deployed grid app (or under `grid dev`). Do **not** pass or set an API
+key.
+
+### The database
+
+The app reads `process.env.DATABASE_MONGODB_URL` (with a legacy
+`process.env.MONGODB_URL` fallback) inside `getDb` in
+`services/web/lib/db.js` — **lazily, never at module top level** (a top-level
+read fails `next build`, which imports the module for route analysis before the
+grid injects the var). Never hardcode a connection string; never commit a secret.
+
+> **Declare `needs: { ai: true, database: true }` (the canonical shape).** The
+> deployer wires the AI gateway and provisions Mongo, injecting
+> `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 the combination).
+
+## Service layout
+
+App code lives under **`services/web/`**, not the template root. `path:` in
+`cloudgrid.yaml` is the URL mount, not the filesystem path — the service named
+`web` means the CLI looks for `services/web/`. Files at the root fail with
+`Error: Service directory not found: …/services/web`.
+
+## Run locally
+
+```bash
+cd services/web && npm install && cd -
+grid dev          # runs Next.js with the AI gateway + DATABASE_MONGODB_URL wired
+```
+
+## Deploy
+
+```bash
+grid plug         # builds + deploys the folder (async — poll status until live)
+```
+
+A runtime deploy is asynchronous: `plug` returns `status: building`; poll status
+until the app is live, then use the returned live URL. Re-plug the same entity to
+update the same URL.
+
+## File tree
+
+```
+cloudgrid.yaml                        # name + services.web (nextjs) + needs: { ai: true, database: true }
+services/web/package.json             # next, react, react-dom, @cloudgrid-io/ai, mongodb
+services/web/lib/db.js                # lazy Mongo client from DATABASE_MONGODB_URL (legacy MONGODB_URL fallback)
+services/web/app/layout.js            # root layout + inline CSS
+services/web/app/page.js              # server component: reads chat history from Mongo
+services/web/app/chat.js              # client component: sends messages, renders the log
+services/web/app/api/chat/route.js    # POST: createClient().chat(...) -> persist -> reply; GET: history
+```
+
+## Adapt it
+
+- Give the assistant a persona — pass a `{ role: "system", content: "…" }`
+  message ahead of the user message in the `chat({ messages })` call.
+- Send prior turns as context by including the stored history in `messages`.
+- Change the `messages` collection / fields; add users, sessions, titles.
+- Restyle the chat UI in `layout.js` / `chat.js`.
+
+## RAG / retrieval (not yet)
+
+To answer over **your own documents** (retrieval-augmented generation) you need a
+vector store — `needs: { vector: pgvector }`. That path is **not yet available**
+(platform issue #1545). Ship the plain chatbot now; add retrieval once the vector
+need is unblocked.

package/src/corpus/templates/ai-app/cloudgrid.yaml

@@ -0,0 +1,20 @@
+# Rename this chatbot. The grid wires the AI gateway (in-grid identity — no API
+# key) and injects the DB connection string as an environment variable at
+# runtime. Do NOT set an AI key, do NOT set the DB var yourself, and never commit
+# a connection string or secret.
+#
+# `needs: { ai: true, database: true }` is the canonical shape. The deployer
+# wires the AI gateway and provisions Mongo, injecting 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).
+name: my-chatbot
+services:
+  web:
+    type: nextjs
+    path: /
+needs:
+  ai: true
+  database: true
+# For retrieval-augmented (RAG) over your own docs, add `needs: { vector:
+# pgvector }` once platform issue #1545 ships — not yet available.