@promptbook/cli 0.104.0-5 → 0.104.0-7

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { AgentBasicInformation } from '@promptbook-local/types';
+import { AgentBasicInformation, string_agent_name } from '@promptbook-local/types';
 import { AgentProfile } from '../../../components/AgentProfile/AgentProfile';
 import { AgentOptionsMenu } from './AgentOptionsMenu';
 
@@ -8,7 +8,7 @@ type AgentProfileWrapperProps = {
     agent: AgentBasicInformation;
     agentUrl: string;
     agentEmail: string;
-    agentName: string;
+    agentName: string_agent_name;
     brandColorHex: string;
     isAdmin: boolean;
     isHeadless: boolean;
@@ -27,6 +27,7 @@ export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
         <AgentProfile
             agent={agent}
             agentUrl={agentUrl}
+            permanentId={permanentId || agentName}
             agentEmail={agentEmail}
             isHeadless={isHeadless}
             renderMenu={({ onShowQrCode }) => (

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

@@ -13,7 +13,11 @@ export async function getAgentName(params: Promise<{ agentName: string }>) {
 export async function getAgentProfile(agentName: string) {
     const collection = await $provideAgentCollectionForServer();
     const agentSource = await collection.getAgentSource(agentName);
-    return parseAgentSource(agentSource);
+    const agentProfile = parseAgentSource(agentSource);
+
+    console.log('!!!!', { agentSource, agentProfile });
+
+    return agentProfile;
 }
 
 export async function isAgentDeleted(agentName: string): Promise<boolean> {
@@ -33,5 +37,5 @@ export async function isAgentDeleted(agentName: string): Promise<boolean> {
 }
 
 /**
- * TODO: Split to multiple files
+ * TODO: Split to multiple files, refactor
  */

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

@@ -1,6 +1,9 @@
 'use client';
 
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import Editor from '@monaco-editor/react';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { AgentBasicInformation } from '@promptbook-local/types';
 import { ArrowLeftIcon, ChevronDownIcon, CodeIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
@@ -29,7 +32,7 @@ function getLanguageFromTranspiler(transpilerName?: string): string {
 
 export default function AgentCodePage({ params }: { params: Promise<{ agentName: string }> }) {
     const [agentName, setAgentName] = useState<string>('');
-    const [agentProfile, setAgentProfile] = useState<unknown>(null);
+    const [agentProfile, setAgentProfile] = useState<AgentBasicInformation | null>(null);
     const [transpilers, setTranspilers] = useState<Transpiler[]>([]);
     const [selectedTranspiler, setSelectedTranspiler] = useState<Transpiler | null>(null);
     const [transpiledCode, setTranspiledCode] = useState<string>('');
@@ -114,13 +117,17 @@ export default function AgentCodePage({ params }: { params: Promise<{ agentName:
                 {/* Header */}
                 <div className="p-6 border-b border-gray-200 flex items-center gap-4">
                     {/* eslint-disable @typescript-eslint/no-explicit-any, @next/next/no-img-element */}
-                    {(agentProfile as any)?.meta?.image && (
-                        <img
-                            src={(agentProfile as any).meta.image as string}
-                            alt={(agentProfile as any).meta.fullname || agentName}
-                            className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
-                        />
-                    )}
+
+                    <img
+                        src={
+                            agentProfile.meta.image ||
+                            agentProfile.permanentId ||
+                            generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)
+                        }
+                        alt={agentProfile.meta.fullname || agentName}
+                        className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
+                    />
+
                     <div className="flex-1">
                         {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                         <h1 className="text-2xl font-bold text-gray-900">

package/apps/agents-server/src/app/agents/[agentName]/images/default-avatar.png/getAgentDefaultAvatarPrompt.ts

@@ -0,0 +1,31 @@
+import { AgentBasicInformation } from '@promptbook-local/types';
+import spaceTrim from 'spacetrim';
+import { string_prompt_image } from '../../../../../../../../src/types/typeAliases';
+
+export function getAgentDefaultAvatarPrompt(agent: AgentBasicInformation): string_prompt_image {
+    const {
+        agentName,
+        personaDescription,
+        meta: { fullname, color },
+    } = agent;
+
+    return spaceTrim(
+        (block) => `
+            Professional corporate headshot of ${fullname || agentName}
+            
+            ${block(personaDescription || '')}
+            
+            - Professional business portrait photograph
+            - Photorealistic, studio quality lighting
+            - Shot with 85mm lens, shallow depth of field
+            - Neutral gray or soft gradient background
+            - Subject wearing professional attire with accent colors: ${color}
+            - Confident, approachable expression with slight smile
+            - Eye-level camera angle, centered composition
+            - Soft diffused lighting, subtle rim light
+            - Sharp focus on eyes, cinematic color grading
+            - 8K resolution, ultra detailed
+            
+        `,
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/images/default-avatar.png/route.ts

@@ -4,12 +4,13 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { $provideCdnForServer } from '@/src/tools/$provideCdnForServer';
 import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
 import { parseAgentSource } from '@promptbook-local/core';
-import { serializeError } from '@promptbook-local/utils';
+import { computeHash, serializeError } from '@promptbook-local/utils';
 import { NextRequest, NextResponse } from 'next/server';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
-import { getSingleLlmExecutionTools } from '../../../../../../../../src/llm-providers/_multiple/getSingleLlmExecutionTools';
 import type { LlmExecutionTools } from '../../../../../../../../src/execution/LlmExecutionTools';
+import { getSingleLlmExecutionTools } from '../../../../../../../../src/llm-providers/_multiple/getSingleLlmExecutionTools';
 import type { string_url } from '../../../../../../../../src/types/typeAliases';
+import { getAgentDefaultAvatarPrompt } from './getAgentDefaultAvatarPrompt';
 
 export async function GET(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
     try {
@@ -20,13 +21,28 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             return NextResponse.json({ error: 'Agent name is required' }, { status: 400 });
         }
 
-        // Define a unique filename/key for this agent's default avatar
-        // This is used for DB lookup and CDN storage, distinct from generic images
-        const internalFilename = `agent-${agentName}-default-avatar.png`;
+        // 1. Fetch agent data first to construct the prompt
+        const collection = await $provideAgentCollectionForServer();
+        let agentSource;
+        try {
+            agentSource = await collection.getAgentSource(agentName);
+        } catch (error) {
+            // If agent not found, redirect to pravatar with the agent name as unique identifier
+            const pravaratUrl = `https://i.pravatar.cc/1024?u=${encodeURIComponent(agentName)}`;
+            return NextResponse.redirect(pravaratUrl);
+        }
+
+        const agentProfile = parseAgentSource(agentSource);
+
+        const prompt = getAgentDefaultAvatarPrompt(agentProfile);
+
+        // Use hash of the prompt as cache key - this ensures regeneration when prompt changes
+        const promptHash = computeHash(prompt);
+        const internalFilename = `agent-avatar-${promptHash}.png`;
 
         const supabase = $provideSupabaseForServer();
 
-        // Check if image already exists in database
+        // Check if image with this prompt hash already exists in database
         const { data: existingImage, error: selectError } = await supabase
             .from(await $getTableName(`Image`))
             .select('cdnUrl')
@@ -39,35 +55,23 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         }
 
         if (existingImage) {
-            // Image exists, redirect to CDN
-            return NextResponse.redirect(existingImage.cdnUrl as string_url);
+            // Image exists, fetch from CDN and return directly
+            const imageResponse = await fetch(existingImage.cdnUrl as string_url);
+            if (!imageResponse.ok) {
+                throw new Error(`Failed to fetch image from CDN: ${imageResponse.status}`);
+            }
+            const imageBuffer = await imageResponse.arrayBuffer();
+            return new NextResponse(imageBuffer, {
+                status: 200,
+                headers: {
+                    'Content-Type': 'image/png',
+                    'Cache-Control': 'public, max-age=31536000, immutable',
+                },
+            });
         }
 
         // Image doesn't exist, generate it
 
-        // 1. Fetch agent data
-        const collection = await $provideAgentCollectionForServer();
-        let agentSource;
-        try {
-             agentSource = await collection.getAgentSource(agentName);
-        } catch (error) {
-            // If agent not found, return 404 or default generic image?
-            // User said: "Use the ... instead of Gravatar for agents that do not have custom uploaded avatar"
-            // If agent doesn't exist, we probably can't generate a specific avatar.
-            return NextResponse.json({ error: 'Agent not found' }, { status: 404 });
-        }
-
-        const agentProfile = parseAgentSource(agentSource);
-
-        // Extract required fields
-        const name = agentProfile.meta?.title || agentProfile.agentName || agentName;
-        const persona = agentProfile.personaDescription || 'an AI agent';
-        const color = agentProfile.meta?.color || 'blue';
-
-        // Construct prompt
-        // "Image of {agent.name}, {agent.persona}, portrait, use color ${agent.meta.color}, detailed, high quality"
-        const prompt = `Image of ${name}, ${persona}, portrait, use color ${color}, detailed, high quality`;
-
         // 2. Generate image
         const executionTools = await $provideExecutionToolsForServer();
         const llmTools = getSingleLlmExecutionTools(executionTools.llm) as LlmExecutionTools;
@@ -79,12 +83,13 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         const imageResult = await llmTools.callImageGenerationModel({
             title: `Generate default avatar for ${agentName}`,
             content: prompt,
-            parameters: {
-                size: '1024x1792', // Vertical orientation
-            },
+            parameters: {},
             modelRequirements: {
                 modelVariant: 'IMAGE_GENERATION',
-                modelName: 'dall-e-3', 
+                modelName: 'dall-e-3',
+                size: '1024x1792', // <- Vertical orientation
+                quality: 'hd',
+                style: 'natural',
             },
         });
 
@@ -125,9 +130,19 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             throw insertError;
         }
 
-        // Redirect to the newly created image
-        return NextResponse.redirect(cdnUrl.href as string_url);
-
+        // Return the newly created image directly
+        const finalImageResponse = await fetch(cdnUrl.href);
+        if (!finalImageResponse.ok) {
+            throw new Error(`Failed to fetch newly created image from CDN: ${finalImageResponse.status}`);
+        }
+        const finalImageBuffer = await finalImageResponse.arrayBuffer();
+        return new NextResponse(finalImageBuffer, {
+            status: 200,
+            headers: {
+                'Content-Type': 'image/png',
+                'Cache-Control': 'public, max-age=31536000, immutable',
+            },
+        });
     } catch (error) {
         assertsError(error);
         console.error('Error serving default avatar:', error);

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

@@ -1,10 +1,11 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, 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 { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 import { getAgentName, getAgentProfile } from '../../_utils';
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 const size = {
     width: 256,
@@ -45,7 +46,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                     >
                         {/* Note: `next/image` is not working propperly with `next/og` */}
                         {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img src={agentProfile.meta.image!} alt="Agent Icon" />
+                        <img
+                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)}
+                            alt="Agent Icon"
+                        />
                     </div>
                 </div>
             ),

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

@@ -0,0 +1,200 @@
+'use server';
+
+import { saturate } from '@promptbook-local/color';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import Link from 'next/link';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { getAgentName, getAgentProfile } from '../_utils';
+
+/**
+ * Available image types for agents with their descriptions and sizes
+ */
+const AGENT_IMAGES = [
+    {
+        name: 'default-avatar.png',
+        title: 'Default Avatar',
+        description: 'AI-generated avatar image based on the agent profile. Vertical orientation (1024x1792).',
+        size: '1024×1792',
+    },
+    {
+        name: 'icon-256.png',
+        title: 'Icon (256×256)',
+        description: 'Small circular icon suitable for profile pictures and thumbnails.',
+        size: '256×256',
+    },
+    {
+        name: 'screenshot-fullhd.png',
+        title: 'Screenshot Full HD',
+        description: 'Landscape screenshot showing the agent with name. Suitable for desktop previews.',
+        size: '1920×1080',
+    },
+    {
+        name: 'screenshot-phone.png',
+        title: 'Screenshot Phone',
+        description: 'Portrait screenshot optimized for mobile devices.',
+        size: '1080×1920',
+    },
+] as const;
+
+export default async function AgentImagesPage({ params }: { params: Promise<{ agentName: string }> }) {
+    const agentName = await getAgentName(params);
+    const agentProfile = await getAgentProfile(agentName);
+
+    const brandColor = Color.fromSafe(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const brandColorHex = brandColor.then(saturate(-0.5)).toHex();
+
+    const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
+
+    return (
+        <div
+            style={{
+                minHeight: '100vh',
+                backgroundColor: '#f5f5f5',
+                padding: '2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: '1200px',
+                    margin: '0 auto',
+                }}
+            >
+                <header
+                    style={{
+                        marginBottom: '2rem',
+                        padding: '1.5rem',
+                        backgroundColor: brandColorHex,
+                        borderRadius: '12px',
+                        color: 'white',
+                    }}
+                >
+                    <h1 style={{ margin: 0, fontSize: '2rem' }}>
+                        Images for <strong>{fullname}</strong>
+                    </h1>
+                    <p style={{ margin: '0.5rem 0 0', opacity: 0.9 }}>
+                        All available image assets for agent{' '}
+                        <code
+                            style={{
+                                backgroundColor: 'rgba(255,255,255,0.2)',
+                                padding: '2px 6px',
+                                borderRadius: '4px',
+                            }}
+                        >
+                            {agentName}
+                        </code>
+                    </p>
+                </header>
+
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+                        gap: '1.5rem',
+                    }}
+                >
+                    {AGENT_IMAGES.map((image) => {
+                        const imageUrl = `/agents/${encodeURIComponent(agentName)}/images/${image.name}`;
+                        return (
+                            <div
+                                key={image.name}
+                                style={{
+                                    backgroundColor: 'white',
+                                    borderRadius: '12px',
+                                    overflow: 'hidden',
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        aspectRatio: '16/9',
+                                        backgroundColor: '#e0e0e0',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        overflow: 'hidden',
+                                    }}
+                                >
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img
+                                        src={imageUrl}
+                                        alt={image.title}
+                                        style={{
+                                            maxWidth: '100%',
+                                            maxHeight: '100%',
+                                            objectFit: 'contain',
+                                        }}
+                                    />
+                                </div>
+                                <div style={{ padding: '1rem' }}>
+                                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>{image.title}</h2>
+                                    <p style={{ margin: '0 0 0.5rem', color: '#666', fontSize: '0.9rem' }}>
+                                        {image.description}
+                                    </p>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            marginTop: '1rem',
+                                        }}
+                                    >
+                                        <span
+                                            style={{
+                                                backgroundColor: '#f0f0f0',
+                                                padding: '4px 8px',
+                                                borderRadius: '4px',
+                                                fontSize: '0.85rem',
+                                                color: '#555',
+                                            }}
+                                        >
+                                            {image.size}
+                                        </span>
+                                        <Link
+                                            href={imageUrl}
+                                            target="_blank"
+                                            style={{
+                                                backgroundColor: brandColorHex,
+                                                color: 'white',
+                                                padding: '8px 16px',
+                                                borderRadius: '6px',
+                                                textDecoration: 'none',
+                                                fontSize: '0.9rem',
+                                            }}
+                                        >
+                                            Open Image
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <footer
+                    style={{
+                        marginTop: '2rem',
+                        padding: '1rem',
+                        backgroundColor: 'white',
+                        borderRadius: '12px',
+                        textAlign: 'center',
+                        color: '#666',
+                    }}
+                >
+                    <p style={{ margin: 0 }}>
+                        <Link
+                            href={`/agents/${encodeURIComponent(agentName)}`}
+                            style={{ color: brandColorHex, textDecoration: 'none' }}
+                        >
+                            ← Back to {fullname}
+                        </Link>
+                    </p>
+                </footer>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🦚] Add download button functionality
+ * TODO: [🦚] Add image regeneration option for default-avatar
+ */

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

@@ -1,4 +1,4 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
@@ -7,6 +7,7 @@ import { textColor } from '../../../../../../../../src/utils/color/operators/fur
 import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
 import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 import { getAgentName, getAgentProfile } from '../../_utils';
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 const size = {
     width: 1920,
@@ -51,7 +52,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
                             }}
-                            src={agentProfile.meta.image!}
+                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)}
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -1,4 +1,4 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
@@ -7,6 +7,7 @@ import { textColor } from '../../../../../../../../src/utils/color/operators/fur
 import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
 import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
 import { getAgentName, getAgentProfile } from '../../_utils';
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 const size = {
     width: 1080,
@@ -51,7 +52,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
                             }}
-                            src={agentProfile.meta.image!}
+                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)}
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -4,7 +4,7 @@ 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 { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+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';
@@ -20,6 +20,7 @@ import { CopyField } from '../CopyField';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { SdkCodeTabs } from './SdkCodeTabs';
 import { WebsiteIntegrationTabs } from './WebsiteIntegrationTabs';
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -187,7 +188,7 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image as string}
+                            src={agentProfile.meta.image ||  agentProfile.permanentId ||generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)}
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2"
                             style={{ borderColor: primaryColor }}

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

@@ -1,7 +1,7 @@
 'use server';
 
 import { $provideServer } from '@/src/tools/$provideServer';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, 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';
@@ -13,6 +13,7 @@ import { getAgentName, getAgentProfile } from '../_utils';
 import { getAgentExternalLinks, getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
 import { generateAgentMetadata } from '../generateAgentMetadata';
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -56,7 +57,7 @@ export default async function AgentLinksPage({ params }: { params: Promise<{ age
                     {agentProfile.meta.image && (
                         // eslint-disable-next-line @next/next/no-img-element
                         <img
-                            src={agentProfile.meta.image as string}
+                            src={agentProfile.meta.image || agentProfile.permanentId || generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)}
                             alt={agentProfile.meta.fullname || agentName}
                             className="w-16 h-16 rounded-full object-cover border-2"
                             style={{ borderColor: primaryColor }}

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

@@ -1,4 +1,5 @@
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
+import { generatePlaceholderAgentProfileImageUrl, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { ImageResponse } from 'next/og';
 import { assertsError } from '../../../../../../src/errors/assertsError';
@@ -54,7 +55,14 @@ export default async function Image({ params }: { params: Promise<{ agentName: s
                                 backgroundColor: agentColor.toHex(),
                                 borderRadius: '50%',
                             }}
-                            src={agentProfile.meta.image!}
+                            src={
+                                agentProfile.meta.image ||
+                                agentProfile.permanentId ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    NEXT_PUBLIC_SITE_URL,
+                                )
+                            }
                             alt="Agent Icon"
                         />
                     </div>

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

@@ -1,19 +1,19 @@
 'use server';
 
+import { NEXT_PUBLIC_SITE_URL } from '@/config';
 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 { NotFoundError } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, NotFoundError, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../src/utils/color/Color';
+import { DeletedAgentBanner } from '../../../components/DeletedAgentBanner';
 import { getAgentName, getAgentProfile, isAgentDeleted } from './_utils';
 import { getAgentLinks } from './agentLinks';
 import { AgentProfileChat } from './AgentProfileChat';
 import { AgentProfileWrapper } from './AgentProfileWrapper';
 import { generateAgentMetadata } from './generateAgentMetadata';
 import { ServiceWorkerRegister } from './ServiceWorkerRegister';
-import { DeletedAgentBanner } from '../../../components/DeletedAgentBanner';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -96,7 +96,11 @@ export default async function AgentPage({
                     agentName={agentName}
                     fullname={fullname}
                     brandColorHex={brandColorHex}
-                    avatarSrc={agentProfile.meta.image!}
+                    avatarSrc={
+                        agentProfile.meta.image ||
+                        agentProfile.permanentId ||
+                        generatePlaceholderAgentProfileImageUrl(agentName, NEXT_PUBLIC_SITE_URL)
+                    }
                     isDeleted={isDeleted}
                 />
             </AgentProfileWrapper>