Spaces:

usmar
/

sodabar

Running

App Files Files Community

usmar commited on 19 days ago

Commit

9d89547

verified ·

1 Parent(s): 5b6d6ec

Upload folder using huggingface_hub

Browse files

Files changed (3) hide show

README.md +12 -5
index.html +283 -18
shim.js +118 -0

README.md CHANGED Viewed

@@ -1,10 +1,17 @@
 ---
-title: Sodabar
-emoji: 👀
-colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sodabar
+emoji: 🥤
+colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+license: mit
+short_description: NYC Open Data on tap — MCP tool console demo
 ---
+# sodabar — open data on tap
+Static demo of the [sodabar](https://github.com/UsmarHaider/sodabar) MCP
+server's tool console. The four MCP tools are answered **in your browser**,
+straight from the live NYC Open Data APIs (Socrata sends CORS `*`).
+The full project — MCP server, FastAPI playground, tests — lives on GitHub.

index.html CHANGED Viewed

@@ -1,19 +1,284 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>sodabar — open data on tap</title>
+<style>
+  :root {
+    --bg: #fcfcfb; --panel: #ffffff; --ink: #1c2733; --ink2: #5a6a7a; --ink3: #8b98a5;
+    --line: #e3e8ee; --blue: #2a78d6; --orange: #eb6834; --blue-soft: #eaf2fc;
+    --chip: #f1f4f8; --code-bg: #f6f8fa; --ok: #1a7f4e;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #15191f; --panel: #1c222b; --ink: #e8edf2; --ink2: #a7b3c0; --ink3: #6f7d8c;
+      --line: #2c3540; --blue: #4a8fd9; --orange: #e8632f; --blue-soft: #1e2c3d;
+      --chip: #242c37; --code-bg: #12161c; --ok: #3dbf7f;
+    }
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    background: var(--bg); color: var(--ink);
+    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    padding: 18px 22px;
+  }
+  header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
+  h1 { font-size: 21px; letter-spacing: -0.02em; }
+  h1 .cup { color: var(--orange); }
+  .tag { color: var(--ink2); font-size: 13px; }
+  .live { margin-left: auto; font-size: 12px; color: var(--ok); white-space: nowrap; }
+  .live::before { content: "●"; margin-right: 5px; }
+  .grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
+  @media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
+  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
+  .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
+  .tool {
+    border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer;
+    background: none; color: var(--ink2); font: inherit; font-size: 12.5px; text-align: left;
+  }
+  .tool code { font-size: 11.5px; }
+  .tool.on { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }
+  label { display: block; font-size: 11.5px; color: var(--ink2); margin: 8px 0 3px; }
+  input, textarea {
+    width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px;
+    background: var(--bg); color: var(--ink); font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  input:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent; }
+  .row { display: flex; gap: 8px; margin-top: 12px; }
+  .btn {
+    border: 0; border-radius: 8px; padding: 8px 14px; font: 600 13px/1 inherit;
+    cursor: pointer; font-family: inherit;
+  }
+  .btn.run { background: var(--blue); color: #fff; flex: 1; }
+  .btn.sample { background: var(--chip); color: var(--ink); }
+  .btn:active { transform: translateY(1px); }
+  .callbox { margin-bottom: 10px; }
+  .callbox .lbl, .out .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink3); margin-bottom: 5px; }
+  pre.call {
+    background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px;
+    padding: 9px 11px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+    overflow-x: auto; color: var(--ink2);
+  }
+  pre.call .k { color: var(--blue); }
+  pre.call .v { color: var(--orange); }
+  .meta { font-size: 12px; color: var(--ink2); margin: 8px 0 6px; }
+  .meta b { color: var(--ink); }
+  table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
+  th, td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line); }
+  th { color: var(--ink2); font-weight: 600; font-size: 11.5px; }
+  td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+  td.num { text-align: right; font-variant-numeric: tabular-nums; }
+  th.num { text-align: right; }
+  .chart { margin: 10px 0 4px; }
+  .bar-row { display: grid; grid-template-columns: 120px 1fr 70px; gap: 8px; align-items: center; margin-bottom: 4px; }
+  .bar-label { font-size: 12px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
+  .bar-track { height: 14px; position: relative; }
+  .bar-fill { height: 100%; background: var(--blue); border-radius: 0 4px 4px 0; min-width: 2px; }
+  .bar-row:hover .bar-fill { background: var(--orange); }
+  .bar-val { font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
+  .err { color: var(--orange); font-size: 13px; padding: 6px 0; }
+  .empty { color: var(--ink3); font-size: 13px; padding: 20px 0; text-align: center; }
+  .scroll { max-height: 300px; overflow: auto; }
+  footer { margin-top: 12px; font-size: 11.5px; color: var(--ink3); }
+  footer a { color: var(--blue); text-decoration: none; }
+</style>
+</head>
+<body>
+<header>
+  <h1>sodabar<span class="cup"> ▙</span></h1>
+  <span class="tag">open data on tap — the MCP tool console</span>
+  <span class="live" id="live">data.cityofnewyork.us</span>
+</header>
+<div class="grid">
+  <div class="panel">
+    <div class="tools" id="tools"></div>
+    <form id="form" onsubmit="return runTool(event)"><div id="fields"></div>
+      <div class="row">
+        <button class="btn run" type="submit">Call tool</button>
+        <button class="btn sample" type="button" onclick="loadSample()">Try a sample</button>
+      </div>
+    </form>
+  </div>
+  <div class="panel">
+    <div class="callbox"><div class="lbl">tools/call</div><pre class="call" id="call">{ }</pre></div>
+    <div class="out">
+      <div class="lbl">result</div>
+      <div id="meta" class="meta"></div>
+      <div id="result"><div class="empty">Pick a tool and call it — or press “Try a sample”.</div></div>
+    </div>
+  </div>
+</div>
+<footer>Four MCP tools · SoQL queries capped at 1000 rows · same responses an LLM client sees</footer>
+<script src="shim.js"></script>
+<script>
+const TOOLS = {
+  query_dataset: {
+    fields: [
+      ["dataset_id", "erm2-nwe9"], ["select", ""], ["where", ""],
+      ["group", ""], ["order", ""], ["limit", "50"],
+    ],
+    endpoint: (a) => ["/api/query", a],
+  },
+  search_datasets: {
+    fields: [["query", "rat sightings"], ["limit", "10"]],
+    endpoint: (a) => ["/api/search", { q: a.query, limit: a.limit }],
+  },
+  get_schema: {
+    fields: [["dataset_id", "erm2-nwe9"]],
+    endpoint: (a) => [`/api/schema/${encodeURIComponent(a.dataset_id)}`, {}],
+  },
+  profile_column: {
+    fields: [["dataset_id", "erm2-nwe9"], ["column", "borough"], ["top", "10"]],
+    endpoint: (a) => ["/api/profile", a],
+  },
+};
+let current = "query_dataset";
+let sampleIndex = 0;
+function renderTools() {
+  const box = document.getElementById("tools");
+  box.innerHTML = "";
+  for (const name of Object.keys(TOOLS)) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "tool" + (name === current ? " on" : "");
+    b.innerHTML = `<code>${name}</code>`;
+    b.onclick = () => { current = name; renderTools(); renderFields({}); };
+    box.appendChild(b);
+  }
+}
+function renderFields(values) {
+  const box = document.getElementById("fields");
+  box.innerHTML = "";
+  for (const [name, placeholder] of TOOLS[current].fields) {
+    const l = document.createElement("label");
+    l.textContent = name;
+    const i = document.createElement("input");
+    i.name = name;
+    i.placeholder = placeholder;
+    if (values[name] !== undefined) i.value = values[name];
+    box.append(l, i);
+  }
+}
+function formArgs() {
+  const args = {};
+  for (const input of document.querySelectorAll("#fields input"))
+    if (input.value.trim()) args[input.name] = input.value.trim();
+  return args;
+}
+function showCall(tool, args) {
+  const argsJson = JSON.stringify(args, null, 2).replace(/"([^"]+)":/g, '<span class="k">"$1"</span>:')
+    .replace(/: "([^"]*)"/g, ': <span class="v">"$1"</span>');
+  document.getElementById("call").innerHTML =
+    `{ <span class="k">"name"</span>: <span class="v">"${tool}"</span>, <span class="k">"arguments"</span>: ${argsJson} }`;
+}
+async function runTool(ev) {
+  if (ev) ev.preventDefault();
+  const args = formArgs();
+  showCall(current, args);
+  const [path, params] = TOOLS[current].endpoint(args);
+  const qs = new URLSearchParams(params).toString();
+  const t0 = performance.now();
+  const resultBox = document.getElementById("result");
+  const meta = document.getElementById("meta");
+  meta.textContent = "…";
+  resultBox.innerHTML = "";
+  try {
+    const res = await fetch(path + (qs ? "?" + qs : ""));
+    const body = await res.json();
+    const ms = Math.round(performance.now() - t0);
+    if (!res.ok) throw new Error(body.detail || res.statusText);
+    render(body, ms);
+  } catch (e) {
+    meta.textContent = "";
+    resultBox.innerHTML = `<div class="err">✗ ${e.message}</div>`;
+  }
+  return false;
+}
+function render(body, ms) {
+  const meta = document.getElementById("meta");
+  const box = document.getElementById("result");
+  box.innerHTML = "";
+  if (Array.isArray(body)) {
+    meta.innerHTML = `<b>${body.length}</b> row${body.length === 1 ? "" : "s"} · ${ms} ms`;
+    if (!body.length) { box.innerHTML = '<div class="empty">No rows.</div>'; return; }
+    const cols = Object.keys(body[0]);
+    if (cols.length === 2 && body.length <= 30 && body.every(r => isFinite(+r[cols[1]]))) {
+      box.appendChild(barChart(body, cols));
+    }
+    box.appendChild(tableOf(body, cols));
+  } else if (body && body.columns) {
+    meta.innerHTML = `<b>${body.name || body.id}</b> · ${body.columns.length} columns`;
+    box.appendChild(tableOf(body.columns.map(c => ({ column: c.field_name, type: c.type })), ["column", "type"]));
+  } else {
+    meta.textContent = "";
+    box.innerHTML = `<pre class="call">${JSON.stringify(body, null, 2)}</pre>`;
+  }
+}
+function tableOf(rows, cols) {
+  const wrap = document.createElement("div");
+  wrap.className = "scroll";
+  const numeric = cols.map(c => rows.every(r => r[c] === undefined || isFinite(+r[c])));
+  let html = "<table><tr>" + cols.map((c, i) => `<th${numeric[i] ? ' class="num"' : ""}>${c}</th>`).join("") + "</tr>";
+  for (const r of rows.slice(0, 200))
+    html += "<tr>" + cols.map((c, i) => {
+      let v = r[c] === undefined ? "" : String(r[c]);
+      if (numeric[i] && v) v = (+v).toLocaleString();
+      return `<td${numeric[i] ? ' class="num"' : ""}>${escapeHtml(v).slice(0, 120)}</td>`;
+    }).join("") + "</tr>";
+  wrap.innerHTML = html + "</table>";
+  return wrap;
+}
+function barChart(rows, cols) {
+  const box = document.createElement("div");
+  box.className = "chart";
+  const max = Math.max(...rows.map(r => +r[cols[1]]));
+  for (const r of rows.slice(0, 12)) {
+    const v = +r[cols[1]];
+    const row = document.createElement("div");
+    row.className = "bar-row";
+    row.title = `${r[cols[0]]}: ${v.toLocaleString()}`;
+    row.innerHTML = `<div class="bar-label">${escapeHtml(String(r[cols[0]] ?? "—"))}</div>
+      <div class="bar-track"><div class="bar-fill" style="width:${Math.max(1, v / max * 100)}%"></div></div>
+      <div class="bar-val">${v.toLocaleString()}</div>`;
+    box.appendChild(row);
+  }
+  return box;
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+}
+async function loadSample() {
+  const res = await fetch(`/sample?index=${sampleIndex}`);
+  const s = await res.json();
+  sampleIndex += 1;
+  current = s.tool;
+  renderTools();
+  const values = {};
+  for (const [k, v] of Object.entries(s.args)) values[k === "query" ? "query" : k] = v;
+  renderFields(values);
+  runTool();
+}
+renderTools();
+renderFields({});
+const qs = new URLSearchParams(location.search);
+if (qs.get("demo")) {
+  if (qs.get("err")) {
+    // guardrail demo: a malformed tool call, answered with a readable error
+    current = "query_dataset";
+    renderTools();
+    renderFields({ dataset_id: "311-complaints", select: "borough, count(*)" });
+    runTool();
+  } else {
+    sampleIndex = +(qs.get("sample") || 0);
+    loadSample();
+  }
+}
+</script>
+</body>
 </html>

shim.js ADDED Viewed

	@@ -0,0 +1,118 @@

+// Static-Space shim: answer the playground's own /api/* and /sample routes
+// in the browser by calling the Socrata APIs directly (they send
+// Access-Control-Allow-Origin: *). This keeps index.html identical to the
+// FastAPI-served version — only the transport changes.
+(function () {
+  const DOMAIN = "data.cityofnewyork.us";
+  const ID_RE = /^[a-z0-9]{4}-[a-z0-9]{4}$/;
+  const MAX_LIMIT = 1000;
+  const SAMPLES = [
+    {
+      title: "311 complaints by borough, 2026",
+      tool: "query_dataset",
+      args: {
+        dataset_id: "erm2-nwe9",
+        select: "borough, count(*) as n",
+        where: "created_date > '2026-01-01T00:00:00'",
+        group: "borough",
+        order: "n DESC",
+      },
+    },
+    { title: "Search the catalog for squirrels", tool: "search_datasets", args: { query: "squirrel census" } },
+    {
+      title: "Top complaint types this year",
+      tool: "profile_column",
+      args: { dataset_id: "erm2-nwe9", column: "complaint_type", top: 10 },
+    },
+    { title: "Schema of the 2015 Street Tree Census", tool: "get_schema", args: { dataset_id: "uvpi-gqnh" } },
+  ];
+  const ok = (body) => new Response(JSON.stringify(body), { status: 200, headers: { "Content-Type": "application/json" } });
+  const fail = (status, detail) => new Response(JSON.stringify({ detail }), { status, headers: { "Content-Type": "application/json" } });
+  function checkId(id) {
+    if (!ID_RE.test((id || "").trim().toLowerCase()))
+      throw { status: 422, detail: `invalid dataset id '${id}': expected the Socrata 4x4 form, e.g. 'erm2-nwe9'` };
+    return id.trim().toLowerCase();
+  }
+  const clamp = (v, dflt) => Math.max(1, Math.min(parseInt(v || dflt, 10) || dflt, MAX_LIMIT));
+  async function upstream(url) {
+    const res = await fetch(url);
+    if (!res.ok) {
+      let detail = "";
+      try { detail = (await res.json()).message || ""; } catch (e) { /* not json */ }
+      if (res.status === 404) throw { status: 502, detail: "not found — check the dataset id and domain" };
+      if (res.status === 400) throw { status: 502, detail: `the API rejected the query (${detail || "bad request"}) — check your SoQL syntax` };
+      throw { status: 502, detail: `HTTP ${res.status} from Socrata: ${detail}` };
+    }
+    return res.json();
+  }
+  async function route(path, params) {
+    if (path === "/sample") {
+      const i = parseInt(params.get("index") || "0", 10) || 0;
+      return SAMPLES[((i % SAMPLES.length) + SAMPLES.length) % SAMPLES.length];
+    }
+    if (path === "/api/search") {
+      const data = await upstream(
+        "https://api.us.socrata.com/api/catalog/v1?domains=" + DOMAIN +
+        "&only=dataset&q=" + encodeURIComponent(params.get("q") || "") +
+        "&limit=" + clamp(params.get("limit"), 10)
+      );
+      return (data.results || []).map((r) => ({
+        id: r.resource.id,
+        name: r.resource.name,
+        description: (r.resource.description || "").slice(0, 500),
+        updated: r.resource.data_updated_at,
+        domain: DOMAIN,
+      }));
+    }
+    if (path.startsWith("/api/schema/")) {
+      const id = checkId(path.split("/").pop());
+      const data = await upstream(`https://${DOMAIN}/api/views/${id}.json`);
+      return {
+        id,
+        domain: DOMAIN,
+        name: data.name,
+        description: (data.description || "").slice(0, 1000),
+        columns: (data.columns || [])
+          .filter((c) => !String(c.fieldName || "").startsWith(":"))
+          .map((c) => ({ field_name: c.fieldName, type: c.dataTypeName, description: (c.description || "").slice(0, 300) })),
+      };
+    }
+    if (path === "/api/query" || path === "/api/profile") {
+      const id = checkId(params.get("dataset_id"));
+      const q = new URLSearchParams();
+      if (path === "/api/profile") {
+        const col = params.get("column") || "";
+        q.set("$select", `${col}, count(*) as count`);
+        q.set("$group", col);
+        q.set("$order", "count DESC");
+        q.set("$limit", clamp(params.get("top"), 20));
+      } else {
+        for (const [key, dollar] of [["select", "$select"], ["where", "$where"], ["group", "$group"], ["order", "$order"]])
+          if (params.get(key)) q.set(dollar, params.get(key));
+        q.set("$limit", clamp(params.get("limit"), 50));
+        if (+params.get("offset")) q.set("$offset", +params.get("offset"));
+      }
+      return upstream(`https://${DOMAIN}/resource/${id}.json?` + q.toString());
+    }
+    throw { status: 404, detail: "unknown route " + path };
+  }
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async function (input, init) {
+    const url = typeof input === "string" ? input : input.url;
+    if (url.startsWith("/api/") || url.startsWith("/sample")) {
+      const u = new URL(url, location.origin);
+      try {
+        return ok(await route(u.pathname, u.searchParams));
+      } catch (e) {
+        return fail(e.status || 502, e.detail || String(e));
+      }
+    }
+    return realFetch(input, init);
+  };
+})();