@promptbook/cli 0.103.0-1 → 0.103.0-100

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

@@ -0,0 +1,182 @@
+'use server';
+
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+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 }> }) {
+    $sideEffect(headers());
+    const agentName = await getAgentName(params);
+
+    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)}`;
+
+    // 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();
+
+    return (
+        <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 }}>
+                    {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">
+                            <LinkIcon className="w-4 h-4" />
+                            Signpost & Links
+                        </p>
+                    </div>
+                    <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"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </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">
+                            <CodeIcon className="w-5 h-5 text-gray-500" />
+                            API Endpoints
+                        </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/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>
+                                <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>
+                                <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>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/modelRequirements`} />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Agent Resources */}
+                    <div className="p-6">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <HomeIcon className="w-5 h-5 text-gray-500" />
+                            Agent Resources
+                        </h2>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            {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>
+
+                    {/* Ecosystem */}
+                    <div className="p-6 bg-gray-50">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <ShareIcon className="w-5 h-5 text-gray-500" />
+                            Promptbook Ecosystem
+                        </h2>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            {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]/opengraph-image.tsx

@@ -0,0 +1,102 @@
+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 { getAgentName, getAgentProfile } from './_utils';
+
+// export const runtime = 'edge';
+// <- Note: On Vercel Edge runtime some modules are not working *(like `crypto`)*
+
+export const alt = 'Agent Profile';
+export const size = {
+    width: 1200,
+    height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image({ params }: { params: Promise<{ agentName: string }> }) {
+    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));
+
+        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: '50%',
+                            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(),
+                                borderRadius: '50%',
+                            }}
+                            src={agentProfile.meta.image!}
+                            alt="Agent Icon"
+                        />
+                    </div>
+                    <div
+                        style={{
+                            width: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <h1 style={{ fontSize: '100px' }}>{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
+ */

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

@@ -0,0 +1,159 @@
+'use server';
+
+import { $provideServer } from '@/src/tools/$provideServer';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { notFound } from 'next/navigation';
+import spaceTrim from 'spacetrim';
+import { Color } from '../../../../../../src/utils/color/Color';
+import { darken } from '../../../../../../src/utils/color/operators/darken';
+import { lighten } from '../../../../../../src/utils/color/operators/lighten';
+import { getAgentName, getAgentProfile } from './_utils';
+import { AgentProfileView } from './AgentProfileView';
+import { generateAgentMetadata } from './generateAgentMetadata';
+import { ServiceWorkerRegister } from './ServiceWorkerRegister';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentPage({ params }: { params: Promise<{ agentName: string }> }) {
+    const agentName = await getAgentName(params);
+    const isAdmin = await isUserAdmin();
+
+    let agentProfile;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            // Note: This is a bit hacky, but valid way to check for specific error message
+            (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();
+
+    // Build agent page URL for QR and copy
+    const agentUrl = `${publicUrl.href}${encodeURIComponent(agentName)}`;
+    // <- TODO: [🐱‍🚀] Better
+
+    const agentEmail = `${agentName}@${publicUrl.hostname}`;
+
+    // Extract brand color from meta and create color variations
+    const brandColorString = agentProfile.meta.color || PROMPTBOOK_COLOR.toHex();
+    const brandColors = brandColorString.split(',').map((c) => Color.fromSafe(c.trim()));
+
+    // Ensure at least one color
+    if (brandColors.length === 0) {
+        brandColors.push(PROMPTBOOK_COLOR);
+    }
+
+    const brandColor = brandColors[0]!;
+    const brandColorHex = brandColor.toHex();
+    const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
+    const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
+    const brandColorsHex = brandColors.map((c) => c.toHex());
+
+    // Generate Noisy SVG Background
+    const color1 = brandColors[0]!;
+    const color2 = brandColors[1] || brandColors[0]!; // Use secondary color or fallback to primary
+
+    // [🧠] Make colors much lighter for the background as per feedback
+    const color1Light = color1.then(lighten(0.3)).toHex();
+    const color1Main = color1.toHex();
+    const color1Dark = color1.then(darken(0.3)).toHex();
+
+    const color2Light = color2.then(lighten(0.3)).toHex();
+    const color2Main = color2.toHex();
+    const color2Dark = color2.then(darken(0.3)).toHex();
+
+    const svgContent = spaceTrim(`
+        <svg xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1920 1080"
+          width="1920" height="1080"
+          preserveAspectRatio="xMidYMid slice">
+          <defs>
+            <!-- Bottom-left -->
+            <radialGradient id="grad1" cx="0%" cy="100%" r="90%">
+              <stop offset="0%" stop-color="${color1Light}" />
+              <stop offset="50%" stop-color="${color1Main}" />
+              <stop offset="100%" stop-color="${color1Dark}" />
+            </radialGradient>
+
+            <!-- Bottom-right -->
+            <radialGradient id="grad2" cx="100%" cy="100%" r="90%">
+              <stop offset="0%" stop-color="${color2Light}" />
+              <stop offset="50%" stop-color="${color2Main}" />
+              <stop offset="100%" stop-color="${color2Dark}" />
+            </radialGradient>
+
+            <!-- White top fade -->
+            <linearGradient id="whiteTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
+              <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
+            </linearGradient>
+
+            <!-- Strong grain -->
+            <filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
+              <feTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="3" seed="8" result="noise" />
+              <feComponentTransfer>
+                <feFuncR type="linear" slope="3.5" intercept="-1.2" />
+                <feFuncG type="linear" slope="3.5" intercept="-1.2" />
+                <feFuncB type="linear" slope="3.5" intercept="-1.2" />
+                <feFuncA type="table" tableValues="0 0.8" />
+              </feComponentTransfer>
+            </filter>
+          </defs>
+
+          <!-- White base -->
+          <rect width="100%" height="100%" fill="#ffffff" />
+
+          <!-- Gradients -->
+          <rect width="100%" height="100%" fill="url(#grad1)" />
+          <rect width="100%" height="100%" fill="url(#grad2)" style="mix-blend-mode:screen; opacity:0.85" />
+
+          <!-- White fade on top -->
+          <rect width="100%" height="100%" fill="url(#whiteTopGrad)" />
+
+          <!-- Strong visible noise -->
+          <rect width="100%" height="100%" filter="url(#grain)"
+            style="mix-blend-mode:soft-light; opacity:1.2" />
+        </svg>
+    `);
+
+    const backgroundImage = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
+
+    const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
+    const imageUrl = (agentProfile.meta.image as string) || null;
+
+    return (
+        <>
+            <ServiceWorkerRegister scope={`/agents/${encodeURIComponent(agentName)}/`} />
+            <AgentProfileView
+                agentName={agentName}
+                fullname={fullname}
+                personaDescription={agentProfile.personaDescription || ''}
+                imageUrl={imageUrl}
+                agentUrl={agentUrl}
+                agentEmail={agentEmail}
+                brandColorHex={brandColorHex}
+                brandColorLightHex={brandColorLightHex}
+                brandColorDarkHex={brandColorDarkHex}
+                brandColorsHex={brandColorsHex}
+                backgroundImage={backgroundImage}
+                meta={agentProfile.meta}
+                isAdmin={isAdmin}
+            />
+        </>
+    );
+}
+
+/**
+ * TODO: [🐱‍🚀] Make this page look nice - 🃏
+ * TODO: [🐱‍🚀] Show usage of LLM
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ * TODO: [🎣][🧠] Maybe do API / Page for transpilers, Allow to export each agent
+ */

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

@@ -0,0 +1,61 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PromptbookAgent } 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} />
+            <PromptbookAgent agentUrl={agentUrl} meta={meta} />
+        </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/agents/page.tsx

@@ -0,0 +1,11 @@
+'use server';
+
+import HomePage from '../page';
+
+export default async function AgentsPage() {
+    return <HomePage />;
+}
+
+/**
+ * TODO: [🐱‍🚀] Distinguish between `/` and `/agents` pages
+ */

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

@@ -0,0 +1,47 @@
+// POST /api/agents/[agentName]/clone
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { AgentBasicInformation } from '../../../../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+import { string_book } from '../../../../../../../../src/book-2.0/agent-source/string_book';
+import { TODO_any } from '@promptbook-local/types';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+
+    try {
+        const source = await collection.getAgentSource(agentName);
+
+        // Generate new name
+        // TODO: [🧠] Better naming strategy, maybe check for collisions
+        let newAgentName = `${agentName} (Copy)`;
+        let counter = 1;
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            try {
+                await collection.getAgentSource(newAgentName);
+                 // If success, it means it exists, so we try next one
+                 counter++;
+                 newAgentName = `${agentName} (Copy ${counter})`;
+             } catch (error) {
+                 // If error, it likely means it does not exist (NotFoundError), so we can use it
+                 // TODO: [🧠] Check if it is really NotFoundError
+                 break;
+             }
+        }
+
+        const lines = source.split('\n');
+        lines[0] = newAgentName;
+        const newSource = lines.join('\n') as string_book;
+
+        const newAgent = await collection.createAgent(newSource);
+        
+        return NextResponse.json(newAgent);
+    } catch (error) {
+        return NextResponse.json(
+            { success: false, error: (error as TODO_any)?.message || 'Failed to clone agent' },
+            { status: 500 },
+        );
+    }
+}

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

@@ -0,0 +1,19 @@
+// DELETE /api/agents/[agentName]
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { TODO_any } from '@promptbook-local/types';
+import { NextResponse } from 'next/server';
+
+export async function DELETE(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+
+    try {
+        await collection.deleteAgent(agentName);
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        return NextResponse.json(
+            { success: false, error: (error as TODO_any)?.message || 'Failed to delete agent' },
+            { status: 500 },
+        );
+    }
+}

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

@@ -0,0 +1,43 @@
+import { $provideServer } from '@/src/tools/$provideServer';
+import { NextResponse } from 'next/server';
+import { $provideAgentCollectionForServer } from '../../../tools/$provideAgentCollectionForServer';
+import { getFederatedServersFromMetadata } from '../../../utils/getFederatedServersFromMetadata';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agents = await collection.listAgents();
+        const federatedServers = await getFederatedServersFromMetadata();
+        const { publicUrl } = await $provideServer();
+
+        const agentsWithUrl = agents.map((agent) => ({
+            ...agent,
+            url: `${publicUrl.href}agents/${encodeURIComponent(agent.agentName)}`,
+        }));
+
+        const response = NextResponse.json({
+            agents: agentsWithUrl,
+            federatedServers,
+        });
+
+        // Add CORS headers
+        response.headers.set('Access-Control-Allow-Origin', '*');
+        response.headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
+        response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+        return response;
+    } catch (error) {
+        console.error('Error fetching agents:', error);
+        return NextResponse.json({ error: 'Failed to fetch agents' }, { status: 500 });
+    }
+}
+
+export async function OPTIONS() {
+    const response = new NextResponse(null, { status: 200 });
+    response.headers.set('Access-Control-Allow-Origin', '*');
+    response.headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    return response;
+}