diff --git a/apps/tutorial/src/components/slides/DiscoverySlide.tsx b/apps/tutorial/src/components/slides/DiscoverySlide.tsx
index 976d814..3033c6b 100644
--- a/apps/tutorial/src/components/slides/DiscoverySlide.tsx
+++ b/apps/tutorial/src/components/slides/DiscoverySlide.tsx
@@ -1,32 +1,6 @@
'use client';
-import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
-import { useEffect, useState } from 'react';
-
-function AnimatedCounter({ value, delay = 0 }: { value: number; delay?: number }) {
- const count = useMotionValue(0);
- const rounded = useTransform(count, (latest) => Math.round(latest));
- const [displayValue, setDisplayValue] = useState(0);
-
- useEffect(() => {
- const timeout = setTimeout(() => {
- const controls = animate(count, value, {
- duration: 2,
- ease: 'easeOut',
- });
- return () => controls.stop();
- }, delay * 1000);
-
- return () => clearTimeout(timeout);
- }, [count, value, delay]);
-
- useEffect(() => {
- const unsubscribe = rounded.on('change', (v) => setDisplayValue(v));
- return unsubscribe;
- }, [rounded]);
-
- return {displayValue};
-}
+import { motion } from 'framer-motion';
export function DiscoverySlide(): React.ReactElement {
return (
@@ -53,60 +27,52 @@ export function DiscoverySlide(): React.ReactElement {
🔍
-
Automatic Discovery
+ Two Users, One Surface
- npm changes feed synced every{' '}
- 2 minutes
+ Same registry. Different clients.
- {/* Stats grid */}
-
+ {/* Two user types */}
+
-
- Tools Registered
+ 👨💻
+ Engineers browsing
+
+ - "Show me the best extraction tools"
+ - "I need one that supports screenshots"
+ - "I need maintained + documented"
+
- 2m
- Sync Interval
-
-
-
- 24/7
- Always Running
+ 🤖
+ Agents selecting
+
+ - "I need to scrape a URL into markdown"
+ - "I need to summarize a PDF with citations"
+ - "I need a company research tool"
+
- {/* Animated sync indicator */}
+ {/* Key insight */}
-
- Live sync active
+ Results are tool-shaped, not just package-shaped.
diff --git a/apps/tutorial/src/components/slides/GetStartedSlide.tsx b/apps/tutorial/src/components/slides/GetStartedSlide.tsx
index a1a4b2b..b482b0f 100644
--- a/apps/tutorial/src/components/slides/GetStartedSlide.tsx
+++ b/apps/tutorial/src/components/slides/GetStartedSlide.tsx
@@ -6,22 +6,22 @@ const links = [
{
label: 'Browse Tools',
href: 'https://tpmjs.com/tool-search',
- description: 'Explore the registry',
+ description: 'Use as a discovery portal',
icon: '🔍',
gradient: 'from-cyan-500 to-blue-500',
},
{
- label: 'Publish Your Tool',
- href: 'https://tpmjs.com/publish',
- description: 'Share with the community',
+ label: 'Publish a Tool',
+ href: 'https://tpmjs.com/docs/publishing',
+ description: 'Clean metadata + examples',
icon: '📦',
gradient: 'from-purple-500 to-pink-500',
},
{
- label: 'Read the Docs',
- href: 'https://tpmjs.com/docs',
- description: 'Learn everything',
- icon: '📚',
+ label: 'The Playground',
+ href: 'https://tpmjs.com/playground',
+ description: 'Try tools before adopting',
+ icon: '🎮',
gradient: 'from-emerald-500 to-teal-500',
},
];
@@ -61,8 +61,8 @@ export function GetStartedSlide(): React.ReactElement {
🚀
- Get Started
- Join the future of AI tooling
+ Try It
+ Discovery chaos is optional
{/* CTA buttons */}
@@ -120,7 +120,7 @@ export function GetStartedSlide(): React.ReactElement {
transition={{ delay: 1.2 }}
className="mt-16 text-white/30 text-sm"
>
- Made with ❤️ for the AI community
+ Tools are inevitable. Discovery chaos isn't.
diff --git a/apps/tutorial/src/components/slides/HowItWorksSlide.tsx b/apps/tutorial/src/components/slides/HowItWorksSlide.tsx
index 5041aab..c44924d 100644
--- a/apps/tutorial/src/components/slides/HowItWorksSlide.tsx
+++ b/apps/tutorial/src/components/slides/HowItWorksSlide.tsx
@@ -3,10 +3,10 @@
import { motion } from 'framer-motion';
const steps = [
- { icon: '📦', label: 'npm publish', description: 'Publish your tool to npm' },
- { icon: '🔍', label: 'Discovery', description: 'Automatic detection' },
- { icon: '📋', label: 'Registry', description: 'Added to TPMJS' },
- { icon: '🤖', label: 'AI Agent', description: 'Ready to use' },
+ { icon: '📝', label: 'What it does', description: 'Description, category, tags' },
+ { icon: '⚙️', label: 'How to call it', description: 'Inputs, schema, examples' },
+ { icon: '🔑', label: 'What it needs', description: 'Env vars, auth hints' },
+ { icon: '📊', label: 'Signals', description: 'Downloads, health, freshness' },
];
export function HowItWorksSlide(): React.ReactElement {
@@ -21,8 +21,8 @@ export function HowItWorksSlide(): React.ReactElement {
transition={{ duration: 0.8 }}
className="relative z-10 max-w-5xl w-full"
>
- How It Works
- From npm to AI in 4 simple steps
+ What TPMJS Stores
+ For each tool, we expose the useful stuff
{/* Flow diagram */}
diff --git a/apps/tutorial/src/components/slides/IntegrationSlide.tsx b/apps/tutorial/src/components/slides/IntegrationSlide.tsx
index a876f59..cd7cf21 100644
--- a/apps/tutorial/src/components/slides/IntegrationSlide.tsx
+++ b/apps/tutorial/src/components/slides/IntegrationSlide.tsx
@@ -4,15 +4,14 @@ import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
const codeLines = [
- { text: "import { tool } from '@tpmjs/sdk';", delay: 0.5 },
- { text: '', delay: 0.8 },
- { text: '// Get any tool from the registry', delay: 1.0 },
- { text: "const webSearch = await tool('web-search');", delay: 1.3 },
- { text: '', delay: 1.6 },
- { text: '// Use it with your AI agent', delay: 1.8 },
- { text: 'const result = await webSearch.execute({', delay: 2.1 },
- { text: " query: 'latest AI news'", delay: 2.4 },
- { text: '});', delay: 2.7 },
+ { text: '// Faster tool evaluation', delay: 0.5 },
+ { text: 'const tool = await tpmjs.find({', delay: 0.8 },
+ { text: " capability: 'web-scraping',", delay: 1.1 },
+ { text: " minQuality: 0.8", delay: 1.4 },
+ { text: '});', delay: 1.7 },
+ { text: '', delay: 2.0 },
+ { text: '// Schema + examples included', delay: 2.2 },
+ { text: 'console.log(tool.schema, tool.examples);', delay: 2.5 },
];
function TypewriterLine({ text, delay }: { text: string; delay: number }) {
@@ -77,8 +76,8 @@ export function IntegrationSlide(): React.ReactElement {
🔌
-
Simple Integration
-
Three lines of code. That's it.
+
Immediate Benefits
+
Even if you do nothing else
{/* Code block */}
- {/* Framework badges */}
+ {/* Benefits badges */}
- {['Vercel AI SDK', 'LangChain', 'Claude', 'OpenAI'].map((framework) => (
+ {['Less spelunking', 'Schemas + examples', 'Shared vocabulary', 'Tool visibility'].map((benefit) => (
- Works with {framework}
+ {benefit}
))}
diff --git a/apps/tutorial/src/components/slides/ProblemSlide.tsx b/apps/tutorial/src/components/slides/ProblemSlide.tsx
index 3998d54..888d338 100644
--- a/apps/tutorial/src/components/slides/ProblemSlide.tsx
+++ b/apps/tutorial/src/components/slides/ProblemSlide.tsx
@@ -73,12 +73,13 @@ export function ProblemSlide(): React.ReactElement {
😵
-
The Problem
+
Tool Sprawl
-
- AI tools are everywhere.
+
+ In modern agent stacks, tools are the{' '}
+ real product surface area.
- Finding and trusting them is hard.
+ But discovery is the bottleneck.
- {['Scattered', 'Inconsistent', 'Unverified', 'Fragmented'].map((word, i) => (
+ {['Dozens of packages', 'Missing schemas', 'Vague READMEs', 'Unknown status'].map((word, i) => (
- Quality Scoring
- Every tool is scored for reliability
+ The Multipliers
+ Extra leverage when you're ready
{/* Main gauge */}
{factor.icon}
- {factor.name}
+ {factor.name}
+ {factor.desc}
- The Solution
+ TPMJS
-
- One registry.
+
+ A registry that indexes AI-tool packages and exposes{' '}
+ normalized, enriched information
- Curated tools. Quality guaranteed.
+ so agents and engineers can{' '}
+ discover the right tool faster.
{/* Organized grid of icons */}
@@ -68,7 +70,7 @@ export function SolutionSlide(): React.ReactElement {
transition={{ delay: 1.5 }}
className="mt-12 flex flex-wrap justify-center gap-4"
>
- {['Organized', 'Consistent', 'Verified', 'Unified'].map((word, i) => (
+ {['Catalog', 'Metadata layer', 'Search surface', 'Consistent contract'].map((word, i) => (
- Rich Tool Data
- Everything you need to know about each tool
+ Tool-Shaped Results
+ Remove guesswork before you integrate
{/* Mock tool card */}
- Tool Package Manager for AI Agents
+ Tool Discovery for AI Agents
{/* Decorative line */}