@cloudgrid-io/mcp 0.12.0 → 0.14.0

package/src/corpus/templates/product-catalog/services/web/app/catalog.js

@@ -0,0 +1,153 @@
+"use client";
+
+// Client component: renders the product grid, a category filter, and an admin
+// add/delete form. Reads/writes via /api/products (GET/POST/DELETE).
+import { useState, useMemo } from "react";
+
+const ALL = "All";
+
+function formatPrice(n) {
+  return "$" + Number(n || 0).toFixed(2);
+}
+
+export default function Catalog({ initialProducts }) {
+  const [products, setProducts] = useState(initialProducts);
+  const [active, setActive] = useState(ALL);
+  const [busy, setBusy] = useState(false);
+  const [form, setForm] = useState({
+    name: "",
+    price: "",
+    category: "",
+    description: "",
+    inStock: true,
+  });
+
+  const categories = useMemo(() => {
+    const set = new Set(products.map((p) => p.category).filter(Boolean));
+    return [ALL, ...Array.from(set).sort()];
+  }, [products]);
+
+  const visible = useMemo(
+    () => (active === ALL ? products : products.filter((p) => p.category === active)),
+    [products, active],
+  );
+
+  async function add(e) {
+    e.preventDefault();
+    const name = form.name.trim();
+    if (!name) return;
+    setBusy(true);
+    const res = await fetch("/api/products", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        name,
+        price: parseFloat(form.price) || 0,
+        category: form.category.trim() || "Uncategorized",
+        description: form.description.trim(),
+        inStock: form.inStock,
+      }),
+    });
+    if (res.ok) {
+      const product = await res.json();
+      setProducts((prev) => [product, ...prev]);
+      setForm({ name: "", price: "", category: "", description: "", inStock: true });
+    }
+    setBusy(false);
+  }
+
+  async function remove(id) {
+    setBusy(true);
+    const res = await fetch(`/api/products?id=${encodeURIComponent(id)}`, {
+      method: "DELETE",
+    });
+    if (res.ok) setProducts((prev) => prev.filter((p) => p.id !== id));
+    setBusy(false);
+  }
+
+  return (
+    <div>
+      <div className="filters">
+        {categories.map((c) => (
+          <button
+            key={c}
+            type="button"
+            className={"chip" + (c === active ? " active" : "")}
+            onClick={() => setActive(c)}
+          >
+            {c}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid">
+        {visible.length === 0 && <p className="empty">No products yet.</p>}
+        {visible.map((p) => (
+          <div className="card" key={p.id}>
+            <span className="cat">{p.category}</span>
+            <h3>{p.name}</h3>
+            <span className="price">{formatPrice(p.price)}</span>
+            {p.description && <p className="desc">{p.description}</p>}
+            <div className="foot">
+              <span className={"stock " + (p.inStock ? "in" : "out")}>
+                {p.inStock ? "In stock" : "Out of stock"}
+              </span>
+              <button
+                type="button"
+                className="del"
+                onClick={() => remove(p.id)}
+                disabled={busy}
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="admin">
+        <h2>Add a product</h2>
+        <form onSubmit={add}>
+          <div className="form-grid">
+            <input
+              value={form.name}
+              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+              placeholder="Name"
+              aria-label="Product name"
+            />
+            <input
+              value={form.price}
+              onChange={(e) => setForm((f) => ({ ...f, price: e.target.value }))}
+              placeholder="Price"
+              type="number"
+              step="0.01"
+              min="0"
+              aria-label="Price"
+            />
+            <input
+              value={form.category}
+              onChange={(e) => setForm((f) => ({ ...f, category: e.target.value }))}
+              placeholder="Category"
+              aria-label="Category"
+            />
+            <label className="check">
+              <input
+                type="checkbox"
+                checked={form.inStock}
+                onChange={(e) => setForm((f) => ({ ...f, inStock: e.target.checked }))}
+              />
+              In stock
+            </label>
+            <textarea
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+              placeholder="Description"
+              aria-label="Description"
+            />
+          </div>
+          <button type="submit" disabled={busy}>Add product</button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/corpus/templates/product-catalog/services/web/app/layout.js

@@ -0,0 +1,49 @@
+// Root layout + plain inline CSS (no external CDNs, fonts, or stylesheets).
+export const metadata = {
+  title: "Product Catalog",
+  description: "A product catalog 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; }
+  .hint { margin: 0 0 1.5rem; opacity: .7; font-size: .9rem; }
+  .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
+  .chip { padding: .35rem .8rem; border: 1px solid #8886; border-radius: 999px; background: none; font: inherit; cursor: pointer; }
+  .chip.active { background: #6663; font-weight: 600; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
+  .card { border: 1px solid #8883; border-radius: .75rem; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
+  .card h3 { margin: 0; }
+  .card .cat { font-size: .8rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
+  .card .price { font-size: 1.15rem; font-weight: 600; }
+  .card .desc { font-size: .9rem; opacity: .85; margin: 0; }
+  .card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .5rem; }
+  .stock { font-size: .8rem; }
+  .stock.in { color: #2a8a2a; }
+  .stock.out { color: #b03535; }
+  .empty { opacity: .6; grid-column: 1 / -1; }
+  .admin { margin-top: 2.5rem; border-top: 1px solid #8883; padding-top: 1.5rem; }
+  .admin h2 { font-size: 1.1rem; }
+  .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .75rem; }
+  input, select, textarea { padding: .5rem .75rem; border: 1px solid #8886; border-radius: .5rem; font: inherit; width: 100%; background: none; color: inherit; }
+  textarea { grid-column: 1 / -1; resize: vertical; min-height: 3rem; }
+  label.check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
+  label.check input { width: auto; }
+  button { padding: .5rem .9rem; border: 1px solid #8886; border-radius: .5rem; background: #6663; font: inherit; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  .del { border-color: #b0353566; background: #b0353522; }
+`;
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <style dangerouslySetInnerHTML={{ __html: css }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/src/corpus/templates/product-catalog/services/web/app/page.js

@@ -0,0 +1,36 @@
+// Home page: a server component reads the products straight from Mongo, and a
+// small client component renders the grid, the category filter, and the admin
+// add/delete form (posting to 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 Catalog from "./catalog.js";
+
+export const dynamic = "force-dynamic";
+
+async function listProducts() {
+  const db = await getDb();
+  const items = await db
+    .collection("products")
+    .find({})
+    .sort({ createdAt: -1 })
+    .toArray();
+  return items.map((p) => ({
+    id: p._id.toString(),
+    name: p.name,
+    price: typeof p.price === "number" ? p.price : 0,
+    category: p.category || "Uncategorized",
+    description: p.description || "",
+    inStock: !!p.inStock,
+  }));
+}
+
+export default async function Page() {
+  const products = await listProducts();
+  return (
+    <main>
+      <h1>Product Catalog</h1>
+      <p className="hint">Browse products by category — persisted in the grid-shared Mongo.</p>
+      <Catalog initialProducts={products} />
+    </main>
+  );
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "product-catalog",
+  "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/product-launch/README.md

@@ -0,0 +1,46 @@
+# Template: product-launch (static)
+
+A single self-contained HTML product-launch page. **No infrastructure** — no
+database, no backend, no `needs:`. Everything (layout, styles, countdown) lives
+in one `index.html` with inline CSS and inline JS. State (the countdown) is
+computed client-side; there is nothing to persist.
+
+## What it is
+
+A one-page launch announcement with:
+
+- a sticky nav + primary CTA,
+- a hero with headline, subhead, launch badge, and a **product image**
+  (an inline SVG placeholder — swap it for a real screenshot or photo),
+- a **launch countdown** to a target date/time,
+- a **key features** grid,
+- a **launch offer** block (price / was-price / fine print + CTA),
+- **social proof** (headline stats + testimonials),
+- a footer.
+
+## How to adapt
+
+1. Replace the `{{PLACEHOLDER}}` tokens with the user's content (product name,
+   hero copy, features, offer, quotes, footer).
+2. Set the countdown target: replace `{{LAUNCH_DATETIME_ISO}}` with an ISO 8601
+   instant like `2026-09-01T09:00:00Z`. If it is left unset or invalid, the
+   timer falls back to 14 days from load.
+3. Swap the hero product image: replace the inline `<svg>` in `.shot` with a
+   real screenshot. **Keep it self-contained** — inline SVG or a `data:` URI,
+   never an external URL, `<script src>`, `<link href>`, CDN, or web font.
+4. Add or remove `.feature` and `.quote` blocks freely (see the
+   `FEATURES_START`/`FEATURES_END` and `QUOTES_START`/`QUOTES_END` markers).
+
+## How it deploys
+
+Deploys as an **inspiration** — instant, and works on the **hosted** edition
+(Claude Web) as well as local. Use **`gridctl_drop`** (or `gridctl_plug` with the
+inline HTML): you get a live share URL right away. Re-dropping the same entity
+updates the same URL, so the user iterates on one link.
+
+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", "product-launch")` and fill in the user's content.

package/src/corpus/templates/product-launch/cloudgrid.yaml

@@ -0,0 +1,234 @@
+# ============================================================================
+# cloudgrid.yaml — Complete Example
+# ============================================================================
+#
+# This file shows EVERY field the platform supports, with comments explaining
+# each one. It is a reference — no real project would use all of these at once.
+#
+# STANDARD: every CloudGrid template ships its cloudgrid.yaml in THIS full form.
+# Uncomment ONLY the fields the archetype needs (always: name + services; plus
+# needs: for runtime apps). Leave everything else commented. Comments are
+# ignored by the parser, so the file deploys to exactly the active fields.
+#
+# Only two fields are required: name and services. Everything else is optional.
+# Full docs: docs/cloudgrid-yaml-reference.md
+#
+# THIS TEMPLATE (product-launch): a single self-contained static page. The
+# active fields are exactly name + services.web{type: static, path: /}; there
+# are no needs. This cloudgrid.yaml is the reference for plugging the page as an
+# OWNED static runtime; the fast path is to deploy it as an INSPIRATION via
+# gridctl_drop (instant, and works on the hosted edition too).
+# ============================================================================
+
+
+# ─── IDENTITY ───────────────────────────────────────────────────────────────
+
+# Entity slug (REQUIRED). 2-42 chars, lowercase alphanumeric + hyphens.
+# Must start and end with a letter or digit.
+# Becomes part of your public URL: <name>-<4hex>.<org>.cloudgrid.io
+name: product-launch
+
+# One-line summary. Max 280 chars. If omitted, Grid Brain auto-generates one.
+# description: Order processing API for the e-commerce platform
+
+# Single emoji or short text shown as the entity icon. Max 64 chars.
+# icon: "📦"
+
+# Entity type: 'app' (default) or 'agent'. An agent is an app with an agent: block.
+# kind: app
+
+
+# ─── NETWORKING ─────────────────────────────────────────────────────────────
+
+# Whether this entity serves public HTTP traffic.
+# true = public URL + Ingress (default). false = internal only.
+# expose: true
+
+# Additional domain names this entity serves on (the platform URL is always active).
+# custom_domains:
+#   - orders.example.com
+#   - shop.example.com
+
+
+# ─── HEALTH PROBE (entity-level override) ──────────────────────────────────
+
+# Override the default health check for the entire entity.
+# probe:
+#   path: /healthz               # HTTP path to probe (default: /).
+#   expected: "<500"             # '<500' (default), '200', '2xx'.
+
+
+# ─── DEPLOY NOTIFICATIONS ──────────────────────────────────────────────────
+
+# Slack notification to the org's default channel on deploy failure.
+# true = notify (default), false = silent.
+# notify: true
+
+
+# ─── SCALING ────────────────────────────────────────────────────────────────
+
+# Replica scaling intent.
+#   'auto'  — platform decides from the grid tier (default).
+#   'alert' — single-replica, emit a SPOF warning at plug time.
+#   1-10    — explicit replica count, clamped to the grid max.
+# scale: auto
+
+
+# ─── INFRASTRUCTURE NEEDS ──────────────────────────────────────────────────
+#
+# Declare infrastructure; the platform provisions it and injects connection
+# details as env vars. Nine needs: database, cache, kv, queue, pubsub, vector,
+# object_storage, disk, ai. Simplest form is `true`.
+#
+# needs:
+#   # database — MongoDB. Injects DATABASE_MONGODB_URL (+ legacy MONGODB_URL).
+#   #   true | pool | dedicated | { tier: external, secret: MY_DB }
+#   database: true
+#   # cache — Redis, LRU eviction (derived data). Injects CACHE_REDIS_URL (+ REDIS_URL).
+#   #   true | redis | { engine: external, secret: MY_REDIS_URL }
+#   cache: true
+#   # kv — Redis, no eviction (durable: flags, idempotency). Injects KV_REDIS_URL.
+#   kv: true
+#   # queue — Redis job-queue substrate (BullMQ). Injects QUEUE_REDIS_URL.
+#   queue: true
+#   # pubsub — Redis broadcast pub/sub. Injects PUBSUB_REDIS_URL.
+#   pubsub: true
+#   # vector — pgvector on Postgres. Injects VECTOR_PGVECTOR_URL (+ PGVECTOR_URL).
+#   #   true | pgvector | { engine: pgvector, dim: 1536 }
+#   vector: pgvector
+#   # object_storage — GCS bucket. Injects OBJECT_STORAGE_GCS_BUCKET, _GCS_REGION.
+#   #   true | { size: 10Gi }
+#   object_storage: true
+#   # disk — persistent FS mount (PVC). Injects DISK_PATH. Pins to 1 replica.
+#   #   true | { size: 1Gi, mount: /var/data }  (forbidden: /proc /sys /dev)
+#   disk: true
+#   # ai — AI Gateway via @cloudgrid-io/ai. Injects AI_GATEWAY_URL. true | false.
+#   ai: true
+
+
+# ─── INTER-ENTITY COMMUNICATION ────────────────────────────────────────────
+
+# Entities this app calls (outbound). Service-account token injected per pair.
+# calls:
+#   - org:atomic/billing-api
+
+# Inbound caller policy — who can call YOUR entity.
+# callers:
+#   policy: auto                 # 'auto' | 'manual' (default).
+#   scope: org                   # 'org' (default) | 'space' | 'explicit'.
+#   fallback: deny               # 'deny' (default) | 'warn'.
+#   # allowed_apps:              # required only when scope: explicit
+#   #   - org:atomic/frontend
+
+
+# ─── VAULT ──────────────────────────────────────────────────────────────────
+
+# Map org vault items to env vars. Keys UPPER_SNAKE_CASE; values = vault item keys.
+# vault:
+#   STRIPE_KEY: stripe-live-key
+#   SENDGRID_API_KEY: sendgrid-key
+
+
+# ─── CONNECTORS AND HOOKS ──────────────────────────────────────────────────
+
+# connectors:
+#   - id: team-slack
+#     target: org                # 'system' | 'org'.
+#     channel: "#deploys"
+# hooks:
+#   - on: deploy.failed          # release.published | deploy.failed | feedback.received | entity.created
+#     via: team-slack
+#     template: "Deploy failed for {entity_name}: {error}"
+#     channel: "#alerts"
+# triggers:
+#   - from: team-slack
+#     event: message
+#     channel: "#support"
+#     route: /webhooks/slack
+
+
+# ─── LOCAL DEVELOPMENT ──────────────────────────────────────────────────────
+
+# Config for `grid dev`. Redact fields in dev data snapshots.
+# dev:
+#   snapshot:
+#     mask:
+#       - users.email
+#       - users.phone
+
+
+# ─── AGENT METADATA ────────────────────────────────────────────────────────
+
+# An agent is an app with kind: agent (above) and an agent: block.
+# agent:
+#   purpose: Sync customer data from external CRM every night
+#   schedule: "0 2 * * *"
+#   trigger: webhook
+
+
+# ─── PRIVATE RESOURCE AUTO-DEPENDENCIES ────────────────────────────────────
+
+# When true (default), private resources are auto-injected as depends_on.
+# auto_depends_on_private_requires: true
+
+
+# ─── SERVICES (REQUIRED) ───────────────────────────────────────────────────
+#
+# At least one service is required. Key = service name (slug rules).
+# Types: node, nextjs, python, static, cron.
+#
+services:
+  web:
+    # type (REQUIRED): node | nextjs | python | static | cron
+    type: static
+    # HTTP route: '/' | '/api' | false (internal) | omitted (=false + warning).
+    # Only one service per entity can claim '/'.
+    path: /
+    # Container port (default 8080; read process.env.PORT). Not for cron.
+    # port: 3000
+    # nextjs only: base_image: distroless (default) | alpine
+    # base_image: distroless
+    # node only: lang: javascript (default) | typescript
+    # lang: typescript
+    # Custom source location (default services/<name>/). '.' = project root.
+    # source:
+    #   path: src/worker
+    # Health probe: false/omitted (TCP) | true (/health) | "/path" | {path,expected}
+    # health:
+    #   path: /api/health
+    #   expected: "200"
+    # Static runtime env vars (strings). Reserved: PORT, APP_NAME, SERVICE_NAME,
+    # NODE_ENV, MONGODB_URL, REDIS_URL, AI_GATEWAY_URL, N8N_WEBHOOK_URL, CLOUDGRID_*.
+    # env:
+    #   LOG_LEVEL: info
+    # Sibling services/private resources that must be Ready first (no cron, no cycles).
+    # depends_on:
+    #   - worker
+    # Per-service needs override (merges with app-level needs).
+    # needs:
+    #   queue: true
+    # Static-only build step:
+    # build:
+    #   command: npm run build
+    #   output: dist
+    #   env:
+    #     VITE_API_URL: https://api.example.com
+    # node_version: "22"          # static build step: '18'|'20'|'22'|'24' (quoted)
+    # Cron-only: schedule (REQUIRED), timezone (UTC|EST|PST), run (job | https URL)
+    # schedule: "0 9 * * 1"
+    # timezone: UTC
+    # run: job
+    # Verbose per-service persistence (prefer needs.disk):
+    # persist:
+    #   - name: scratch
+    #     path: /tmp/scratch
+    #     size: 500Mi
+
+
+# ============================================================================
+# NOTES
+# - NOT here: org:/entity_id: (→ .cloudgrid/link.json), secrets (→ grid secrets set),
+#   Dockerfile (platform generates from services.*.type).
+# - Deploy: grid plug   |   Local with grid resources: grid dev
+# - Full reference: docs/cloudgrid-yaml-reference.md  |  CLI: docs/cli-reference.md
+# ============================================================================