diff --git a/examples/ascii-software-architect/.env.example b/examples/ascii-software-architect/.env.example index 85d27328..575cca47 100644 --- a/examples/ascii-software-architect/.env.example +++ b/examples/ascii-software-architect/.env.example @@ -1 +1,2 @@ -NEXT_LB_PIPE_API_KEY="" \ No newline at end of file +LB_ASCII_SW_ARCH_API_KEY="" + diff --git a/examples/ascii-software-architect/README.md b/examples/ascii-software-architect/README.md index 436cbdcd..1135dfcc 100755 --- a/examples/ascii-software-architect/README.md +++ b/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 diff --git a/examples/ascii-software-architect/app/api/chat/route.ts b/examples/ascii-software-architect/app/api/chat/route.ts index 95af6ed7..ec9f4345 100755 --- a/examples/ascii-software-architect/app/api/chat/route.ts +++ b/examples/ascii-software-architect/app/api/chat/route.ts @@ -10,9 +10,9 @@ 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.' ) } @@ -20,7 +20,7 @@ export async function POST(req: Request) { 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. diff --git a/examples/ascii-software-architect/components/chatbot-page.tsx b/examples/ascii-software-architect/components/chatbot-page.tsx index 80203378..3b7faf38 100755 --- a/examples/ascii-software-architect/components/chatbot-page.tsx +++ b/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 (
@@ -39,7 +45,10 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) { ) : ( - + <> + + + )}
- Chatbot Example + Chatbot Example
@@ -33,9 +33,7 @@ export function Opening() {
1. - - Fork this ASCII Software Architect Chatbot Pipe on ⌘ Langbase - + Fork this ASCII Software Architect Chatbot Pipe on ⌘ Langbase 2. diff --git a/examples/ascii-software-architect/components/prompt-form.tsx b/examples/ascii-software-architect/components/prompt-form.tsx index 49b6cb77..05c7e7b7 100755 --- a/examples/ascii-software-architect/components/prompt-form.tsx +++ b/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 { @@ -49,7 +51,19 @@ export function PromptForm({ className="text-muted-foreground/50 h-5 w-5" aria-hidden="true" /> -

Chat

+

Ask

+ + + + + +
    +
  • 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.
    • +
  • ASCII Software Architect is an AI agent that specializes in creating ASCII-based UML class diagrams from the provided code.
    • +
  • Please note, ASCII Software Architect works best with advanced LLMs such as Claude 3.5, GPT-4 Turbo, or GPT-4o.
    • +
+ +
diff --git a/examples/ascii-software-architect/components/suggestions.tsx b/examples/ascii-software-architect/components/suggestions.tsx new file mode 100644 index 00000000..1573b132 --- /dev/null +++ b/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 << "" << endl; } + void add_list_item(ostringstream& oss, string& item) override { oss << "\t
  • " << item << "
    • " << endl; } + }; + + struct TextProcessor { + void clear() { + m_oss.str(""); + m_oss.clear(); + } + + void append_list(vector& 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(); break; + case Format::Html: m_list_strategy = make_unique(); break; + } + } + + string str() { return m_oss.str(); } + private: + ostringstream m_oss; + unique_ptr 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 ( +
    + +
    + {suggestions.map((suggestion, index) => { + return ( +
    handleClick(suggestion.prompt)} + > +
    + ) + })} +
    +
    + ) +} \ No newline at end of file diff --git a/examples/ascii-software-architect/components/ui/hovercard.tsx b/examples/ascii-software-architect/components/ui/hovercard.tsx new file mode 100644 index 00000000..cc819857 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + +)) +HoverCardContent.displayName = HoverCardPrimitive.Content.displayName + +export { HoverCard, HoverCardTrigger, HoverCardContent } \ No newline at end of file diff --git a/examples/ascii-software-architect/package.json b/examples/ascii-software-architect/package.json index b89ef82f..68b045a3 100755 --- a/examples/ascii-software-architect/package.json +++ b/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",