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 */}