diff --git a/apps/web/src/app/docs/page.tsx b/apps/web/src/app/docs/page.tsx index 2780f5a..325e828 100644 --- a/apps/web/src/app/docs/page.tsx +++ b/apps/web/src/app/docs/page.tsx @@ -646,6 +646,25 @@ const result = streamText({ + {/* Platform Guide - Comprehensive reference */} +
+
+ 📚 +
+

Platform Guide

+

+ Complete guide to TPMJS platform features: user accounts, collections, agents, + forking, and API keys. Everything you need to know in one place. +

+ + + +
+
+
+ {/* ==================== API REFERENCE ==================== */}

diff --git a/apps/web/src/app/docs/platform-guide/layout.tsx b/apps/web/src/app/docs/platform-guide/layout.tsx new file mode 100644 index 0000000..a077a21 --- /dev/null +++ b/apps/web/src/app/docs/platform-guide/layout.tsx @@ -0,0 +1,21 @@ +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'Platform Guide | TPMJS Docs', + description: + 'Complete guide to TPMJS platform features: user accounts, collections, agents, forking, and API keys. Learn how to organize tools, create AI agents, and share your work.', + openGraph: { + title: 'TPMJS Platform Guide', + description: + 'Complete guide to user accounts, collections, agents, forking, and API keys on TPMJS.', + images: [{ url: '/api/og/docs', width: 1200, height: 630 }], + }, + twitter: { + card: 'summary_large_image', + images: ['/api/og/docs'], + }, +}; + +export default function PlatformGuideLayout({ children }: { children: React.ReactNode }) { + return children; +} diff --git a/apps/web/src/app/docs/platform-guide/page.tsx b/apps/web/src/app/docs/platform-guide/page.tsx new file mode 100644 index 0000000..241f9c5 --- /dev/null +++ b/apps/web/src/app/docs/platform-guide/page.tsx @@ -0,0 +1,1738 @@ +'use client'; + +import { Badge } from '@tpmjs/ui/Badge/Badge'; +import { Button } from '@tpmjs/ui/Button/Button'; +import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock'; +import Link from 'next/link'; +import { useEffect, useState } from 'react'; +import { AppHeader } from '~/components/AppHeader'; + +const NAV_SECTIONS = [ + { + title: 'Overview', + items: [ + { id: 'introduction', label: 'Introduction' }, + { id: 'getting-started', label: 'Getting Started' }, + ], + }, + { + title: 'User Accounts', + items: [ + { id: 'accounts-overview', label: 'Overview' }, + { id: 'usernames', label: 'Usernames & Profiles' }, + { id: 'public-pages', label: 'Public Pages' }, + ], + }, + { + title: 'Collections', + items: [ + { id: 'collections-overview', label: 'Overview' }, + { id: 'creating-collections', label: 'Creating Collections' }, + { id: 'collection-tools', label: 'Adding Tools' }, + { id: 'mcp-integration', label: 'MCP Integration' }, + { id: 'collection-env-vars', label: 'Environment Variables' }, + ], + }, + { + title: 'Agents', + items: [ + { id: 'agents-overview', label: 'Overview' }, + { id: 'creating-agents', label: 'Creating Agents' }, + { id: 'agent-tools', label: 'Attaching Tools' }, + { id: 'agent-chat', label: 'Chat Interface' }, + { id: 'agent-providers', label: 'LLM Providers' }, + ], + }, + { + title: 'Forking', + items: [ + { id: 'forking-overview', label: 'Overview' }, + { id: 'fork-agents', label: 'Fork Agents' }, + { id: 'fork-collections', label: 'Fork Collections' }, + { id: 'fork-attribution', label: 'Attribution' }, + ], + }, + { + title: 'API Keys', + items: [ + { id: 'api-keys-overview', label: 'Overview' }, + { id: 'creating-api-keys', label: 'Creating Keys' }, + { id: 'api-scopes', label: 'Scopes & Permissions' }, + { id: 'rate-limits', label: 'Rate Limits' }, + { id: 'api-usage', label: 'Usage Tracking' }, + ], + }, + { + title: 'Reference', + items: [ + { id: 'limits', label: 'Platform Limits' }, + { id: 'urls', label: 'URL Reference' }, + ], + }, +]; + +function SidebarNav({ + activeSection, + onSectionClick, +}: { + activeSection: string; + onSectionClick: (id: string) => void; +}) { + return ( +

+ ); +} + +function DocSection({ + id, + title, + children, +}: { + id: string; + title: string; + children: React.ReactNode; +}) { + return ( +
+

+ {title} +

+ {children} +
+ ); +} + +function DocSubSection({ title, children }: { title: string; children: React.ReactNode }) { + return ( +
+

{title}

+ {children} +
+ ); +} + +function ParamTable({ + params, +}: { + params: { name: string; type: string; required: boolean; description: string }[]; +}) { + return ( +
+ + + + + + + + + + + {params.map((param, i) => ( + + + + + + + ))} + +
ParameterTypeRequiredDescription
{param.name}{param.type} + {param.required ? ( + + Yes + + ) : ( + No + )} + {param.description}
+
+ ); +} + +function InfoCard({ + icon, + title, + children, +}: { + icon: string; + title: string; + children: React.ReactNode; +}) { + return ( +
+
+ {icon} +
+

{title}

+

{children}

+
+
+
+ ); +} + +function LimitTable({ + limits, +}: { + limits: { resource: string; limit: string; description: string }[]; +}) { + return ( +
+ + + + + + + + + + {limits.map((limit, i) => ( + + + + + + ))} + +
ResourceLimitDescription
{limit.resource}{limit.limit}{limit.description}
+
+ ); +} + +export default function PlatformGuidePage(): React.ReactElement { + const [activeSection, setActiveSection] = useState('introduction'); + const [mobileNavOpen, setMobileNavOpen] = useState(false); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id); + } + }); + }, + { rootMargin: '-100px 0px -66%' } + ); + + NAV_SECTIONS.forEach((section) => { + section.items.forEach((item) => { + const element = document.getElementById(item.id); + if (element) observer.observe(element); + }); + }); + + return () => observer.disconnect(); + }, []); + + const scrollToSection = (id: string) => { + const element = document.getElementById(id); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setMobileNavOpen(false); + } + }; + + return ( +
+ + +
+ {/* Mobile Navigation Toggle */} +
+ + {mobileNavOpen && ( +
+ +
+ )} +
+ + {/* Desktop Sidebar */} + + + {/* Main Content */} +
+
+ {/* Hero */} +
+

+ TPMJS Platform Guide +

+

+ Complete guide to user accounts, collections, agents, forking, and API keys on + TPMJS. +

+
+ + + + + + +
+
+ + {/* ==================== OVERVIEW ==================== */} + +

+ TPMJS is more than a tool registry—it's a platform for building, sharing, and + deploying AI-powered workflows. This guide covers the key platform features that let + you organize tools, create AI agents, and share your work. +

+
+ + Create a profile with a unique username to own collections, agents, and access + protected features + + + Group tools into curated sets that can be shared and connected to MCP clients like + Claude Desktop + + + Build custom AI assistants with multi-provider support, tool integration, and + persistent conversations + + + Clone public agents and collections to customize them for your own use + + + Programmatic access to the platform with scoped permissions and rate limiting + + + Monitor API usage, token consumption, and costs across your agents and collections + +
+ + + +

+ Follow these steps to get started with the TPMJS platform features. +

+
+
+
+ + 1 + +

Create an Account

+
+

+ Sign up at{' '} + + tpmjs.com/sign-up + {' '} + with email. You'll need to verify your email address. +

+
+
+
+ + 2 + +

Set Up Your Profile

+
+

+ Choose a unique username. This will be used in your public URLs (e.g., + tpmjs.com/your-username). +

+
+
+
+ + 3 + +

Generate an API Key

+
+

+ Go to{' '} + + Dashboard → Settings → API Keys + {' '} + to create an API key for MCP connections and programmatic access. +

+
+
+
+ + 4 + +

Create Your First Collection

+
+

+ Go to{' '} + + Dashboard → Collections + {' '} + and create a collection to group related tools together. +

+
+
+ + + {/* ==================== USER ACCOUNTS ==================== */} + +

+ A TPMJS account gives you ownership and control over collections, agents, and API + keys. Your account includes a public profile that showcases your public work. +

+
+ + Email/password authentication with email verification. Sessions last 7 days. + + + You own all your collections, agents, API keys, and conversation history. + +
+ +
    +
  • + Collections - Create up to 50 + collections to organize tools +
    • +
  • + Agents - Create up to 20 AI agents + with custom configurations +
    • +
  • + API Keys - Generate up to 10 API + keys for programmatic access +
    • +
  • + Provider Keys - Store encrypted API + keys for LLM providers (OpenAI, Anthropic, etc.) +
    • +
  • + Activity Feed - Track your actions + with a complete audit trail +
    • +
  • + Usage Analytics - Monitor API calls, + tokens, and costs +
    • +
+ + + + +

+ Your username is a unique identifier that becomes part of your public URLs. Choose + carefully—it's how others will find and reference your work. +

+ +
    +
  • 3-30 characters long
    • +
  • Lowercase letters, numbers, and hyphens only
    • +
  • Must start and end with a letter or number (not hyphen)
    • +
  • Must be unique across all TPMJS users
    • +
+ + + +

+ Certain names are reserved and cannot be used as usernames: +

+
+ {[ + 'admin', + 'api', + 'dashboard', + 'blog', + 'docs', + 'help', + 'support', + 'settings', + 'login', + 'signup', + ].map((name) => ( + + {name} + + ))} +
+ + +

+ When setting up your profile, usernames are checked in real-time for availability. + You can also check programmatically: +

+ + + + + +

+ Your public profile displays your name, avatar, and all public agents and + collections. Others can view your work and fork items they find useful. +

+ +
+
+ + tpmjs.com/{'{username}'} + +

+ Your public profile showing all public agents and collections +

+
+
+ + tpmjs.com/@{'{username}'} + +

+ Alternative social-media style URL (works identically) +

+
+
+ + +
+
+

Public Items

+
    +
  • • Visible on your profile page
    • +
  • • Anyone can view details
    • +
  • • Can be forked by others
    • +
  • • Shows in search results
    • +
+
+
+

Private Items

+
    +
  • • Only visible to you
    • +
  • • Not shown on profile
    • +
  • • Cannot be forked
    • +
  • • Direct URL returns 404
    • +
+
+
+ + + + {/* ==================== COLLECTIONS ==================== */} + +

+ Collections are curated groups of tools that you can share and connect to MCP + clients. Think of them as playlists for AI tools—bundle related tools together for + specific use cases. +

+
+ + Group related tools together for web scraping, content creation, data analysis, or + any workflow + + + Each collection gets unique MCP URLs for Claude Desktop, Cursor, and other MCP + clients + + + Make collections public so others can fork them and build on your work + +
+ +
    +
  • + Tool Grouping - Add up to 100 tools + per collection +
    • +
  • + Custom Ordering - Arrange tools in + your preferred order +
    • +
  • + Tool Notes - Add notes explaining + why each tool is included +
    • +
  • + Environment Variables - Store API + keys that are passed to tools at runtime +
    • +
  • + MCP Integration - Connect to Claude + Desktop with a single URL +
    • +
  • + AI Use Cases - Auto-generate + workflow suggestions +
    • +
+ + + + +

+ Create a collection from your dashboard to start organizing tools. +

+ + + + +
+

+ 1. Go to{' '} + + Dashboard → Collections + +

+

2. Click "Create Collection"

+

3. Enter a name and optional description

+

4. Click "Create" to save

+

5. Add tools from the registry using the "Add Tool" button

+
+ + + + +

+ After creating a collection, add tools from the TPMJS registry to build your + toolkit. +

+ +

+ From your collection's detail page, use the "Add Tool" button to + search the registry. You can search by name, description, or category. +

+ + +

+ Add notes to each tool explaining why it's in the collection or how to use + it. Notes are visible to anyone viewing the collection and help provide context. +

+
+

+ Example Note: "Use this tool + first to scrape the webpage, then pass the result to the summarization + tool." +

+
+ + +

+ Tools are presented to AI models in the order they appear in your collection. You + can drag and drop to reorder tools based on your preferred workflow. +

+ + + + +

+ The Model Context Protocol (MCP) allows AI assistants to connect directly to your + collections. Each collection gets unique MCP URLs that work with Claude Desktop, + Cursor, and other MCP clients. +

+ +

+ Each collection provides two transport options: +

+
+
+
+ + Recommended + + HTTP Transport +
+ + https://tpmjs.com/api/mcp/{'{username}'}/{'{collection-slug}'}/http + +
+
+ SSE Transport + + https://tpmjs.com/api/mcp/{'{username}'}/{'{collection-slug}'}/sse + +
+
+ + +

+ Add your collection to Claude Desktop's configuration file: +

+ +

+ Config file location: +

+
    +
  • + macOS:{' '} + + ~/Library/Application Support/Claude/claude_desktop_config.json + +
    • +
  • + Windows:{' '} + %APPDATA%\Claude\claude_desktop_config.json +
    • +
+ + + + + + + +

+ Many tools require API keys to function. You can store these as environment + variables on your collection, and they'll be passed to tools at runtime. +

+ +
+

1. Open your collection and go to the "Env Vars" tab

+

2. Click "Add Variable"

+

3. Enter the variable name (e.g., FIRECRAWL_API_KEY) and value

+

4. Click "Save"

+
+ + +
+

+ Encryption: Environment variables + are encrypted using AES-256 before storage. They're decrypted only at + runtime when tools are executed. Variables are never exposed in API responses. +

+
+ + +
+ {[ + { name: 'FIRECRAWL_API_KEY', desc: 'Web scraping with Firecrawl' }, + { name: 'EXA_API_KEY', desc: 'Web search with Exa' }, + { name: 'TAVILY_API_KEY', desc: 'Web search with Tavily' }, + { name: 'BROWSERBASE_API_KEY', desc: 'Browser automation' }, + ].map((v) => ( +
+ {v.name} +

{v.desc}

+
+ ))} +
+ + + + {/* ==================== AGENTS ==================== */} + +

+ TPMJS Agents are custom AI assistants powered by any LLM provider. Build agents with + custom system prompts, attach tools, and have persistent conversations through a + streaming API. +

+
+ + Support for OpenAI, Anthropic, Google, Groq, and Mistral—bring your own API keys + + + Attach individual tools or entire collections to give your agent capabilities + + + Full conversation history with streaming responses and tool call visualization + +
+
+

+ Note: Agents require LLM provider API + keys. You'll need to add your keys in{' '} + + Dashboard → Settings → API Keys + {' '} + before creating agents. +

+
+ + + +

+ Create an agent to customize its behavior with a system prompt, choose the AI model, + and configure execution parameters. +

+ + + + + + + + + + + + +

+ Give your agent capabilities by attaching tools from the TPMJS registry. You can + attach individual tools or entire collections. +

+ +

+ From your agent's detail page, use the "Add Tool" button to search + and attach specific tools. Each tool appears with its name, description, and + required environment variables. +

+ + +

+ You can attach entire collections to your agent. When a collection is attached, + the agent can use all tools in that collection. This is useful for grouping + related tools. +

+
+

+ Tip: Collections inherit + environment variables from the agent. Set up your API keys once on the agent, + and they'll be available to all attached collections and tools. +

+
+ + +
    +
  • Maximum 50 individual tools per agent
    • +
  • Maximum 10 collections per agent
    • +
  • Tools from attached collections don't count against the 50 tool limit
    • +
+ + + + +

+ Interact with your agents through the built-in chat interface with streaming + responses and tool call visualization. +

+ +
+ + Previous conversations appear in the sidebar. Click to resume any conversation. + + + Responses stream in real-time as the AI generates them. + + + When the agent uses a tool, you'll see the tool name and can expand to view + parameters and results. + + + Token counts are tracked and displayed for monitoring usage and costs. + +
+ + +
+
+ + tpmjs.com/{'{username}'}/agents/{'{agent-uid}'}/chat + +

+ Public chat URL for public agents +

+
+
+ + /dashboard/agents/{'{id}'}/chat/{'{chatId}'} + +

+ Dashboard chat URL for your own agents +

+
+
+ + + + +

+ TPMJS Agents support multiple AI providers. Each provider offers different models + with varying capabilities and pricing. +

+
+ {[ + { + name: 'OpenAI', + desc: 'GPT models with excellent tool use support', + models: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo'], + keyUrl: 'https://platform.openai.com/api-keys', + }, + { + name: 'Anthropic', + desc: 'Claude models known for nuanced understanding', + models: ['claude-sonnet-4-20250514', 'claude-3-5-haiku-20241022', 'claude-3-opus-20240229'], + keyUrl: 'https://console.anthropic.com/settings/keys', + }, + { + name: 'Google', + desc: 'Gemini models with multimodal capabilities', + models: ['gemini-2.0-flash-exp', 'gemini-1.5-pro', 'gemini-1.5-flash'], + keyUrl: 'https://aistudio.google.com/apikey', + }, + { + name: 'Groq', + desc: 'Ultra-fast inference for open-source models', + models: ['llama-3.3-70b-versatile', 'llama-3.1-8b-instant', 'mixtral-8x7b-32768'], + keyUrl: 'https://console.groq.com/keys', + }, + { + name: 'Mistral', + desc: 'European models with strong multilingual support', + models: ['mistral-large-latest', 'mistral-small-latest'], + keyUrl: 'https://console.mistral.ai/api-keys', + }, + ].map((provider) => ( +
+
+

{provider.name}

+ + Get API Key → + +
+

{provider.desc}

+
+ {provider.models.map((model) => ( + + {model} + + ))} +
+
+ ))} +
+ + + {/* ==================== FORKING ==================== */} + +

+ Forking lets you clone public agents and collections to your own account. The forked + copy is independent—you can customize it without affecting the original. +

+
+ + Start with someone else's configuration and adapt it to your needs + + + API keys and sensitive config are never copied—you add your own + +
+ +
+
+

+ + Included + +

+
    +
  • • Name and description
    • +
  • • System prompt (agents)
    • +
  • • Provider and model settings
    • +
  • • All attached tools
    • +
  • • Tool order and notes
    • +
  • • Temperature and other params
    • +
+
+
+

+ + Not Included + +

+
    +
  • • Environment variables / API keys
    • +
  • • Executor configuration
    • +
  • • Conversation history
    • +
  • • Like count
    • +
  • • Fork count
    • +
+
+
+ + + + +

+ When you find a public agent you like, fork it to your account to customize it. +

+ +
+

+ 1. Navigate to a public agent's detail page (e.g.,{' '} + + tpmjs.com/ajax/agents/research-assistant + + ) +

+

2. Click the "Fork" button in the header

+

3. The agent is copied to your account with all its tools and settings

+

4. You're redirected to your dashboard to customize the forked agent

+

5. Add your own API keys to make the agent functional

+
+ + +
+
+ + Fork + +

+ Available when viewing a public agent you don't own +

+
+
+ + Your Agent + +

+ Shown when viewing your own agent +

+
+
+ + Already Forked + +

+ You've already forked this agent (links to your fork) +

+
+
+ + Limit Reached + +

+ You've reached the maximum of 20 agents +

+
+
+ + + + +

+ Fork collections to get a copy you can modify without affecting the original. +

+ +
+

+ 1. Navigate to a public collection's page (e.g.,{' '} + + tpmjs.com/ajax/collections/web-scraping + + ) +

+

2. Click the "Fork" button

+

3. The collection is copied with all its tools

+

4. You can then add, remove, or reorder tools

+

5. Add your own environment variables for the tools

+
+ + +
    +
  • Maximum 50 collections per user
    • +
  • Forked collections start as private
    • +
  • New MCP URLs are generated for your fork
    • +
+ + + + +

+ TPMJS tracks fork relationships so you can see where agents and collections + originated. +

+ +

+ Forked items display a "Forked from" badge linking back to the original. + This provides attribution and lets users discover the source. +

+
+
+ Forked from + + ajax/research-assistant + +
+
+ + +

+ Public agents and collections display a fork count showing how many times + they've been forked. This indicates popularity and usefulness to the + community. +

+ + + + {/* ==================== API KEYS ==================== */} + +

+ TPMJS API keys provide programmatic access to the platform. Use them for MCP + connections, agent conversations, and API integrations. +

+
+ + Keys are hashed using SHA-256—we never store the raw key + + + Fine-grained permissions control what each key can do + + + Usage is recorded for monitoring and debugging + +
+ +

+ TPMJS API keys follow a consistent format for easy identification: +

+ +
    +
  • + tpmjs_sk_ prefix identifies the key type +
    • +
  • 32 random bytes encoded as base64url
    • +
  • Shown in full only once at creation time
    • +
  • Displayed as prefix only (e.g., tpmjs_sk_abc1...) in the dashboard
    • +
+ + + + +

+ Generate API keys from your dashboard to enable programmatic access. +

+ +
+

+ 1. Go to{' '} + + Dashboard → Settings → API Keys + +

+

2. Click "Generate New Key"

+

3. Enter a descriptive name (e.g., "Claude Desktop")

+

4. Click "Create"

+

5. Copy the key immediately—it's only shown once!

+
+ + +
+
+

Activate/Deactivate

+

+ Toggle keys on/off without deleting them. Useful for temporarily disabling + access. +

+
+
+

Rotate

+

+ Generate a new key with the same name and settings. The old key is immediately + invalidated. +

+
+
+

Delete

+

+ Permanently remove a key. Cannot be undone. +

+
+
+ +
+

+ Important: Your API key is displayed only + once when created. Store it securely. If you lose it, you'll need to generate + a new one. +

+
+ + + +

+ API keys have scopes that control what actions they can perform. By default, new + keys have all scopes enabled. +

+ +
+
+
+ mcp:execute +
+

+ Execute tools via MCP endpoints. Required for Claude Desktop and Cursor + integration. +

+
+
+
+ agent:chat +
+

+ Send messages to agents via the conversation API. +

+
+
+
+ bridge:connect +
+

+ Establish MCP bridge connections for local tool exposure. +

+
+
+
+ usage:read +
+

+ Access usage analytics and statistics via the API. +

+
+
+
+ collection:read +
+

+ Read collection details and list collections. +

+
+
+ + +

+ Include your API key in the Authorization header: +

+ +

Example request:

+ + + + + +

+ TPMJS enforces rate limits to ensure fair usage. Limits are based on your account + tier. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Tier + Requests/Hour + Notes
Free100Default tier
Pro1,000Paid subscription
Enterprise10,000Custom plans
+
+ + +

+ Every response includes rate limit information: +

+ + + +

+ When rate limited, you'll receive a 429 response with a Retry-After header: +

+ + + + + +

+ TPMJS tracks API usage for monitoring and billing purposes. View your usage in the + dashboard. +

+ +
    +
  • + Request Count - Total API calls per + period +
    • +
  • + Token Usage - Input/output tokens + for agent conversations +
    • +
  • + Latency - Average response time per + endpoint +
    • +
  • + Error Rate - Percentage of failed + requests +
    • +
  • + Cost Estimation - Estimated LLM + costs based on token usage +
    • +
+ + +

+ View detailed usage analytics at{' '} + + Dashboard → Usage + + . The dashboard shows: +

+
    +
  • Time-series graphs of requests and tokens
    • +
  • Breakdown by endpoint and API key
    • +
  • Hourly, daily, and monthly aggregations
    • +
  • Cost estimates based on provider pricing
    • +
+ + +
    +
  • + Individual Records - Kept for 30 + days +
    • +
  • + Aggregated Summaries - Kept + indefinitely +
    • +
+ + + + {/* ==================== REFERENCE ==================== */} + +

+ Reference of all platform limits to help you plan your usage. +

+ + + + + + + + + + + + + + + +

+ Complete reference of all shareable URLs on TPMJS. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type + URL Pattern +
User Profile + /{'{username}'} or /@{'{username}'} +
Agent Detail + /{'{username}'}/agents/{'{uid}'} +
Agent Chat + /{'{username}'}/agents/{'{uid}'}/chat +
Collection + /{'{username}'}/collections/{'{slug}'} +
Tool + /tool/{'{package}'}/{'{tool}'} +
+ API Endpoints +
MCP Server (HTTP) + /api/mcp/{'{username}'}/{'{slug}'}/http +
MCP Server (SSE) + /api/mcp/{'{username}'}/{'{slug}'}/sse +
Agent Conversation + /api/{'{username}'}/agents/{'{uid}'}/conversation/{'{id}'} +
+
+ + + {/* CTA */} +
+

Ready to Get Started?

+

+ Create your account and start building with TPMJS today. +

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