@promptbook/cli 0.104.0-8 → 0.104.0

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-fullhd.png/route.tsx

@@ -1,93 +0,0 @@
-import { $provideServer } from '@/src/tools/$provideServer';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
-import { serializeError } from '@promptbook-local/utils';
-import { ImageResponse } from 'next/og';
-import { assertsError } from '../../../../../../../../src/errors/assertsError';
-import { Color } from '../../../../../../../../src/utils/color/Color';
-import { textColor } from '../../../../../../../../src/utils/color/operators/furthest';
-import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
-import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
-import { getAgentName, getAgentProfile } from '../../_utils';
-
-const size = {
-    width: 1920,
-    height: 1080,
-};
-
-export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
-    keepUnused(request /* <- Note: We dont need `request` parameter */);
-
-    try {
-        const agentName = await getAgentName(params);
-        const agentProfile = await getAgentProfile(agentName);
-        const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
-        const backgroundColor = agentColor.then(grayscale(0.5));
-        const { publicUrl } = await $provideServer();
-
-        return new ImageResponse(
-            (
-                <div
-                    style={{
-                        width: '100%',
-                        height: '100%',
-                        backgroundColor: backgroundColor.toHex(),
-                        color: agentColor.then(textColor).toHex(),
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <div
-                        style={{
-                            width: '40%',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        {/* Note: `next/image` is not working propperly with `next/og` */}
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img
-                            style={{
-                                width: '80%',
-                                // backgroundColor: agentColor.toHex(),
-                            }}
-                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
-                            alt="Agent Icon"
-                        />
-                    </div>
-                    <div style={{ width: '60%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                        <h1 style={{ fontSize: '110px' }}>{agentProfile.meta.fullname || agentName}</h1>
-                    </div>
-                </div>
-            ),
-            {
-                ...size,
-                emoji: 'openmoji',
-            },
-        );
-    } catch (error) {
-        assertsError(error);
-
-        console.error(error);
-
-        return new Response(
-            JSON.stringify(
-                serializeError(error),
-                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
-                null,
-                4,
-                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
-            ),
-            {
-                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
-                headers: { 'Content-Type': 'application/json' },
-            },
-        );
-    }
-}
-
-/**
- * TODO: [🦚] DRY
- * TODO: [🦚] This should be the true screenshot NOT just image + Agent name
- */

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-phone.png/route.tsx

@@ -1,93 +0,0 @@
-import { $provideServer } from '@/src/tools/$provideServer';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
-import { serializeError } from '@promptbook-local/utils';
-import { ImageResponse } from 'next/og';
-import { assertsError } from '../../../../../../../../src/errors/assertsError';
-import { Color } from '../../../../../../../../src/utils/color/Color';
-import { textColor } from '../../../../../../../../src/utils/color/operators/furthest';
-import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
-import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
-import { getAgentName, getAgentProfile } from '../../_utils';
-
-const size = {
-    width: 1080,
-    height: 1920,
-};
-
-export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
-    keepUnused(request /* <- Note: We dont need `request` parameter */);
-
-    try {
-        const agentName = await getAgentName(params);
-        const agentProfile = await getAgentProfile(agentName);
-        const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
-        const backgroundColor = agentColor.then(grayscale(0.5));
-        const { publicUrl } = await $provideServer();
-
-        return new ImageResponse(
-            (
-                <div
-                    style={{
-                        width: '100%',
-                        height: '100%',
-                        backgroundColor: backgroundColor.toHex(),
-                        color: agentColor.then(textColor).toHex(),
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <div
-                        style={{
-                            width: '40%',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        {/* Note: `next/image` is not working propperly with `next/og` */}
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img
-                            style={{
-                                width: '80%',
-                                // backgroundColor: agentColor.toHex(),
-                            }}
-                            src={`${publicUrl.href}agents/${agentProfile.permanentId || agentName}/images/icon-256.png`}
-                            alt="Agent Icon"
-                        />
-                    </div>
-                    <div style={{ width: '60%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                        <h1 style={{ fontSize: '110px' }}>{agentProfile.meta.fullname || agentName}</h1>
-                    </div>
-                </div>
-            ),
-            {
-                ...size,
-                emoji: 'openmoji',
-            },
-        );
-    } catch (error) {
-        assertsError(error);
-
-        console.error(error);
-
-        return new Response(
-            JSON.stringify(
-                serializeError(error),
-                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
-                null,
-                4,
-                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
-            ),
-            {
-                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
-                headers: { 'Content-Type': 'application/json' },
-            },
-        );
-    }
-}
-
-/**
- * TODO: [🦚] DRY
- * TODO: [🦚] This should be the true screenshot NOT just image + Agent name
- */

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

@@ -1,31 +0,0 @@
-'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/WebsiteIntegrationTabs.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../../../_common/components/Tabs/Tabs';
-
-type WebsiteIntegrationTabsProps = {
-    reactCode: string;
-    htmlCode: string;
-};
-
-export function WebsiteIntegrationTabs({ reactCode, htmlCode }: WebsiteIntegrationTabsProps) {
-    return (
-        <Tabs defaultValue="react" className="w-full">
-            <TabsList>
-                <TabsTrigger value="react">React</TabsTrigger>
-                <TabsTrigger value="html">HTML</TabsTrigger>
-            </TabsList>
-            <TabsContent value="react">
-                <CodePreview code={reactCode} language="typescript" />
-            </TabsContent>
-            <TabsContent value="html">
-                <CodePreview code={htmlCode} language="xml" />
-            </TabsContent>
-        </Tabs>
-    );
-}

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

@@ -1,326 +0,0 @@
-'use server';
-
-import { $getTableName } from '@/src/database/$getTableName';
-import { $provideSupabase } from '@/src/database/$provideSupabase';
-import { $provideServer } from '@/src/tools/$provideServer';
-import { isUserAdmin } from '@/src/utils/isUserAdmin';
-import { generatePlaceholderAgentProfileImageUrl, 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 { getAgentName, getAgentProfile } from '../_utils';
-import { getAgentLinks } from '../agentLinks';
-import { CopyField } from '../CopyField';
-import { generateAgentMetadata } from '../generateAgentMetadata';
-import { SdkCodeTabs } from './SdkCodeTabs';
-import { WebsiteIntegrationTabs } from './WebsiteIntegrationTabs';
-
-export const generateMetadata = generateAgentMetadata;
-
-export default async function AgentIntegrationPage({ params }: { params: Promise<{ agentName: string }> }) {
-    $sideEffect(headers());
-
-    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 { publicUrl } = await $provideServer();
-    const baseUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
-    const agentApiBase = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
-    const rootUrl = publicUrl.href.replace(/\/$/, '');
-
-    // 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 websiteIntegrationReactCode = spaceTrim(
-        (block) => `
-            import { PromptbookAgentIntegration } from '@promptbook/components';
-
-            export function YourComponent() {
-                return(
-                    <PromptbookAgentIntegration
-                        agentUrl="${baseUrl}"
-                        meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
-                    />
-                );
-            }
-        `,
-    );
-
-    // HTML Integration Code - use single quotes for meta attribute to allow JSON with double quotes inside
-    const metaJsonString = JSON.stringify({ fullname, color, image, ...restMeta }, null, 4);
-    const websiteIntegrationHtmlCode = spaceTrim(
-        (block) => `
-            <script src="${publicUrl.href}api/embed.js" async defer></script>
-
-            <promptbook-agent-integration
-                agent-url="${baseUrl}"
-                meta='${block(metaJsonString)}'
-            />
-        `,
-    );
-
-    // 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(agentProfile.permanentId || agentName);
-    const chatLink = agentLinks.find((l) => l.title === 'Chat with Agent')!;
-    const websiteIntegrationLink = agentLinks.find((l) => l.title === 'Website Integration')!;
-
-    return (
-        <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 ||
-                                generatePlaceholderAgentProfileImageUrl(
-                                    agentProfile.permanentId || agentName,
-                                    publicUrl,
-                                )
-                            }
-                            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>
-                        <WebsiteIntegrationTabs
-                            reactCode={websiteIntegrationReactCode}
-                            htmlCode={websiteIntegrationHtmlCode}
-                        />
-                    </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>
-    );
-}

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

@@ -1,41 +0,0 @@
-'use server';
-
-import type { Metadata } from 'next';
-import { getAgentName, getAgentProfile } from './_utils';
-
-export async function generateMetadata({ params }: { params: Promise<{ agentName: string }> }): Promise<Metadata> {
-    const agentName = await getAgentName(params);
-
-    try {
-        const agentProfile = await getAgentProfile(agentName);
-
-        const title = agentProfile.meta.fullname || agentProfile.agentName;
-        const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
-
-        // Use the agent's icon-256.png as the favicon for all agent pages and subpages
-        const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
-
-        return {
-            title,
-            description,
-            icons: {
-                icon: iconUrl,
-                shortcut: iconUrl,
-                apple: iconUrl,
-            },
-        };
-    } catch (error) {
-        console.warn(`Failed to generate metadata for agent ${agentName}`, error);
-        return {
-            title: agentName,
-        };
-    }
-}
-
-export default async function AgentLayout({
-    children,
-}: Readonly<{
-    children: React.ReactNode;
-}>) {
-    return <>{children}</>;
-}