feat: rewrite integrations page with case study and simplified diagram
- List HLLM as primary integration with tpmjs.com - Add BlocksAI case study showing how 106 tools were built - Display 9 philosophy principles and 11 tool categories - Simplify ecosystem diagram to show flow: BlocksAI → Tools → HLLM - Fix lint issues with variable declarations
This commit is contained in:
Ajax Davis
parent
a42ec19b0b
commit
de97175d6c
2 changed files with 632 additions and 1009 deletions
|
|
@ -5,13 +5,13 @@ import { AppHeader } from '~/components/AppHeader';
|
|||
import { EcosystemDiagram } from '~/components/EcosystemDiagram';
|
||||
|
||||
export const metadata = {
|
||||
title: 'The AI Infrastructure Stack | TPMJS',
|
||||
title: 'Integrations | TPMJS',
|
||||
description:
|
||||
'A new paradigm for AI systems: three layers working together to create composable, evolvable AI infrastructure.',
|
||||
'Platforms that integrate with TPMJS. See how HLLM brings 100+ tools to multi-agent topologies at runtime.',
|
||||
openGraph: {
|
||||
title: 'The AI Infrastructure Stack | TPMJS',
|
||||
title: 'Integrations | TPMJS',
|
||||
description:
|
||||
'A new paradigm for AI systems: three layers working together to create composable, evolvable AI infrastructure.',
|
||||
'Platforms that integrate with TPMJS. See how HLLM brings 100+ tools to multi-agent topologies at runtime.',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -22,434 +22,329 @@ export default function IntegrationsPage(): React.ReactElement {
|
|||
|
||||
<main className="flex-1 py-16">
|
||||
<Container size="lg" padding="lg">
|
||||
{/* Hero - The Big Idea */}
|
||||
<div className="text-center mb-20">
|
||||
<p className="text-sm font-mono text-foreground-tertiary mb-4 tracking-widest uppercase">
|
||||
A New Paradigm
|
||||
</p>
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-foreground">
|
||||
The AI Infrastructure Stack
|
||||
{/* Hero */}
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-foreground">
|
||||
Integrations
|
||||
</h1>
|
||||
<p className="text-xl text-foreground-secondary max-w-3xl mx-auto leading-relaxed">
|
||||
What if AI systems could be{' '}
|
||||
<span className="text-foreground font-semibold">composable</span>,{' '}
|
||||
<span className="text-foreground font-semibold">evolvable</span>, and{' '}
|
||||
<span className="text-foreground font-semibold">self-improving</span>? Three projects
|
||||
working together are making this possible.
|
||||
<p className="text-xl text-foreground-secondary max-w-2xl mx-auto">
|
||||
Platforms that connect to the TPMJS registry to bring tools to their users.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* The Problem */}
|
||||
{/* Integrations List */}
|
||||
<section className="mb-20">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-6 text-foreground">
|
||||
The Problem with AI Today
|
||||
</h2>
|
||||
<div className="prose max-w-none text-foreground-secondary space-y-4">
|
||||
<p className="text-lg">
|
||||
Current AI agents are <strong className="text-foreground">monolithic</strong>.
|
||||
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.
|
||||
</p>
|
||||
<p className="text-lg">
|
||||
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{' '}
|
||||
<strong className="text-foreground">layers</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Insight - Three Layers */}
|
||||
<section className="mb-20">
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-8 text-center text-foreground">
|
||||
The Insight: Separation of Concerns
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
|
||||
{/* Semantic Layer */}
|
||||
<div className="relative p-8 border-2 border-amber-500/40 rounded-xl bg-amber-500/5">
|
||||
<div className="absolute -top-3 left-6 bg-background px-3 text-xs font-mono text-amber-500">
|
||||
LAYER 3: SEMANTIC
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-amber-500/20 flex items-center justify-center">
|
||||
<span className="text-2xl">✅</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground">BlocksAI</h3>
|
||||
<p className="text-xs text-foreground-tertiary">Ensures correctness</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-secondary mb-4">
|
||||
The <strong className="text-foreground">TypeScript of AI</strong>. Validates that
|
||||
code means what it should mean. Catches semantic drift before deployment.
|
||||
</p>
|
||||
<div className="text-xs text-foreground-tertiary space-y-1">
|
||||
<p>→ Development-time validation</p>
|
||||
<p>→ Domain rules as executable specs</p>
|
||||
<p>→ AI learns from feedback loops</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Distribution Layer */}
|
||||
<div className="relative p-8 border-2 border-emerald-500/40 rounded-xl bg-emerald-500/5">
|
||||
<div className="absolute -top-3 left-6 bg-background px-3 text-xs font-mono text-emerald-500">
|
||||
LAYER 2: DISTRIBUTION
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-emerald-500/20 flex items-center justify-center">
|
||||
<span className="text-2xl">🔧</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground">TPMJS</h3>
|
||||
<p className="text-xs text-foreground-tertiary">Delivers capabilities</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-secondary mb-4">
|
||||
The <strong className="text-foreground">npm of AI</strong>. Tools exist
|
||||
independently, discovered at runtime based on need. The ecosystem grows without
|
||||
central control.
|
||||
</p>
|
||||
<div className="text-xs text-foreground-tertiary space-y-1">
|
||||
<p>→ Runtime discovery, not build-time</p>
|
||||
<p>→ Sandboxed execution</p>
|
||||
<p>→ Quality signals emerge from usage</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Orchestration Layer */}
|
||||
<div className="relative p-8 border-2 border-purple-500/40 rounded-xl bg-purple-500/5">
|
||||
<div className="absolute -top-3 left-6 bg-background px-3 text-xs font-mono text-purple-500">
|
||||
LAYER 1: ORCHESTRATION
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* HLLM Integration */}
|
||||
<a
|
||||
href="https://hllm.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group p-6 border-2 border-purple-500/30 rounded-xl bg-purple-500/5 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center">
|
||||
<span className="text-2xl">🧠</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground">HLLM</h3>
|
||||
<p className="text-xs text-foreground-tertiary">Composes intelligence</p>
|
||||
<h3 className="font-bold text-lg text-foreground group-hover:text-purple-500 transition-colors">
|
||||
HLLM
|
||||
</h3>
|
||||
<p className="text-xs text-foreground-tertiary">hllm.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-secondary mb-4">
|
||||
The <strong className="text-foreground">Kubernetes of AI</strong>. Multiple agents
|
||||
working together in different patterns—debate, consensus, decomposition.
|
||||
Multi-agent orchestration platform. Users can browse and add any TPMJS tool to
|
||||
their agents, then execute them during topology runs.
|
||||
</p>
|
||||
<div className="text-xs text-foreground-tertiary space-y-1">
|
||||
<p>→ 13 composition topologies</p>
|
||||
<p>→ Agents use tools dynamically</p>
|
||||
<p>→ Complex problems, simple agents</p>
|
||||
<p>→ Tool Browser with search & categories</p>
|
||||
<p>→ One-click add to any agent</p>
|
||||
<p>→ Secure API key management</p>
|
||||
<p>→ Runtime execution via TPMJS</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Comparison */}
|
||||
<div className="max-w-4xl mx-auto p-6 border border-border rounded-lg bg-surface">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3 flex items-center gap-2">
|
||||
<span className="text-red-500">✗</span> Traditional Model
|
||||
</h4>
|
||||
<div className="font-mono text-sm text-foreground-tertiary leading-relaxed">
|
||||
Monolithic Agent
|
||||
<br />
|
||||
→ Fixed tools (baked in)
|
||||
<br />
|
||||
→ No validation
|
||||
<br />
|
||||
→ No feedback loop
|
||||
<br />
|
||||
→ Hope for the best
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3 flex items-center gap-2">
|
||||
<span className="text-emerald-500">✓</span> New Paradigm
|
||||
</h4>
|
||||
<div className="font-mono text-sm text-foreground-tertiary leading-relaxed">
|
||||
Layered Infrastructure
|
||||
<br />
|
||||
→ Dynamic tools (discovered)
|
||||
<br />
|
||||
→ Semantic validation
|
||||
<br />
|
||||
→ Continuous improvement
|
||||
<br />
|
||||
→ Quality emerges
|
||||
</div>
|
||||
{/* Coming Soon Placeholder */}
|
||||
<div className="p-6 border border-dashed border-border rounded-xl bg-surface/50 flex flex-col items-center justify-center text-center">
|
||||
<div className="w-12 h-12 rounded-lg bg-surface flex items-center justify-center mb-4">
|
||||
<span className="text-2xl text-foreground-tertiary">+</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-tertiary mb-2">Your platform here?</p>
|
||||
<p className="text-xs text-foreground-tertiary">
|
||||
Integrate with TPMJS to give your users access to 100+ tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Interactive Diagram */}
|
||||
<section className="mb-20">
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-6 text-center text-foreground">
|
||||
How the Layers Connect
|
||||
{/* Case Study Header */}
|
||||
<section className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="text-sm font-mono text-foreground-tertiary uppercase tracking-widest">
|
||||
Case Study
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BlocksAI Case Study */}
|
||||
<section className="mb-16">
|
||||
<div className="p-8 border border-amber-500/30 rounded-xl bg-amber-500/5">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-14 h-14 rounded-lg bg-amber-500/20 flex items-center justify-center">
|
||||
<span className="text-3xl">✅</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-foreground">
|
||||
Building 100+ Tools with BlocksAI
|
||||
</h2>
|
||||
<p className="text-foreground-secondary">
|
||||
How we used domain-driven validation to ship quality at scale
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose max-w-none text-foreground-secondary space-y-4 mb-8">
|
||||
<p>
|
||||
When we set out to build the official TPMJS tool collection, we faced a challenge:
|
||||
how do you maintain quality across 100+ tools? Different categories (web scraping,
|
||||
data transformation, statistics, security) have different requirements. Manual
|
||||
review doesn't scale.
|
||||
</p>
|
||||
<p>
|
||||
<strong className="text-foreground">BlocksAI</strong> gave us the answer: define
|
||||
domain rules once, validate automatically. We created a 3,200+ line{' '}
|
||||
<code className="text-xs bg-surface-secondary px-1 py-0.5 rounded">
|
||||
blocks.yml
|
||||
</code>{' '}
|
||||
that captures everything a TPMJS tool should be.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="p-4 bg-background rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-amber-500">106</div>
|
||||
<div className="text-xs text-foreground-tertiary">Tools Built</div>
|
||||
</div>
|
||||
<div className="p-4 bg-background rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-amber-500">9</div>
|
||||
<div className="text-xs text-foreground-tertiary">Philosophy Principles</div>
|
||||
</div>
|
||||
<div className="p-4 bg-background rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-amber-500">25+</div>
|
||||
<div className="text-xs text-foreground-tertiary">Domain Rules</div>
|
||||
</div>
|
||||
<div className="p-4 bg-background rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-amber-500">11</div>
|
||||
<div className="text-xs text-foreground-tertiary">Categories</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Philosophy Principles */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-semibold text-foreground mb-4">The 9 Principles</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">01</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Production-ready only. No stubs, no TODOs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">02</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
AI SDK v6 pattern. tool() + jsonSchema() exclusively.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">03</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Single responsibility. One thing, exceptionally well.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">04</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Structured outputs. Typed, parseable by agents.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">05</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Explicit errors. Never silently fail.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">06</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Async boundaries. Proper error handling.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">07</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Stable dependencies. No alpha packages.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">08</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Deterministic. Same input, same output.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-background rounded-lg">
|
||||
<span className="text-amber-500 font-mono text-xs">09</span>
|
||||
<p className="text-foreground-secondary mt-1">
|
||||
Single-shot. No streaming, no orchestration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-semibold text-foreground mb-4">Tools by Category</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ name: 'Research', count: 5, color: 'bg-blue-500/10 text-blue-500' },
|
||||
{ name: 'Web', count: 10, color: 'bg-green-500/10 text-green-500' },
|
||||
{ name: 'Data', count: 15, color: 'bg-cyan-500/10 text-cyan-500' },
|
||||
{ name: 'Documents', count: 12, color: 'bg-purple-500/10 text-purple-500' },
|
||||
{ name: 'Engineering', count: 12, color: 'bg-orange-500/10 text-orange-500' },
|
||||
{ name: 'Security', count: 7, color: 'bg-red-500/10 text-red-500' },
|
||||
{ name: 'Statistics', count: 9, color: 'bg-pink-500/10 text-pink-500' },
|
||||
{ name: 'Operations', count: 7, color: 'bg-yellow-500/10 text-yellow-600' },
|
||||
{ name: 'Agents', count: 15, color: 'bg-violet-500/10 text-violet-500' },
|
||||
{ name: 'Utilities', count: 8, color: 'bg-gray-500/10 text-gray-500' },
|
||||
{ name: 'HTML', count: 3, color: 'bg-emerald-500/10 text-emerald-500' },
|
||||
].map((cat) => (
|
||||
<span
|
||||
key={cat.name}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium ${cat.color}`}
|
||||
>
|
||||
{cat.name} ({cat.count})
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* The Result */}
|
||||
<div className="p-4 bg-background rounded-lg border border-amber-500/20">
|
||||
<h3 className="font-semibold text-foreground mb-2">The Result</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
Every tool follows the same patterns. Every tool has proper error handling. Every
|
||||
tool works with the AI SDK. When HLLM users browse the registry, they can trust
|
||||
that any tool they add will work reliably in their agent workflows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ecosystem Diagram */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4 text-center text-foreground">
|
||||
How It All Connects
|
||||
</h2>
|
||||
<p className="text-center text-foreground-secondary mb-8 max-w-2xl mx-auto">
|
||||
Each layer has a clear responsibility. Information flows between them, creating a
|
||||
system that's more than the sum of its parts.
|
||||
BlocksAI validates tool quality at development time. TPMJS publishes them to the
|
||||
registry. HLLM users discover and execute them at runtime.
|
||||
</p>
|
||||
<EcosystemDiagram />
|
||||
</section>
|
||||
|
||||
{/* The Novel Ideas */}
|
||||
<section className="mb-20">
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-8 text-center text-foreground">
|
||||
What Makes This Different
|
||||
{/* HLLM Deep Dive */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-6 text-foreground">
|
||||
Using TPMJS Tools in HLLM
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8 max-w-4xl mx-auto">
|
||||
{/* Idea 1 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center">
|
||||
<span className="text-blue-500 font-bold">1</span>
|
||||
<div className="space-y-6">
|
||||
{/* Step 1 */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
|
||||
<span className="text-purple-500 font-bold">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground mb-2">
|
||||
Tools as Independent Packages, Not Agent Plugins
|
||||
</h3>
|
||||
<p className="text-foreground-secondary">
|
||||
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.
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-foreground mb-2">Browse the Tool Registry</h3>
|
||||
<p className="text-sm text-foreground-secondary mb-3">
|
||||
In the Agent Studio, click "Add from TPM.js Registry" to open the Tool
|
||||
Browser. Search by name or filter by category. See descriptions, parameters, and
|
||||
quality scores.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Idea 2 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center">
|
||||
<span className="text-blue-500 font-bold">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground mb-2">
|
||||
Development-Time Semantic Validation
|
||||
</h3>
|
||||
<p className="text-foreground-secondary">
|
||||
Instead of hoping AI-generated code is correct, BlocksAI validates source code
|
||||
against domain rules <em>before</em> deployment. If a template passes validation
|
||||
once, you can trust its output forever. This is TypeScript-level confidence for
|
||||
AI systems.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Idea 3 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center">
|
||||
<span className="text-blue-500 font-bold">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground mb-2">
|
||||
AI Learns from Validation Feedback
|
||||
</h3>
|
||||
<p className="text-foreground-secondary">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Idea 4 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center">
|
||||
<span className="text-blue-500 font-bold">4</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground mb-2">
|
||||
Multi-Agent Composition, Not Bigger Models
|
||||
</h3>
|
||||
<p className="text-foreground-secondary">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Idea 5 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center">
|
||||
<span className="text-blue-500 font-bold">5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground mb-2">
|
||||
Quality Emerges from Usage
|
||||
</h3>
|
||||
<p className="text-foreground-secondary">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Analogy */}
|
||||
<section className="mb-20">
|
||||
<div className="max-w-3xl mx-auto p-8 border border-border rounded-xl bg-surface">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-6 text-foreground text-center">
|
||||
The Web Analogy
|
||||
</h2>
|
||||
<p className="text-foreground-secondary mb-6 text-center">
|
||||
The web didn't succeed because of one monolithic technology. It succeeded
|
||||
because of <strong className="text-foreground">separation of concerns</strong>:
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3">Web Stack</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">HTTP</span>
|
||||
<span className="text-foreground-secondary">Transport layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">HTML/CSS</span>
|
||||
<span className="text-foreground-secondary">Content layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">JavaScript</span>
|
||||
<span className="text-foreground-secondary">Behavior layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">npm</span>
|
||||
<span className="text-foreground-secondary">Distribution layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">TypeScript</span>
|
||||
<span className="text-foreground-secondary">Type safety layer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3">AI Stack</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-purple-500">HLLM</span>
|
||||
<span className="text-foreground-secondary">Orchestration layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-emerald-500">TPMJS</span>
|
||||
<span className="text-foreground-secondary">Distribution layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-amber-500">BlocksAI</span>
|
||||
<span className="text-foreground-secondary">Semantic safety layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">AI SDK</span>
|
||||
<span className="text-foreground-secondary">Tool interface layer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-20 font-mono text-foreground-tertiary">LLMs</span>
|
||||
<span className="text-foreground-secondary">Intelligence layer</span>
|
||||
</div>
|
||||
<div className="p-3 bg-surface rounded-lg text-xs text-foreground-tertiary">
|
||||
1000+ tools available • Search & filter • Category tags
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What This Enables */}
|
||||
<section className="mb-20">
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-8 text-center text-foreground">
|
||||
What This Enables
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
<div className="p-6 border border-border rounded-lg bg-surface">
|
||||
<h3 className="font-bold text-foreground mb-3">Agents That Grow Smarter</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
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.
|
||||
</p>
|
||||
{/* Step 2 */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
|
||||
<span className="text-purple-500 font-bold">2</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-foreground mb-2">Add to Your Agent</h3>
|
||||
<p className="text-sm text-foreground-secondary mb-3">
|
||||
Click any tool to add it to your agent. HLLM automatically fetches the full
|
||||
schema from TPMJS—parameter types, descriptions, everything the agent needs to
|
||||
use it correctly.
|
||||
</p>
|
||||
<div className="p-3 bg-surface rounded-lg text-xs text-foreground-tertiary">
|
||||
One-click add • Full schema sync • Works with any topology
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border border-border rounded-lg bg-surface">
|
||||
<h3 className="font-bold text-foreground mb-3">Self-Healing Systems</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
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.
|
||||
</p>
|
||||
{/* Step 3 */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
|
||||
<span className="text-purple-500 font-bold">3</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-foreground mb-2">
|
||||
Configure API Keys (if needed)
|
||||
</h3>
|
||||
<p className="text-sm text-foreground-secondary mb-3">
|
||||
Some tools need API keys (Firecrawl, etc.). Add them once in your HLLM
|
||||
profile—they're encrypted and automatically injected when tools execute.
|
||||
Your keys never leave the server.
|
||||
</p>
|
||||
<div className="p-3 bg-surface rounded-lg text-xs text-foreground-tertiary">
|
||||
Encrypted storage • Auto-injection • Per-user isolation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border border-border rounded-lg bg-surface">
|
||||
<h3 className="font-bold text-foreground mb-3">Composable Intelligence</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
HLLM lets you compose small, focused agents into powerful topologies. A debate
|
||||
between specialists beats a single generalist. Consensus provides reliability.
|
||||
Decomposition handles complexity.
|
||||
</p>
|
||||
{/* Step 4 */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
|
||||
<span className="text-purple-500 font-bold">4</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-foreground mb-2">Execute During Runs</h3>
|
||||
<p className="text-sm text-foreground-secondary mb-3">
|
||||
When your agent decides to use a tool, HLLM routes the call to the TPMJS
|
||||
executor. The tool runs in a Deno sandbox with your parameters and API keys.
|
||||
Results stream back to your agent.
|
||||
</p>
|
||||
<div className="p-3 bg-surface rounded-lg text-xs text-foreground-tertiary">
|
||||
Sandboxed execution • SSE streaming • Execution metrics
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border border-border rounded-lg bg-surface">
|
||||
<h3 className="font-bold text-foreground mb-3">Verified AI Output</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
BlocksAI validates that AI-generated code follows your domain rules. Not
|
||||
"probably correct"—validated against explicit semantic constraints.
|
||||
Trust, but verify.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border border-border rounded-lg bg-surface">
|
||||
<h3 className="font-bold text-foreground mb-3">Open Ecosystem</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border border-border rounded-lg bg-surface">
|
||||
<h3 className="font-bold text-foreground mb-3">Domain Alignment</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
BlocksAI captures domain semantics in machine-readable YAML. AI agents read this
|
||||
before generating code. The result: consistent output across all generations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Vision */}
|
||||
<section className="mb-20">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-6 text-foreground">
|
||||
The Vision
|
||||
</h2>
|
||||
<p className="text-lg text-foreground-secondary leading-relaxed mb-8">
|
||||
We're building the infrastructure for the next generation of AI systems. Not
|
||||
monolithic agents that do everything poorly, but{' '}
|
||||
<strong className="text-foreground">composable systems</strong> where specialized
|
||||
components work together. Not fixed capabilities, but{' '}
|
||||
<strong className="text-foreground">dynamic discovery</strong> from an ever-growing
|
||||
ecosystem. Not "trust the AI," but{' '}
|
||||
<strong className="text-foreground">verify through semantic validation</strong>.
|
||||
</p>
|
||||
<p className="text-xl font-semibold text-foreground">
|
||||
Three layers. One stack. A new paradigm for AI infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="text-center py-12 border border-border rounded-lg bg-surface">
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-4 text-foreground">
|
||||
Start Building
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4 text-foreground">
|
||||
Explore the Tools
|
||||
</h2>
|
||||
<p className="text-lg text-foreground-secondary mb-8 max-w-2xl mx-auto">
|
||||
Explore the tools, publish your own, or dive into the architecture.
|
||||
Browse the 100+ official tools, or publish your own to the registry.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<Link href="/tool/tool-search">
|
||||
|
|
@ -462,11 +357,11 @@ export default function IntegrationsPage(): React.ReactElement {
|
|||
Publish a Tool
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/how-it-works">
|
||||
<a href="https://hllm.dev" target="_blank" rel="noopener noreferrer">
|
||||
<Button size="lg" variant="outline">
|
||||
How It Works
|
||||
Try HLLM →
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue