@promptbook/cli 0.103.0-55 → 0.103.0-66

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>

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

@@ -1,28 +1,17 @@
 'use server';
 
-// import { BookEditor } from '@promptbook-local/components';
 import { $provideServer } from '@/src/tools/$provideServer';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
+import { saturate } from '@promptbook-local/color';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
-import { CodeIcon, HistoryIcon, MessageCircleQuestionIcon, MessageSquareIcon, NotebookPenIcon } from 'lucide-react';
-import { headers } from 'next/headers';
 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 { AGENT_ACTIONS, getAgentName, getAgentProfile } from './_utils';
-import { AgentChatWrapper } from './AgentChatWrapper';
-import { AgentQrCode } from './AgentQrCode';
-import { CopyField } from './CopyField';
+import { getAgentName, getAgentProfile } from './_utils';
+import { getAgentLinks } from './agentLinks';
+import { AgentProfileChat } from './AgentProfileChat';
+import { AgentProfileWrapper } from './AgentProfileWrapper';
 import { generateAgentMetadata } from './generateAgentMetadata';
-import { InstallPwaButton } from './InstallPwaButton';
 import { ServiceWorkerRegister } from './ServiceWorkerRegister';
-import { ClearAgentChatHistoryButton } from './ClearAgentChatHistoryButton';
-import { ClearAgentChatFeedbackButton } from './ClearAgentChatFeedbackButton';
-import { CloneAgentButton } from './CloneAgentButton';
-import { isUserAdmin } from '../../../utils/isUserAdmin';
-// import { Agent } from '@promptbook-local/core';
-// import { RemoteLlmExecutionTools } from '@promptbook-local/remote-client';
-// import { OpenAiAssistantExecutionTools } from '@promptbook-local/openai';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -31,17 +20,12 @@ export default async function AgentPage({
     searchParams,
 }: {
     params: Promise<{ agentName: string }>;
-    searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+    searchParams: Promise<{ headless?: string }>;
 }) {
-    // const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
-    // const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
-    // const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
-
-    $sideEffect(headers());
-
-    const { message } = await searchParams;
     const agentName = await getAgentName(params);
     const isAdmin = await isUserAdmin();
+    const { headless: headlessParam } = await searchParams;
+    const isHeadless = headlessParam !== undefined;
 
     let agentProfile;
     try {
@@ -66,145 +50,51 @@ export default async function AgentPage({
 
     const agentEmail = `${agentName}@${publicUrl.hostname}`;
 
-    console.log('[🐱‍🚀]', { pageUrl: agentUrl });
+    const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const brandColorHex = brandColor.then(saturate(-0.5)).toHex();
 
-    // Extract brand color from meta
-    const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
-
-    // Mock agent actions
-    const agentActions = AGENT_ACTIONS;
+    const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
 
     return (
-        <div className="flex flex-col md:flex-row h-[calc(100vh-60px)] w-full overflow-hidden">
+        <>
             <ServiceWorkerRegister scope={`/agents/${encodeURIComponent(agentName)}/`} />
-
-            {/* Left sidebar: Profile info */}
-            <div
-                className="w-full md:w-[400px] flex flex-col gap-6 p-6 overflow-y-auto border-r bg-gray-50 flex-shrink-0"
-                style={{
-                    backgroundColor: brandColor.then(withAlpha(0.05)).toHex(),
-                    borderColor: brandColor.then(withAlpha(0.1)).toHex(),
-                }}
-            >
-                <div className="flex items-center gap-4">
-                    {agentProfile.meta.image && (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img
-                            src={agentProfile.meta.image as string}
-                            alt={agentProfile.meta.fullname || agentProfile.agentName || 'Agent'}
-                            width={64}
-                            height={64}
-                            className="rounded-full object-cover border-2 aspect-square w-16 h-16"
-                            style={{ borderColor: brandColor.toHex() }}
-                        />
-                    )}
-                    <div className="flex-1">
-                        <h1 className="text-3xl font-bold text-gray-900 break-words">
-                            {agentProfile.meta.fullname || agentProfile.agentName}
-                        </h1>
-                        <span
-                            className="inline-block mt-1 px-2 py-1 rounded text-xs font-semibold text-white"
-                            style={{ backgroundColor: brandColor.toHex() }}
-                        >
-                            Agent
-                        </span>
-                    </div>
-                </div>
-
-                <p className="text-gray-700">{agentProfile.personaDescription}</p>
-
-                <div className="flex flex-col gap-2">
-                    <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Capabilities</h2>
-                    <div className="flex flex-wrap gap-2">
-                        {agentActions.map((action) => (
-                            <span
-                                key={action}
-                                className="px-3 py-1 bg-white text-gray-700 rounded-full text-xs font-medium border border-gray-200 shadow-sm"
-                            >
-                                {action}
-                            </span>
-                        ))}
-                    </div>
-                </div>
-
-                <div className="flex flex-col gap-3 mt-auto">
-                    <div className="flex gap-2">
-                        <a
-                            href={`/agents/${encodeURIComponent(agentName)}/book+chat`}
-                            // <- TODO: [🧠] Can I append path like this on current browser URL in href?
-                            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
-                        >
-                            <NotebookPenIcon className="ml-2 w-4 h-4 mr-2" />
-                            Edit
-                        </a>
-                        <a
-                            href={`/agents/${encodeURIComponent(agentName)}/integration`}
-                            // <- TODO: [🧠] Can I append path like this on current browser URL in href?
-                            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
-                        >
-                            <CodeIcon className="ml-2 w-4 h-4 mr-2" />
-                            Integration
-                        </a>
-                        <a
-                            href={`/agents/${encodeURIComponent(agentName)}/history`}
-                            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
-                        >
-                            <HistoryIcon className="ml-2 w-4 h-4 mr-2" />
-                            History
-                        </a>
-                        {isAdmin && <CloneAgentButton agentName={agentName} />}
-                        <InstallPwaButton />
-                    </div>
-
-                    {isAdmin && (
-                        <div className="border-t border-dashed border-gray-300 pt-3">
-                            <h2 className="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-600">
-                                Maintenance
-                            </h2>
-                            <div className="flex flex-col gap-2">
-                                <a
-                                    href={`/admin/chat-history?agentName=${encodeURIComponent(agentName)}`}
-                                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
-                                >
-                                    <MessageSquareIcon className="mr-2 w-3 h-3" />
-                                    Chat history
-                                </a>
+            <AgentProfileWrapper
+                agent={agentProfile}
+                agentUrl={agentUrl}
+                agentEmail={agentEmail}
+                agentName={agentName}
+                brandColorHex={brandColorHex}
+                isAdmin={isAdmin}
+                isHeadless={isHeadless}
+                actions={
+                    <>
+                        {getAgentLinks(agentName)
+                            .filter((link) => ['Edit Book', 'Integration', 'All Links'].includes(link.title))
+                            .map((link) => (
                                 <a
-                                    href={`/admin/chat-feedback?agentName=${encodeURIComponent(agentName)}`}
-                                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
+                                    key={link.href}
+                                    href={link.href}
+                                    className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors group"
+                                    title={link.title}
                                 >
-                                    <MessageCircleQuestionIcon className="mr-2 w-3 h-3" />
-                                    Chat feedback
+                                    <div className="p-2 rounded-full bg-white/40 group-hover:bg-white/60 transition-colors shadow-sm">
+                                        <link.icon className="w-5 h-5" />
+                                    </div>
+                                    <span className="font-medium text-sm">{link.title}</span>
                                 </a>
-                                <ClearAgentChatHistoryButton agentName={agentName} />
-                                <ClearAgentChatFeedbackButton agentName={agentName} />
-                            </div>
-                        </div>
-                    )}
-                </div>
-
-                <div className="flex flex-col items-center gap-4 pt-6 border-t border-gray-200 w-full">
-                    <div className="bg-white rounded-lg p-4 flex flex-col items-center shadow-sm border border-gray-100">
-                        <AgentQrCode
-                            agentName={agentProfile.agentName || 'Agent'}
-                            meta={agentProfile.meta}
-                            personaDescription={agentProfile.personaDescription}
-                            agentUrl={agentUrl}
-                            agentEmail={agentEmail}
-                        />
-                    </div>
-                    <div className="flex flex-col gap-2 w-full">
-                        <CopyField label="Agent Page URL" value={agentUrl} />
-                        <CopyField label="Agent Email" value={agentEmail} />
-                    </div>
-                </div>
-            </div>
-
-            {/* Main content: Chat */}
-            <div className="flex-1 relative h-full bg-white">
-                <AgentChatWrapper agentUrl={agentUrl} defaultMessage={message as string} />
-            </div>
-        </div>
+                            ))}
+                    </>
+                }
+            >
+                <AgentProfileChat
+                    agentUrl={agentUrl}
+                    agentName={agentName}
+                    fullname={fullname}
+                    brandColorHex={brandColorHex}
+                    avatarSrc={agentProfile.meta.image!}
+                />
+            </AgentProfileWrapper>
+        </>
     );
 }
 

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

@@ -0,0 +1,70 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PromptbookAgentIntegration } from '@promptbook-local/components';
+import { parseAgentSource } from '@promptbook-local/core';
+import { headers } from 'next/headers';
+import spaceTrim from 'spacetrim';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function WebsiteIntegrationAgentPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    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 code = spaceTrim(
+        (block) => `
+
+            import { PromptbookAgent } from '@promptbook/components';
+
+            export function YourComponent() {
+                return(
+                    <PromptbookAgent
+                        agentUrl="${agentUrl}"
+                        meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
+                    />
+                );
+            }
+            
+        `,
+    );
+
+    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} />
+            <PromptbookAgentIntegration
+                formfactor="profile"
+                agentUrl={agentUrl}
+                meta={meta}
+                style={{
+                    width: '400px',
+                    height: '600px',
+                    // outline: `2px solid red`
+                }}
+            />
+        </main>
+    );
+}
+
+/**
+ * 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/api/openai/v1/chat/completions/route.ts

@@ -0,0 +1,6 @@
+import { handleChatCompletion } from '@/src/utils/handleChatCompletion';
+import { NextRequest } from 'next/server';
+
+export async function POST(request: NextRequest) {
+    return handleChatCompletion(request, {}, 'OpenAI API Chat Completion (Global)');
+}

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

@@ -0,0 +1,65 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { validateApiKey } from '@/src/utils/validateApiKey';
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * GET /api/openai/v1/models
+ *
+ * Lists all available agents as models for the OpenAI-compatible API.
+ */
+export async function GET(request: NextRequest) {
+    // 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();
+        const agentNames = await collection.listAgents();
+
+        const models = agentNames.map((agentName) => ({
+            id: agentName,
+            object: 'model',
+            created: Math.floor(Date.now() / 1000), // We don't have creation date readily available in listAgents
+            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 },
+        );
+    }
+}