👌 IMPROVE: Ascii software architect agent

examples/ascii-software-architect/.env.example

@@ -1 +1,2 @@
-NEXT_LB_PIPE_API_KEY=""
+LB_ASCII_SW_ARCH_API_KEY=""
+

examples/ascii-software-architect/README.md

@@ -1,22 +1,25 @@
-![ASCII Software Architect ChatBot by ⌘ Langbase][cover]
+![ASCII Software Architect Chatbot by ⌘ Langbase][cover]
 
 ![License: MIT][mit] [![Fork to ⌘ Langbase][fork]][pipe]
 
-## Build an ASCII Software Architect Chatbot with Pipes — ⌘ Langbase
+## Build an ASCII Software Architect Chatbot with a Pipe — ⌘ Langbase
+
+This chatbot is built by using an agentic pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software).
 
-This chatbot is built by using an AI Pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software).
 
 Check out the live demo [here][demo].
 
 ## Features
 
-- 💬 [ASCII Software Architect Chatbot][demo] — Built with an [AI Pipe on ⌘ Langbase][pipe]
+
+- 💬 [ASCII Software Architect Chatbot][demo] — Built with an [Pipe on ⌘ Langbase][pipe]
 - ⚡️ Streaming — Real-time chat experience with streamed responses
 - 🗣️ Q/A — Ask questions and get pre-defined answers with your preferred AI model and tone
 - 🔋 Responsive and open source — Works on all devices and platforms
 
 ## Learn more
 
+
 1. Check the [ASCII Software Architect Chatbot Pipe on ⌘ Langbase][pipe]
 2. Read the [source code on GitHub][gh] for this example
 3. Go through Documentaion: [Pipe Quick Start][qs]
@@ -28,6 +31,7 @@ Let's get started with the project:
 
 To get started with Langbase, you'll need to [create a free personal account on Langbase.com][signup] and verify your email address. _Done? Cool, cool!_
 
+
 1. Fork the [ASCII Software Architect Chatbot][pipe] Pipe on ⌘ Langbase.
 2. Go to the API tab to copy the Pipe's API key (to be used on server-side only).
 3. Download the example project folder from [here][download] or clone the reppository.
@@ -36,7 +40,7 @@ To get started with Langbase, you'll need to [create a free personal account on
 6. Add the following environment variables (.env.local):
 ```
     # Replace `PIPE_API_KEY` with the copied API key.
-    NEXT_LB_PIPE_API_KEY="PIPE_API_KEY"
+    LB_ASCII_SW_ARCH_API_KEY="PIPE_API_KEY"
 ```
 7. Issue the following in your CLI:
 ```sh
@@ -66,7 +70,7 @@ This project is created by [Langbase][lb] team members, with contributions from:
 [lb]: https://langbase.com
 [pipe]: https://langbase.com/examples/ascii-software-architect
 [gh]: https://github.com/LangbaseInc/langbase-examples/tree/main/examples/ascii-software-architect
-[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/ascii-software-architect/ascii-software-architect.png
+[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/ascii-software-architect/ascii-software-architect-chatbot.png
 [download]:https://download-directory.github.io/?url=https://github.com/LangbaseInc/langbase-examples/tree/main/examples/ascii-software-architect
 [signup]: https://langbase.fyi/io
 [qs]:https://langbase.com/docs/pipe/quickstart

examples/ascii-software-architect/app/api/chat/route.ts

@@ -10,17 +10,17 @@ export const runtime = 'edge'
  */
 export async function POST(req: Request) {
   try {
-    if (!process.env.NEXT_LB_PIPE_API_KEY) {
+    if (!process.env.LB_ASCII_SW_ARCH_API_KEY) {
       throw new Error(
-        'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
+        'Please set LB_ASCII_SW_ARCH_API_KEY in your environment variables.'
       )
     }
 
     const endpointUrl = 'https://api.langbase.com/beta/chat'
 
     const headers = {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${process.env.NEXT_LB_PIPE_API_KEY}`
+      Authorization: `Bearer ${process.env.LB_ASCII_SW_ARCH_API_KEY}`
     }
 
     // Get chat prompt messages and threadId from the client.

examples/ascii-software-architect/components/chatbot-page.tsx

@@ -7,6 +7,8 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 import { ChatInput } from './chat-input'
 import { Opening } from './opening'
+import { Suggestions } from './suggestions'
+
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   id?: string // Optional: Thread ID if you want to persist the chat in a DB
@@ -31,6 +33,10 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
         setThreadId(lbThreadId)
       }
     })
+    const sendSuggestedPrompt = (prompt: string) => {
+      setInput(prompt)
+    }
+
   return (
     <div className="min-h-screen">
       <div className={cn('pb-36 pt-4 md:pt-10', className)}>
@@ -39,7 +45,10 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
             <ChatList messages={messages} />
           </>
         ) : (
-          <Opening />
+          <>
+            <Opening />
+            <Suggestions sendSuggestedPrompt={sendSuggestedPrompt} />
+          </>
         )}
       </div>
       <ChatInput

examples/ascii-software-architect/components/opening.tsx

@@ -7,7 +7,7 @@ export function Opening() {
         <div className="absolute inset-y-2 left-2 w-0.5 rounded-full bg-[--callout-border]"></div>
         <div className="mb-2 mt-0 flex items-center justify-start gap-1">
           <span className="text-xs font-medium text-[--callout-title]">
-            Chatbot Example
+           Chatbot Example
           </span>
         </div>
 
@@ -33,9 +33,7 @@ export function Opening() {
             <div className="flex flex-col gap-4 mt-2 text-sm">
               <Dlink href="https://langbase.com/examples/ascii-software-architect">
                 <span>1.</span>
-                <span>
-                  Fork this ASCII Software Architect Chatbot Pipe on ⌘ Langbase
-                </span>
+                <span>Fork this ASCII Software Architect Chatbot Pipe on ⌘ Langbase</span>
               </Dlink>
               <Dlink href="https://github.com/LangbaseInc/langbase-examples/tree/main/examples/ascii-software-architect">
                 <span>2.</span>

examples/ascii-software-architect/components/prompt-form.tsx

@@ -4,6 +4,8 @@ import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
 import { UseChatHelpers } from 'ai/react'
 import * as React from 'react'
 import Textarea from 'react-textarea-autosize'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hovercard'
+
 
 export interface PromptProps
   extends Pick<UseChatHelpers, 'input' | 'setInput'> {
@@ -49,7 +51,19 @@ export function PromptForm({
                 className="text-muted-foreground/50 h-5 w-5"
                 aria-hidden="true"
               />
-              <h3>Chat</h3>
+              <h3>Ask</h3>
+              <HoverCard>
+                <HoverCardTrigger asChild>
+                  <Button variant="link" size="lg" className="text-inherit">@conversation tips</Button>
+                </HoverCardTrigger>
+                <HoverCardContent>
+                  <ul className="list-disc pl-4">
+                    <li>Say Hello to start a conversation, or simply enter code in C++, Python, JavaScript, TypeScript, or Java along with a prompt to generate a UML class diagram.</li>
+                    <li>ASCII Software Architect is an AI agent that specializes in creating ASCII-based UML class diagrams from the provided code.</li>
+                    <li>Please note, ASCII Software Architect works best with advanced LLMs such as Claude 3.5, GPT-4 Turbo, or GPT-4o.</li>
+                  </ul>
+                </HoverCardContent>
+              </HoverCard>
             </div>
 
             <div className="flex items-center justify-center gap-2 md:justify-start">

examples/ascii-software-architect/components/suggestions.tsx

@@ -0,0 +1,116 @@
+import cn from 'mxcn'
+import { IconSparkles } from './ui/icons'
+
+// Prompt suggestions – Change these to match your use-case/company
+const suggestions = [
+  {
+    title: `Say hello to begin conversation`,
+    prompt: `Hello`
+  },
+  {
+    title: `Help me draw the UML Class diagram for a strategy pattern in C++ code`,
+    prompt: `Help me draw the UML for the following C++ code:
+
+
+    enum class Format { Markdown, Html };
+
+    struct ListStrategy {
+        virtual ~ListStrategy() = default;
+        virtual void add_list_item(ostringstream& oss, string& item) {};
+        virtual void start(ostringstream& oss) {};
+        virtual void end(ostringstream& oss) {};
+    };
+
+    struct MarkdownListStrategy: ListStrategy {
+        void add_list_item(ostringstream& oss, string& item) override { oss << " - " << item << endl; }
+    };
+
+    struct HtmlListStrategy: ListStrategy {
+        void start(ostringstream& oss) override { oss << "<ul>" << endl; }
+        void end(ostringstream& oss) override { oss << "</ul>" << endl; }
+        void add_list_item(ostringstream& oss, string& item) override { oss << "\t<li>" << item << "</li>" << endl; }
+    };
+
+    struct TextProcessor {
+        void clear() {
+            m_oss.str("");
+            m_oss.clear();
+        }
+
+        void append_list(vector<string>& items) {
+            m_list_strategy->start(m_oss);
+            for (auto& item: items)
+                m_list_strategy->add_list_item(m_oss, item);
+            m_list_strategy->end(m_oss);
+        }
+
+        void set_output_format(Format& format) {
+            switch (format) {
+                case Format::Markdown: m_list_strategy = make_unique<MarkdownListStrategy>(); break;
+                case Format::Html: m_list_strategy = make_unique<HtmlListStrategy>(); break;
+            }
+        }
+
+        string str() { return m_oss.str(); }
+    private:
+        ostringstream               m_oss;
+        unique_ptr<ListStrategy>    m_list_strategy;
+    };
+
+    int main() {
+        // markdown
+        TextProcessor tp;
+        tp.set_output_format(Format::Markdown);
+        tp.append_list({ "foo", "bar", "baz" });
+        cout << tp.str() << endl;
+
+        // html
+        tp.clear();
+        tp.set_output_format(Format::Html);
+        tp.append_list({ "foo", "bar", "baz" });
+        cout << tp.str() << endl;
+
+        return EXIT_SUCCESS;
+    }
+`
+
+  },
+]
+
+export const Suggestions = ({
+  sendSuggestedPrompt
+}: {
+  sendSuggestedPrompt: (prompt: string) => void
+}) => {
+  const handleClick = (prompt: string) => {
+    sendSuggestedPrompt(prompt)
+  }
+
+  return (
+    <div className="mx-auto mt-12 max-w-4xl">
+      <label className="font-semibold">Suggestions</label>
+      <div className="grid grid-cols-1 gap-4 pt-6 md:grid-cols-2">
+        {suggestions.map((suggestion, index) => {
+          return (
+            <div
+              key={index}
+              className={cn(
+                'border-muted-foreground/20 flex cursor-pointer items-center gap-4 rounded-md border p-4',
+                'hover:bg-background transition-all'
+              )}
+              onClick={() => handleClick(suggestion.prompt)}
+            >
+              <IconSparkles
+                className="text-muted-foreground size-4"
+                aria-hidden="true"
+              />
+              <p className="text-foreground/70 line-clamp-2 font-light leading-6">
+                {suggestion.title}
+              </p>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

examples/ascii-software-architect/components/ui/hovercard.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import cn from 'mxcn'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

examples/ascii-software-architect/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",