1e779007be
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.
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
const codeLines = [
|
|
"import { searchTpmjsToolsTool } from '@tpmjs/search-registry';",
|
|
"import { registryExecuteTool } from '@tpmjs/registry-execute';",
|
|
'',
|
|
'const result = await generateText({',
|
|
" model: openai('gpt-4-turbo'),",
|
|
' tools: { search: searchTpmjsToolsTool, execute: registryExecuteTool },',
|
|
" prompt: 'Format this markdown table for me...',",
|
|
'});',
|
|
];
|
|
|
|
export function SolutionSlide(): 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-emerald-900/10 via-transparent to-cyan-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">
|
|
What If Tools Were Dynamic?
|
|
</h2>
|
|
<p className="text-xl text-white/50 mb-12">Two imports. Infinite tools at runtime.</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-emerald-400'
|
|
: line.includes('searchTpmjsToolsTool') || line.includes('registryExecuteTool')
|
|
? 'text-cyan-400'
|
|
: line.includes('generateText')
|
|
? 'text-purple-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"
|
|
>
|
|
{['Discover at runtime', 'Execute in sandbox', 'No bundling'].map((text) => (
|
|
<span
|
|
key={text}
|
|
className="px-3 py-1.5 rounded-full border border-emerald-500/30 text-emerald-400/70 text-sm font-mono"
|
|
>
|
|
{text}
|
|
</span>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|