feat(homepage): update positioning to "Infinite Toolspace"
Rebrand homepage messaging around toolspace virtualization concept: - Hero: "INFINITE TOOLSPACE" with "A million tools. Zero configuration." - New ToolspaceSection explaining the three-stage pipeline - FeaturesSection emphasizes retrieval layer and selection at scale - Integration section: "MCP is the socket, TPMJS is the OS" - Publish section: "Join the Infinite Toolspace"
This commit is contained in:
Ajax Davis
parent
1675e6ce6c
commit
ce44aeab3a
4 changed files with 190 additions and 52 deletions
|
|
@ -7,6 +7,7 @@ import Link from 'next/link';
|
|||
import { AppHeader } from '../components/AppHeader';
|
||||
import { FeaturesSection } from '../components/home/FeaturesSection';
|
||||
import { HeroSection } from '../components/home/HeroSection';
|
||||
import { ToolspaceSection } from '../components/home/ToolspaceSection';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
|
|
@ -135,6 +136,9 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
{/* Hero Section - Dithered Design */}
|
||||
<HeroSection stats={data.stats} />
|
||||
|
||||
{/* Toolspace Virtualization Concept */}
|
||||
<ToolspaceSection />
|
||||
|
||||
{/* Features Section */}
|
||||
<FeaturesSection />
|
||||
|
||||
|
|
@ -158,11 +162,14 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
<section className="py-16 bg-background">
|
||||
<Container size="xl" padding="lg">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
|
||||
Featured Tools
|
||||
<p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
|
||||
from the toolspace
|
||||
</p>
|
||||
<h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
|
||||
top quality tools
|
||||
</h2>
|
||||
<p className="text-lg text-foreground-secondary max-w-2xl mx-auto mb-8">
|
||||
Production-ready tools you can use today. Add to your AI agent in one line.
|
||||
<p className="text-base text-foreground-secondary max-w-2xl mx-auto mb-8 font-sans">
|
||||
Surfaced by quality signals: health checks, downloads, documentation richness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -358,13 +365,14 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
|
||||
universal compatibility
|
||||
mcp is the socket
|
||||
</p>
|
||||
<h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
|
||||
works everywhere
|
||||
plug into the toolspace
|
||||
</h2>
|
||||
<p className="text-base text-foreground-secondary max-w-xl mx-auto font-sans">
|
||||
Use TPMJS tools with any MCP-compatible AI client. One URL, instant access.
|
||||
Any MCP client becomes a window into the infinite toolspace. One URL unlocks
|
||||
everything.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -422,7 +430,7 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
{/* Code Example - Fieldset Style */}
|
||||
<fieldset className="border border-dashed border-border p-8 max-w-2xl mx-auto">
|
||||
<legend className="font-mono text-sm text-foreground-secondary px-3 lowercase">
|
||||
quick start
|
||||
connect to the toolspace
|
||||
</legend>
|
||||
<div className="mb-4">
|
||||
<p className="font-mono text-xs text-foreground-tertiary uppercase tracking-wider mb-2">
|
||||
|
|
@ -458,8 +466,8 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
<div className="flex items-center gap-3 pt-4 border-t border-dashed border-border">
|
||||
<div className="w-2 h-2 bg-success rounded-full animate-pulse" />
|
||||
<p className="font-mono text-xs text-foreground-secondary">
|
||||
add to config → instant access to{' '}
|
||||
<span className="text-primary font-medium">170+ tools</span>
|
||||
one url → infinite toolspace →{' '}
|
||||
<span className="text-primary font-medium">tools load on-demand</span>
|
||||
</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -471,11 +479,11 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
<Container size="xl" padding="lg">
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
|
||||
Publish Your AI Tool
|
||||
Join the Infinite Toolspace
|
||||
</h2>
|
||||
<p className="text-lg text-foreground-secondary mb-8">
|
||||
Share your tool with the AI community. Automatic discovery, quality scoring, and
|
||||
integration with Vercel AI SDK, LangChain, and more.
|
||||
Publish to npm, reach every agent. Your tool becomes discoverable to any AI that
|
||||
needs it, without manual integration.
|
||||
</p>
|
||||
|
||||
{/* Generator Highlight Box */}
|
||||
|
|
@ -486,11 +494,11 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold mb-2 text-foreground">
|
||||
Start with Our Package Generator
|
||||
One Command. Infinite Reach.
|
||||
</h3>
|
||||
<p className="text-sm text-foreground-secondary mb-4">
|
||||
Create a production-ready TPMJS tool package in seconds with our CLI
|
||||
generator. Includes 2-3 tools, complete setup, and best practices.
|
||||
Generate a production-ready tool package in seconds. Once published, your tool
|
||||
is discoverable by every agent in the toolspace.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<code className="text-sm bg-surface px-4 py-2 rounded text-foreground border border-border">
|
||||
|
|
@ -515,27 +523,27 @@ export default async function HomePage(): Promise<React.ReactElement> {
|
|||
<div className="text-3xl mb-2" aria-hidden="true">
|
||||
🚀
|
||||
</div>
|
||||
<h3 className="font-semibold mb-1 text-foreground">Quick Setup</h3>
|
||||
<h3 className="font-semibold mb-1 text-foreground">Publish Once</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
Add one keyword to package.json and publish to NPM
|
||||
Add one keyword. Publish to npm. Done.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-3xl mb-2" aria-hidden="true">
|
||||
⚡
|
||||
</div>
|
||||
<h3 className="font-semibold mb-1 text-foreground">Auto Discovery</h3>
|
||||
<h3 className="font-semibold mb-1 text-foreground">Reach All Agents</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
Your tool appears on tpmjs.com within 15 minutes
|
||||
Discoverable by every agent using the toolspace
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-3xl mb-2" aria-hidden="true">
|
||||
📊
|
||||
</div>
|
||||
<h3 className="font-semibold mb-1 text-foreground">Quality Metrics</h3>
|
||||
<h3 className="font-semibold mb-1 text-foreground">Surface Quality</h3>
|
||||
<p className="text-sm text-foreground-secondary">
|
||||
Automatic scoring based on docs, downloads, and stars
|
||||
Health checks and metrics help tools get discovered
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { Badge } from '@tpmjs/ui/Badge/Badge';
|
||||
import { Button } from '@tpmjs/ui/Button/Button';
|
||||
import { Container } from '@tpmjs/ui/Container/Container';
|
||||
import type { IconName } from '@tpmjs/ui/Icon/Icon';
|
||||
import { Icon } from '@tpmjs/ui/Icon/Icon';
|
||||
import Link from 'next/link';
|
||||
|
||||
|
|
@ -11,20 +12,26 @@ import Link from 'next/link';
|
|||
// ============================================================================
|
||||
|
||||
interface FeatureCardProps {
|
||||
icon: string;
|
||||
icon: IconName;
|
||||
title: string;
|
||||
description: string;
|
||||
badge?: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
function FeatureCard({ icon, title, description, badge, href }: FeatureCardProps): React.ReactElement {
|
||||
function FeatureCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
badge,
|
||||
href,
|
||||
}: FeatureCardProps): React.ReactElement {
|
||||
const content = (
|
||||
<div className="group h-full p-6 border border-dashed border-border bg-surface hover:border-primary hover:bg-primary/5 transition-all duration-200">
|
||||
{/* Icon */}
|
||||
<div className="w-12 h-12 flex items-center justify-center mb-4 border border-dashed border-border bg-background group-hover:border-primary group-hover:bg-primary/10 transition-all duration-200">
|
||||
<Icon
|
||||
icon={icon as any}
|
||||
icon={icon}
|
||||
size="md"
|
||||
className="text-foreground-secondary group-hover:text-primary transition-colors duration-200"
|
||||
/>
|
||||
|
|
@ -61,28 +68,34 @@ function FeatureCard({ icon, title, description, badge, href }: FeatureCardProps
|
|||
// ============================================================================
|
||||
|
||||
export function FeaturesSection(): React.ReactElement {
|
||||
const features = [
|
||||
const features: Array<{
|
||||
icon: IconName;
|
||||
title: string;
|
||||
description: string;
|
||||
badge: string;
|
||||
href?: string;
|
||||
}> = [
|
||||
{
|
||||
icon: 'search',
|
||||
title: 'tool registry',
|
||||
title: 'semantic retrieval',
|
||||
description:
|
||||
'Browse 1M+ AI tools from npm. Auto-discovered within minutes of publication with quality scoring and health monitoring.',
|
||||
badge: 'auto-sync',
|
||||
'Agent describes what it needs, TPMJS returns the right tools. Selection at scale through semantic search and quality scoring.',
|
||||
badge: 'core',
|
||||
href: '/tool/tool-search',
|
||||
},
|
||||
{
|
||||
icon: 'puzzle',
|
||||
title: 'omega agent',
|
||||
description:
|
||||
'Chat with an AI that dynamically discovers and executes tools based on your requests. No configuration needed.',
|
||||
badge: 'live',
|
||||
'See toolspace virtualization in action. Omega discovers and executes from 1M+ tools on-demand. No pre-configuration.',
|
||||
badge: 'demo',
|
||||
href: '/omega',
|
||||
},
|
||||
{
|
||||
icon: 'folder',
|
||||
title: 'collections',
|
||||
description:
|
||||
'Curate tool sets for specific use cases. Add test scenarios to validate behavior and generate living documentation.',
|
||||
'Curate domain-specific toolsets. Collections become instant MCP servers with stable URLs and progressive tool loading.',
|
||||
badge: 'shareable',
|
||||
href: '/collections',
|
||||
},
|
||||
|
|
@ -90,7 +103,7 @@ export function FeaturesSection(): React.ReactElement {
|
|||
icon: 'user',
|
||||
title: 'custom agents',
|
||||
description:
|
||||
'Build AI agents with your choice of LLM, custom prompts, and curated tool collections. Share publicly or keep private.',
|
||||
'Build agents with any LLM and custom prompts. The toolspace scales independently of agent complexity.',
|
||||
badge: 'unlimited',
|
||||
href: '/agents',
|
||||
},
|
||||
|
|
@ -98,22 +111,22 @@ export function FeaturesSection(): React.ReactElement {
|
|||
icon: 'link',
|
||||
title: 'mcp protocol',
|
||||
description:
|
||||
'Works with Claude Desktop, Cursor, Windsurf, and any MCP-compatible client. One URL, instant access to all tools.',
|
||||
'MCP is the socket. TPMJS is the operating system. Works with Claude, Cursor, Windsurf, and any MCP client.',
|
||||
badge: 'universal',
|
||||
href: '/integrations',
|
||||
},
|
||||
{
|
||||
icon: 'key',
|
||||
title: 'secure execution',
|
||||
title: 'sandboxed execution',
|
||||
description:
|
||||
'Every tool runs in an isolated sandbox with rate limiting and timeout handling. Your credentials are encrypted at rest.',
|
||||
badge: 'sandboxed',
|
||||
'Every tool runs isolated with timeouts and rate limits. npm is storage, TPMJS is the secure runtime.',
|
||||
badge: 'secure',
|
||||
},
|
||||
{
|
||||
icon: 'checkCircle',
|
||||
title: 'test scenarios',
|
||||
title: 'quality signals',
|
||||
description:
|
||||
'AI-generated test scenarios validate tool behavior. Track pass rates, execution times, and quality scores.',
|
||||
'Health checks, test scenarios, and usage metrics. Surface the best tools from the infinite toolspace.',
|
||||
badge: 'automated',
|
||||
href: '/scenarios',
|
||||
},
|
||||
|
|
@ -121,15 +134,15 @@ export function FeaturesSection(): React.ReactElement {
|
|||
icon: 'message',
|
||||
title: 'living skills',
|
||||
description:
|
||||
'Documentation that evolves from real usage. Skills emerge from question patterns and proven behaviors.',
|
||||
badge: 'new',
|
||||
'Documentation emerges from real usage. Tools teach agents how to use them through proven patterns.',
|
||||
badge: 'evolving',
|
||||
href: '/docs/skills',
|
||||
},
|
||||
{
|
||||
icon: 'terminal',
|
||||
title: 'developer sdk',
|
||||
title: 'publish once',
|
||||
description:
|
||||
'Publish tools with one keyword. Full TypeScript support, Vercel AI SDK integration, and automatic schema extraction.',
|
||||
'Add one keyword to package.json. Your tool joins the infinite toolspace within minutes. Zero configuration.',
|
||||
badge: 'npm',
|
||||
href: '/publish',
|
||||
},
|
||||
|
|
@ -141,14 +154,14 @@ export function FeaturesSection(): React.ReactElement {
|
|||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
|
||||
platform capabilities
|
||||
toolspace virtualization
|
||||
</p>
|
||||
<h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
|
||||
everything you need
|
||||
the retrieval layer
|
||||
</h2>
|
||||
<p className="text-base text-foreground-secondary max-w-2xl mx-auto font-sans">
|
||||
From discovery to execution, TPMJS provides the complete infrastructure for AI tool
|
||||
development and deployment.
|
||||
npm stores the tools. TPMJS retrieves the right ones. Agents get infinite capabilities
|
||||
without infinite context windows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,14 +62,19 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
|
|||
{/* Main Heading */}
|
||||
<div className="max-w-7xl">
|
||||
<h1
|
||||
className="mb-8 font-bold leading-none tracking-tight text-foreground"
|
||||
className="mb-4 font-bold leading-none tracking-tight text-foreground"
|
||||
style={{ fontSize: 'clamp(48px, 10vw, 96px)' }}
|
||||
>
|
||||
THE NPM FOR AI TOOLS
|
||||
INFINITE TOOLSPACE
|
||||
</h1>
|
||||
|
||||
{/* Tagline */}
|
||||
<p className="mb-8 font-mono text-lg md:text-xl text-brutalist-accent uppercase tracking-wide">
|
||||
A million tools. Zero configuration.
|
||||
</p>
|
||||
|
||||
{/* Live Metrics Strip */}
|
||||
<div className="mb-12 flex flex-wrap items-center gap-3 border-l-[6px] border-brutalist-accent pl-6 font-mono text-base md:text-lg font-bold uppercase tracking-wider">
|
||||
<div className="mb-10 flex flex-wrap items-center gap-3 border-l-[6px] border-foreground/20 pl-6 font-mono text-base md:text-lg font-bold uppercase tracking-wider">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-foreground">{formatNumber(stats.packageCount)}</span>
|
||||
<span className="text-foreground-secondary">PACKAGES</span>
|
||||
|
|
@ -79,12 +84,17 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
|
|||
<span className="text-foreground">{formatNumber(stats.toolCount)}</span>
|
||||
<span className="text-foreground-secondary">TOOLS</span>
|
||||
</div>
|
||||
<span className="text-foreground-tertiary">/</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-foreground">1M+</span>
|
||||
<span className="text-foreground-secondary">ON NPM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subheading */}
|
||||
<p className="mb-12 max-w-3xl text-xl md:text-2xl font-medium leading-relaxed text-foreground-secondary tracking-tight">
|
||||
Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and
|
||||
any MCP-compatible client.
|
||||
Any agent can use a million tools without loading a million tools. TPMJS is the
|
||||
retrieval layer between npm and AI agents.
|
||||
</p>
|
||||
|
||||
{/* Brutalist Search Interface */}
|
||||
|
|
|
|||
107
apps/web/src/components/home/ToolspaceSection.tsx
Normal file
107
apps/web/src/components/home/ToolspaceSection.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
'use client';
|
||||
|
||||
import { Container } from '@tpmjs/ui/Container/Container';
|
||||
import type { IconName } from '@tpmjs/ui/Icon/Icon';
|
||||
import { Icon } from '@tpmjs/ui/Icon/Icon';
|
||||
|
||||
const stages: Array<{
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: IconName;
|
||||
color: string;
|
||||
}> = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'npm stores everything',
|
||||
description: '1M+ packages. Every tool ever published. Too many for any context window.',
|
||||
icon: 'box',
|
||||
color: 'text-foreground-tertiary',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'TPMJS retrieves what matters',
|
||||
description:
|
||||
'Semantic search + quality signals surface the right tools for any task. Selection at scale.',
|
||||
icon: 'search',
|
||||
color: 'text-primary',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Agent uses what it needs',
|
||||
description:
|
||||
'Progressive disclosure. Tools load on-demand. Infinite capabilities, finite tokens.',
|
||||
icon: 'puzzle',
|
||||
color: 'text-brutalist-accent',
|
||||
},
|
||||
];
|
||||
|
||||
export function ToolspaceSection(): React.ReactElement {
|
||||
return (
|
||||
<section className="py-20 bg-surface border-t border-border">
|
||||
<Container size="xl" padding="lg">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
|
||||
how it works
|
||||
</p>
|
||||
<h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
|
||||
toolspace virtualization
|
||||
</h2>
|
||||
<p className="text-base text-foreground-secondary max-w-2xl mx-auto font-sans">
|
||||
Use a million tools without loading a million tools. TPMJS is the retrieval layer
|
||||
between npm and your agent.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pipeline Visualization */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-4">
|
||||
{stages.map((stage, index) => (
|
||||
<div key={stage.number} className="relative">
|
||||
{/* Connector Line (hidden on mobile, between cards on desktop) */}
|
||||
{index < stages.length - 1 && (
|
||||
<div className="hidden md:block absolute top-1/2 -right-2 w-4 h-[2px] bg-border" />
|
||||
)}
|
||||
|
||||
<div className="p-6 border border-dashed border-border bg-background h-full">
|
||||
{/* Stage Number */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<span className={`font-mono text-3xl font-bold ${stage.color}`}>
|
||||
{stage.number}
|
||||
</span>
|
||||
<div
|
||||
className={`w-10 h-10 flex items-center justify-center border border-dashed border-border ${stage.color}`}
|
||||
>
|
||||
<Icon icon={stage.icon} size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="font-mono text-lg font-semibold text-foreground mb-2 lowercase">
|
||||
{stage.title}
|
||||
</h3>
|
||||
<p className="text-sm text-foreground-secondary leading-relaxed">
|
||||
{stage.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Tagline */}
|
||||
<div className="mt-12 text-center">
|
||||
<div className="inline-flex items-center gap-4 px-6 py-4 border border-dashed border-primary bg-primary/5">
|
||||
<Icon icon="star" size="md" className="text-primary" />
|
||||
<p className="font-mono text-sm text-foreground">
|
||||
<span className="text-primary font-semibold">npm</span> is storage.{' '}
|
||||
<span className="text-primary font-semibold">TPMJS</span> is the operating system
|
||||
for tool access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue