From ce44aeab3aee35babdb7092ab66cc3cee2027d70 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Wed, 4 Feb 2026 03:45:50 +1000 Subject: [PATCH] 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" --- apps/web/src/app/page.tsx | 52 +++++---- .../src/components/home/FeaturesSection.tsx | 63 +++++++---- apps/web/src/components/home/HeroSection.tsx | 20 +++- .../src/components/home/ToolspaceSection.tsx | 107 ++++++++++++++++++ 4 files changed, 190 insertions(+), 52 deletions(-) create mode 100644 apps/web/src/components/home/ToolspaceSection.tsx diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index db0e83e..1c0e8ae 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -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 { {/* Hero Section - Dithered Design */} + {/* Toolspace Virtualization Concept */} + + {/* Features Section */} @@ -158,11 +162,14 @@ export default async function HomePage(): Promise {
-

- Featured Tools +

+ from the toolspace +

+

+ top quality tools

-

- Production-ready tools you can use today. Add to your AI agent in one line. +

+ Surfaced by quality signals: health checks, downloads, documentation richness.

@@ -358,13 +365,14 @@ export default async function HomePage(): Promise { {/* Section Header */}

- universal compatibility + mcp is the socket

- works everywhere + plug into the toolspace

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

@@ -422,7 +430,7 @@ export default async function HomePage(): Promise { {/* Code Example - Fieldset Style */}
- quick start + connect to the toolspace

@@ -458,8 +466,8 @@ export default async function HomePage(): Promise {

- add to config → instant access to{' '} - 170+ tools + one url → infinite toolspace →{' '} + tools load on-demand

@@ -471,11 +479,11 @@ export default async function HomePage(): Promise {

- Publish Your AI Tool + Join the Infinite Toolspace

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

{/* Generator Highlight Box */} @@ -486,11 +494,11 @@ export default async function HomePage(): Promise {

- Start with Our Package Generator + One Command. Infinite Reach.

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

@@ -515,27 +523,27 @@ export default async function HomePage(): Promise { -

Quick Setup

+

Publish Once

- Add one keyword to package.json and publish to NPM + Add one keyword. Publish to npm. Done.

-

Auto Discovery

+

Reach All Agents

- Your tool appears on tpmjs.com within 15 minutes + Discoverable by every agent using the toolspace

-

Quality Metrics

+

Surface Quality

- Automatic scoring based on docs, downloads, and stars + Health checks and metrics help tools get discovered

diff --git a/apps/web/src/components/home/FeaturesSection.tsx b/apps/web/src/components/home/FeaturesSection.tsx index 84bf869..fd0abdf 100644 --- a/apps/web/src/components/home/FeaturesSection.tsx +++ b/apps/web/src/components/home/FeaturesSection.tsx @@ -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 = (
{/* Icon */}
@@ -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 */}

- platform capabilities + toolspace virtualization

- everything you need + the retrieval layer

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

diff --git a/apps/web/src/components/home/HeroSection.tsx b/apps/web/src/components/home/HeroSection.tsx index a277d59..f88e15c 100644 --- a/apps/web/src/components/home/HeroSection.tsx +++ b/apps/web/src/components/home/HeroSection.tsx @@ -62,14 +62,19 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement { {/* Main Heading */}

- THE NPM FOR AI TOOLS + INFINITE TOOLSPACE

+ {/* Tagline */} +

+ A million tools. Zero configuration. +

+ {/* Live Metrics Strip */} -
+
{formatNumber(stats.packageCount)} PACKAGES @@ -79,12 +84,17 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement { {formatNumber(stats.toolCount)} TOOLS
+ / +
+ 1M+ + ON NPM +
{/* Subheading */}

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

{/* Brutalist Search Interface */} diff --git a/apps/web/src/components/home/ToolspaceSection.tsx b/apps/web/src/components/home/ToolspaceSection.tsx new file mode 100644 index 0000000..9cd7a03 --- /dev/null +++ b/apps/web/src/components/home/ToolspaceSection.tsx @@ -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 Header */} +
+

+ how it works +

+

+ toolspace virtualization +

+

+ Use a million tools without loading a million tools. TPMJS is the retrieval layer + between npm and your agent. +

+
+ + {/* Pipeline Visualization */} +
+
+ {stages.map((stage, index) => ( +
+ {/* Connector Line (hidden on mobile, between cards on desktop) */} + {index < stages.length - 1 && ( +
+ )} + +
+ {/* Stage Number */} +
+ + {stage.number} + +
+ +
+
+ + {/* Content */} +

+ {stage.title} +

+

+ {stage.description} +

+
+
+ ))} +
+ + {/* Bottom Tagline */} +
+
+ +

+ npm is storage.{' '} + TPMJS is the operating system + for tool access. +

+
+
+
+ +
+ ); +}