@promptbook/cli 0.103.0-54 → 0.103.0-56

package/apps/agents-server/src/app/agents/[agentName]/api/openai/v1/models/route.ts

@@ -0,0 +1,93 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { validateApiKey } from '@/src/utils/validateApiKey';
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * GET /agents/[agentName]/api/openai/v1/models
+ *
+ * Lists available models for the OpenAI-compatible API.
+ * This endpoint is required for OpenAI-compatible clients (like Jan, LM Studio, etc.)
+ * to discover available models.
+ */
+export async function GET(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+
+    // Validate API key explicitly (in addition to middleware)
+    const apiKeyValidation = await validateApiKey(request);
+    if (!apiKeyValidation.isValid) {
+        return NextResponse.json(
+            {
+                error: {
+                    message: apiKeyValidation.error || 'Invalid API key',
+                    type: 'authentication_error',
+                },
+            },
+            { status: 401 },
+        );
+    }
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+
+        let agentSource;
+        try {
+            agentSource = await collection.getAgentSource(agentName);
+        } catch (error) {
+            return NextResponse.json(
+                { error: { message: `Agent '${agentName}' not found.`, type: 'invalid_request_error' } },
+                { status: 404 },
+            );
+        }
+
+        if (!agentSource) {
+            return NextResponse.json(
+                { error: { message: `Agent '${agentName}' not found.`, type: 'invalid_request_error' } },
+                { status: 404 },
+            );
+        }
+
+        // Return the agent as a single model in OpenAI format
+        // The model ID is the agent name, which clients will use when making chat completion requests
+        const models = [
+            {
+                id: agentName,
+                object: 'model',
+                created: Math.floor(Date.now() / 1000),
+                owned_by: 'promptbook',
+                permission: [
+                    {
+                        id: `modelperm-${agentName}`,
+                        object: 'model_permission',
+                        created: Math.floor(Date.now() / 1000),
+                        allow_create_engine: false,
+                        allow_sampling: true,
+                        allow_logprobs: false,
+                        allow_search_indices: false,
+                        allow_view: true,
+                        allow_fine_tuning: false,
+                        organization: '*',
+                        group: null,
+                        is_blocking: false,
+                    },
+                ],
+                root: agentName,
+                parent: null,
+            },
+        ];
+
+        return NextResponse.json({
+            object: 'list',
+            data: models,
+        });
+    } catch (error) {
+        console.error('Error in models listing handler:', error);
+        return NextResponse.json(
+            { error: { message: (error as Error).message || 'Internal Server Error', type: 'server_error' } },
+            { status: 500 },
+        );
+    }
+}
+
+/**
+ * TODO: [🧠] Consider listing all available agents as models when agentName is a wildcard or special value
+ */

package/apps/agents-server/src/app/agents/[agentName]/api/openrouter/chat/completions/route.ts

@@ -0,0 +1,10 @@
+import { handleChatCompletion } from '@/src/utils/handleChatCompletion';
+import { NextRequest } from 'next/server';
+
+export async function POST(
+    request: NextRequest,
+    { params }: { params: Promise<{ agentName: string }> },
+) {
+    const { agentName } = await params;
+    return handleChatCompletion(request, { agentName }, 'OpenRouter API Chat Completion');
+}

package/apps/agents-server/src/app/agents/[agentName]/api/voice/route.ts

@@ -98,6 +98,8 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
             userAgent,
             language,
             platform,
+            source: 'AGENT_PAGE_CHAT',
+            apiKey: null,
         });
 
         // Call Agent
@@ -131,6 +133,8 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
             userAgent,
             language,
             platform,
+            source: 'AGENT_PAGE_CHAT',
+            apiKey: null,
         });
 
         // Learning

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

@@ -7,16 +7,23 @@ import { AgentChatWrapper } from '../AgentChatWrapper';
 
 export const generateMetadata = generateAgentMetadata;
 
-export default async function AgentChatPage({ params }: { params: Promise<{ agentName: string }> }) {
+export default async function AgentChatPage({
+    params,
+    searchParams,
+}: {
+    params: Promise<{ agentName: string }>;
+    searchParams: Promise<{ message?: string }>;
+}) {
     $sideEffect(headers());
     let { agentName } = await params;
     agentName = decodeURIComponent(agentName);
+    const { message } = await searchParams;
 
     const agentUrl = `/agents/${agentName}`;
 
     return (
         <main className={`w-screen h-screen`}>
-            <AgentChatWrapper agentUrl={agentUrl} />
+            <AgentChatWrapper agentUrl={agentUrl} autoExecuteMessage={message} />
         </main>
     );
 }

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../../../_common/components/Tabs/Tabs';
+
+type SdkCodeTabsProps = {
+    curlCode: string;
+    pythonCode: string;
+    jsCode: string;
+};
+
+export function SdkCodeTabs({ curlCode, pythonCode, jsCode }: SdkCodeTabsProps) {
+    return (
+        <Tabs defaultValue="curl" className="w-full">
+            <TabsList>
+                <TabsTrigger value="curl">cURL</TabsTrigger>
+                <TabsTrigger value="python">Python SDK</TabsTrigger>
+                <TabsTrigger value="javascript">JavaScript/TypeScript SDK</TabsTrigger>
+            </TabsList>
+            <TabsContent value="curl">
+                <CodePreview code={curlCode} language="bash" />
+            </TabsContent>
+            <TabsContent value="python">
+                <CodePreview code={pythonCode} language="python" />
+            </TabsContent>
+            <TabsContent value="javascript">
+                <CodePreview code={jsCode} language="typescript" />
+            </TabsContent>
+        </Tabs>
+    );
+}

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
- */