@promptbook/cli 0.103.0-55 → 0.103.0-56

package/apps/agents-server/src/app/agents/[agentName]/integration/page.tsx

@@ -1,61 +1,302 @@
 'use server';
 
-import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabase } from '@/src/database/$provideSupabase';
 import { $provideServer } from '@/src/tools/$provideServer';
-import { PromptbookAgent } from '@promptbook-local/components';
-import { parseAgentSource } from '@promptbook-local/core';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { ArrowLeftIcon, BoxIcon, CodeIcon, GlobeIcon, ServerIcon, TerminalIcon } from 'lucide-react';
 import { headers } from 'next/headers';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
 import spaceTrim from 'spacetrim';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { getAgentLinks } from '../agentLinks';
+import { CopyField } from '../CopyField';
+import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
+import { SdkCodeTabs } from './SdkCodeTabs';
 
 export const generateMetadata = generateAgentMetadata;
 
-export default async function AgentChatPage({ params }: { params: Promise<{ agentName: string }> }) {
+export default async function AgentIntegrationPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
-    let { agentName } = await params;
-    agentName = decodeURIComponent(agentName);
+    const agentName = await getAgentName(params);
+    const isAdmin = await isUserAdmin();
+
+    let agentProfile;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                error.message.includes('JSON object requested, multiple (or no) results returned'))
+        ) {
+            notFound();
+        }
+        throw error;
+    }
 
-    const collection = await $provideAgentCollectionForServer();
-    const agentSource = await collection.getAgentSource(agentName);
-    const { meta } = parseAgentSource(agentSource);
-    const { fullname, color, image, ...restMeta } = meta;
     const { publicUrl } = await $provideServer();
-    const agentUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+    const baseUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+    const agentApiBase = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+    const rootUrl = publicUrl.href.replace(/\/$/, '');
 
-    const code = spaceTrim(
-        (block) => `
+    // Get API Key if admin
+    let apiKey = 'ptbk_...';
+    if (isAdmin) {
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ApiTokens');
+        const { data } = await supabase
+            .from(table)
+            .select('token')
+            .eq('isRevoked', false)
+            .order('createdAt', { ascending: false })
+            .limit(1);
+
+        if (data && data.length > 0) {
+            apiKey = data[0].token;
+        }
+    }
 
+    // Extract brand color from meta
+    const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const backgroundColor = (await brandColor.then(withAlpha(0.05))).toHex();
+    const borderColor = (await brandColor.then(withAlpha(0.1))).toHex();
+    const primaryColor = (await brandColor).toHex();
+
+    // Website Integration Code
+    const { fullname, color, image, ...restMeta } = agentProfile.meta;
+    const websiteIntegrationCode = spaceTrim(
+        (block) => `
             import { PromptbookAgent } from '@promptbook/components';
 
             export function YourComponent() {
                 return(
                     <PromptbookAgent
-                        agentUrl="${agentUrl}"
+                        agentUrl="${baseUrl}"
                         meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
                     />
                 );
             }
-            
         `,
     );
 
+    // OpenAI Compatible Curl
+    const curlCode = spaceTrim(`
+        curl ${agentApiBase}/api/openai/v1/chat/completions \\
+          -H "Content-Type: application/json" \\
+          -H "Authorization: Bearer ${apiKey}" \\
+          -d '{
+            "model": "agent:${agentName}",
+            "messages": [
+              {"role": "user", "content": "Hello!"}
+            ]
+          }'
+    `);
+
+    // OpenAI Compatible Python
+    const pythonCode = spaceTrim(`
+        from openai import OpenAI
+
+        client = OpenAI(
+            base_url="${agentApiBase}/api/openai/v1",
+            api_key="${apiKey}",
+        )
+
+        response = client.chat.completions.create(
+            model="agent:${agentName}",
+            messages=[
+                {"role": "user", "content": "Hello!"}
+            ]
+        )
+
+        print(response.choices[0].message.content)
+    `);
+
+    // OpenAI Compatible JS
+    const jsCode = spaceTrim(`
+        import OpenAI from 'openai';
+
+        const client = new OpenAI({
+            baseURL: '${agentApiBase}/api/openai/v1',
+            apiKey: '${apiKey}',
+        });
+
+        async function main() {
+            const response = await client.chat.completions.create({
+                model: 'agent:${agentName}',
+                messages: [{ role: 'user', content: 'Hello!' }],
+            });
+
+            console.log(response.choices[0].message.content);
+        }
+
+        main();
+    `);
+
+    // MCP Config
+    const mcpConfigCode = spaceTrim(`
+        {
+          "mcpServers": {
+            "${agentName}": {
+              "command": "npx",
+              "args": [
+                "-y",
+                "@promptbook/cli",
+                "mcp",
+                "${baseUrl}"
+              ]
+            }
+          }
+        }
+    `);
+
+    const agentLinks = getAgentLinks(agentName);
+    const chatLink = agentLinks.find((l) => l.title === 'Chat with Agent')!;
+    const websiteIntegrationLink = agentLinks.find((l) => l.title === 'Website Integration')!;
+
     return (
-        <main className="w-screen h-screen p-4">
-            <h1 className="text-2xl font-bold p-4 border-b">{meta.fullname || agentName} Integration Code</h1>
-            <p className="mt-4 mb-8 text-gray-600">
-                Use the following code to integrate the <strong>{meta.fullname || agentName}</strong> agent into your
-                React application using the <code>{'<PromptbookAgent />'}</code> component.
-            </p>
-
-            <CodePreview code={code} />
-            <PromptbookAgent agentUrl={agentUrl} meta={meta} />
-        </main>
+        <div
+            className="min-h-screen p-6 md:p-12 flex flex-col items-center"
+            style={{
+                backgroundColor,
+            }}
+        >
+            <div className="w-full max-w-5xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b flex items-center gap-4" style={{ borderColor }}>
+                    {agentProfile.meta.image && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={agentProfile.meta.image as string}
+                            alt={agentProfile.meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2"
+                            style={{ borderColor: primaryColor }}
+                        />
+                    )}
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-gray-900">{agentProfile.meta.fullname || agentName}</h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <CodeIcon className="w-4 h-4" />
+                            Integration Options
+                        </p>
+                    </div>
+                    <Link
+                        href={chatLink.href}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="p-6 space-y-6">
+                    {/* Website Integration */}
+                    <div className="p-6 rounded-xl border-2 border-green-200 bg-green-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-green-100 text-green-600 shadow-sm">
+                                <GlobeIcon className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">Website Integration</h2>
+                                <p className="text-gray-600">
+                                    Embed the agent chat widget directly into your React application.
+                                </p>
+                                <p className="text-sm text-gray-500 mt-1">
+                                    <Link href={websiteIntegrationLink.href} className="text-blue-600 hover:underline">
+                                        View detailed guide &rarr;
+                                    </Link>
+                                </p>
+                            </div>
+                        </div>
+                        <CodePreview code={websiteIntegrationCode} language="typescript" />
+                    </div>
+
+                    {/* OpenAI API Compatible Endpoint */}
+                    <div className="p-6 rounded-xl border-2 border-blue-200 bg-blue-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-blue-100 text-blue-600 shadow-sm">
+                                <TerminalIcon className="w-6 h-6" />
+                            </div>
+                            <div className="flex-1">
+                                <h2 className="text-xl font-bold text-gray-900">OpenAI Compatible API</h2>
+                                <p className="text-gray-600">
+                                    Use the agent as a drop-in replacement for OpenAI API in your existing applications.
+                                </p>
+                                <div className="grid md:grid-cols-3 gap-4 mt-4 mb-2">
+                                    <CopyField label="Endpoint URL" value={`${agentApiBase}/api/openai/v1`} />
+                                    <CopyField label="Model Name" value={`agent:${agentName}`} />
+                                    {isAdmin ? (
+                                        <CopyField label="API Key" value={apiKey} />
+                                    ) : (
+                                        <div className="flex flex-col gap-1">
+                                            <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                                API Key
+                                            </span>
+                                            <div className="text-sm text-gray-500 italic bg-gray-50 p-2 rounded border border-gray-200">
+                                                Contact admin for API Key
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                                {isAdmin && apiKey === 'ptbk_...' && (
+                                    <p className="text-sm text-amber-600 mt-2">
+                                        No API token found.{' '}
+                                        <Link href="/admin/api-tokens" className="underline font-medium">
+                                            Create one in settings
+                                        </Link>
+                                        .
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+
+                        <SdkCodeTabs curlCode={curlCode} pythonCode={pythonCode} jsCode={jsCode} />
+                    </div>
+
+                    {/* OpenRouter Integration */}
+                    <div className="p-6 rounded-xl border-2 border-purple-200 bg-purple-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-purple-100 text-purple-600 shadow-sm">
+                                <ServerIcon className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">OpenRouter Integration</h2>
+                                <p className="text-gray-600">Connect via OpenRouter compatible endpoint.</p>
+                                <div className="grid md:grid-cols-2 gap-4 mt-4">
+                                    <CopyField label="Endpoint URL" value={`${agentApiBase}/api/openrouter`} />
+                                    <CopyField label="Model Name" value={`agent:${agentName}`} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* MCP Integration */}
+                    <div className="p-6 rounded-xl border-2 border-orange-200 bg-orange-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-orange-100 text-orange-600 shadow-sm">
+                                <BoxIcon className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">MCP Integration</h2>
+                                <p className="text-gray-600">
+                                    Use Model Context Protocol to connect this agent with compatible tools and IDEs
+                                    (like Claude Desktop, Cursor, etc.).
+                                </p>
+                            </div>
+                        </div>
+                        <CodePreview
+                            code={mcpConfigCode.replace(rootUrl + '/api', agentApiBase + '/api')}
+                            language="json"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 }
-
-/**
- * TODO: Make this page better, bring from Promptbook.Studio
- * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
- */

package/apps/agents-server/src/app/agents/[agentName]/links/page.tsx

@@ -1,25 +1,22 @@
 'use server';
 
 import { $provideServer } from '@/src/tools/$provideServer';
-import { Color } from '../../../../../../../src/utils/color/Color';
-import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
-import { ArrowLeftIcon, BookOpenIcon, CodeIcon, HistoryIcon, HomeIcon, LinkIcon, MessageSquareIcon, ShareIcon } from 'lucide-react';
+import { ArrowLeftIcon, CodeIcon, HomeIcon, LinkIcon, ShareIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { getAgentExternalLinks, getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
 import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 
 export const generateMetadata = generateAgentMetadata;
 
-export default async function AgentLinksPage({
-    params,
-}: {
-    params: Promise<{ agentName: string }>;
-}) {
+export default async function AgentLinksPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
     const agentName = await getAgentName(params);
 
@@ -39,7 +36,7 @@ export default async function AgentLinksPage({
 
     const { publicUrl } = await $provideServer();
     const baseUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
-    
+
     // Extract brand color from meta
     const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
     const backgroundColor = (await brandColor.then(withAlpha(0.05))).toHex();
@@ -47,19 +44,15 @@ export default async function AgentLinksPage({
     const primaryColor = (await brandColor).toHex();
 
     return (
-        <div 
+        <div
             className="min-h-screen p-6 md:p-12 flex flex-col items-center"
             style={{
                 backgroundColor,
             }}
         >
             <div className="w-full max-w-3xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-                
                 {/* Header */}
-                <div 
-                    className="p-6 border-b flex items-center gap-4"
-                    style={{ borderColor }}
-                >
+                <div className="p-6 border-b flex items-center gap-4" style={{ borderColor }}>
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
@@ -70,15 +63,13 @@ export default async function AgentLinksPage({
                         />
                     )}
                     <div className="flex-1">
-                        <h1 className="text-2xl font-bold text-gray-900">
-                            {agentProfile.meta.fullname || agentName}
-                        </h1>
+                        <h1 className="text-2xl font-bold text-gray-900">{agentProfile.meta.fullname || agentName}</h1>
                         <p className="text-gray-500 flex items-center gap-2">
                             <LinkIcon className="w-4 h-4" />
                             Signpost & Links
                         </p>
                     </div>
-                    <Link 
+                    <Link
                         href={`/agents/${encodeURIComponent(agentName)}`}
                         className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
                         title="Back to Agent"
@@ -88,7 +79,6 @@ export default async function AgentLinksPage({
                 </div>
 
                 <div className="divide-y divide-gray-100">
-                    
                     {/* API Endpoints */}
                     <div className="p-6">
                         <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
@@ -97,26 +87,36 @@ export default async function AgentLinksPage({
                         </h2>
                         <div className="grid gap-4">
                             <div>
-                                <h3 className="text-sm font-medium text-gray-700 mb-1">OpenAI Compatible Chat Completion</h3>
-                                <p className="text-xs text-gray-500 mb-2">Standard OpenAI API endpoint for chat completions.</p>
-                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/openai/chat/completions`} />
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">
+                                    OpenAI Compatible Chat Completion
+                                </h3>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Standard OpenAI API endpoint for chat completions.
+                                </p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/openai/v1/chat/completions`} />
                             </div>
-                            
+
                             <div>
                                 <h3 className="text-sm font-medium text-gray-700 mb-1">OpenRouter Compatible</h3>
-                                <p className="text-xs text-gray-500 mb-2">Endpoint compatible with OpenRouter API format.</p>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Endpoint compatible with OpenRouter API format.
+                                </p>
                                 <CopyField label="Endpoint URL" value={`${baseUrl}/api/openrouter/chat/completions`} />
                             </div>
 
                             <div>
                                 <h3 className="text-sm font-medium text-gray-700 mb-1">Model Context Protocol (MCP)</h3>
-                                <p className="text-xs text-gray-500 mb-2">Endpoint for Model Context Protocol integration.</p>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Endpoint for Model Context Protocol integration.
+                                </p>
                                 <CopyField label="Endpoint URL" value={`${baseUrl}/api/mcp`} />
                             </div>
 
                             <div>
                                 <h3 className="text-sm font-medium text-gray-700 mb-1">Model Requirements</h3>
-                                <p className="text-xs text-gray-500 mb-2">Get requirements and capabilities of the model.</p>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Get requirements and capabilities of the model.
+                                </p>
                                 <CopyField label="Endpoint URL" value={`${baseUrl}/api/modelRequirements`} />
                             </div>
                         </div>
@@ -129,50 +129,25 @@ export default async function AgentLinksPage({
                             Agent Resources
                         </h2>
                         <div className="grid md:grid-cols-2 gap-4">
-                            <Link 
-                                href={`/agents/${encodeURIComponent(agentName)}`}
-                                className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
-                            >
-                                <div className="flex items-center gap-3 mb-2">
-                                    <div className="p-2 rounded-lg bg-blue-50 text-blue-600 group-hover:bg-blue-100 transition-colors">
-                                        <MessageSquareIcon className="w-5 h-5" />
-                                    </div>
-                                    <span className="font-medium text-gray-900">Chat with Agent</span>
-                                </div>
-                                <p className="text-sm text-gray-500">
-                                    Direct interface to converse with {agentProfile.meta.fullname || agentName}.
-                                </p>
-                            </Link>
-
-                            <Link 
-                                href={`/agents/${encodeURIComponent(agentName)}/history`}
-                                className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
-                            >
-                                <div className="flex items-center gap-3 mb-2">
-                                    <div className="p-2 rounded-lg bg-purple-50 text-purple-600 group-hover:bg-purple-100 transition-colors">
-                                        <HistoryIcon className="w-5 h-5" />
-                                    </div>
-                                    <span className="font-medium text-gray-900">History & Feedback</span>
-                                </div>
-                                <p className="text-sm text-gray-500">
-                                    View past conversations and provide feedback.
-                                </p>
-                            </Link>
-
-                            <Link 
-                                href={`/agents/${encodeURIComponent(agentName)}/integration`}
-                                className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
-                            >
-                                <div className="flex items-center gap-3 mb-2">
-                                    <div className="p-2 rounded-lg bg-green-50 text-green-600 group-hover:bg-green-100 transition-colors">
-                                        <CodeIcon className="w-5 h-5" />
-                                    </div>
-                                    <span className="font-medium text-gray-900">Integration Guide</span>
-                                </div>
-                                <p className="text-sm text-gray-500">
-                                    Learn how to integrate this agent into your applications.
-                                </p>
-                            </Link>
+                            {getAgentLinks(agentName)
+                                .filter((link) =>
+                                    ['Chat with Agent', 'History & Feedback', 'Integration'].includes(link.title),
+                                )
+                                .map((link) => (
+                                    <Link
+                                        key={link.href}
+                                        href={link.href}
+                                        className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
+                                    >
+                                        <div className="flex items-center gap-3 mb-2">
+                                            <div className="p-2 rounded-lg bg-gray-50 text-gray-600 group-hover:bg-gray-100 transition-colors">
+                                                <link.icon className="w-5 h-5" />
+                                            </div>
+                                            <span className="font-medium text-gray-900">{link.title}</span>
+                                        </div>
+                                        <p className="text-sm text-gray-500">{link.description}</p>
+                                    </Link>
+                                ))}
                         </div>
                     </div>
 
@@ -183,34 +158,23 @@ export default async function AgentLinksPage({
                             Promptbook Ecosystem
                         </h2>
                         <div className="grid md:grid-cols-2 gap-4">
-                            <a 
-                                href="https://promptbook.studio"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center gap-3 p-3 rounded-lg bg-white border border-gray-200 hover:border-gray-300 transition-colors"
-                            >
-                                <BookOpenIcon className="w-5 h-5 text-gray-400" />
-                                <div>
-                                    <div className="font-medium text-gray-900">Promptbook Studio</div>
-                                    <div className="text-xs text-gray-500">Create and manage your own agents</div>
-                                </div>
-                            </a>
-                            
-                            <a 
-                                href="https://github.com/webgptorg/promptbook"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center gap-3 p-3 rounded-lg bg-white border border-gray-200 hover:border-gray-300 transition-colors"
-                            >
-                                <CodeIcon className="w-5 h-5 text-gray-400" />
-                                <div>
-                                    <div className="font-medium text-gray-900">GitHub Repository</div>
-                                    <div className="text-xs text-gray-500">Star us and contribute to the project</div>
-                                </div>
-                            </a>
+                            {getAgentExternalLinks().map((link) => (
+                                <a
+                                    key={link.href}
+                                    href={link.href}
+                                    target={link.target}
+                                    rel={link.rel}
+                                    className="flex items-center gap-3 p-3 rounded-lg bg-white border border-gray-200 hover:border-gray-300 transition-colors"
+                                >
+                                    <link.icon className="w-5 h-5 text-gray-400" />
+                                    <div>
+                                        <div className="font-medium text-gray-900">{link.title}</div>
+                                        <div className="text-xs text-gray-500">{link.description}</div>
+                                    </div>
+                                </a>
+                            ))}
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>