📦 NEW: why

Author: ahmadawais

apps/baseai.dev/content/docs/docs/index.mdx

@@ -19,13 +19,48 @@ BaseAI helps developers locally build AI agents, memory (RAG), and then deploy t
 1. Start by building local AI agents [Pipes](/docs/pipe/quickstart)
 2. Then create a local managed semantic [memory (RAG)](/docs/memory/quickstart) so your AI can talk to your data
 
+
 <CTAButtons
     primary={{ href: '/learn', text: '⌘ Learn BaseAI', sub:'(Pipes, Tools, Memory)' }}
     secondary={{ href: 'https://github.com/LangbaseInc/baseai', text: '★ Star BaseAI on GitHub' }}
 />
 
 ---
 
+## Why we created BaseAI
+
+<SpoilerAdvanced title="Built for Web Developers" sub="90% AI use-cases are on the web — BaseAI is API, TypeScript, and web first">
+BaseAI is web-first with TypeScript support and a familiar RESTful API. Integrate AI into your web stack as easily as adding a React component or API route—whether you're using Next.js, Vue, or vanilla Node.js. With most AI use cases on the web, BaseAI helps you ship AI features faster.
+</SpoilerAdvanced>
+
+<SpoilerAdvanced title="Local-First Development" sub="Zero-cost local development, version-control, and complete observability logs">
+Develop AI features on your machine with zero cloud costs. Git integrates out of the box, so you can branch and merge AI models like code. Complete observability logs let you debug AI like JavaScript—trace decisions, data points, and outputs. It's like Chrome DevTools for your AI.
+</SpoilerAdvanced>
+
+<SpoilerAdvanced title="Deploy to Serverless AI Cloud" sub="Seriously easy to deploy: One command serverless deployment on ⌘ Langbase">
+Deploy your AI with a single command:
+
+```shell
+npx baseai@latest deploy
+```
+
+BaseAI handles deployment to ⌘ Langbase, a serverless composable AI developers platform. No complex kubernetes, docker container, or hybrid cloud configs. Your AI scales effortlessly from zero to billions of requests. Most companies switch to Langbase for its simplicity, cost effectiveness, going from 5-7 different vendors to one.
+</SpoilerAdvanced>
+
+<SpoilerAdvanced title="Self-Healing Agentic Tool-Calling" sub="Auto tool calls and result handling with self-healing agents to 21% extra reduced hallucinations">
+BaseAI reduces AI hallucinations by 21% with self-healing agentic tool-calling and agentic memory (for deep reasoning like OpenAI's o1 but with 100+ LLMs). Your AI not only uses tools but also detects and corrects its own errors—re-querying or seeking additional data when needed. This makes your AI more reliable and trustworthy.
+</SpoilerAdvanced>
+
+<SpoilerAdvanced title="Full-Stack Memory x RAG Vector Store" sub="Vector db's aren't enough, full-spectrum parsing, chunking, attributes, retrieval testing, and similarity search">
+BaseAI offers a full-stack memory system beyond traditional vector stores. It provides full-spectrum parsing for context understanding, intelligent chunking for optimal retrieval, and attribution for transparency. With retrieval testing and advanced similarity search, your AI finds not just similar info but the right info.
+</SpoilerAdvanced>
+
+<SpoilerAdvanced title="Composable AI: Agentic ( Pipes | Tools | Memory )" sub="Like React components or Docker containers, AI pipes are composable agents of AI automation workflows">
+BaseAI introduces composable AI with agentic pipes, tools, and memory. Think of AI components like React components or Docker containers for AI logic. Snap together a sentiment analysis pipe with a support ticket response generator. Add memory to your chatbot as a module. Context switch between ten different memories and 200+ agentic tool calls in one single auto-healing workflow. These agentic components can make decisions and adapt, enabling scalable, reusable AI workflows.
+</SpoilerAdvanced>
+
+---
+
 <ProductsTable />
 
 ---

apps/baseai.dev/src/components/mdx/index.tsx

@@ -1,3 +1,4 @@
+import { Code, CodeGroup, Pre } from '@/components/Code';
 import { CodeExamples } from '@/components/CodeExamples';
 import { Heading as HeadingComp } from '@/components/Heading';
 import Image from '@/components/Img';
@@ -10,18 +11,18 @@ import { Properties } from '@/components/mdx/Properties';
 import { Property } from '@/components/mdx/Property';
 import { Row } from '@/components/mdx/Row';
 import { Spoiler } from '@/components/mdx/spoiler';
+import { SpoilerAdvanced } from '@/components/mdx/spoiler-advanced';
 import { Sub } from '@/components/mdx/sub-property';
 import { Warn } from '@/components/mdx/Warn';
 import { Wrapper } from '@/components/mdx/Wrapper';
 import { ProductsTable } from '@/components/table-products';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
+import BaseAILogo from '../baseai-logo';
 import { Button } from '../Button';
-import { InformationCircleIcon } from '@heroicons/react/24/solid';
+import { Guides } from '../Guides';
 import { CTAButtons } from '../ui/cta-buttons';
 import { IconInfoCircle } from '../ui/icons/info';
-import { Code, CodeGroup, Pre } from '@/components/Code';
-import { Guides } from '../Guides';
-import BaseAILogo from '../baseai-logo';
 
 export const MarkdownComponents = () => {
 	return {
@@ -57,7 +58,12 @@ export const MarkdownComponents = () => {
 			);
 		},
 		table: (props: any) => {
-			return <table className="overflow-x-auto whitespace-nowrap" {...props} />;
+			return (
+				<table
+					className="overflow-x-auto whitespace-nowrap"
+					{...props}
+				/>
+			);
 		},
 		h2: (props: any) => {
 			return <HeadingComp level={2} {...props} />;
@@ -98,6 +104,9 @@ export const MarkdownComponents = () => {
 		Spoiler: (props: any) => {
 			return <Spoiler {...props} />;
 		},
+		SpoilerAdvanced: (props: any) => {
+			return <SpoilerAdvanced {...props} />;
+		},
 		Sub: (props: any) => {
 			return <Sub {...props} />;
 		},

apps/baseai.dev/src/components/mdx/spoiler-advanced.tsx

@@ -0,0 +1,38 @@
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger
+} from '@/components/ui/accordion';
+
+export function SpoilerAdvanced({
+	title,
+	sub,
+	children
+}: {
+	title: string;
+	sub?: React.ReactNode;
+	children: React.ReactNode;
+}) {
+	return (
+		<Accordion
+			type="single"
+			collapsible
+			className="border-1 xborder-border xbg-background mb-0 mb-4 rounded-2xl border border-border px-4 [&>div>h3]:m-0"
+		>
+			<AccordionItem value={title} className="border-none">
+				<AccordionTrigger>
+					<div className="flex flex-col items-start justify-start text-left">
+						<h3 className="no-prose m-0 text-[0.9rem] text-[#7E79D8] sm:text-lg">
+							{title}
+						</h3>
+						<div className="m-0 text-muted-foreground/80">
+							{sub}
+						</div>
+					</div>
+				</AccordionTrigger>
+				<AccordionContent>{children}</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	);
+}

apps/baseai.dev/src/components/table-products.tsx

@@ -42,26 +42,30 @@ const TableRow: React.FC<TableRowProps> = ({ product, description, href }) => (
 
 const AIPipesDescription: React.FC = () => (
 	<>
-		Your custom-built AI agent available locally and as an API. Local first, highly scalable, dynamic, and inexpensive when deployed.
-		A new LLM computing primitive called{' '}
-		<Link href="/docs/pipe/quickstart">Pipe</Link>. Pipe is the fastest way to ship your AI
-		features in production. It&apos;s like having a composable GPT anywhere.
+		Pipe is a serverless AI agent. Your custom-built AI agent available
+		locally and online as an API. Local first, highly scalable, dynamic, and
+		inexpensive when deployed. A new LLM computing primitive called{' '}
+		<Link href="/docs/pipe/quickstart">Pipe</Link>. Pipe is the fastest way
+		to ship your AI features in production. It&apos;s like having a
+		composable GPT anywhere.
 	</>
 );
 
 const AIMemoryDescription: React.FC = () => (
 	<>
-		Memory is a managed search engine available locally and as an API for developers. Our
-		long-term memory solution has the ability to acquire, process, retain,
-		and later retrieve information. It combines vector storage, RAG
-		(Retrieval-Augmented Generation), and internet access to help you build
-		powerful AI features and products.
+		Memory is a managed search engine available locally and as an API for
+		developers. Our long-term memory solution has the ability to acquire,
+		process, retain, and later retrieve information. It combines vector
+		storage, RAG (Retrieval-Augmented Generation), and internet access to
+		help you build powerful AI features and products.
 	</>
 );
 
 const LangbaseStudioDescription: React.FC = () => (
 	<>
-		Agentic AI tools that seamlessly work together with AI pipes. Extend the model capabilities of AI Pipes and AI Memory. Connect multiple AI pipes together via tools. Build truly composable AI agents with memory (RAG).
+		Agentic AI tools that seamlessly work together with AI pipes. Extend the
+		model capabilities of AI Pipes and AI Memory. Connect multiple AI pipes
+		together via tools. Build truly composable AI agents with memory (RAG).
 	</>
 );
 
@@ -82,7 +86,7 @@ export const ProductsTable: React.FC = () => {
 						href="/docs/memory/quickstart"
 					/>
 					<TableRow
-						product={{ main: 'Tools' }}
+						product={{ main: 'AI Tools', sub: 'Self-healing' }}
 						description={<LangbaseStudioDescription />}
 						href="/docs/tools/quickstart"
 					/>