diff --git a/apps/web/src/app/docs/tutorials/agents/page.tsx b/apps/web/src/app/docs/tutorials/agents/page.tsx
new file mode 100644
index 0000000..a278bcd
--- /dev/null
+++ b/apps/web/src/app/docs/tutorials/agents/page.tsx
@@ -0,0 +1,478 @@
+'use client';
+
+import { Button } from '@tpmjs/ui/Button/Button';
+import { Icon } from '@tpmjs/ui/Icon/Icon';
+import Link from 'next/link';
+import { useState } from 'react';
+import { AppFooter } from '~/components/AppFooter';
+import { AppHeader } from '~/components/AppHeader';
+
+interface Slide {
+ id: string;
+ title: string;
+ subtitle?: string;
+ content: React.ReactNode;
+ icon?: string;
+}
+
+const slides: Slide[] = [
+ {
+ id: 'intro',
+ title: 'Build Your First AI Agent',
+ subtitle: 'A step-by-step guide to creating custom AI assistants with TPMJS',
+ icon: '🤖',
+ content: (
+
+
+ AI Agents are custom assistants that can use tools from TPMJS to accomplish tasks. In just
+ 5 steps, you'll have your own agent up and running.
+
+
+
+ 🔑
+ Add API Key
+
+
+ ✨
+ Create Agent
+
+
+ 🔧
+ Add Tools
+
+
+ 💬
+ Start Chatting
+
+
+
+
+ TPMJS supports multiple AI providers. Get an API key from any of these:
+
+
+ {[
+ { name: 'OpenAI', url: 'platform.openai.com/api-keys', models: 'GPT-4o, GPT-4 Turbo' },
+ {
+ name: 'Anthropic',
+ url: 'console.anthropic.com/settings/keys',
+ models: 'Claude 3.5 Sonnet',
+ },
+ { name: 'Google', url: 'aistudio.google.com/apikey', models: 'Gemini 2.0 Flash' },
+ { name: 'Groq', url: 'console.groq.com/keys', models: 'Llama 3.3 70B' },
+ { name: 'Mistral', url: 'console.mistral.ai/api-keys', models: 'Mistral Large' },
+ ].map((provider) => (
+
+ ))}
+
+
+
+ 💡 We recommend OpenAI or Anthropic for the best
+ tool-calling support.
+
+
+
+
+
+
+ 1
+
+
+
Go to Settings
+
+ Navigate to{' '}
+
+ Dashboard → Settings → API Keys
+
+
+
+
+
+
+ 2
+
+
+
Click "Add Key" for your provider
+
+ Each provider card has an "Add Key" button
+
+
+
+
+
+ 3
+
+
+
Paste your API key and save
+
+ Your key is encrypted with AES-256 before storage
+
+
+
+
+
+ Go to API Keys Settings →
+
+
+
+
+
+
Basic Info
+
+
+
Name
+
+ e.g., "Code Helper", "Data Analyst"
+
+
+
+
Description
+
What does your agent do?
+
+
+
+
+
Model Settings
+
+
+
Provider & Model
+
+ Choose from your configured providers
+
+
+
+
System Prompt
+
+ Define your agent's personality & capabilities
+
+
+
+
+
+
+
+ 💡 Tip: Start with the default settings (temperature 0.7) and adjust
+ based on results. Lower temperature = more focused, higher = more creative.
+
+
+
+ Create an Agent →
+
+
+
+
+ Tools let your agent take actions: run code, search the web, fetch data, and more.
+
+
+
+
📦 Individual Tools
+
+ Add specific tools one at a time. Great for focused agents.
+
+
+
+ ✓
+ Execute JavaScript/Python
+
+
+ ✓
+ Fetch web pages
+
+
+ ✓
+ Web search
+
+
+
+
+
📚 Tool Collections
+
+ Add entire collections of related tools at once.
+
+
+
+ ✓
+ Pre-curated tool sets
+
+
+ ✓
+ One-click to add many tools
+
+
+ ✓
+ Community collections
+
+
+
+
+
+ Browse Available Tools →
+
+
+
+
+ Click the "Chat" button on your agent to start a conversation. Your agent will use its
+ tools to help you.
+
+
+
+
+
+ 🤖
+
+
+
Code Helper
+
OpenAI • GPT-4o
+
+
+
+
+
+
+
+ Can you run this JavaScript and tell me the result: [1,2,3].map(x => x * 2)
+
+
+
+
+
+
[Using: code-executor]
+
+ The result is [2, 4, 6]{' '}
+ - each element was multiplied by 2.
+
+
+
+
+
+
+
+ 🎉 Conversations are automatically saved — pick up where you left off
+ anytime!
+
+
+
+
+ You now know everything you need to create powerful AI agents with TPMJS.
+
+
+ Create Your First Agent
+
+
+ View Full Documentation
+
+
+
+
+
What's Next?
+
+
+
Use the API
+
Integrate agents into your apps
+
+
+
Create Collections
+
+ Curate tools for specific use cases
+
+
+
+
Publish Tools
+
+ Add your own tools to the registry
+
+
+
+
+
+
+
+ {/* Progress bar */}
+
+
+
+ {/* Navigation header */}
+
+
+
+
+
Back to Tutorials
+
+
+ {currentSlide + 1} / {slides.length}
+
+
+
+
+ {/* Slide header */}
+
+ {slide.icon &&
{slide.icon} }
+
{slide.title}
+ {slide.subtitle && (
+
{slide.subtitle}
+ )}
+
+
+ {/* Slide content */}
+
{slide.content}
+
+
+
+ {/* Slide indicators */}
+
+ {slides.map((s, index) => (
+ goToSlide(index)}
+ className={`w-3 h-3 rounded-full transition-colors ${
+ index === currentSlide
+ ? 'bg-primary'
+ : index < currentSlide
+ ? 'bg-primary/40'
+ : 'bg-surface-secondary'
+ }`}
+ aria-label={`Go to slide ${index + 1}`}
+ />
+ ))}
+
+
+ {/* Navigation buttons */}
+
+
+
+
+ {currentSlide === slides.length - 1 ? (
+ Get Started →
+
+ ) : (
+
+ Next →
+
+ )}
+
+
+
+
+
+
+
+ The Model Context Protocol (MCP) lets AI assistants use external tools. TPMJS provides an
+ MCP server that gives your AI access to our entire tool registry.
+
+
+
+ 🎯
+ Create Collection
+
+
+ 📋
+ Copy MCP URL
+
+
+ ⚙️
+ Add to Config
+
+
+ ✨
+ Use Tools
+
+
+
+
+ Works with: Claude Desktop • Cursor • Any MCP-compatible client
+
+
+
+
+
+
Without MCP
+
+
+ ✗
+ AI can only process text
+
+
+ ✗
+ No access to external data
+
+
+ ✗
+ Can't take real actions
+
+
+ ✗
+ Limited to knowledge cutoff
+
+
+
+
+
With MCP + TPMJS
+
+
+ ✓
+ Execute code in 40+ languages
+
+
+ ✓
+ Fetch data from any URL
+
+
+ ✓
+ Search the web in real-time
+
+
+ ✓
+ Use specialized tools
+
+
+
+
+
+
+ MCP is an open protocol by Anthropic for connecting AI to external
+ capabilities.
+
+
+
+
+ Collections bundle related tools together. Create one with the tools you need.
+
+
+
+
+ 1
+
+
+
Go to Collections
+
+ Navigate to{' '}
+
+ Dashboard → Collections
+
+
+
+
+
+
+ 2
+
+
+
Create New Collection
+
+ Give it a name like "My Development Tools" or "Research Assistant"
+
+
+
+
+
+ 3
+
+
+
Add Tools
+
+ Search for and add tools you want: code execution, web fetching, etc.
+
+
+
+
+
+ Create a Collection →
+
+
+
+
+ Your collection page shows the MCP URL. Just copy it!
+
+
+
+
+
Collection: My Dev Tools
+
5 tools
+
+
+
MCP Server URL
+
+
+ https://tpmjs.com/mcp/c/your-collection-uid
+
+
+
+
+
+
+
+
+
+ 💡 Tip: The URL format is{' '}
+
+ tpmjs.com/mcp/c/{'{collection-uid}'}
+
+ — you can also find it on your collection's detail page.
+
+
+
+
+ Open your Claude Desktop config file and add the TPMJS MCP server.
+
+
+
+
Config File Location
+
+
+ macOS: ~/Library/Application
+ Support/Claude/claude_desktop_config.json
+
+
+ Windows: {' '}
+ %APPDATA%\Claude\claude_desktop_config.json
+
+
+
+
+
+
+
claude_desktop_config.json
+
+
+ {`{
+ "mcpServers": {
+ "tpmjs-dev-tools": {
+ "command": "npx",
+ "args": [
+ "mcp-remote",
+ "https://tpmjs.com/mcp/c/your-collection-uid"
+ ]
+ }
+ }
+}`}
+
+
+
+
+
+ Replace your-collection-uid{' '}
+ with your actual collection UID
+
+
+ 💡 Restart Claude Desktop after saving the config
+
+
+
+
+ Cursor also supports MCP! Add the server in Cursor settings.
+
+
+
+
Open Cursor Settings
+
+
+ Settings → Features → MCP Servers → + Add Server
+
+
+
+
+
+
+
mcp.json (or via Settings UI)
+
+
+ {`{
+ "mcpServers": {
+ "tpmjs": {
+ "command": "npx",
+ "args": [
+ "mcp-remote",
+ "https://tpmjs.com/mcp/c/your-collection-uid"
+ ]
+ }
+ }
+}`}
+
+
+
+
+
+ Any MCP client works! The URL format is the same regardless of which
+ client you're using. Check your client's documentation for config file location.
+
+
+
+
+ After restarting, Claude will have access to all the tools in your collection.
+
+
+
+
+
+
+ 🦊
+
+
Claude Desktop
+
+
+
+
+
+
+ Run this Python code and show me the output: print("Hello from TPMJS!")
+
+
+
+
+
+
+ Using tool: unsandbox-executeCodeAsync
+
+
Here's the result:
+
+ Hello from TPMJS!
+
+
+
+
+
+
+
+
+ ✓ Code execution
+
+
+ ✓ Web fetching
+
+
+ ✓ Web search
+
+
+ ✓ And more!
+
+
+
+
+ That's it! Your AI assistant can now use any tool in your TPMJS collection.
+
+
+ Manage Collections
+
+
+ View Full Documentation
+
+
+
+
+
Quick Reference
+
+
+
Collection MCP URL
+
+ tpmjs.com/mcp/c/{'{uid}'}
+
+
+
+
Individual Tool MCP URL
+
+ tpmjs.com/mcp/t/{'{tool-slug}'}
+
+
+
+
+ You can also use individual tools without creating a collection!
+
+
+
+
+
+ {/* Progress bar */}
+
+
+
+ {/* Navigation header */}
+
+
+
+
+
Back to Tutorials
+
+
+ {currentSlide + 1} / {slides.length}
+
+
+
+
+ {/* Slide header */}
+
+ {slide.icon &&
{slide.icon} }
+
{slide.title}
+ {slide.subtitle && (
+
{slide.subtitle}
+ )}
+
+
+ {/* Slide content */}
+
{slide.content}
+
+
+
+ {/* Slide indicators */}
+
+ {slides.map((s, index) => (
+ goToSlide(index)}
+ className={`w-3 h-3 rounded-full transition-colors ${
+ index === currentSlide
+ ? 'bg-primary'
+ : index < currentSlide
+ ? 'bg-primary/40'
+ : 'bg-surface-secondary'
+ }`}
+ aria-label={`Go to slide ${index + 1}`}
+ />
+ ))}
+
+
+ {/* Navigation buttons */}
+
+
+
+
+ {currentSlide === slides.length - 1 ? (
+ Get Started →
+
+ ) : (
+
+ Next →
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+
Tutorials
+
+ Step-by-step guides to get you started with TPMJS
+
+
+
+
+
+ {/* Tutorial Cards */}
+
+ {tutorials.map((tutorial) => (
+
+
+
+
{tutorial.icon}
+
+
+
+ {tutorial.title}
+
+
+
{tutorial.description}
+
+ ⏱️ {tutorial.duration}
+ 📄 {tutorial.steps} steps
+
+
+
+ →
+
+
+
+
+ ))}
+
+
+ {/* More Resources */}
+
+
More Resources
+
+
+
+
+
📚
+
+
Full Documentation
+
+ Complete API reference and guides
+
+
+
+
+
+
+
+
+
🤖
+
+
Agents Documentation
+
+ In-depth AI agents reference
+
+
+
+
+
+
+
+
+
+
+