\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","label",[98],"permalink","https://www.val.town/x/connnolly/untitled-2280/code/main.tsx","extension","actionData","errors"]