From fa5c48047e435dc1bd1cc795e0f1237a11e609cb Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Thu, 1 Jan 2026 02:42:43 +1000 Subject: [PATCH] feat: rewrite integrations page to capture the novel AI infrastructure paradigm - Frames HLLM, TPMJS, BlocksAI as three layers of an AI infrastructure stack - HLLM = Orchestration layer (Kubernetes of AI) - TPMJS = Distribution layer (npm of AI) - BlocksAI = Semantic layer (TypeScript of AI) - Articulates the paradigm shift from monolithic agents to composable systems - Adds web stack analogy to explain separation of concerns - Focuses on the 5 novel ideas that make this different - Removes implementation details in favor of big picture vision --- apps/web/src/app/integrations/page.tsx | 1002 +++++++++--------------- 1 file changed, 387 insertions(+), 615 deletions(-) diff --git a/apps/web/src/app/integrations/page.tsx b/apps/web/src/app/integrations/page.tsx index 29a0180..775e706 100644 --- a/apps/web/src/app/integrations/page.tsx +++ b/apps/web/src/app/integrations/page.tsx @@ -1,18 +1,17 @@ import { Button } from '@tpmjs/ui/Button/Button'; -import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock'; import { Container } from '@tpmjs/ui/Container/Container'; import Link from 'next/link'; import { AppHeader } from '~/components/AppHeader'; import { EcosystemDiagram } from '~/components/EcosystemDiagram'; export const metadata = { - title: 'Integrations | TPMJS', + title: 'The AI Infrastructure Stack | TPMJS', description: - 'How TPMJS integrates with HLLM multi-agent orchestration and BlocksAI domain-driven validation', + 'A new paradigm for AI systems: three layers working together to create composable, evolvable AI infrastructure.', openGraph: { - title: 'Integrations | TPMJS', + title: 'The AI Infrastructure Stack | TPMJS', description: - 'How TPMJS integrates with HLLM multi-agent orchestration and BlocksAI domain-driven validation', + 'A new paradigm for AI systems: three layers working together to create composable, evolvable AI infrastructure.', }, }; @@ -23,661 +22,434 @@ export default function IntegrationsPage(): React.ReactElement {
- {/* Hero */} -
-

- Ecosystem Integrations + {/* Hero - The Big Idea */} +
+

+ A New Paradigm +

+

+ The AI Infrastructure Stack

-

- TPMJS is part of a larger AI infrastructure ecosystem. See how it connects with HLLM - for multi-agent orchestration and BlocksAI for domain-driven validation. +

+ What if AI systems could be{' '} + composable,{' '} + evolvable, and{' '} + self-improving? Three projects + working together are making this possible.

- {/* Ecosystem Diagram */} -
-

- The Complete Picture + {/* The Problem */} +
+
+

+ The Problem with AI Today +

+
+

+ Current AI agents are monolithic. + They have a fixed set of tools baked in at build time. Adding a new capability + means redeploying the entire system. There's no feedback loop—the agent makes + mistakes and repeats them. There's no way to validate quality before + deployment. +

+

+ This is like building a web app in 1995: everything in one file, no package + manager, no separation of concerns. We've learned that complex systems need{' '} + layers. +

+
+
+
+ + {/* The Insight - Three Layers */} +
+

+ The Insight: Separation of Concerns

+ +
+ {/* Semantic Layer */} +
+
+ LAYER 3: SEMANTIC +
+
+
+ ✅ +
+
+

BlocksAI

+

Ensures correctness

+
+
+

+ The TypeScript of AI. Validates that + code means what it should mean. Catches semantic drift before deployment. +

+
+

→ Development-time validation

+

→ Domain rules as executable specs

+

→ AI learns from feedback loops

+
+
+ + {/* Distribution Layer */} +
+
+ LAYER 2: DISTRIBUTION +
+
+
+ 🔧 +
+
+

TPMJS

+

Delivers capabilities

+
+
+

+ The npm of AI. Tools exist + independently, discovered at runtime based on need. The ecosystem grows without + central control. +

+
+

→ Runtime discovery, not build-time

+

→ Sandboxed execution

+

→ Quality signals emerge from usage

+
+
+ + {/* Orchestration Layer */} +
+
+ LAYER 1: ORCHESTRATION +
+
+
+ 🧠 +
+
+

HLLM

+

Composes intelligence

+
+
+

+ The Kubernetes of AI. Multiple agents + working together in different patterns—debate, consensus, decomposition. +

+
+

→ 13 composition topologies

+

→ Agents use tools dynamically

+

→ Complex problems, simple agents

+
+
+
+ + {/* Comparison */} +
+
+
+

+ ✗ Traditional Model +

+
+ Monolithic Agent +
+   → Fixed tools (baked in) +
+   → No validation +
+   → No feedback loop +
+   → Hope for the best +
+
+
+

+ ✓ New Paradigm +

+
+ Layered Infrastructure +
+   → Dynamic tools (discovered) +
+   → Semantic validation +
+   → Continuous improvement +
+   → Quality emerges +
+
+
+
+
+ + {/* Interactive Diagram */} +
+

+ How the Layers Connect +

+

+ Each layer has a clear responsibility. Information flows between them, creating a + system that's more than the sum of its parts. +

- {/* Three Projects Overview */} -
-

- Three Projects, One Vision + {/* The Novel Ideas */} +
+

+ What Makes This Different

-
- {/* HLLM */} -
-
-
- 🧠 -
-
-

HLLM

-

Multi-Agent Orchestration

-
+ +
+ {/* Idea 1 */} +
+
+ 1
-

- A playground for orchestrating multiple AI agents using 13 different topology - patterns. Agents can use TPMJS tools to extend their capabilities. -

-
-
- → - - 13 topologies (debate, react, etc.) - -
-
- → - 100+ AI models via OpenRouter -
-
- → - Real-time D3 visualizations -
+
+

+ Tools as Independent Packages, Not Agent Plugins +

+

+ In traditional systems, tools are tightly coupled to agents. Here, tools exist + independently in a registry—like npm packages. Any agent can discover and use + any tool. The tool ecosystem grows through network effects, not central + planning. +

- {/* TPMJS */} -
-
-
- 🔧 -
-
-

TPMJS

-

AI Tool Registry

-
+ {/* Idea 2 */} +
+
+ 2
-

- The central registry for AI tools. Automatically discovers tools from npm, - validates them, and provides sandboxed execution. -

-
-
- → - 106+ official tools -
-
- → - Deno sandboxed execution -
-
- → - Auto-discovery from npm -
+
+

+ Development-Time Semantic Validation +

+

+ Instead of hoping AI-generated code is correct, BlocksAI validates source code + against domain rules before deployment. If a template passes validation + once, you can trust its output forever. This is TypeScript-level confidence for + AI systems. +

- {/* BlocksAI */} -
-
-
- ✅ -
-
-

BlocksAI

-

Domain-Driven Validation

-
+ {/* Idea 3 */} +
+
+ 3
-

- A validation framework that uses AI to ensure code follows domain semantics. TPMJS - tools are validated using BlocksAI patterns. -

-
-
- → - 3-layer validation pipeline -
-
- → - AI-powered semantic checks -
-
- → - Domain rules in YAML -
+
+

+ AI Learns from Validation Feedback +

+

+ BlocksAI doesn't just reject bad code—it provides actionable feedback that + AI agents can learn from. Generate, validate, fix, repeat. The system improves + iteratively, not through one-shot generation. +

+
+
+ + {/* Idea 4 */} +
+
+ 4 +
+
+

+ Multi-Agent Composition, Not Bigger Models +

+

+ Instead of building one massive agent, HLLM composes multiple smaller agents + into topologies. Debate topology pits agents against each other. Consensus + requires agreement. Decomposition breaks problems into pieces. Complex problems + emerge from simple agents. +

+
+
+ + {/* Idea 5 */} +
+
+ 5 +
+
+

+ Quality Emerges from Usage +

+

+ Tools aren't manually curated—they self-register via npm keywords. TPMJS + monitors health (can it import? does it execute?), tracks downloads, calculates + quality scores. Good tools rise, broken tools surface. Market forces, not + gatekeeping. +

- {/* HLLM Integration Deep Dive */} -
-
-
- 🧠 -
-

- HLLM Integration + {/* The Analogy */} +
+
+

+ The Web Analogy

-
+

+ The web didn't succeed because of one monolithic technology. It succeeded + because of separation of concerns: +

-
- {/* Overview */} -
-

- HLLM (Hierarchical Language Learning Model) is a multi-agent orchestration - platform. It integrates with TPMJS to give agents access to the full tool - registry. -

-
- - {/* How it works */} -
-

- How HLLM Uses TPMJS Tools -

-
-
- - 1 - -
-

Tool Discovery

-

- HLLM's Tool Browser fetches available tools from{' '} - - /api/tpmjs/tools - {' '} - proxy, which forwards to tpmjs.com -

+
+
+

Web Stack

+
+
+ HTTP + Transport layer
-
-
- - 2 - -
-

Agent Configuration

-

- Users attach tools to agents in the Agent Studio. Each agent can have - different tools based on its role. -

+
+ HTML/CSS + Content layer
-
-
- - 3 - -
-

Tool Execution

-

- When an agent calls a tool, HLLM routes the request to{' '} - - executor.tpmjs.com - {' '} - for sandboxed execution -

+
+ JavaScript + Behavior layer
-
-
- - 4 - -
-

Environment Variables

-

- User API keys (e.g., FIRECRAWL_API_KEY) are encrypted and injected at - runtime. Keys never leave the server. -

+
+ npm + Distribution layer +
+
+ TypeScript + Type safety layer
-
- - {/* 13 Topologies */} -
-

- 13 Orchestration Topologies -

-

- HLLM supports various multi-agent coordination patterns. Each topology can use - TPMJS tools: -

-
- {[ - { name: 'single', desc: 'One agent' }, - { name: 'sequential', desc: 'Chain of agents' }, - { name: 'parallel', desc: 'Concurrent workers' }, - { name: 'map-reduce', desc: 'Split & aggregate' }, - { name: 'scatter', desc: 'Fan-out only' }, - { name: 'debate', desc: 'Pro vs Con vs Judge' }, - { name: 'reflection', desc: 'Generator + Critic' }, - { name: 'consensus', desc: 'Multi-voter agreement' }, - { name: 'brainstorm', desc: 'Idea generation' }, - { name: 'decomposition', desc: 'Task breakdown' }, - { name: 'rhetorical-triangle', desc: 'Ethos/Pathos/Logos' }, - { name: 'tree-of-thoughts', desc: 'Beam search' }, - { name: 'react', desc: 'Reason + Act loop' }, - ].map((topology) => ( -
-
{topology.name}
-
{topology.desc}
+
+

AI Stack

+
+
+ HLLM + Orchestration layer
- ))} +
+ TPMJS + Distribution layer +
+
+ BlocksAI + Semantic safety layer +
+
+ AI SDK + Tool interface layer +
+
+ LLMs + Intelligence layer +
+
- - {/* Code Example */} -
-

- HLLM Tool Execution Code -

- , - env: Record -) { - // Fetch tool metadata from TPMJS registry - const toolMeta = await fetch(\`https://tpmjs.com/api/tools/\${toolId}\`); - - // Execute in TPMJS sandbox - const response = await fetch('https://executor.tpmjs.com/execute-tool', { - method: 'POST', - body: JSON.stringify({ - packageName: toolMeta.npmPackageName, - name: toolMeta.exportName, - version: toolMeta.version, - params, - env, // User's encrypted API keys injected here - }), - }); - - // Parse SSE stream for results - return parseExecutionStream(response); -}`} - /> -
- {/* BlocksAI Integration Deep Dive */} -
-
-
- ✅ + {/* What This Enables */} +
+

+ What This Enables +

+ +
+
+

Agents That Grow Smarter

+

+ As the TPMJS ecosystem grows, every agent connected to it gains new capabilities + automatically. No redeployment needed. The agent in production today can use a + tool published tomorrow. +

-

- BlocksAI Validation + +
+

Self-Healing Systems

+

+ TPMJS monitors tool health continuously. When a tool breaks, it's marked + BROKEN and agents route around it. When it's fixed, it's marked HEALTHY + again. No manual intervention. +

+
+ +
+

Composable Intelligence

+

+ HLLM lets you compose small, focused agents into powerful topologies. A debate + between specialists beats a single generalist. Consensus provides reliability. + Decomposition handles complexity. +

+
+ +
+

Verified AI Output

+

+ BlocksAI validates that AI-generated code follows your domain rules. Not + "probably correct"—validated against explicit semantic constraints. + Trust, but verify. +

+
+ +
+

Open Ecosystem

+

+ Anyone can publish a tool to TPMJS. Just add a keyword to package.json. No + gatekeeping, no approval process. The ecosystem grows through network effects. +

+
+ +
+

Domain Alignment

+

+ BlocksAI captures domain semantics in machine-readable YAML. AI agents read this + before generating code. The result: consistent output across all generations. +

+
+

+
+ + {/* The Vision */} +
+
+

+ The Vision

-
- -
- {/* Overview */} -
-

- BlocksAI provides domain-driven validation for code. TPMJS tools are validated - using BlocksAI's 3-layer pipeline to ensure quality and consistency. -

-
- - {/* 3-Layer Pipeline */} -
-

- 3-Layer Validation Pipeline -

-
-
- - 1 - -
-

Schema Validation

-

- Validates blocks.yml structure using Zod schemas. Ensures all required - fields are present with correct types. -

-
- Validator: schema.io -
-
-
-
- - 2 - -
-

Shape Validation

-

- Validates TypeScript file structure. Checks that files exist, have exports, - and follow expected patterns. -

-
- Validator: shape.exports.ts -
-
-
-
- - 3 - -
-

Domain Validation

-

- AI-powered semantic analysis using GPT-4 or Claude. Checks that code aligns - with domain rules and expresses intent clearly. -

-
- Validator: domain.validation -
-
-
-
-
- - {/* blocks.yml Example */} -
-

- TPMJS blocks.yml Configuration -

-

- TPMJS tools are defined in blocks.yml with domain rules for validation: -

- -
- - {/* CLI Usage */} -
-

Running Validation

- -
-
-
- - {/* Shared Technologies */} -
-

- Shared Technologies -

-
- {/* AI SDK */} -
-
-
- ⚡ -
-

Vercel AI SDK v6

-
-

- The foundation for all tool definitions. Both HLLM and TPMJS use the same pattern: -

- ({ - type: 'object', - properties: {...}, - }), - execute: async ({ param }) => { - // Tool logic - }, -});`} - /> -
- - {/* D3.js */} -
-
-
- 📊 -
-

D3.js Visualizations

-
-

- Both projects use D3 for interactive diagrams: -

-
    -
  • - HLLM: - TopologyGraph, ExecutionTimeline -
    • -
  • - TPMJS: - ArchitectureDiagram, SDKFlowDiagram -
    • -
-

- Real-time animations, hover tooltips, theme-aware colors -

-
- - {/* Prisma */} -
-
-
- 🗄️ -
-

Prisma + PostgreSQL

-
-

Shared database patterns:

-
    -
  • - HLLM: - Sessions, traces, prompts, user prefs -
    • -
  • - TPMJS: - Tools, packages, health checks, metrics -
    • -
-

- Both hosted on Neon with connection pooling -

-
-
-
- - {/* Integration APIs */} -
-

- Integration APIs -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EndpointProjectPurpose
/api/toolsTPMJS - Search and list tools with filters -
- /api/tools/execute - TPMJS - Execute tools with SSE streaming -
- /api/tpmjs/tools - HLLM - Proxy to TPMJS registry (avoids CORS) -
- /api/tpmjs/execute - HLLM - Execute with user's encrypted env vars -
- /api/user/tpmjs-env - HLLM - Store/retrieve encrypted API keys -
npx blocks runBlocksAI - Validate tools against domain rules -
-
-
- - {/* Data Flow */} -
-

- Complete Data Flow -

-
-
- - 1 - -
-

- Tool Development & Validation -

-

- Developer creates tool using AI SDK pattern →{' '} - - npx blocks run - {' '} - validates against domain rules → Tool published to npm -

-
-
- -
- - 2 - -
-

Registry Discovery

-

- TPMJS changes feed detects new package → Schema extraction & health checks → - Tool indexed with quality score → Available via API -

-
-
- -
- - 3 - -
-

Agent Configuration

-

- HLLM user browses Tool Browser → Selects tools for agent → Configures topology → - Saves agent configuration -

-
-
- -
- - 4 - -
-

Execution

-

- Agent decides to use tool → HLLM calls TPMJS executor → Tool runs in Deno - sandbox → Result streamed back → Agent continues reasoning -

-
-
+

+ We're building the infrastructure for the next generation of AI systems. Not + monolithic agents that do everything poorly, but{' '} + composable systems where specialized + components work together. Not fixed capabilities, but{' '} + dynamic discovery from an ever-growing + ecosystem. Not "trust the AI," but{' '} + verify through semantic validation. +

+

+ Three layers. One stack. A new paradigm for AI infrastructure. +

{/* CTA */}

- Explore the Ecosystem + Start Building

- Dive deeper into each project or start building with TPMJS tools. + Explore the tools, publish your own, or dive into the architecture.

@@ -685,9 +457,9 @@ export const myTool = tool({ Browse Tools - +