diff --git a/apps/web/src/app/docs/agents/page.tsx b/apps/web/src/app/docs/agents/page.tsx new file mode 100644 index 0000000..019bf22 --- /dev/null +++ b/apps/web/src/app/docs/agents/page.tsx @@ -0,0 +1,937 @@ +'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: 'Getting Started', + items: [ + { id: 'overview', label: 'Overview' }, + { id: 'api-keys', label: 'API Keys Setup' }, + { id: 'creating-agents', label: 'Creating Agents' }, + ], + }, + { + title: 'Features', + items: [ + { id: 'attaching-tools', label: 'Attaching Tools' }, + { id: 'chat-interface', label: 'Chat Interface' }, + { id: 'providers', label: 'Supported Providers' }, + ], + }, + { + title: 'API Reference', + items: [ + { id: 'conversation-api', label: 'Conversation API' }, + { id: 'sse-events', label: 'SSE Events' }, + { id: 'endpoints', label: 'All Endpoints' }, + ], + }, +]; + +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}

+
+
+
+ ); +} + +export default function AgentsDocsPage(): React.ReactElement { + const [activeSection, setActiveSection] = useState('overview'); + 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 */} +
+

+ AI Agents Documentation +

+

+ Create custom AI assistants with multi-provider support, tool integration, and + persistent conversations. +

+
+ + + + + + +
+
+ + {/* ==================== GETTING STARTED ==================== */} + +

+ TPMJS Agents let you create custom AI assistants powered by any LLM provider. Build + agents with custom system prompts, attach tools from the registry, 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 + +
+

+ Agents are user-owned and require authentication. Each agent gets a unique UID that + can be used in API calls. +

+ + + +

+ Before creating agents, you need to add your AI provider API keys. Keys are + encrypted using AES-256 and stored securely. +

+ +

+ Go to{' '} + + Dashboard → Settings → API Keys + {' '} + to manage your provider keys. +

+ + +

+ Click "Add Key" for each provider you want to use: +

+
+
+
+ OpenAI +
+

+ GPT-4o, GPT-4 Turbo, GPT-3.5 Turbo -{' '} + + Get key + +

+
+
+
+ Anthropic +
+

+ Claude 3.5 Sonnet, Claude 3 Opus, Claude 3.5 Haiku -{' '} + + Get key + +

+
+
+
+ Google +
+

+ Gemini 2.0 Flash, Gemini 1.5 Pro -{' '} + + Get key + +

+
+
+
+ Groq +
+

+ Llama 3.3 70B, Llama 3.1 8B, Mixtral 8x7B -{' '} + + Get key + +

+
+
+
+ Mistral +
+

+ Mistral Large, Mistral Small -{' '} + + Get key + +

+
+
+ + +
+

+ 🔐 Encryption: Your API keys are + encrypted using AES-256-GCM before being stored. Only you can use your keys, and + they're never exposed in API responses - only a hint of the last 4 + characters is shown. +

+
+ + + + +

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

+ + + + + + + + + + + + + + + {/* ==================== FEATURES ==================== */} + +

+ 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 from the registry. Each tool appears with its name, + description, and any required environment variables. +

+ + + +

+ Collections let you attach multiple related tools at once. If you've created + MCP collections, you can attach the entire collection to your agent. +

+ + +

+ Tools are presented to the AI model in the order they appear. You can drag to + reorder tools to prioritize certain capabilities. +

+ + +
+

+ Note: Some tools require API keys + (e.g., Firecrawl, Exa). You'll need to add these keys in your API Keys + settings. The required environment variables are shown on each tool's card. +

+
+ + + + +

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

+ +

+ Click "Chat with Agent" from your agent's detail page or navigate + directly to{' '} + + /dashboard/agents/[id]/chat + + . +

+ + +
+ + 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. + + + Token counts are tracked and displayed for monitoring usage. + +
+ + +
+

+ Enter - + Send message +

+

+ + Shift + Enter + {' '} + - New line +

+
+ + + + +

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

+
+
+

OpenAI

+

+ Industry-leading models with excellent tool use support. +

+
+ + gpt-4o + + + gpt-4o-mini + + + gpt-4-turbo + + + gpt-3.5-turbo + +
+
+
+

Anthropic

+

+ Claude models known for nuanced understanding and safety. +

+
+ + claude-sonnet-4-20250514 + + + claude-3-5-haiku-20241022 + + + claude-3-opus-20240229 + +
+
+
+

Google

+

+ Gemini models with multimodal capabilities. +

+
+ + gemini-2.0-flash-exp + + + gemini-1.5-pro + + + gemini-1.5-flash + +
+
+
+

Groq

+

+ Ultra-fast inference for open-source models. +

+
+ + llama-3.3-70b-versatile + + + llama-3.1-8b-instant + + + mixtral-8x7b-32768 + +
+
+
+

Mistral

+

+ European AI models with strong multilingual support. +

+
+ + mistral-large-latest + + + mistral-small-latest + +
+
+
+ + + {/* ==================== API REFERENCE ==================== */} + +

+ Integrate agent conversations into your own applications using the streaming API. +

+ + +
+

+ uid: Your agent's unique + identifier +

+

+ conversationId: Unique ID for the + conversation (create your own or use a new ID to start a new conversation) +

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

+ The conversation API uses Server-Sent Events (SSE) for streaming responses. +

+
+
+ chunk +

+ Streaming text content from the AI response. +

+ +
+
+ tool_call +

+ Indicates the agent is calling a tool. +

+ +
+
+ tool_result +

+ The result returned from a tool execution. +

+ +
+
+ complete +

+ Signals the response is complete with token usage. +

+ +
+
+ error +

+ An error occurred during processing. +

+ +
+
+ + + +

+ Complete reference of all agent-related API endpoints. +

+
+
+
+ + POST + + + /api/agents/[uid]/conversation/[conversationId] + +
+

+ Send a message and stream the AI response via SSE. +

+
+
+
+ + GET + + + /api/agents/[uid]/conversation/[conversationId] + +
+

+ Get the full conversation history with all messages. +

+
+
+
+ + GET + + + /api/agents/[uid]/conversations + +
+

+ List all conversations for an agent. +

+
+
+
+ + GET + + /api/agents +
+

List all your agents.

+
+
+
+ + POST + + /api/agents +
+

Create a new agent.

+
+
+
+ + GET + + /api/agents/[id] +
+

Get agent details by ID.

+
+
+
+ + PATCH + + /api/agents/[id] +
+

+ Update an agent's configuration. +

+
+
+
+ + DELETE + + /api/agents/[id] +
+

+ Delete an agent and all its conversations. +

+
+
+ + + {/* CTA */} +
+

Ready to Build?

+

+ Create your first AI agent and start building custom assistants. +

+
+ + + + + + +
+
+
+
+
+
+ ); +} diff --git a/apps/web/src/app/docs/page.tsx b/apps/web/src/app/docs/page.tsx index 3756300..ebbe64e 100644 --- a/apps/web/src/app/docs/page.tsx +++ b/apps/web/src/app/docs/page.tsx @@ -6,6 +6,7 @@ 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 { AppFooter } from '~/components/AppFooter'; import { AppHeader } from '~/components/AppHeader'; const NAV_SECTIONS = [ @@ -26,17 +27,6 @@ const NAV_SECTIONS = [ { id: 'passing-api-keys', label: 'Passing API Keys' }, ], }, - { - title: 'AI Agents', - items: [ - { id: 'agents-overview', label: 'Overview' }, - { id: 'agents-api-keys', label: 'API Keys Setup' }, - { id: 'agents-creating', label: 'Creating Agents' }, - { id: 'agents-tools', label: 'Attaching Tools' }, - { id: 'agents-chat', label: 'Chat Interface' }, - { id: 'agents-api', label: 'Conversation API' }, - ], - }, { title: 'MCP Collections', items: [ @@ -616,499 +606,24 @@ const result = streamText({ - {/* ==================== AI AGENTS ==================== */} - -

- TPMJS Agents let you create custom AI assistants powered by any LLM provider. Build - agents with custom system prompts, attach tools from the registry, 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 - + {/* AI Agents - Separate documentation page */} +
+
+ 🤖 +
+

AI Agents

+

+ Create custom AI assistants with multi-provider support, tool integration, and + persistent conversations. Agents have their own dedicated documentation. +

+ + + +
-

- Agents are user-owned and require authentication. Each agent gets a unique UID that - can be used in API calls. -

-
- - - -
- - - -

- Before creating agents, you need to add your AI provider API keys. Keys are - encrypted using AES-256 and stored securely. -

- -

- Go to{' '} - - Dashboard → Settings → API Keys - {' '} - to manage your provider keys. -

- - -

- Click "Add Key" for each provider you want to use: -

-
-
-
- OpenAI -
-

- GPT-4o, GPT-4 Turbo, GPT-3.5 Turbo -{' '} - - Get key - -

-
-
-
- Anthropic -
-

- Claude 3.5 Sonnet, Claude 3 Opus, Claude 3.5 Haiku -{' '} - - Get key - -

-
-
-
- Google -
-

- Gemini 2.0 Flash, Gemini 1.5 Pro -{' '} - - Get key - -

-
-
-
- Groq -
-

- Llama 3.3 70B, Llama 3.1 8B, Mixtral 8x7B -{' '} - - Get key - -

-
-
-
- Mistral -
-

- Mistral Large, Mistral Small -{' '} - - Get key - -

-
-
- - -
-

- 🔐 Encryption: Your API keys are - encrypted using AES-256-GCM before being stored. Only you can use your keys, and - they're never exposed in API responses - only a hint of the last 4 - characters is shown. -

-
- - - - -

- 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 from the registry. Each tool appears with its name, - description, and any required environment variables. -

- - - -

- Collections let you attach multiple related tools at once. If you've created - MCP collections, you can attach the entire collection to your agent. -

- - -

- Tools are presented to the AI model in the order they appear. You can drag to - reorder tools to prioritize certain capabilities. -

- - -
-

- Note: Some tools require API keys - (e.g., Firecrawl, Exa). You'll need to add these keys in your API Keys - settings. The required environment variables are shown on each tool's card. -

-
- - - - -

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

- -

- Click "Chat with Agent" from your agent's detail page or navigate - directly to{' '} - - /dashboard/agents/[id]/chat - - . -

- - -
- - 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. - - - Token counts are tracked and displayed for monitoring usage. - -
- - -
-

- Enter - - Send message -

-

- - Shift + Enter - {' '} - - New line -

-
- - - - -

- Integrate agent conversations into your own applications using the streaming API. -

- - -
-

- uid: Your agent's unique - identifier -

-

- conversationId: Unique ID for the - conversation (create your own or use a new ID to start a new conversation) -

-
- - - - - -
-
- chunk -

- Streaming text content:{' '} - {`{ "text": "..." }`} -

-
-
- tool_call -

- Tool invocation:{' '} - {`{ "toolCallId": "...", "toolName": "...", "input": {...} }`} -

-
-
- tool_result -

- Tool result:{' '} - {`{ "toolCallId": "...", "result": {...} }`} -

-
-
- complete -

- Response complete:{' '} - {`{ "conversationId": "...", "inputTokens": 150, "outputTokens": 300 }`} -

-
-
- error -

- Error occurred: {`{ "message": "..." }`} -

-
-
- - - - - - -

- Returns the full conversation with all messages: -

- - - - -

- Returns a list of all conversations for the agent: -

- - - +
{/* ==================== API REFERENCE ==================== */} @@ -1769,141 +1284,67 @@ export TPMJS_EXECUTOR_URL=https://executor.mycompany.com`} -
+ + +

- Transport options: + Content-Type: application/json +

+

+ + Accept: application/json, text/event-stream +

-
    -
  • - http - Streamable HTTP transport - (recommended) -
    • -
  • - sse - Server-Sent Events transport -
    • -
-
-
- initialize -

- Initialize the MCP session. Returns server info and capabilities. -

- -
-
+
+
tools/list -

- List all tools in the collection with their schemas. +

+ Returns all tools in the collection with their schemas and descriptions.

-
-
+
tools/call -

- Execute a tool with the given arguments. +

+ Executes a tool with the provided arguments. Supports streaming responses.

-
- -

- Tool names in MCP follow a sanitized format to comply with MCP naming - requirements: -

- -- -- @ prefix is removed -- / becomes - -- -- separates package from tool name`} - /> - - -

- Here's an example response from{' '} - tools/call: -

+ + + + - -

- You can test your MCP endpoint directly with curl: -

- /mcp/http \\ - -H "Content-Type: application/json" \\ - -d '{"jsonrpc":"2.0","method":"initialize","params":{},"id":1}' - -# List available tools -curl -X POST https://tpmjs.com/api/collections//mcp/http \\ - -H "Content-Type: application/json" \\ - -d '{"jsonrpc":"2.0","method":"tools/list","params":{},"id":2}' - -# Call a tool -curl -X POST https://tpmjs.com/api/collections//mcp/http \\ - -H "Content-Type: application/json" \\ - -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"tpmjs-hello--helloWorldTool","arguments":{}},"id":3}'`} - /> - - {/* ==================== RESOURCES ==================== */} + {/* ==================== FAQ & SUPPORT ==================== */}
{[ @@ -2007,6 +1448,7 @@ curl -X POST https://tpmjs.com/api/collections//mcp/http \\
+
); }