@eventcatalog/core 2.60.0 → 2.61.0

package/eventcatalog/src/enterprise/eventcatalog-chat/components/windows/ChatWindow.server.tsx

@@ -5,9 +5,9 @@ import React from 'react';
 import MentionInput from '../MentionInput';
 import InputModal from '../InputModal';
 import type { ChatPromptCategoryGroup, ChatPrompt } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
-import { useMutation } from '@tanstack/react-query';
 import WelcomePromptArea from '../WelcomePromptArea';
 import ChatMessage from '../ChatMessage'; // Import the new component
+import { useChat as useAiChat, type UIMessage } from '@ai-sdk/react';
 
 // Update Message type to include resources
 interface Resource {
@@ -37,21 +37,22 @@ const ChatWindow = ({
   resources: mentionInputResources = [],
   chatPrompts,
 }: ChatWindowProps) => {
-  const [messages, setMessages] = useState<Array<Message>>([]);
+  // const [messages] = useState<Array<Message>>([]);
   const [inputValue, setInputValue] = useState('');
-  const [showWelcome, setShowWelcome] = useState(true);
-  const [isThinking, setIsThinking] = useState(false);
-  const completionRef = useRef<any>(null);
   const outputRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [activeCategory, setActiveCategory] = useState<string>(chatPrompts?.[0]?.label || '');
 
+  const { messages, sendMessage, stop, status, setMessages: setAiMessages } = useAiChat();
+  const isStreaming = status === 'streaming' && messages.length > 0;
+  const isThinking = status === 'submitted' || (status === 'streaming' && messages.length === 0);
+
   // --- New state for input modal ---
   const [promptForInput, setPromptForInput] = useState<ChatPrompt | null>(null);
   const [isInputModalOpen, setIsInputModalOpen] = useState(false);
   // --- End new state ---
 
-  const { currentSession, storeMessagesToSession, updateSession, isStreaming, setIsStreaming, createSession } = useChat();
+  const { currentSession, storeMessagesToSession, updateSession, createSession } = useChat();
 
   // If the messages change add them to the session
   useEffect(() => {
@@ -60,134 +61,10 @@ const ChatWindow = ({
     }
   }, [messages]);
 
-  const mutation = useMutation({
-    mutationFn: async (input: { question: string; additionalContext?: string }) => {
-      const history = messages.map((message) => ({
-        createdAt: new Date(message.timestamp),
-        content: message.content,
-        role: message.isUser ? 'user' : 'assistant', // Correct role mapping
-      }));
-
-      const chatPromise = fetch('/api/server/ai/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ question: input.question, messages: history, additionalContext: input.additionalContext }),
-      });
-
-      const resourcesPromise = fetch('/api/server/ai/resources', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ question: input.question }),
-      });
-
-      const [chatResponse, resourcesResponse] = await Promise.all([chatPromise, resourcesPromise]);
-      const { resources } = await resourcesResponse.json();
-
-      if (!chatResponse.ok) {
-        const chatResponseJson = await chatResponse.json();
-        if (chatResponseJson?.error) {
-          throw new Error(`Chat API request failed with status ${chatResponse.status}: ${chatResponseJson.error}`);
-        } else {
-          throw new Error(`Chat API request failed with status ${chatResponse.status}`);
-        }
-      }
-      if (!chatResponse.body) {
-        throw new Error('No response body from chat API');
-      }
-
-      const reader = chatResponse.body.getReader();
-      const decoder = new TextDecoder();
-      let responseText = '';
-      let isFirstChunk = true;
-
-      // Start processing the stream
-      // eslint-disable-next-line no-constant-condition
-      while (true) {
-        try {
-          const { done, value } = await reader.read();
-          if (done) break;
-
-          const chunk = decoder.decode(value, { stream: true });
-          responseText += chunk;
-
-          if (isFirstChunk) {
-            setIsThinking(false);
-            setMessages((prev) => [...prev, { content: responseText, isUser: false, timestamp: Date.now() }]);
-            isFirstChunk = false;
-          } else {
-            setMessages((prev) => {
-              const newMessages = [...prev];
-              const lastMessageIndex = newMessages.length - 1;
-              if (lastMessageIndex >= 0 && !newMessages[lastMessageIndex].isUser) {
-                newMessages[lastMessageIndex] = {
-                  ...newMessages[lastMessageIndex],
-                  content: responseText,
-                };
-              }
-              return newMessages;
-            });
-          }
-          // Defer scroll until after state update seems complete
-          requestAnimationFrame(() => scrollToBottom(false)); // Use non-smooth scroll during stream
-        } catch (error) {
-          console.error('Error reading stream:', error);
-          setIsThinking(false);
-          setIsStreaming(false);
-          // Potentially set an error message state here
-          throw error; // Re-throw to allow mutation's onError to catch it
-        }
-      }
-
-      // Final state update including resources
-      let finalMessages: Message[] = [];
-      setMessages((prev) => {
-        const newMessages = [...prev];
-        const lastMessageIndex = newMessages.length - 1;
-        if (lastMessageIndex >= 0 && !newMessages[lastMessageIndex].isUser) {
-          newMessages[lastMessageIndex] = {
-            ...newMessages[lastMessageIndex],
-            content: responseText, // Ensure final content is set
-            resources: resources,
-          };
-        }
-        finalMessages = newMessages; // Capture the final state
-        return newMessages;
-      });
-
-      // Store messages to session AFTER streaming is complete and state is updated
-      if (currentSession) {
-        storeMessagesToSession(currentSession.id, finalMessages);
-      }
-
-      // Reset flags and scroll smoothly to the end
-      setIsThinking(false);
-      setIsStreaming(false);
-      completionRef.current = null; // Clear ref if needed
-      scrollToBottom(); // Smooth scroll after completion
-
-      return responseText; // Return the complete text
-    },
-    onError: (error) => {
-      console.error('Chat mutation error:', error);
-      // Handle error state in UI, e.g., show an error message to the user
-      setIsThinking(false);
-      setIsStreaming(false);
-      // Maybe add an error message to the chat
-      setMessages((prev) => [
-        ...prev,
-        { content: `Sorry, an error occurred: ${error.message}`, isUser: false, timestamp: Date.now() },
-      ]);
-    },
-  });
-
   // Load messages when session changes
   useEffect(() => {
     if (currentSession) {
-      setMessages(currentSession.messages);
-      setShowWelcome(false);
-    } else {
-      setMessages([]);
-      setShowWelcome(true);
+      setAiMessages(currentSession.messages as unknown as UIMessage[]);
     }
   }, [currentSession]);
 
@@ -198,18 +75,6 @@ const ChatWindow = ({
     }
   }, [isStreaming]);
 
-  // Helper function to stop the current completion
-  const handleStop = useCallback(async () => {
-    if (completionRef.current) {
-      try {
-        setIsStreaming(false);
-        setIsThinking(false);
-      } catch (error) {
-        console.error('Error stopping completion:', error);
-      }
-    }
-  }, []);
-
   // New function to handle submitting a question (user input or predefined)
   const submitQuestion = useCallback(
     async (question: string, additionalContext?: string) => {
@@ -218,10 +83,8 @@ const ChatWindow = ({
       const userMessage: Message = { content: question, isUser: true, timestamp: Date.now(), additionalContext };
       const isFirstMessage = messages.length === 0;
 
-      setMessages((prev) => [...prev, userMessage]);
-      setShowWelcome(false);
-      setIsThinking(true);
-      setIsStreaming(true);
+      // setMessages((prev) => [...prev, userMessage]);
+      // setShowWelcome(false);
       setInputValue('');
 
       // Scroll to bottom immediately after adding user message and setting thinking state
@@ -235,15 +98,14 @@ const ChatWindow = ({
         });
       }
 
-      mutation.mutate({ question, additionalContext });
+      sendMessage({ text: additionalContext || question });
+
+      // mutation.mutate({ question, additionalContext });
     },
     [
       currentSession,
-      mutation,
       updateSession,
-      setIsStreaming,
-      setIsThinking,
-      setMessages,
+      // setMessages,
       setInputValue,
       messages.length,
       isStreaming,
@@ -303,9 +165,10 @@ const ChatWindow = ({
   const handleSubmit = useCallback(
     (e?: React.FormEvent) => {
       e?.preventDefault();
+      // sendMessage({ text: inputValue });
       submitQuestion(inputValue); // Use standard input value, no additional context here
     },
-    [inputValue, submitQuestion]
+    [inputValue, sendMessage]
   );
 
   // Add new function to handle smooth scrolling
@@ -327,9 +190,16 @@ const ChatWindow = ({
   // Memoize the messages list with the new ChatMessage component
   const messagesList = useMemo(
     () => (
-      <div className="space-y-4 max-w-[900px] mx-auto">
+      <div className="space-y-4 max-w-[900px] mx-auto pb-6">
         {messages.map((message, index) => (
-          <ChatMessage key={message.timestamp} message={message} />
+          <ChatMessage
+            key={message.id}
+            message={{
+              isUser: message.role === 'user',
+              content: message.parts.map((part) => (part.type === 'text' ? part.text : '')).join(''),
+              timestamp: Date.now(),
+            }}
+          />
         ))}
         {isThinking && (
           <div className="flex justify-start mb-4">
@@ -431,26 +301,26 @@ const ChatWindow = ({
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden h-[calc(100vh-60px)] w-full bg-white">
-      {/* Main content area - renders messages or predefined questions */}
-      <div ref={outputRef} className="flex-1 overflow-y-auto">
-        {' '}
-        {/* Outer container handles scroll OR centering */}
-        {messages.length > 0 ? (
-          // Render messages when they exist
-          <div id="output" className="p-4 space-y-4 w-full max-w-[900px] mx-auto h-full pb-10">
-            {messagesList}
-          </div>
-        ) : (
-          // Render centered predefined questions when chat is empty
-          <WelcomePromptArea
-            chatPrompts={chatPrompts}
-            activeCategory={activeCategory}
-            setActiveCategory={setActiveCategory}
-            onPromptClick={handlePredefinedQuestionClick} // Pass the existing handler
-            isProcessing={isThinking || isStreaming} // Combine thinking/streaming state
-          />
-        )}
-      </div>
+      {messages.length === 0 && (
+        <WelcomePromptArea
+          chatPrompts={chatPrompts}
+          activeCategory={activeCategory}
+          setActiveCategory={setActiveCategory}
+          onPromptClick={handlePredefinedQuestionClick}
+          isProcessing={isStreaming || isThinking}
+        />
+      )}
+
+      {messages.length > 0 && (
+        <div ref={outputRef} className="flex-1 overflow-y-auto">
+          {messages.length > 0 && (
+            <div id="output" className="p-4 space-y-4 w-full max-w-[900px] mx-auto h-full pb-16">
+              {messagesList}
+            </div>
+          )}
+          ;
+        </div>
+      )}
 
       {/* Input Area (remains at the bottom) */}
       <div className="border-t border-gray-200 p-4 bg-white">
@@ -474,7 +344,7 @@ const ChatWindow = ({
           <div className="absolute right-3 top-1/2 -translate-y-1/2">
             {isStreaming ? (
               <button
-                onClick={handleStop}
+                onClick={() => stop()}
                 className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium"
               >
                 Stop

package/eventcatalog/src/enterprise/eventcatalog-chat/pages/api/chat.ts

@@ -0,0 +1,59 @@
+import type { APIContext } from 'astro';
+import { type UIMessage } from 'ai';
+import config from '@config';
+import { getProvider } from '@enterprise/eventcatalog-chat/providers';
+
+// Map the Keys to use in the SDK, astro exports as import.meta.env
+process.env.OPENAI_API_KEY = import.meta.env.OPENAI_API_KEY || '';
+
+const baseSystemPrompt = `You are an expert in event-driven architecture and domain-driven design, specializing in documentation for EventCatalog.
+
+You assist developers, architects, and business stakeholders who need information about their event-driven system catalog. You help with questions about:
+- Events (asynchronous messages that notify about something that has happened)
+- Commands (requests to perform an action)
+- Queries (requests for information)
+- Services (bounded contexts or applications that produce/consume events)
+- Domains (business capabilities or functional areas)
+
+Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
+
+When responding:
+2. Explain connections between resources when relevant.
+3. Use appropriate technical terminology.
+4. Use clear formatting with headings and bullet points when helpful.
+5. State clearly when information is missing rather than making assumptions.
+6. Don't provide code examples unless specifically requested.
+
+Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
+
+If you have additional context, use it to answer the question.`;
+
+interface Message {
+  content: string;
+}
+
+export const GET = async ({ request }: APIContext<{ question: string; messages: Message[]; additionalContext?: string }>) => {
+  // return 404
+  return new Response(JSON.stringify({ error: 'Not found' }), {
+    status: 404,
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const POST = async ({ request }: APIContext<{ question: string; messages: Message[]; additionalContext?: string }>) => {
+  const { messages }: { messages: UIMessage[] } = await request.json();
+
+  const provider = getProvider(config?.chat?.provider || 'openai', {
+    modelId: config?.chat?.model || 'gpt-3.5-turbo-0125',
+    temperature: config?.chat?.temperature,
+    topP: config?.chat?.topP,
+    topK: config?.chat?.topK,
+    frequencyPenalty: config?.chat?.frequencyPenalty,
+    presencePenalty: config?.chat?.presencePenalty,
+  });
+
+  const result = await provider.streamText(baseSystemPrompt, messages);
+  return result.toUIMessageStreamResponse();
+};
+
+export const prerender = false;

package/eventcatalog/src/enterprise/eventcatalog-chat/pages/chat/index.astro

@@ -61,19 +61,6 @@ const generatorConfig = `
       isEnabled ? (
         directoryExists ? (
           <>
-            <div id="browserWarning" class="flex items-center justify-center w-full p-4 sm:p-8" style="display: none;">
-              <div class="max-w-2xl text-center bg-yellow-100 text-yellow-800 px-8 py-6 rounded-lg shadow-md">
-                <h2 class="text-2xl font-bold mb-4">Unsupported Browser</h2>
-                <p>
-                  EventCatalog AI Assistant uses LLM models in the browser which is{' '}
-                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GPU" class="text-blue-500 hover:underline">
-                    only supported in Chrome and Edge browsers
-                  </a>
-                  . <br />
-                  Please switch to a supported browser for the best experience.
-                </p>
-              </div>
-            </div>
             <div id="chatContainer" class="w-full">
               <Chat
                 client:only="react"
@@ -163,30 +150,6 @@ const generatorConfig = `
   </div>
 </VerticalSideBarLayout>
 
-<script>
-  function checkBrowser() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    const isChrome = /chrome/.test(userAgent) && !/edg/.test(userAgent);
-    const isEdge = /edg/.test(userAgent);
-
-    const warningElement = document.getElementById('browserWarning') as HTMLElement;
-    const chatContainer = document.getElementById('chatContainer') as HTMLElement;
-
-    if (warningElement && chatContainer) {
-      if (!isChrome && !isEdge) {
-        warningElement.style.display = 'flex';
-        chatContainer.style.display = 'none';
-      } else {
-        warningElement.style.display = 'none';
-        chatContainer.style.display = 'block';
-      }
-    }
-  }
-
-  // Run check when DOM is loaded
-  document.addEventListener('DOMContentLoaded', checkBrowser);
-</script>
-
 <style>
   .loading-status.ready {
     background-color: rgb(240 253 244); /* light green bg */

package/eventcatalog/src/enterprise/eventcatalog-chat/providers/ai-provider.ts

@@ -1,4 +1,24 @@
-import { streamText, type CoreMessage, type LanguageModel, type Message } from 'ai';
+import { getBaseURL } from '@utils/url-builder';
+import { streamText, tool, type LanguageModel, type UIMessage, stepCountIs, convertToModelMessages } from 'ai';
+import { z } from 'astro/zod';
+
+export const getEventCatalogResources = async () => {
+  const baseUrl = process.env.EVENTCATALOG_URL || getBaseURL();
+  const url = new URL('/docs/llm/llms.txt', baseUrl);
+  const response = await fetch(url.toString());
+  const text = await response.text();
+  console.log('URL', url.toString());
+  // console.log('TEXT', text);
+  return text;
+};
+
+export const getResourceInformation = async (type: string, id: string, version: string) => {
+  const baseUrl = process.env.EVENTCATALOG_URL || getBaseURL();
+  const url = new URL(`/docs/${type}/${id}/${version}.mdx`, baseUrl);
+  const response = await fetch(url.toString());
+  const text = await response.text();
+  return text;
+};
 
 // base class for AI providers
 export interface AIProviderOptions {
@@ -12,7 +32,7 @@ export interface AIProviderOptions {
 }
 
 export class AIProvider {
-  private model?: LanguageModel;
+  private model?: string | LanguageModel;
   private modelId: string;
   private temperature: number;
   private topP: number | undefined;
@@ -40,19 +60,78 @@ export class AIProvider {
     return { isValidModel, listOfModels: this.models };
   }
 
-  async streamText(messages: Array<CoreMessage> | Array<Omit<Message, 'id'>>) {
+  async streamText(system: string, messages: Array<UIMessage> | Array<Omit<UIMessage, 'id'>>) {
     if (!this.model) {
       throw new Error('Model not set');
     }
 
     return await streamText({
       model: this.model,
-      messages: messages,
+      system: system ?? '',
+      messages: convertToModelMessages(messages),
+      stopWhen: stepCountIs(5),
       temperature: this.temperature,
       ...(this.topP && { topP: this.topP }),
       ...(this.topK && { topK: this.topK }),
       ...(this.frequencyPenalty && { frequencyPenalty: this.frequencyPenalty }),
       ...(this.presencePenalty && { presencePenalty: this.presencePenalty }),
+      tools: {
+        findResources: tool({
+          description: [
+            'Find resources that are available in EventCatalog',
+            '',
+            'Use this tool when you need to:',
+            '- Get a list of resources in EventCatalog including services, domains, events, commands, queries and flows, ubiquitous language terms and entities',
+            "- Find a resource's id and version to aid other tool requests",
+            '- Just return the list of matched resources in EventCatalog with a short description of each resource',
+            "- Don't return bullet points, just return the list of resources in a readable format",
+            '- Include the resource name, description, and a link to the resource',
+            '- When you return a link, remove the .mdx from the end of the url',
+            '- Return a list of messages the resource produces and consumes, these are marked as sends and receives',
+            '- If the resource has a domain, include it in the response',
+            '- Ask the user if they would like more information about a specific resource',
+            '- When you return a message, in brackets let me know if its a query, command or event',
+            `- The host URL is ${process.env.EVENTCATALOG_URL}`,
+          ].join('\n'),
+          inputSchema: z.object({}),
+          execute: async () => {
+            console.log('TOOL HAS BEEN CALLED');
+            const text = await getEventCatalogResources();
+            return text;
+          },
+        }),
+        findResource: tool({
+          description: [
+            'Get more information about a service, domain, event, command, query or flow in EventCatalog using its id and version',
+            'Use this tool when you need to:',
+            '- Get more details/information about a service, domain, event, command, query, flow or entity in EventCatalog',
+            '- Use the id to find more information about a service, domain, event, command, query, flow or entity',
+            '- Return everything you know about this resource',
+            '- If the resource has a specification return links to the specification file',
+            '- When you find owners the url would look something like /docs/users/{id} if its a user or /docs/teams/{id} if its a team',
+            '- When you return the producers and consumers (the messages the service produces and consumes) make sure they include the url to the documentation, the url would look something like /docs/{type}/{id}, e.g /docs/events/MyEvent/1.0.0 or /docs/commands/MyCommand/1.0.0',
+            '- When you return owners make sure they include the url to the documentation',
+            '- If the resource has a domain, include it in the response',
+            '- Ask the user if they would like more information about a specific resource',
+            '- When you return a message, in brackets let me know if its a query, command or event',
+            `- If you are returning a flow (state machine) try and return the result in mermaid to the user, visualizing how the business logic flows`,
+            `- If you return any URLS make sure to include the host URL ${process.env.EVENTCATALOG_URL}`,
+            '- You will ALWAYS return the visualizer URL in an IFRAME in the given response - example <iframe src="http://localhost:3000/visualiser/{type}/{id}/{version}?embed=true"></iframe>',
+          ].join('\n'),
+          inputSchema: z.object({
+            id: z.string().describe('The id of the resource to find'),
+            version: z.string().describe('The version of the resource to find'),
+            type: z
+              .enum(['services', 'domains', 'events', 'commands', 'queries', 'flows', 'entities'])
+              .describe('The type of resource to find'),
+          }),
+          execute: async ({ id, version, type }) => {
+            console.log('TOOL HAS BEEN CALLED TO GET DETAILED INFORMATION ABOUT A RESOURCE');
+            const text = await getResourceInformation(type, id, version);
+            return text;
+          },
+        }),
+      },
     });
   }
 }

package/eventcatalog/src/middleware-auth.ts

@@ -3,6 +3,9 @@ import type { MiddlewareHandler } from 'astro';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled } from '@utils/feature';
 import jwt from 'jsonwebtoken';
+import { isLLMSTxtEnabled } from '@utils/feature';
+
+const isLLMSTextEnabled = isLLMSTxtEnabled();
 
 // Define the types in this file
 export interface NormalizedUser {
@@ -89,13 +92,21 @@ export const authMiddleware: MiddlewareHandler = async (context, next) => {
 
   // Skip system/browser requests
   const systemRoutes = ['/.well-known/', '/favicon.ico', '/robots.txt', '/sitemap.xml', '/_astro/', '/__astro'];
-  const publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
+  let publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
+
+  const llmsRoutes = ['/docs/llm/llms.txt', '/docs/llm/llms-services.txt', '/docs/llm/llms-full.txt'];
+
+  if (isLLMSTextEnabled) {
+    publicRoutes = [...publicRoutes, ...llmsRoutes];
+  }
 
   if (
     pathname.startsWith('/_') ||
     systemRoutes.some((route) => pathname.startsWith(route)) ||
     pathname.startsWith('/.well-known/') ||
-    publicRoutes.some((route) => pathname.startsWith(route))
+    publicRoutes.some((route) => pathname.startsWith(route)) ||
+    (pathname.endsWith('.mdx') && isLLMSTextEnabled) ||
+    (pathname.endsWith('.md') && isLLMSTextEnabled)
   ) {
     return next();
   }

package/eventcatalog/src/pages/chat/feature.astro

@@ -1,6 +1,6 @@
 ---
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { isEventCatalogChatEnabled as hasEventCatlaogChatLicense } from '@utils/feature';
+import { isEventCatalogChatEnabled as hasEventCatlaogChatLicense, isSSR } from '@utils/feature';
 import { BotMessageSquare } from 'lucide-react';
 const hasChatLicense = hasEventCatlaogChatLicense();
 
@@ -27,20 +27,19 @@ if (hasChatLicense) {
             <div>
               <div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 font-medium text-sm mb-6">
                 <BotMessageSquare className="w-4 h-4 mr-2" />
-                New: Ask your catalog anything
+                EventCatalog: Agent
               </div>
               <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Ask. Understand. Ship faster.</h1>
               <p class="text-xl text-gray-600 mb-8">
-                Get answers about your events, services, and domains — instantly. Runs entirely in your browser — your data never
-                leaves your machine.
+                Get answers about your architecture — instantly. Connect to your own AI models and data.
               </p>
-              <div class="flex flex-col sm:flex-row gap-4 mb-8">
+              <div class="flex flex-col sm:flex-row gap-4 mb-2">
                 <a
-                  href="https://demo.eventcatalog.dev/chat"
+                  href="https://www.eventcatalog.dev/docs/development/guides/eventcatlaog-chat/what-is-eventcatalog-chat"
                   target="_blank"
                   class="inline-flex items-center juNot ready for AI chat? You castify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-150"
                 >
-                  Try the demo
+                  Get Started
                   <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                     <path
                       fill-rule="evenodd"
@@ -56,12 +55,19 @@ if (hasChatLicense) {
                   Try for free
                 </a>
               </div>
-              <p class="text-sm text-gray-500">
-                Available with EventCatalog Starter or Scale plans
-                <a href="https://www.eventcatalog.dev/pricing" class="text-purple-600 font-medium block"
-                  >Try free for 14 days, no credit card required</a
-                >
-              </p>
+
+              <p class="text-sm text-gray-500 italic mb-6">Available with EventCatalog Starter or Scale plans</p>
+
+              {
+                !isSSR() && (
+                  <p class="text-sm text-gray-500 my-4 bg-yellow-50 p-4 rounded-lg">
+                    <span class="font-bold">This feature is only available on server side.</span> You can switch to server side by
+                    setting the <code class="font-mono bg-gray-100 p-0.5 rounded">output</code> property to{' '}
+                    <code class="font-mono bg-gray-100 p-0.5 rounded">server</code> in your{' '}
+                    <code class="font-mono bg-gray-100 p-0.5 rounded">eventcatalog.config.js</code> file.
+                  </p>
+                )
+              }
             </div>
 
             <div class="relative">
@@ -117,9 +123,9 @@ if (hasChatLicense) {
                   ></path>
                 </svg>
               </div>
-              <h3 class="text-lg font-semibold text-gray-900 mb-2">Instant Search</h3>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2">Direct Answers</h3>
               <p class="text-gray-600">
-                Search and understand complex service relationships in seconds with natural language queries.
+                Ask questions about your catalog and get direct answers, using your own models and API keys.
               </p>
             </div>
 
@@ -144,7 +150,9 @@ if (hasChatLicense) {
                 </svg>
               </div>
               <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
-              <p class="text-gray-600">All processing happens locally in your browser. Your data never leaves your machine.</p>
+              <p class="text-gray-600">
+                Runs on your own infrastructure, and your own models. Provide your own API keys to get started.
+              </p>
             </div>
           </div>