From bfed830187d29498309f9cbf9bc86b93fa51b422 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Fri, 2 Jan 2026 21:21:13 +1000 Subject: [PATCH] feat: add interactive tutorial slideshows for Agents and MCP - Add /docs/tutorials page with tutorial index - Create step-by-step Agents tutorial (7 slides) - API key setup - Agent creation - Tool attachment - Chat interface usage - Create step-by-step MCP tutorial (8 slides) - What is MCP - Creating collections - Configuring Claude Desktop - Configuring Cursor - Using tools Each tutorial features: - Progress bar and slide indicators - Previous/Next navigation - Direct links to relevant dashboard pages --- .../src/app/docs/tutorials/agents/page.tsx | 478 ++++++++++++++++ apps/web/src/app/docs/tutorials/mcp/page.tsx | 536 ++++++++++++++++++ apps/web/src/app/docs/tutorials/page.tsx | 127 +++++ 3 files changed, 1141 insertions(+) create mode 100644 apps/web/src/app/docs/tutorials/agents/page.tsx create mode 100644 apps/web/src/app/docs/tutorials/mcp/page.tsx create mode 100644 apps/web/src/app/docs/tutorials/page.tsx 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 +
+
+
+ ), + }, + { + id: 'step-1-api-key', + title: 'Step 1: Get Your API Key', + subtitle: 'You bring your own AI provider key', + icon: '🔑', + content: ( +
+

+ 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) => ( +
+

{provider.name}

+

{provider.models}

+ + Get key → + +
+ ))} +
+
+

+ 💡 We recommend OpenAI or Anthropic for the best + tool-calling support. +

+
+
+ ), + }, + { + id: 'step-2-add-key', + title: 'Step 2: Add Your API Key to TPMJS', + subtitle: 'Your key is encrypted and stored securely', + icon: '🔐', + content: ( +
+
+
+
+ 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 +

+
+
+
+
+ + + +
+
+ ), + }, + { + id: 'step-3-create-agent', + title: 'Step 3: Create Your Agent', + subtitle: 'Configure your AI assistant', + icon: '✨', + content: ( +
+
+
+

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. +

+
+
+ + + +
+
+ ), + }, + { + id: 'step-4-add-tools', + title: 'Step 4: Add Tools to Your Agent', + subtitle: 'Give your agent superpowers', + icon: '🔧', + content: ( +
+

+ 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 +
    • +
+
+
+
+ + + +
+
+ ), + }, + { + id: 'step-5-chat', + title: 'Step 5: Start Chatting!', + subtitle: 'Your agent is ready to help', + icon: '💬', + content: ( +
+

+ 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! +

+
+
+ ), + }, + { + id: 'complete', + title: "You're All Set!", + subtitle: 'Start building amazing AI agents', + icon: '🚀', + content: ( +
+

+ You now know everything you need to create powerful AI agents with TPMJS. +

+
+ + + + + + +
+
+

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 +

+
+
+
+
+ ), + }, +]; + +export default function AgentsTutorialPage(): React.ReactElement { + const [currentSlide, setCurrentSlide] = useState(0); + + const goToSlide = (index: number) => { + setCurrentSlide(Math.max(0, Math.min(slides.length - 1, index))); + }; + + const nextSlide = () => goToSlide(currentSlide + 1); + const prevSlide = () => goToSlide(currentSlide - 1); + + const slide = slides[currentSlide]; + const progress = ((currentSlide + 1) / slides.length) * 100; + + if (!slide) { + return <>; + } + + return ( +
+ + + {/* Progress bar */} +
+
+
+ +
+ {/* Navigation header */} +
+
+ + + Back to Tutorials + +
+ {currentSlide + 1} / {slides.length} +
+
+
+ + {/* Slide content */} +
+
+ {/* Slide header */} +
+ {slide.icon && {slide.icon}} +

{slide.title}

+ {slide.subtitle && ( +

{slide.subtitle}

+ )} +
+ + {/* Slide content */} +
{slide.content}
+
+
+ + {/* Navigation footer */} +
+
+ {/* Slide indicators */} +
+ {slides.map((s, index) => ( +
+ + {/* Navigation buttons */} +
+ + + {currentSlide === slides.length - 1 ? ( + + + + ) : ( + + )} +
+
+
+
+ + +
+ ); +} diff --git a/apps/web/src/app/docs/tutorials/mcp/page.tsx b/apps/web/src/app/docs/tutorials/mcp/page.tsx new file mode 100644 index 0000000..4f8ac7f --- /dev/null +++ b/apps/web/src/app/docs/tutorials/mcp/page.tsx @@ -0,0 +1,536 @@ +'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: 'Connect TPMJS Tools to Your AI', + subtitle: 'Use MCP to add powerful tools to Claude Desktop, Cursor, and more', + icon: '🔌', + content: ( +
+

+ 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 +

+
+
+ ), + }, + { + id: 'what-is-mcp', + title: 'What is MCP?', + subtitle: 'A simple way for AI assistants to use tools', + icon: '📖', + content: ( +
+
+
+

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. +

+
+
+ ), + }, + { + id: 'step-1-collection', + title: 'Step 1: Create a Collection', + subtitle: 'Group the tools you want to use', + icon: '📦', + content: ( +
+

+ 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. +

+
+
+
+
+ + + +
+
+ ), + }, + { + id: 'step-2-mcp-url', + title: 'Step 2: Get Your MCP URL', + subtitle: 'Each collection has a unique MCP endpoint', + icon: '🔗', + content: ( +
+

+ 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. +

+
+
+ ), + }, + { + id: 'step-3-claude', + title: 'Step 3: Configure Claude Desktop', + subtitle: 'Add the MCP server to your config file', + icon: '🖥️', + content: ( +
+

+ 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 +

+
+
+ ), + }, + { + id: 'step-3-cursor', + title: 'Alternative: Configure Cursor', + subtitle: 'Same concept, slightly different config', + icon: '✏️', + content: ( +
+

+ 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. +

+
+
+ ), + }, + { + id: 'step-4-use-tools', + title: 'Step 4: Use Your Tools!', + subtitle: 'Ask Claude to use any tool in your collection', + icon: '🎉', + content: ( +
+

+ 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! + +
+
+ ), + }, + { + id: 'complete', + title: "You're Connected!", + subtitle: 'Your AI now has superpowers', + icon: '🚀', + content: ( +
+

+ That's it! Your AI assistant can now use any tool in your TPMJS collection. +

+
+ + + + + + +
+
+

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! +

+
+
+ ), + }, +]; + +export default function McpTutorialPage(): React.ReactElement { + const [currentSlide, setCurrentSlide] = useState(0); + + const goToSlide = (index: number) => { + setCurrentSlide(Math.max(0, Math.min(slides.length - 1, index))); + }; + + const nextSlide = () => goToSlide(currentSlide + 1); + const prevSlide = () => goToSlide(currentSlide - 1); + + const slide = slides[currentSlide]; + const progress = ((currentSlide + 1) / slides.length) * 100; + + if (!slide) { + return <>; + } + + return ( +
+ + + {/* Progress bar */} +
+
+
+ +
+ {/* Navigation header */} +
+
+ + + Back to Tutorials + +
+ {currentSlide + 1} / {slides.length} +
+
+
+ + {/* Slide content */} +
+
+ {/* Slide header */} +
+ {slide.icon && {slide.icon}} +

{slide.title}

+ {slide.subtitle && ( +

{slide.subtitle}

+ )} +
+ + {/* Slide content */} +
{slide.content}
+
+
+ + {/* Navigation footer */} +
+
+ {/* Slide indicators */} +
+ {slides.map((s, index) => ( +
+ + {/* Navigation buttons */} +
+ + + {currentSlide === slides.length - 1 ? ( + + + + ) : ( + + )} +
+
+
+
+ + +
+ ); +} diff --git a/apps/web/src/app/docs/tutorials/page.tsx b/apps/web/src/app/docs/tutorials/page.tsx new file mode 100644 index 0000000..61d7d11 --- /dev/null +++ b/apps/web/src/app/docs/tutorials/page.tsx @@ -0,0 +1,127 @@ +import { Icon } from '@tpmjs/ui/Icon/Icon'; +import Link from 'next/link'; +import { AppFooter } from '~/components/AppFooter'; +import { AppHeader } from '~/components/AppHeader'; + +interface Tutorial { + title: string; + description: string; + icon: string; + href: string; + duration: string; + steps: number; +} + +const tutorials: Tutorial[] = [ + { + title: 'Build Your First AI Agent', + description: + 'Create a custom AI assistant with tool integration and persistent conversations. Learn how to set up API keys, configure agents, and attach tools.', + icon: '🤖', + href: '/docs/tutorials/agents', + duration: '5 min', + steps: 7, + }, + { + title: 'Connect MCP to Your AI', + description: + 'Add TPMJS tools to Claude Desktop, Cursor, or any MCP-compatible client. Create collections and configure your AI to use external tools.', + icon: '🔌', + href: '/docs/tutorials/mcp', + duration: '4 min', + steps: 8, + }, +]; + +export default function TutorialsPage(): React.ReactElement { + return ( +
+ + +
+
+ {/* 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 +

+
+
+
+ +
+
+
+
+ + +
+ ); +}