From 21f181807070ca3b716f466146b6e2de3d0c2853 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Thu, 1 Jan 2026 02:17:05 +1000 Subject: [PATCH] feat: add integrations page with ecosystem diagram MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add /integrations page documenting HLLM, TPMJS, and BlocksAI relationships - Create EcosystemDiagram D3.js component showing project connections - Document HLLM multi-agent integration with TPMJS tools - Document BlocksAI 3-layer validation pipeline - Add shared technologies section (AI SDK, D3, Prisma) - Include integration APIs table and data flow documentation - Add Integrations link to desktop and mobile navigation - Fix accessibility issue in MobileMenu backdrop πŸ€– Generated with [Claude Code](https://claude.ai/claude-code) Co-Authored-By: Claude --- apps/web/src/app/integrations/page.tsx | 704 +++++++++++++++++ apps/web/src/components/AppHeader.tsx | 5 + apps/web/src/components/EcosystemDiagram.tsx | 747 +++++++++++++++++++ apps/web/src/components/MobileMenu.tsx | 4 +- 4 files changed, 1459 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/app/integrations/page.tsx create mode 100644 apps/web/src/components/EcosystemDiagram.tsx diff --git a/apps/web/src/app/integrations/page.tsx b/apps/web/src/app/integrations/page.tsx new file mode 100644 index 0000000..29a0180 --- /dev/null +++ b/apps/web/src/app/integrations/page.tsx @@ -0,0 +1,704 @@ +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', + description: + 'How TPMJS integrates with HLLM multi-agent orchestration and BlocksAI domain-driven validation', + openGraph: { + title: 'Integrations | TPMJS', + description: + 'How TPMJS integrates with HLLM multi-agent orchestration and BlocksAI domain-driven validation', + }, +}; + +export default function IntegrationsPage(): React.ReactElement { + return ( +
+ + +
+ + {/* Hero */} +
+

+ Ecosystem Integrations +

+

+ 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. +

+
+ + {/* Ecosystem Diagram */} +
+

+ The Complete Picture +

+ +
+ + {/* Three Projects Overview */} +
+

+ Three Projects, One Vision +

+
+ {/* HLLM */} +
+
+
+ 🧠 +
+
+

HLLM

+

Multi-Agent Orchestration

+
+
+

+ 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 +
+
+
+ + {/* TPMJS */} +
+
+
+ πŸ”§ +
+
+

TPMJS

+

AI Tool Registry

+
+
+

+ 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 +
+
+
+ + {/* BlocksAI */} +
+
+
+ βœ… +
+
+

BlocksAI

+

Domain-Driven Validation

+
+
+

+ 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 +
+
+
+
+
+ + {/* HLLM Integration Deep Dive */} +
+
+
+ 🧠 +
+

+ HLLM Integration +

+
+ +
+ {/* 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 +

+
+
+
+ + 2 + +
+

Agent Configuration

+

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

+
+
+
+ + 3 + +
+

Tool Execution

+

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

+
+
+
+ + 4 + +
+

Environment Variables

+

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

+
+
+
+
+ + {/* 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}
+
+ ))} +
+
+ + {/* 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 */} +
+
+
+ βœ… +
+

+ BlocksAI Validation +

+
+ +
+ {/* 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 +

+
+
+
+
+ + {/* CTA */} +
+

+ Explore the Ecosystem +

+

+ Dive deeper into each project or start building with TPMJS tools. +

+
+ + + + + + + + + +
+
+ +
+
+ ); +} diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx index 914506c..e105028 100644 --- a/apps/web/src/components/AppHeader.tsx +++ b/apps/web/src/components/AppHeader.tsx @@ -45,6 +45,11 @@ export function AppHeader(): React.ReactElement { How It Works + + +