e298109e94
Complete rewrite of all 9 slides to create a coherent story for engineers: 1. Welcome - TPMJS: A Tool Registry for the AI SDK 2. Problem - AI SDK Tools Are Static (compiled in, bundle grows) 3. Solution - Two imports enable dynamic tools at runtime 4. HowItWorks - The two meta-tools (search + execute) 5. Discovery - searchTpmjsToolsTool schema and response 6. Integration - registryExecuteTool execution flow 7. Quality - What gets indexed (schemas, scores, health) 8. ToolDetail - Full agent conversation flow example 9. GetStarted - How to publish tools to the registry Also adds eslint.config.mjs to ignore .next build directory.
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
export function WelcomeSlide(): React.ReactElement {
|
|
return (
|
|
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center overflow-hidden">
|
|
{/* Subtle gradient background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-900/20 via-transparent to-purple-900/20 pointer-events-none" />
|
|
|
|
{/* Main content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: 'easeOut' }}
|
|
className="relative z-10 max-w-4xl"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="mb-8"
|
|
>
|
|
<span className="text-6xl md:text-7xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
|
|
TPMJS
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="text-2xl md:text-3xl font-medium text-white/90 mb-6"
|
|
>
|
|
A Tool Registry for the AI SDK
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.6 }}
|
|
className="text-lg text-white/50 font-mono"
|
|
>
|
|
Dynamic tool discovery and execution for agents
|
|
</motion.p>
|
|
</motion.div>
|
|
|
|
{/* Press to continue */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
className="absolute bottom-12 flex flex-col items-center"
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, 8, 0] }}
|
|
transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }}
|
|
className="text-white/40"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</motion.div>
|
|
<span className="mt-2 text-sm text-white/30 font-mono">Press any key</span>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|