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.
90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
const codeLines = [
|
|
"import { weatherTool } from './tools/weather';",
|
|
"import { searchTool } from './tools/search';",
|
|
"import { calendarTool } from './tools/calendar';",
|
|
"import { emailTool } from './tools/email';",
|
|
'// ... 47 more imports',
|
|
'',
|
|
'const result = await generateText({',
|
|
" model: openai('gpt-4-turbo'),",
|
|
' tools: { weather, search, calendar, email, ... },',
|
|
'});',
|
|
];
|
|
|
|
export function ProblemSlide(): React.ReactElement {
|
|
return (
|
|
<div className="relative flex flex-col items-center justify-center h-full px-8 text-center">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-orange-900/10 via-transparent to-red-900/10 pointer-events-none" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative z-10 max-w-4xl w-full"
|
|
>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">AI SDK Tools Are Static</h2>
|
|
<p className="text-xl text-white/50 mb-12">
|
|
You import them. You bundle them. They're compiled in.
|
|
</p>
|
|
|
|
{/* Code block */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="max-w-2xl mx-auto text-left"
|
|
>
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-[#1e1e2e] rounded-t-xl border-b border-white/5">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
|
<span className="ml-4 text-xs text-white/30 font-mono">agent.ts</span>
|
|
</div>
|
|
<div className="bg-[#1e1e2e] p-6 rounded-b-xl overflow-x-auto">
|
|
{codeLines.map((line, i) => (
|
|
<motion.div
|
|
key={line || `empty-${i}`}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.5 + i * 0.1 }}
|
|
className={`font-mono text-sm leading-relaxed ${
|
|
line.startsWith('import')
|
|
? 'text-purple-400'
|
|
: line.startsWith('//')
|
|
? 'text-white/30'
|
|
: line.includes('generateText')
|
|
? 'text-cyan-400'
|
|
: 'text-white/70'
|
|
}`}
|
|
>
|
|
{line || '\u00A0'}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.5 }}
|
|
className="mt-8 flex flex-wrap justify-center gap-3"
|
|
>
|
|
{['Every tool compiled in', 'Bundle grows forever', 'No runtime discovery'].map(
|
|
(text) => (
|
|
<span
|
|
key={text}
|
|
className="px-3 py-1.5 rounded-full border border-orange-500/30 text-orange-400/70 text-sm font-mono"
|
|
>
|
|
{text}
|
|
</span>
|
|
)
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|