feat: add 3 new tutorials (first-tool, agent-example, playground)

- Build Your First Tool: Step-by-step guide from npm init to published
- Real-World Agent: Complete working example with meta-tools
- Interactive Playground: How to test tools in browser

Each tutorial has 5-6 slides with code examples and animations.
Updated main page to show all 6 tutorials in grid.

apps/tutorial/src/app/agent-example/page.tsx

@@ -0,0 +1,16 @@
+import { AgentExampleSlideshow } from '@/components/AgentExampleSlideshow';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Real-World Agent Example | TPMJS Tutorials',
+  description:
+    'Build a complete AI agent that discovers and uses tools dynamically from the TPMJS registry. Working code examples included.',
+};
+
+export default function AgentExamplePage(): React.ReactElement {
+  return (
+    <main className="h-screen w-screen overflow-hidden">
+      <AgentExampleSlideshow />
+    </main>
+  );
+}

apps/tutorial/src/app/first-tool/page.tsx

@@ -0,0 +1,16 @@
+import { FirstToolSlideshow } from '@/components/FirstToolSlideshow';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Build Your First Tool | TPMJS Tutorials',
+  description:
+    'Step-by-step guide to creating your first AI SDK tool for the TPMJS registry. From npm init to published tool in 10 minutes.',
+};
+
+export default function FirstToolPage(): React.ReactElement {
+  return (
+    <main className="h-screen w-screen overflow-hidden">
+      <FirstToolSlideshow />
+    </main>
+  );
+}

apps/tutorial/src/app/page.tsx

@@ -80,6 +80,81 @@ const tutorials = [
     ),
     features: ['tpmjs keyword', 'Schema extraction', 'Quality scoring'],
   },
+  {
+    id: 'first-tool',
+    title: 'Build Your First Tool',
+    subtitle: 'Step-by-Step',
+    description: 'Create an AI SDK tool from scratch and publish it to the registry in 10 minutes.',
+    href: '/first-tool',
+    gradient: 'from-orange-500 to-amber-600',
+    icon: (
+      <svg
+        className="w-8 h-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"
+        />
+      </svg>
+    ),
+    features: ['npm init', 'Zod schema', 'npm publish'],
+  },
+  {
+    id: 'agent-example',
+    title: 'Real-World Agent',
+    subtitle: 'Working Example',
+    description: 'Build a complete agent that discovers and uses tools dynamically.',
+    href: '/agent-example',
+    gradient: 'from-rose-500 to-pink-600',
+    icon: (
+      <svg
+        className="w-8 h-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z"
+        />
+      </svg>
+    ),
+    features: ['generateText', 'maxSteps', 'Meta-tools'],
+  },
+  {
+    id: 'playground',
+    title: 'Interactive Playground',
+    subtitle: 'Try Before Install',
+    description: 'Test any tool directly in your browser without installation.',
+    href: '/playground',
+    gradient: 'from-sky-500 to-blue-600',
+    icon: (
+      <svg
+        className="w-8 h-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+        />
+      </svg>
+    ),
+    features: ['Live execution', 'Schema forms', 'JSON output'],
+  },
 ];
 
 export default function TutorialHome(): React.ReactElement {
@@ -99,7 +174,7 @@ export default function TutorialHome(): React.ReactElement {
       />
 
       {/* Content */}
-      <div className="relative z-10 max-w-5xl w-full">
+      <div className="relative z-10 max-w-6xl w-full">
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}

apps/tutorial/src/app/playground/page.tsx

@@ -0,0 +1,16 @@
+import { PlaygroundSlideshow } from '@/components/PlaygroundSlideshow';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Interactive Playground | TPMJS Tutorials',
+  description:
+    'Learn how to use the TPMJS playground to test tools directly in your browser. No installation required.',
+};
+
+export default function PlaygroundPage(): React.ReactElement {
+  return (
+    <main className="h-screen w-screen overflow-hidden">
+      <PlaygroundSlideshow />
+    </main>
+  );
+}