From 22a13166b22ef17b3e5d4406a5a522c3ec83453d Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Tue, 30 Dec 2025 13:53:54 +1000 Subject: [PATCH] feat: add general overview tutorial - Add 6-slide overview tutorial covering TPMJS concepts - Slides: Welcome, What is TPMJS, Ecosystem, Architecture, Use Cases, Explore - Add OverviewSlideshow component and page route at /overview - Update main tutorial page with overview as first card --- apps/tutorial/src/app/overview/page.tsx | 16 +++ apps/tutorial/src/app/page.tsx | 29 ++++- .../src/components/OverviewSlideshow.tsx | 85 ++++++++++++++ .../overview-slides/ArchitectureSlide.tsx | 80 +++++++++++++ .../overview-slides/EcosystemSlide.tsx | 106 ++++++++++++++++++ .../overview-slides/ExploreSlide.tsx | 92 +++++++++++++++ .../overview-slides/OverviewWelcomeSlide.tsx | 90 +++++++++++++++ .../overview-slides/UseCasesSlide.tsx | 75 +++++++++++++ .../overview-slides/WhatIsTpmjsSlide.tsx | 66 +++++++++++ 9 files changed, 637 insertions(+), 2 deletions(-) create mode 100644 apps/tutorial/src/app/overview/page.tsx create mode 100644 apps/tutorial/src/components/OverviewSlideshow.tsx create mode 100644 apps/tutorial/src/components/overview-slides/ArchitectureSlide.tsx create mode 100644 apps/tutorial/src/components/overview-slides/EcosystemSlide.tsx create mode 100644 apps/tutorial/src/components/overview-slides/ExploreSlide.tsx create mode 100644 apps/tutorial/src/components/overview-slides/OverviewWelcomeSlide.tsx create mode 100644 apps/tutorial/src/components/overview-slides/UseCasesSlide.tsx create mode 100644 apps/tutorial/src/components/overview-slides/WhatIsTpmjsSlide.tsx diff --git a/apps/tutorial/src/app/overview/page.tsx b/apps/tutorial/src/app/overview/page.tsx new file mode 100644 index 0000000..05489b2 --- /dev/null +++ b/apps/tutorial/src/app/overview/page.tsx @@ -0,0 +1,16 @@ +import { OverviewSlideshow } from '@/components/OverviewSlideshow'; +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'Overview | TPMJS Tutorials', + description: + 'General overview of TPMJS - the tool registry for AI agents. Learn what TPMJS is, how it works, and who uses it.', +}; + +export default function OverviewPage(): React.ReactElement { + return ( +
+ +
+ ); +} diff --git a/apps/tutorial/src/app/page.tsx b/apps/tutorial/src/app/page.tsx index 70a5b0b..7342375 100644 --- a/apps/tutorial/src/app/page.tsx +++ b/apps/tutorial/src/app/page.tsx @@ -4,6 +4,31 @@ import { motion } from 'framer-motion'; import Link from 'next/link'; const tutorials = [ + { + id: 'overview', + title: 'General Overview', + subtitle: 'Start Here', + description: 'What is TPMJS? Learn about the registry, ecosystem, and architecture.', + href: '/overview', + gradient: 'from-emerald-500 to-teal-600', + icon: ( + + ), + features: ['What is TPMJS', 'Ecosystem', 'Architecture'], + }, { id: 'agents', title: 'For Agent Developers', @@ -74,7 +99,7 @@ export default function TutorialHome(): React.ReactElement { /> {/* Content */} -
+
{/* Header */} {/* Tutorial Cards */} -
+
{tutorials.map((tutorial, index) => ( + {/* Background gradient */} +
+ + {/* Subtle grid pattern */} +
+ + {/* Back button */} + + + Tutorials + + + {/* Slides */} + + {SLIDES.map((slide, index) => ( + + + + ))} + + + {/* Navigation */} + + + {/* Progress */} + + + {/* Keyboard hint */} +
+ Use arrow keys or click to navigate +
+
+ ); +} diff --git a/apps/tutorial/src/components/overview-slides/ArchitectureSlide.tsx b/apps/tutorial/src/components/overview-slides/ArchitectureSlide.tsx new file mode 100644 index 0000000..d8106bf --- /dev/null +++ b/apps/tutorial/src/components/overview-slides/ArchitectureSlide.tsx @@ -0,0 +1,80 @@ +'use client'; + +import { motion } from 'framer-motion'; + +const components = [ + { + name: 'npm Sync', + description: 'Monitors npm changes feed every 2 minutes', + detail: 'Catches new packages with tpmjs-tool keyword', + icon: '🔄', + }, + { + name: 'Schema Extraction', + description: 'Extracts Zod schemas to JSON Schema', + detail: 'Supports AI SDK, Zod v3, and Zod v4', + icon: '📋', + }, + { + name: 'Quality Scoring', + description: 'Ranks tools by tier, downloads, and stars', + detail: 'Rich metadata = higher visibility', + icon: '⭐', + }, + { + name: 'Sandbox Executor', + description: 'Runs tools in isolated Deno environment', + detail: 'No installs, secure by default', + icon: '🏖️', + }, +]; + +export function ArchitectureSlide(): React.ReactElement { + return ( +
+
+ + +

Under the Hood

+

Four core systems working together

+ +
+ {components.map((component, index) => ( + +
{component.icon}
+
{component.name}
+
{component.description}
+
{component.detail}
+ + ))} +
+ + + PostgreSQL + + + Prisma + + + Next.js + + + Deno + + +
+ ); +} diff --git a/apps/tutorial/src/components/overview-slides/EcosystemSlide.tsx b/apps/tutorial/src/components/overview-slides/EcosystemSlide.tsx new file mode 100644 index 0000000..16f9a78 --- /dev/null +++ b/apps/tutorial/src/components/overview-slides/EcosystemSlide.tsx @@ -0,0 +1,106 @@ +'use client'; + +import { motion } from 'framer-motion'; + +const participants = [ + { + role: 'Package Authors', + action: 'Publish tools to npm with tpmjs-tool keyword', + color: 'purple', + }, + { + role: 'TPMJS Registry', + action: 'Syncs from npm, extracts schemas, scores quality', + color: 'emerald', + }, + { + role: 'Agent Developers', + action: 'Use meta-tools to search and execute at runtime', + color: 'cyan', + }, +]; + +export function EcosystemSlide(): React.ReactElement { + return ( +
+
+ + +

The Ecosystem

+

Three participants, one registry

+ + {/* Flow diagram */} +
+ {participants.map((participant, index) => ( + +
+
+ {participant.role} +
+
{participant.action}
+
+ + {/* Arrow between items */} + {index < participants.length - 1 && ( + + + + + + )} + + ))} +
+ + +

+ 200+ tools from{' '} + 50+ packages available today +

+ + +
+ ); +} diff --git a/apps/tutorial/src/components/overview-slides/ExploreSlide.tsx b/apps/tutorial/src/components/overview-slides/ExploreSlide.tsx new file mode 100644 index 0000000..f45215c --- /dev/null +++ b/apps/tutorial/src/components/overview-slides/ExploreSlide.tsx @@ -0,0 +1,92 @@ +'use client'; + +import { motion } from 'framer-motion'; + +const resources = [ + { + title: 'Browse Tools', + description: 'Explore 200+ tools in the registry', + href: 'https://tpmjs.com', + icon: '🔍', + }, + { + title: 'For Agents', + description: 'Learn to use search and execute', + href: '/agents', + icon: '🤖', + internal: true, + }, + { + title: 'For Authors', + description: 'Publish your tools to the registry', + href: '/authors', + icon: '📦', + internal: true, + }, + { + title: 'GitHub', + description: 'View the source code', + href: 'https://github.com/tpmjs/tpmjs', + icon: '💻', + }, +]; + +export function ExploreSlide(): React.ReactElement { + return ( +
+
+ + +

Start Exploring

+

Choose your next step

+ +
+ {resources.map((resource, index) => ( + +
+ {resource.icon} +
+
{resource.title}
+
{resource.description}
+ + ))} +
+ + +

Ready to try it?

+ + npm install @tpmjs/search-registry + + + + + tpmjs.com — The tool registry for AI agents + + +
+ ); +} diff --git a/apps/tutorial/src/components/overview-slides/OverviewWelcomeSlide.tsx b/apps/tutorial/src/components/overview-slides/OverviewWelcomeSlide.tsx new file mode 100644 index 0000000..66d149e --- /dev/null +++ b/apps/tutorial/src/components/overview-slides/OverviewWelcomeSlide.tsx @@ -0,0 +1,90 @@ +'use client'; + +import { motion } from 'framer-motion'; + +export function OverviewWelcomeSlide(): React.ReactElement { + return ( +
+ {/* Gradient background */} +
+ + {/* Main content */} + + + + General Overview + + + + + + TPMJS + + + + + The Tool Package Manager for AI + + + + An open registry of AI SDK tools that agents can discover and execute at runtime + + + + {/* Press to continue */} + + + + + Press any key + +
+ ); +} diff --git a/apps/tutorial/src/components/overview-slides/UseCasesSlide.tsx b/apps/tutorial/src/components/overview-slides/UseCasesSlide.tsx new file mode 100644 index 0000000..2a8014f --- /dev/null +++ b/apps/tutorial/src/components/overview-slides/UseCasesSlide.tsx @@ -0,0 +1,75 @@ +'use client'; + +import { motion } from 'framer-motion'; + +const useCases = [ + { + persona: 'AI Agent Developers', + useCase: 'Give agents dynamic capabilities without bundling tools', + example: '"Find me a weather tool" → Agent discovers and uses it', + gradient: 'from-cyan-500 to-blue-500', + }, + { + persona: 'Tool Authors', + useCase: 'Get your AI SDK tools discovered by agents worldwide', + example: 'npm publish with tpmjs-tool keyword → Indexed in minutes', + gradient: 'from-purple-500 to-pink-500', + }, + { + persona: 'Platform Builders', + useCase: 'Build agent platforms with extensible tool ecosystems', + example: 'Users bring their own tools, you provide the runtime', + gradient: 'from-emerald-500 to-teal-500', + }, +]; + +export function UseCasesSlide(): React.ReactElement { + return ( +
+
+ + +

Who Uses TPMJS?

+

Three audiences, shared ecosystem

+ +
+ {useCases.map((item, index) => ( + +
+
+ {item.persona} +
+
+
+
{item.useCase}
+
{item.example}
+
+ + ))} +
+ + + All built on standard npm packages and the AI SDK specification + + +
+ ); +} diff --git a/apps/tutorial/src/components/overview-slides/WhatIsTpmjsSlide.tsx b/apps/tutorial/src/components/overview-slides/WhatIsTpmjsSlide.tsx new file mode 100644 index 0000000..653ac5f --- /dev/null +++ b/apps/tutorial/src/components/overview-slides/WhatIsTpmjsSlide.tsx @@ -0,0 +1,66 @@ +'use client'; + +import { motion } from 'framer-motion'; + +const concepts = [ + { + title: 'A Registry', + description: 'A curated database of AI SDK-compatible tools published to npm', + icon: '📦', + }, + { + title: 'A Discovery API', + description: 'Agents search for tools by query, category, or context at runtime', + icon: '🔍', + }, + { + title: 'A Sandbox Executor', + description: 'Run any tool from the registry securely without installing it', + icon: '⚡', + }, +]; + +export function WhatIsTpmjsSlide(): React.ReactElement { + return ( +
+
+ + +

What is TPMJS?

+

+ Think of it as npm for AI agent tools — but with runtime discovery and execution +

+ +
+ {concepts.map((concept, index) => ( + +
{concept.icon}
+
{concept.title}
+
{concept.description}
+ + ))} +
+ + + Built on the Vercel AI SDK tool specification + + +
+ ); +}