[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":53,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","connnolly","name","untitled-2280","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":-5,"_73":53,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","46f7509c-745a-11f0-bf4e-0224a6c84d84","main.tsx","fileId","3da210f4-745a-11f0-9fc0-0224a6c84d84","parentId","branchId","3d9f6ffc-745a-11f0-9fc0-0224a6c84d84","branchVersion",2,"latest",true,"createdAt",["D",1754659153487],1,"fileType","script","content","import { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n CheckCircle2,\n Cpu,\n Database,\n Globe2,\n Layers,\n MoveRight,\n Network,\n Shield,\n SlidersHorizontal,\n Sparkles,\n Zap,\n} from \"lucide-react\";\n\n/**\n * NATS for AI-Powered Applications — Interactive Markitecture\n * Restored full app with Synadia branding (colors + Inter font)\n */\n\n// ---- Brand Tokens -----------------------------------------------------------\nconst BRAND = {\n primary: \"#5E55ED\", // Synadia purple\n secondary: \"#3B82F6\", // Synadia blue\n accent: \"#A855F7\", // accent purple\n font:\n \"Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial\",\n};\n\n// Utility badge using brand colors\nfunction BrandBadge({ children }) {\n return (\n \n {children}\n \n );\n}\n\n// ---- Data Model -------------------------------------------------------------\n\nconst NODES = [\n {\n id: \"sources\",\n label: \"Data Sources\",\n subtitle: \"IoT • APIs • DBs\",\n icon: Database,\n },\n {\n id: \"ingest\",\n label: \"JetStream Ingest\",\n subtitle: \"Streams • Replay\",\n icon: Layers,\n },\n {\n id: \"kvobj\",\n label: \"KV / Object Store\",\n subtitle: \"RAG Memory\",\n icon: Shield,\n },\n {\n id: \"edge\",\n label: \"Edge AI (Nex)\",\n subtitle: \"Inference • ETL\",\n icon: Cpu,\n },\n {\n id: \"cloud\",\n label: \"Cloud AI Models\",\n subtitle: \"LLMs • Tools\",\n icon: Sparkles,\n },\n {\n id: \"humans\",\n label: \"Human Interfaces\",\n subtitle: \"Apps • Agents\",\n icon: Network,\n },\n {\n id: \"fabric\",\n label: \"NATS Core Fabric\",\n subtitle: \"Subjects • Services\",\n icon: Globe2,\n },\n];\n\nconst EDGES = [\n { from: \"sources\", to: \"ingest\", label: \"stream\" },\n { from: \"ingest\", to: \"kvobj\", label: \"persist\" },\n { from: \"edge\", to: \"ingest\", label: \"produce/consume\" },\n { from: \"cloud\", to: \"kvobj\", label: \"RAG\" },\n { from: \"humans\", to: \"cloud\", label: \"tools/assist\" },\n { from: \"humans\", to: \"edge\", label: \"local ops\" },\n { from: \"fabric\", to: \"edge\", label: \"route\" },\n { from: \"fabric\", to: \"cloud\", label: \"route\" },\n { from: \"fabric\", to: \"ingest\", label: \"route\" },\n { from: \"fabric\", to: \"humans\", label: \"route\" },\n];\n\nconst VALUE_PROPS = [\n {\n title: \"Simplicity\",\n desc: \"Single small binary, minimal moving parts, built-in clustering.\",\n icon: Zap,\n },\n {\n title: \"Fluidity\",\n desc: \"Move compute toward data or users without re-architecture.\",\n icon: MoveRight,\n },\n {\n title: \"Neutrality\",\n desc: \"Model- and cloud-agnostic. Avoid lock-in.\",\n icon: SlidersHorizontal,\n },\n {\n title: \"Global scale\",\n desc: \"Local dev to multi-cloud, multi-region, edge.\",\n icon: Globe2,\n },\n {\n title: \"Multi-pattern\",\n desc: \"Pub/Sub, Req/Rep, Streams, KV, Object Store, Services.\",\n icon: Layers,\n },\n];\n\nconst COMPARISON = [\n [\"Deployment size\", \"Single small Go binary\", \"JVM-based, large footprint\"],\n [\"Patterns\", \"Pub/Sub, Req/Rep, Streams, KV, Obj\", \"Primarily streaming\"],\n [\n \"Granularity\",\n \"Server-side filtering, wildcard subjects\",\n \"Partitions, coarse controls\",\n ],\n [\"Edge\", \"Fully supported, offline-first\", \"Heavy on constrained devices\"],\n [\"TCO\", \"Lower infra + simpler ops\", \"Higher infra & people cost\"],\n];\n\nconst CORE_STEPS = [\n {\n title: \"Data Ingest & Enrichment\",\n bullets: [\n \"Connectors stream data from IoT/APIs/DBs into JetStream.\",\n \"Persist to Streams + mirror across regions for locality.\",\n \"Use KV/Object Store for embeddings & RAG artifacts.\",\n ],\n },\n {\n title: \"Intelligent Routing\",\n bullets: [\n \"Subject-based addressing for fine-grained flows.\",\n \"Model-agnostic: swap LLMs/tools without rewiring.\",\n ],\n },\n {\n title: \"Distributed Compute with Nex\",\n bullets: [\n \"Deploy inference/ETL as NATS services.\",\n \"Migrate services toward data or users automatically.\",\n ],\n },\n {\n title: \"Persistence & Memory\",\n bullets: [\n \"JetStream for low-latency replay & durable history.\",\n \"KV for session state; Object Store for models/datasets.\",\n ],\n },\n {\n title: \"Edge & Offline\",\n bullets: [\n \"Run at stores/vehicles/factories with local autonomy.\",\n \"Sync gracefully when connectivity returns.\",\n ],\n },\n];\n\nconst USE_CASE = [\n \"Sensors stream telemetry to NATS.\",\n \"Edge AI service detects anomalies locally.\",\n \"Alerts + compressed telemetry sync to cloud when available.\",\n \"Central LLM uses RAG from mirrors for contextual responses.\",\n \"Engineers interact with dynamically deployed Nex tools.\",\n];\n\n// ---- Reusable UI ------------------------------------------------------------\n\nfunction Section({ title, children }) {\n return (\n

\n \n {title}\n \n

\n {children}\n

\n );\n}\n\nfunction ValueCard({ title, desc, Icon }) {\n return (\n \n \n \n \n \n \n {title}\n \n \n \n

{desc}

\n \n \n );\n}\n\nfunction Bullet({ children }) {\n return (\n

\n \n {children}\n

\n );\n}\n\nfunction Diagram() {\n const [highlight, setHighlight] = useState(null);\n\n const positions = useMemo(\n () => ({\n sources: { x: 80, y: 60 },\n ingest: { x: 320, y: 60 },\n kvobj: { x: 560, y: 60 },\n edge: { x: 160, y: 200 },\n cloud: { x: 480, y: 200 },\n humans: { x: 720, y: 200 },\n fabric: { x: 400, y: 140 },\n }),\n [],\n );\n\n return (\n \n \n \n Conceptual Flow\n \n \n \n

\n \n

{n.label}

\n {n.subtitle && (\n

\n {n.subtitle}\n

\n )}\n

\n {n.id === \"fabric\" && subjects}\n {n.id === \"ingest\" && replay}\n {n.id === \"kvobj\" && RAG}\n {n.id === \"edge\" && Nex}\n {n.id === \"cloud\" && LLMs}\n

\n \n \n );\n })}\n \n \n

\n Hover nodes to highlight routing paths. The fabric routes messages to\n services and stores using subjects and wildcards.\n

\n \n \n );\n}\n\nfunction ComparisonTable() {\n return (\n \n \n \n Benefits vs. Alternatives\n \n \n \n

\n \n \n \n \n \n \n \n \n \n {COMPARISON.map((row, i) => (\n \n \n \n \n \n ))}\n \n

Criteria	NATS (JetStream + Nex)	Kafka & Ecosystem
{row[0]}	{row[1]}	{row[2]}

\n \n \n );\n}\n\nfunction CoreArchitecture() {\n return (\n \n \n \n Core Architecture\n \n \n \n

\n {CORE_STEPS.map((s, idx) => (\n \n \n {idx + 1}. {s.title}\n \n \n {s.bullets.map((b, j) => {b})}\n \n \n ))}\n

\n \n \n );\n}\n\nfunction Architecture2Diagram() {\n // Layer definitions (no TypeScript types to keep this JSX-compatible)\n const topLayer = [\n {\n label: \"LLMs\",\n subtitle: \"OpenAI • Anthropic • Mistral • Local\",\n icon: Sparkles,\n },\n {\n label: \"AI Tools / Functions\",\n subtitle: \"LangChain • Microservices • Tools\",\n icon: Network,\n },\n { label: \"Connectors\", subtitle: \"RAG • Vector DBs • ETL\", icon: Layers },\n ];\n\n const middleLayer = [\n {\n label: \"Pub/Sub & Req/Rep\",\n subtitle: \"Intelligent routing\",\n icon: Globe2,\n },\n {\n label: \"KV & Object Store\",\n subtitle: \"Persistent memory\",\n icon: Database,\n },\n {\n label: \"Source & Mirror Streams\",\n subtitle: \"Data locality\",\n icon: Layers,\n },\n {\n label: \"Nex Distributed Compute\",\n subtitle: \"Colocate near data/users\",\n icon: Cpu,\n },\n ];\n\n const bottomLayer = [\n { label: \"Cloud\", subtitle: \"AWS • GCP • Azure\", icon: Globe2 },\n { label: \"Edge\", subtitle: \"Cloudflare • Akamai\", icon: Globe2 },\n {\n label: \"Far/Beyond Edge\",\n subtitle: \"IoT • Robotics • Vehicles\",\n icon: Globe2,\n },\n {\n label: \"On‑Prem / Hybrid\",\n subtitle: \"Brownfield compatible\",\n icon: Globe2,\n },\n ];\n\n // Basic geometry\n const width = 900;\n const height = 460;\n const bandPaddingX = 24;\n const bandPaddingY = 20;\n const boxWidth = 220;\n const boxHeight = 56;\n\n const topY = 80;\n const middleY = 230;\n const bottomY = 370;\n\n const xPositions = (count) => {\n const totalWidth = width - bandPaddingX * 2;\n const gap = (totalWidth - count * boxWidth) / (count - 1);\n return new Array(count).fill(0).map((_, i) =>\n bandPaddingX + i * (boxWidth + gap)\n );\n };\n\n const topX = xPositions(topLayer.length);\n const midX = xPositions(middleLayer.length);\n const botX = xPositions(bottomLayer.length);\n\n // Helper to render a labeled box\n const Box = ({ x, y, label, subtitle, Icon }) => (\n \n \n \n \n

\n {Icon && }\n

{label}

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n \n \n \n );\n\n // Flow steps: simple arrows with numbered markers\n const flows = [\n {\n num: 1,\n from: { x: topX[2] + boxWidth / 2, y: topY + boxHeight },\n to: { x: midX[2] + boxWidth / 2, y: middleY },\n },\n {\n num: 2,\n from: { x: middleY, placeholder: true },\n to: { x: topY, placeholder: true },\n }, // placeholder to keep index alignment\n {\n num: 3,\n from: { x: midX[3] + boxWidth / 2, y: middleY + boxHeight },\n to: { x: botX[1] + boxWidth / 2, y: bottomY },\n },\n {\n num: 4,\n from: { x: midX[0] + boxWidth / 2, y: middleY },\n to: { x: topX[0] + boxWidth / 2, y: topY + boxHeight },\n },\n {\n num: 5,\n from: { x: midX[0] + boxWidth / 2, y: middleY },\n to: { x: topX[1] + boxWidth / 2, y: topY + boxHeight },\n },\n ];\n\n return (\n \n \n \n Architecture 2 — Three‑Tier Layout\n \n \n \n

\n \n

\n\n

\n Core Narrative\n

\n Simplicity: small Go binary with Pub/Sub, Req/Rep, KV, Object\n Store, Streams\n
Fluidity: edge↔cloud mobility, mirroring for locality
Neutrality: model/vendor/cloud agnostic

\n Flow\n

1. Data Ingest → Connectors → JetStream (source/mirror)

2. Data Augmentation → KV/Object Store for context

3. Workload Mobility → Nex near data/users (edge/cloud)

4. AI Inference → Routed to best LLM (local/hosted)

5. Result Delivery → Real‑time apps, dashboards, agents

\n \n \n );\n}\n\nfunction Hero() {\n return (\n

\n \n NATS for AI‑Powered Applications\n \n

\n A neutral, simple, and fluid data & compute fabric for model‑agnostic\n AI systems.\n

\n {VALUE_PROPS.map((v, i) => (\n \n ))}\n

\n );\n}\n\nfunction CTA() {\n return (\n \n \n

\n Next steps\n

\n Prototype locally or in Synadia Cloud · Design for neutrality · Test\n fluidity across edge/cloud.\n

\n \n \n Download Diagram\n \n

\n \n \n );\n}\n\nexport default function App() {\n const [q, setQ] = useState(\"\");\n const filtered = useMemo(\n () =>\n CORE_STEPS.filter((s) =>\n (s.title + \" \" + s.bullets.join(\" \")).toLowerCase().includes(\n q.toLowerCase(),\n )\n ),\n [q],\n );\n\n return (\n \n {/* Header */}\n

\n \n N\n

\n Neutral Data & Compute Fabric\n

\n Any model · Any cloud · Any edge\n

\n \n Simplicity\n \n \n Fluidity\n \n \n Neutrality\n \n

\n \n\n \n\n \n \n Overview\n Architecture\n Architecture 2\n Use Case\n Compare\n \n\n \n \n \n \n Vision\n \n \n \n Architect AI systems that adapt to any model, any cloud, any edge\n — while providing low‑latency, persistent, and intelligent data\n distribution. With NATS as the core transport, you get a single\n lightweight fabric for real‑time messaging, persistence,\n distributed compute, and global reach — without vendor lock‑in.\n \n \n \n \n\n \n

\n Use subjects and services to keep data/compute flows loosely\n coupled and model‑agnostic.\n

\n \n

\n \n \n

\n {(q ? filtered : CORE_STEPS).map((s, idx) => (\n \n \n \n {idx + 1}. {s.title}\n \n \n \n {s.bullets.map((b, j) => {b})}\n \n \n ))}\n

\n \n \n \n\n \n \n \n \n AI‑Enhanced Field Service\n \n \n \n {USE_CASE.map((b, i) => {b})}\n \n \n \n \n\n \n \n \n\n \n \n \n \n Notes: Replace placeholders with your own benchmarks or TCO\n analysis. Keep the narrative focused on simplicity, fluidity, and\n neutrality.\n \n \n \n \n\n \n \n );\n}","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1754659153487],"children",[],[35],"3d9f0a58-745a-11f0-9fc0-0224a6c84d84",["D",1754659137814],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","ffdca6cc-55ff-4ccf-a010-18f9e71d2594","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","6b303590-0fbc-46d8-a44e-e68f092d28e0","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_114":110},"org",{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ1S21DQ001blMycndJZm9kem5RdjJlem9lVCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":147,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":-5,"_73":53,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":148,"_95":149,"_97":150,"_99":53},[144],"files",[144],"counts",{"_135":77,"_136":47,"_137":77,"_31":138,"_139":140},[133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":134},[35],"pulls","branches","forks",{"_141":77,"_143":77},"connections",{"_141":77,"_142":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":145,"_18":146},[],[35],["D",1754659137814],{"_11":12,"_114":110},{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_130":184,"_185":186,"_187":188,"_189":53,"_190":53,"_191":53,"_192":44,"_193":-5,"_194":-7,"_195":-7,"_196":77,"_197":53,"_198":53,"_199":-5,"_200":53,"_201":53,"_202":53,"_203":-5},"ENV",{"_155":156,"_157":158,"_159":16,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code