diff --git a/examples/agents/ask-my-text-documents-agent/.env.baseai.example b/examples/agents/ask-my-text-documents-agent/.env.baseai.example
new file mode 100644
index 00000000..8c643651
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/.env.baseai.example
@@ -0,0 +1,21 @@
+# !! SERVER SIDE ONLY !!
+# Keep all your API keys secret — use only on the server side.
+
+# TODO: ADD: Both in your production and local env files.
+# Langbase API key for your User or Org account.
+# How to get this API key https://langbase.com/docs/api-reference/api-keys
+LANGBASE_API_KEY=
+
+# TODO: ADD: LOCAL ONLY. Add only to local env files.
+# Following keys are needed for local pipe runs. For providers you are using.
+# For Langbase, please add the key to your LLM keysets.
+# Read more: Langbase LLM Keysets https://langbase.com/docs/features/keysets
+OPENAI_API_KEY=
+ANTHROPIC_API_KEY=
+COHERE_API_KEY=
+FIREWORKS_API_KEY=
+GOOGLE_API_KEY=
+GROQ_API_KEY=
+MISTRAL_API_KEY=
+PERPLEXITY_API_KEY=
+TOGETHER_API_KEY=
diff --git a/examples/agents/ask-my-text-documents-agent/.gitignore b/examples/agents/ask-my-text-documents-agent/.gitignore
new file mode 100644
index 00000000..13a2e600
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/.gitignore
@@ -0,0 +1,58 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+.copy.local.env
+.copy.remote.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Supabase
+seed.sql
+xseed.sql
+xxseed.sql
+-seed.sql
+/supabase/seed.sql
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# No lock files.
+package-lock.json
+yarn.lock
+dist
+# baseai
+**/.baseai/
+# env file
+.env
diff --git a/examples/agents/ask-my-text-documents-agent/README.md b/examples/agents/ask-my-text-documents-agent/README.md
new file mode 100644
index 00000000..2a470ecd
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/README.md
@@ -0,0 +1,53 @@
+![Ask My Text Documents Agent by ⌘ Langbase][cover]
+
+![License: MIT][mit] [![Fork on ⌘ Langbase][fork]][pipe]
+
+## Build an Ask My Text Documents Agent with BaseAI framework — ⌘ Langbase
+
+This AI Agent is built using the BaseAI framework. It leverages an agentic pipe that integrates over 30+ LLMs (including OpenAI, Gemini, Mistral, Llama, Gemma, etc.) and can handle any data, with context sizes of up to 10M+ tokens, supported by memory. The framework is compatible with any front-end framework (such as React, Remix, Astro, Next.js), giving you, as a developer, the freedom to tailor your AI application exactly as you envision. 
+
+## Features
+
+- Ask My Text Documents Agent — Built with [BaseAI framework and agentic Pipe ⌘ ][qs].
+- Composable Agents — build and compose agents with BaseAI.
+- Add and Sync deployed pipe on Langbase locally npx baseai@latest add ([see the Code button][pipe]).
+
+## Learn more
+
+1. Check the [Learning path to build an agentic AI pipe with ⌘ BaseAI][learn]
+2. Read the [source code on GitHub][gh] for this agent example
+3. Go through Documentaion: [Pipe Quick Start][qs]
+4. Learn more about [Memory features in ⌘ BaseAI][memory]
+5. Learn more about [Tool calls support in ⌘ BaseAI][toolcalls]
+
+
+> NOTE:
+> This is a BaseAI project, you can deploy BaseAI pipes, memory and tool calls on Langbase.
+
+---
+
+## Authors
+
+This project is created by [Langbase][lb] team members, with contributions from:
+
+- Muhammad-Ali Danish - Software Engineer, [Langbase][lb] <br>
+**_Built by ⌘ [Langbase.com][lb] — Ship hyper-personalized AI assistants with memory!_**
+
+
+[lb]: https://langbase.com
+[pipe]: https://langbase.com/examples/ask-my-text-documents-agent
+[gh]: https://github.com/LangbaseInc/baseai/tree/main/examples/agents/ask-my-text-documents-agent
+[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/baseai/baseai-cover.png
+[download]:https://download-directory.github.io/?url=https://github.com/LangbaseInc/baseai/tree/main/examples/agents/ask-my-text-documents-agent
+[learn]:https://baseai.dev/learn
+[memory]:https://baseai.dev/docs/memory/quickstart
+[toolcalls]:https://baseai.dev/docs/tools/quickstart
+[deploy]:https://baseai.dev/docs/deployment/authentication
+[signup]: https://langbase.fyi/io
+[qs]:https://baseai.dev/docs/pipe/quickstart
+[docs]:https://baseai.dev/docs
+[xaa]:https://x.com/MrAhmadAwais
+[xab]:https://x.com/AhmadBilalDev
+[local]:http://localhost:9000
+[mit]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=%23000000
+[fork]: https://img.shields.io/badge/FORK%20ON-%E2%8C%98%20Langbase-000000.svg?style=for-the-badge&logo=%E2%8C%98%20Langbase&logoColor=000000
\ No newline at end of file
diff --git a/examples/agents/ask-my-text-documents-agent/app/api/chat/route.ts b/examples/agents/ask-my-text-documents-agent/app/api/chat/route.ts
new file mode 100644
index 00000000..b527a2a8
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/app/api/chat/route.ts
@@ -0,0 +1,23 @@
+'use server'
+
+import {NextRequest} from 'next/server';
+import { Pipe } from '@baseai/core';
+import { RunOptionsStream } from '@baseai/core';
+import pipeAskMyTextDocumentsAgent from '@/baseai/pipes/ask-my-text-documents-agent';
+
+export async function POST(req: NextRequest) {
+	const runOptions = await req.json() as RunOptionsStream;;
+
+	// 1. Initiate the Pipe.
+	const pipe = new Pipe(pipeAskMyTextDocumentsAgent());
+
+	// 2. Run the Pipe.
+	const {stream, threadId} = await pipe.run(runOptions);
+	// 3. Return the ReadableStream directly.
+	return new Response(stream, {
+		status: 200,
+		headers: {
+			'lb-thread-id': threadId ?? '',
+		},
+	});
+}
\ No newline at end of file
diff --git a/examples/agents/ask-my-text-documents-agent/app/favicon.ico b/examples/agents/ask-my-text-documents-agent/app/favicon.ico
new file mode 100644
index 00000000..7c6d4a8a
Binary files /dev/null and b/examples/agents/ask-my-text-documents-agent/app/favicon.ico differ
diff --git a/examples/agents/ask-my-text-documents-agent/app/globals.css b/examples/agents/ask-my-text-documents-agent/app/globals.css
new file mode 100755
index 00000000..36084b74
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/app/globals.css
@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Zinc */
+/* --background: 240 10% 3.9%; */
+/* --muted: 240 3.7% 15.9%; */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    /* --destructive: 0 84.2% 60.2%; */
+    --destructive: 2.74 92.59% 62.94%;
+    --destructive-foreground: 0 0% 98%;
+    --warning: 46.38 70.61% 48.04%;
+    --warning-foreground: 120 12.5% 3.14%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 6px;
+    --danger: 2.74 92.59% 62.94%;
+  }
+
+  .dark {
+    /* --background: 120 12.5% 3.14%; */
+    --background: 240, 3%, 9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    /* --muted: 165 10% 7.84%; */
+    --muted: 240 3.45% 11.37%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    /* --destructive: 0 62.8% 30.6%; */
+    --destructive: 356.18 70.61% 48.04%;
+    --destructive-foreground: 0 0% 98%;
+    --warning: 46.38 70.61% 48.04%;
+    --warning-foreground: 120 12.5% 3.14%;
+    /* --border: 240 3.7% 15.9%; */
+    --border: 240 2% 14%;
+    --border-muted: 240 2% 14%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --danger: 356.18 70.61% 48.04%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+::selection {
+  color: hsl(var(--background));
+  background: hsl(var(--foreground));
+}
+
+.google {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E");
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/examples/agents/ask-my-text-documents-agent/app/layout.tsx b/examples/agents/ask-my-text-documents-agent/app/layout.tsx
new file mode 100755
index 00000000..14bdfbf6
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/app/layout.tsx
@@ -0,0 +1,36 @@
+import { Header } from '@/components/header'
+import cn from 'mxcn'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { Toaster } from 'sonner'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Ask My Docs RAG',
+  description: 'Ask any query about my docs. Built using Langbase.',
+  keywords: ['AI', 'Chatbot', 'RAG', 'Docs', 'Langbase']
+}
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={cn(inter.className, 'bg-background light')}>
+        <div className="flex min-h-screen flex-col px-3 pr-0 pt-6">
+          <div className="rounded-l-[calc(var(--radius)+2px)] border border-r-0 pb-1 pl-1">
+            <Toaster />
+            <Header />
+            <main className="bg-muted rounded-l-[calc(var(--radius)+2px)]">
+              {children}
+            </main>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/app/not-found.tsx b/examples/agents/ask-my-text-documents-agent/app/not-found.tsx
new file mode 100644
index 00000000..3409889a
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/app/not-found.tsx
@@ -0,0 +1,58 @@
+export const runtime = "edge";
+
+export default function NotFound() {
+  return (
+    <>
+      <title>404: This page could not be found.</title>
+      <div style={styles.error}>
+        <div>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}`,
+            }}
+          />
+          <h1 className="next-error-h1" style={styles.h1}>
+            404
+          </h1>
+          <div style={styles.desc}>
+            <h2 style={styles.h2}>This page could not be found.</h2>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const styles = {
+  error: {
+    fontFamily:
+      'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+    height: "100vh",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  desc: {
+    display: "inline-block",
+  },
+
+  h1: {
+    display: "inline-block",
+    margin: "0 20px 0 0",
+    padding: "0 23px 0 0",
+    fontSize: 24,
+    fontWeight: 500,
+    verticalAlign: "top",
+    lineHeight: "49px",
+  },
+
+  h2: {
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "49px",
+    margin: 0,
+  },
+} as const;
diff --git a/examples/agents/ask-my-text-documents-agent/app/page.tsx b/examples/agents/ask-my-text-documents-agent/app/page.tsx
new file mode 100755
index 00000000..f278d230
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/app/page.tsx
@@ -0,0 +1,7 @@
+import { Chatbot } from '@/components/chatbot-page'
+
+export const runtime = 'edge'
+
+export default function ChatPage() {
+  return <Chatbot />
+}
diff --git a/examples/agents/ask-my-text-documents-agent/baseai/baseai.config.ts b/examples/agents/ask-my-text-documents-agent/baseai/baseai.config.ts
new file mode 100644
index 00000000..f0ee748f
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/baseai/baseai.config.ts
@@ -0,0 +1,18 @@
+import type { BaseAIConfig } from 'baseai';
+
+export const config: BaseAIConfig = {
+	log: {
+		isEnabled: true,
+		logSensitiveData: false,
+		pipe: true,
+		'pipe.completion': true,
+		'pipe.request': true,
+		'pipe.response': true,
+		tool: true,
+		memory: true
+	},
+	memory: {
+		useLocalEmbeddings: false
+	},
+	envFilePath: '.env'
+};
diff --git a/examples/agents/ask-my-text-documents-agent/baseai/memory/ask-my-text-documents/documents/Artificial_intelligence_in_the_construction_industry.pdf b/examples/agents/ask-my-text-documents-agent/baseai/memory/ask-my-text-documents/documents/Artificial_intelligence_in_the_construction_industry.pdf
new file mode 100644
index 00000000..99800a1b
Binary files /dev/null and b/examples/agents/ask-my-text-documents-agent/baseai/memory/ask-my-text-documents/documents/Artificial_intelligence_in_the_construction_industry.pdf differ
diff --git a/examples/agents/ask-my-text-documents-agent/baseai/memory/ask-my-text-documents/index.ts b/examples/agents/ask-my-text-documents-agent/baseai/memory/ask-my-text-documents/index.ts
new file mode 100644
index 00000000..e72fc150
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/baseai/memory/ask-my-text-documents/index.ts
@@ -0,0 +1,14 @@
+import { MemoryI } from '@baseai/core';
+import path from 'path';
+
+const memoryAskMyTextDocuments = (): MemoryI => ({
+  name: 'ask-my-text-documents',
+  description: 'text documents as pdf',
+  config: {
+		useGitRepo: false,
+		dirToTrack: path.posix.join('.'),
+		extToTrack: ["*"]
+  }
+});
+
+export default memoryAskMyTextDocuments;
diff --git a/examples/agents/ask-my-text-documents-agent/baseai/pipes/ask-my-text-documents-agent.ts b/examples/agents/ask-my-text-documents-agent/baseai/pipes/ask-my-text-documents-agent.ts
new file mode 100644
index 00000000..78ef4415
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/baseai/pipes/ask-my-text-documents-agent.ts
@@ -0,0 +1,43 @@
+import { PipeI } from '@baseai/core';
+import memoryAskMyTextDocuments from '../memory/ask-my-text-documents';
+
+const pipeAskMyTextDocumentsAgent = (): PipeI => ({
+	// Replace with your API key https://langbase.com/docs/api-reference/api-keys
+	apiKey: process.env.LANGBASE_API_KEY!,
+	name: `ask-my-text-documents-agent`,
+	description: ``,
+	status: `private`,
+	model: `openai:gpt-4o-mini`,
+	stream: true,
+	json: false,
+	store: true,
+	moderate: true,
+	top_p: 1,
+	max_tokens: 1000,
+	temperature: 0.7,
+	presence_penalty: 0,
+	frequency_penalty: 0,
+	stop: [],
+	tool_choice: 'auto',
+	parallel_tool_calls: true,
+	messages: [
+		{
+			role: 'system',
+			content:
+				"You're a helpful AI assistant. Answer user queries in polite manner. If user ask about your purpose you can reply them that  your doc agent and they can upload their document and then you will allow them to ask any question about their docs."
+		},
+		{ name: 'json', role: 'system', content: '' },
+		{ name: 'safety', role: 'system', content: '' },
+		{
+			name: 'opening',
+			role: 'system',
+			content: 'Welcome to Langbase. Prompt away!'
+		},
+		{ name: 'rag', role: 'system', content: "Below is some CONTEXT for you to answer the questions. ONLY answer from the CONTEXT. CONTEXT consists of multiple information chunks. Each chunk has a source mentioned at the end.\n\nFor each piece of response you provide, cite the source in brackets like so: [1].\n\nAt the end of the answer, always list each source with its corresponding number and provide the document name. like so [1] Filename.doc.\n\nIf you don't know the answer, just say that you don't know. Ask for more context and better questions if needed." }
+	],
+	variables: [],
+	tools: [],
+	memory: [memoryAskMyTextDocuments()]
+});
+
+export default pipeAskMyTextDocumentsAgent;
diff --git a/examples/agents/ask-my-text-documents-agent/components/chat-input.tsx b/examples/agents/ask-my-text-documents-agent/components/chat-input.tsx
new file mode 100755
index 00000000..866fac3a
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/chat-input.tsx
@@ -0,0 +1,69 @@
+import { Message } from '@baseai/core/pipes'
+import { PromptForm } from '@/components/prompt-form'
+import { Button } from '@/components/ui/button'
+import { IconRegenerate, IconStop } from '@/components/ui/icons'
+
+export interface ChatInputProps {
+  id?: string;
+  isLoading: boolean;
+  stop: () => void;
+  append: (content: string) => Promise<void>;
+  reload: () => Promise<void>;
+  messages: Message[];
+  input: string;
+  setInput: (value: string) => void;
+}
+
+
+export function ChatInput({
+  id,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages
+}: ChatInputProps) {
+  return (
+    <div className="fixed inset-x-0 bottom-0">
+      <div className="xbg-muted mx-auto max-w-3xl sm:max-w-4xl">
+        <div className="flex h-10 items-center justify-center">
+          {isLoading ? (
+            <Button
+              variant="outline"
+              onClick={() => stop()}
+              className="bg-background"
+              size={'sm'}
+            >
+              <IconStop className="text-muted-foreground/50 group-hover:text-background" />
+              Stop generating
+            </Button>
+          ) : (
+            messages?.length > 0 && (
+              <Button
+                variant="outline"
+                onClick={() => reload()}
+                className="bg-background"
+                size={'sm'}
+              >
+                <IconRegenerate className="size-4 text-muted-foreground/50 group-hover:text-background" />
+                Regenerate response
+              </Button>
+            )
+          )}
+        </div>
+        <div className="space-y-4 py-2 md:pb-4 md:pt-2">
+          <PromptForm
+            onSubmit={async value => {
+              await append(value)
+            }}
+            input={input}
+            handleInputChange={setInput}
+            isLoading={isLoading}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/chat-list.tsx b/examples/agents/ask-my-text-documents-agent/components/chat-list.tsx
new file mode 100755
index 00000000..194f5f42
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/chat-list.tsx
@@ -0,0 +1,27 @@
+import { Message } from '@baseai/core/pipes'
+
+import { Separator } from '@/components/ui/separator'
+import { ChatMessage } from '@/components/chat-message'
+
+export interface ChatList {
+  messages: Message[]
+}
+
+export function ChatList({ messages }: ChatList) {
+  if (!messages.length) {
+    return null
+  }
+
+  return (
+    <div className="relative mx-auto max-w-2xl px-4 pb-[100px]">
+      {messages.map((message, index) => (
+        <div key={index}>
+          <ChatMessage message={message} />
+          {index < messages.length - 1 && (
+            <Separator className="my-4 md:my-8" />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/chat-message-actions.tsx b/examples/agents/ask-my-text-documents-agent/components/chat-message-actions.tsx
new file mode 100755
index 00000000..f63aede1
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/chat-message-actions.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { Message } from '@baseai/core/pipes'
+
+import { Button } from '@/components/ui/button'
+import { IconCheck, IconCopy } from '@/components/ui/icons'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+import cn from 'mxcn'
+
+interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
+  message: Message
+}
+
+export function ChatMessageActions({
+  message,
+  className,
+  ...props
+}: ChatMessageActionsProps) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(message.content)
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
+        className
+      )}
+      {...props}
+    >
+      <Button variant="ghost" size="icon" onClick={onCopy}>
+        {isCopied ? <IconCheck /> : <IconCopy />}
+        <span className="sr-only">Copy message</span>
+      </Button>
+    </div>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/chat-message.tsx b/examples/agents/ask-my-text-documents-agent/components/chat-message.tsx
new file mode 100755
index 00000000..7d323342
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/chat-message.tsx
@@ -0,0 +1,77 @@
+import { Message } from '@baseai/core/pipes'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+import { ChatMessageActions } from '@/components/chat-message-actions'
+import { MemoizedReactMarkdown } from '@/components/markdown'
+import { CodeBlock } from '@/components/ui/codeblock'
+import { IconSparkles, IconUser } from '@/components/ui/icons'
+import cn from 'mxcn'
+
+export interface ChatMessageProps {
+  message: Message
+}
+
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
+  return (
+    <div
+      className={cn('group relative mb-4 flex items-start md:-ml-12')}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-xl border shadow',
+          message.role === 'user'
+            ? 'bg-background'
+            : 'bg-primary text-primary-foreground'
+        )}
+      >
+        {message.role === 'user' ? <IconUser /> : <IconSparkles />}
+      </div>
+      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+        <MemoizedReactMarkdown
+          className="prose rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words prose-pre:rounded-xl"
+          remarkPlugins={[remarkGfm, remarkMath]}
+          components={{
+            p({ children }) {
+              return <p className="mb-2 last:mb-0">{children}</p>
+            },
+            code({ node, inline, className, children, ...props }) {
+              if (children.length) {
+                if (children[0] == '▍') {
+                  return (
+                    <span className="mt-1 animate-pulse cursor-default">▍</span>
+                  )
+                }
+
+                children[0] = (children[0] as string).replace('`▍`', '▍')
+              }
+
+              const match = /language-(\w+)/.exec(className || '')
+
+              if (inline) {
+                return (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                )
+              }
+
+              return (
+                <CodeBlock
+                  key={Math.random()}
+                  language={(match && match[1]) || ''}
+                  value={String(children).replace(/\n$/, '')}
+                  {...props}
+                />
+              )
+            }
+          }}
+        >
+          {message.content}
+        </MemoizedReactMarkdown>
+        <ChatMessageActions message={message} />
+      </div>
+    </div>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/chatbot-page.tsx b/examples/agents/ask-my-text-documents-agent/components/chatbot-page.tsx
new file mode 100755
index 00000000..a6301f9c
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/chatbot-page.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import React, { useState } from 'react';
+import { usePipe } from '@baseai/core/react';
+import cn from 'mxcn';
+import { toast } from 'sonner';
+import { Message } from '@baseai/core/pipes';
+import { ChatList } from '@/components/chat-list';
+import { ChatInput } from './chat-input';
+import { Opening } from './opening';
+import { Welcome } from './welcome';
+import { Suggestions } from './suggestions';
+
+export interface ChatProps extends React.ComponentProps<'div'> {
+  id?: string;
+  initialMessages?: Message[];
+}
+
+export function Chatbot({ id, initialMessages, className }: ChatProps) {
+  const [threadId, setThreadId] = useState<string | null>(null);
+
+  const {
+    messages,
+    input,
+    handleInputChange,
+    handleSubmit,
+    isLoading,
+    regenerate,
+    stop,
+    sendMessage,
+  } = usePipe({
+    stream: true,
+    apiRoute: '/api/chat',
+    initialMessages,
+    onResponse: (message) => {
+      console.log('Full response:', message);
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+  
+  const sendSuggestedPrompt = (prompt: string) => {
+    handleInputChange({ target: { value: prompt } } as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <div className="min-h-screen">
+      <div className={cn('pb-36 pt-4 md:pt-10', className)}>
+        {messages.length ? (
+          <ChatList messages={messages} />
+        ) : (
+          <>
+            <Welcome />
+            <Opening />
+            <Suggestions sendSuggestedPrompt={sendSuggestedPrompt} />
+          </>
+        )}
+      </div>
+      <ChatInput
+        id={id}
+        isLoading={isLoading}
+        stop={stop}
+        append={sendMessage}
+        reload={regenerate}
+        messages={messages}
+        input={input}
+        setInput={handleInputChange}
+      />
+    </div>
+  );
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/header.tsx b/examples/agents/ask-my-text-documents-agent/components/header.tsx
new file mode 100755
index 00000000..55271258
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/header.tsx
@@ -0,0 +1,55 @@
+import { buttonVariants } from '@/components/ui/button'
+import cn from 'mxcn'
+import Link from 'next/link'
+import { IconDocs, IconFork, IconGitHub } from './ui/icons'
+
+export async function Header() {
+  return (
+    <header className="bg-background sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between px-4">
+      <div className="flex h-16 shrink-0 items-center">
+        <h1>
+          <Link href="/" className="font-bold">
+            <span
+              aria-hidden="true"
+              className="border-muted-foreground/10 bg-muted mr-1 select-none rounded-lg border px-[0.2rem] py-[0.1rem] text-sm font-bold shadow-2xl"
+            >
+              ⌘
+            </span>
+            Langbase
+          </Link>
+        </h1>
+      </div>
+
+      <div className="flex items-center justify-end space-x-2">
+        <a
+          href="https://baseai.dev/docs"
+          target="_blank"
+          className={cn(buttonVariants({ variant: 'ghost' }))}
+        >
+          <IconDocs className="text-muted-foreground size-4" />
+          <span className="hidden sm:flex">BaseAI: Build an agentic AI pipe with tools and memory</span>
+        </a>
+        <a
+          target="_blank"
+          href="https://github.com/LangbaseInc/baseai/tree/main/examples/agents/ask-my-text-documents-agent"
+          rel="noopener noreferrer"
+          className={cn(buttonVariants({ variant: 'outline' }))}
+        >
+          <IconGitHub />
+          <span className="hidden md:flex">GitHub</span>
+        </a>
+        <a
+          target="_blank"
+          href="https://langbase.com/examples/ask-my-text-documents-agent"
+          rel="noopener noreferrer"
+          className={cn(buttonVariants({ variant: 'default' }))}
+        >
+          <IconFork />
+          <span className="hidden gap-1 md:flex">
+            Fork on <span className="font-bold">Langbase</span>
+          </span>
+        </a>
+      </div>
+    </header>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/markdown.tsx b/examples/agents/ask-my-text-documents-agent/components/markdown.tsx
new file mode 100755
index 00000000..d4491467
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/markdown.tsx
@@ -0,0 +1,9 @@
+import { FC, memo } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className
+)
diff --git a/examples/agents/ask-my-text-documents-agent/components/opening.tsx b/examples/agents/ask-my-text-documents-agent/components/opening.tsx
new file mode 100755
index 00000000..aeb78c85
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/opening.tsx
@@ -0,0 +1,65 @@
+import Link from 'next/link'
+
+export function Opening() {
+  return (
+    <div className="mx-auto max-w-3xl px-2 sm:max-w-4xl sm:px-0">
+      <div className="light:ring-ring:ring-border ring-ring/10 relative my-7 rounded-lg py-3.5 pl-[1.625rem] pr-4 ring-1 ring-inset [--callout-border:theme(colors.indigo.400)] [--callout-icon:theme(colors.indigo.400)] [--callout-title:theme(colors.indigo.400)] dark:[--callout-border:theme(colors.indigo.400)] dark:[--callout-icon:theme(colors.indigo.400)] dark:[--callout-title:theme(colors.indigo.400)] [&>*]:my-0 [&>*]:py-0">
+        <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]">
+           Ask My Text Documents Agent
+          </span>
+        </div>
+
+        <div className="mt-2">
+          <div className="mt-4 flex flex-col gap-4 text-sm [&>p]:my-0 [&>p]:py-0">
+            <p>Learn more by checking out:</p>
+            <div className="mt-2 flex flex-col gap-4 text-sm">
+              <Dlink href="https://baseai.dev/docs/memory/quickstart">
+                <span>1.</span>
+                <span>
+                  Follow this guide to create an agent to have a conversation with your documents locally and on live Langbase 
+                </span>
+              </Dlink>
+              <Dlink href="https://langbase.com/examples/ask-my-text-documents-agent">
+                <span>2.</span>
+                <span>Fork the `ask-my-text-documents-agent` Pipe on ⌘ Langbase</span>
+              </Dlink>
+
+              <Dlink href="https://github.com/LangbaseInc/baseai/tree/main/examples/agents/ask-my-text-documents-agent">
+                <span>3.</span>
+                <span>Deep dive into the source code</span>
+              </Dlink>
+              <Dlink href="https://baseai.dev/docs">
+                <span>4.</span>
+                <span>Learn more about BaseAI Memory and Pipes</span>
+              </Dlink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Description Link
+function Dlink({
+  href,
+  children,
+  ...props
+}: {
+  href: string
+  children: React.ReactNode
+  [key: string]: any
+}) {
+  return (
+    <Link
+      href={href}
+      target="_blank"
+      className="flex items-center gap-2 hover:text-indigo-400 [&>span:first-child]:text-indigo-400"
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
\ No newline at end of file
diff --git a/examples/agents/ask-my-text-documents-agent/components/prompt-form.tsx b/examples/agents/ask-my-text-documents-agent/components/prompt-form.tsx
new file mode 100755
index 00000000..44c09329
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/prompt-form.tsx
@@ -0,0 +1,92 @@
+import { Button } from '@/components/ui/button'
+import { IconChat, IconCommand, IconSpinner } from '@/components/ui/icons'
+import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
+import * as React from 'react'
+import Textarea from 'react-textarea-autosize'
+
+export interface PromptProps {
+  onSubmit: (value: string) => Promise<void>
+  input: string
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  isLoading: boolean
+}
+
+export function PromptForm({
+  onSubmit,
+  input,
+  handleInputChange,
+  isLoading
+}: PromptProps) {
+  const { formRef, onKeyDown } = useEnterSubmit()
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  return (
+    <form
+      onSubmit={async e => {
+        e.preventDefault()
+        if (!input?.trim()) {
+          return
+        }
+        await onSubmit(input)
+      }}
+      ref={formRef}
+    >
+      <div className="bg-background relative flex max-h-60 w-full grow flex-col overflow-hidden px-2 pb-2 sm:rounded-2xl sm:border">
+        <div className="flex w-full flex-col">
+          <label
+            htmlFor="playground"
+            className="text-config text-foreground flex justify-between gap-y-4 rounded-xl px-3 py-4 font-medium leading-6 md:flex-row md:items-center md:gap-y-0"
+          >
+            <div className="flex items-center gap-x-2">
+              <IconChat
+                className="text-muted-foreground/50 size-5"
+                aria-hidden="true"
+              />
+              <h3>Ask</h3>
+            </div>
+
+            <div className="flex items-center justify-center gap-2 md:justify-start">
+              <Button
+                variant="ghost"
+                className="max-w-xs"
+                onClick={e => {
+                  e.preventDefault()
+                  location.reload()
+                }}
+              >
+                Reset
+              </Button>
+              <Button type="submit" disabled={isLoading || input === ''}>
+                {isLoading ? (
+                  <IconSpinner />
+                ) : (
+                  <IconCommand className="size-4" />
+                )}
+                Send
+                <span className="sr-only">Send message</span>
+              </Button>
+            </div>
+          </label>
+        </div>
+        <Textarea
+          ref={inputRef}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          rows={1}
+          maxRows={10}
+          value={input}
+          onChange={handleInputChange}
+          placeholder="Enter your prompt query..."
+          spellCheck={false}
+          className="bg-muted min-h-[60px] w-full resize-none rounded-lg px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+        />
+      </div>
+    </form>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/suggestions.tsx b/examples/agents/ask-my-text-documents-agent/components/suggestions.tsx
new file mode 100644
index 00000000..fd2a346d
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/suggestions.tsx
@@ -0,0 +1,60 @@
+import cn from 'mxcn'
+import { IconSparkles } from './ui/icons'
+
+// Prompt suggestions – Change these to match your use-case/company
+const suggestions = [
+  {
+    title: `Concise summary of the attached document`,
+    prompt: `Give a concise summary of the document in the CONTEXT`
+  },
+  {
+    title: `Top 10 most important keywords`,
+    prompt: `Extract top 10 most important keywords in the attached document from the CONTEXT that are essential for insights`
+  },
+  {
+    title: `Insights from the attached document`,
+    prompt: `Extract insights from the attached document in the CONTEXT in bullet points`
+  },
+  {
+    title: `How can I use your services?`,
+    prompt: `How can I use your services?`
+  }
+]
+
+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>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/ui/button.tsx b/examples/agents/ask-my-text-documents-agent/components/ui/button.tsx
new file mode 100755
index 00000000..73643111
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/ui/button.tsx
@@ -0,0 +1,70 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import cn from 'mxcn'
+
+const buttonVariants = cva(
+  'focus-visible:ring-ring-muted-foreground/25 inline-flex cursor-pointer select-none items-center justify-center rounded-lg text-sm font-medium transition-colors focus:ring-1 focus:ring-muted-foreground/25 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 gap-2 group',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        warn: 'bg-warning text-warning-foreground hover:bg-warning/90 shadow-sm',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        'destructive-hover':
+          'border border-input bg-muted font-bold text-destructive shadow-sm hover:bg-destructive hover:text-destructive-foreground',
+        'outline-background':
+          'border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-foreground hover:text-background',
+        'outline-inverse':
+          'border border-input bg-muted-foreground text-muted shadow-sm hover:bg-foreground hover:text-background',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-foreground hover:text-background',
+        'outline-muted':
+          'border border-input bg-muted text-foreground shadow-sm hover:bg-foreground hover:text-background',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        green:
+          'rounded-lg bg-green-500 text-primary shadow-sm hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-800'
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-6 rounded-lg px-2 text-xs',
+        sm: 'h-8 rounded-lg px-3 text-xs',
+        lg: 'h-10 rounded-lg px-8',
+        xl: 'h-14 rounded-lg px-10',
+        icon: 'h-9 w-9'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/examples/agents/ask-my-text-documents-agent/components/ui/codeblock.tsx b/examples/agents/ask-my-text-documents-agent/components/ui/codeblock.tsx
new file mode 100755
index 00000000..a2e266a6
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/ui/codeblock.tsx
@@ -0,0 +1,145 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
+
+'use client'
+
+import { FC, memo } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+
+import { Button } from '@/components/ui/button'
+import { IconCheck, IconCopy, IconDownload } from '@/components/ui/icons'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+
+interface Props {
+  language: string
+  value: string
+}
+
+interface languageMap {
+  [key: string]: string | undefined
+}
+
+export const programmingLanguages: languageMap = {
+  javascript: '.js',
+  python: '.py',
+  java: '.java',
+  c: '.c',
+  cpp: '.cpp',
+  'c++': '.cpp',
+  'c#': '.cs',
+  ruby: '.rb',
+  php: '.php',
+  swift: '.swift',
+  'objective-c': '.m',
+  kotlin: '.kt',
+  typescript: '.ts',
+  go: '.go',
+  perl: '.pl',
+  rust: '.rs',
+  scala: '.scala',
+  haskell: '.hs',
+  lua: '.lua',
+  shell: '.sh',
+  sql: '.sql',
+  html: '.html',
+  css: '.css'
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+}
+
+export const generateRandomString = (length: number, lowercase = false) => {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXY3456789' // excluding similar looking characters like Z, 2, I, 1, O, 0
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return lowercase ? result.toLowerCase() : result
+}
+
+const CodeBlock: FC<Props> = memo(({ language, value }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+
+  const downloadAsFile = () => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    const fileExtension = programmingLanguages[language] || '.file'
+    const suggestedFileName = `file-${generateRandomString(
+      3,
+      true
+    )}${fileExtension}`
+    const fileName = window.prompt('Enter file name' || '', suggestedFileName)
+
+    if (!fileName) {
+      // User pressed cancel on prompt.
+      return
+    }
+
+    const blob = new Blob([value], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.download = fileName
+    link.href = url
+    link.style.display = 'none'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(value)
+  }
+
+  return (
+    <div className="codeblock relative rounded-xl w-full bg-zinc-950 font-sans">
+      <div className="flex w-full rounded-xl items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
+        <span className="text-xs lowercase">{language}</span>
+        <div className="flex items-center space-x-1">
+          <Button
+            variant="ghost"
+            className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            onClick={downloadAsFile}
+            size="icon"
+          >
+            <IconDownload />
+            <span className="sr-only">Download</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            onClick={onCopy}
+          >
+            {isCopied ? <IconCheck /> : <IconCopy />}
+            <span className="sr-only">Copy code</span>
+          </Button>
+        </div>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={coldarkDark}
+        PreTag="div"
+        showLineNumbers
+        customStyle={{
+          margin: 0,
+          width: '100%',
+          background: 'transparent',
+          padding: '1.5rem 1rem'
+        }}
+        codeTagProps={{
+          style: {
+            fontSize: '0.9rem',
+            fontFamily: 'var(--font-mono)'
+          }
+        }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  )
+})
+CodeBlock.displayName = 'CodeBlock'
+
+export { CodeBlock }
diff --git a/examples/agents/ask-my-text-documents-agent/components/ui/icons.tsx b/examples/agents/ask-my-text-documents-agent/components/ui/icons.tsx
new file mode 100755
index 00000000..8ac8488f
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/ui/icons.tsx
@@ -0,0 +1,399 @@
+'use client'
+
+import cn from 'mxcn'
+import * as React from 'react'
+
+function IconOpenAI({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <title>OpenAI icon</title>
+      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+    </svg>
+  )
+}
+
+function IconGitHub({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  )
+}
+
+function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="none"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z" />
+    </svg>
+  )
+}
+
+function IconUser(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M4 20V19C4 16.7909 5.79086 15 8 15H16C18.2091 15 20 16.7909 20 19V20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    >
+      <path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
+    </svg>
+  )
+}
+
+function IconMessage({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
+    </svg>
+  )
+}
+
+function IconRefresh({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
+    </svg>
+  )
+}
+
+export function IconRegenerate(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5C8.13401 5 5 8.13401 5 12C5 14.3776 6.18526 16.4797 8 17.7455V15C8 14.4477 8.44772 14 9 14C9.55228 14 10 14.4477 10 15V20C10 20.5523 9.55228 21 9 21H4C3.44772 21 3 20.5523 3 20C3 19.4477 3.44772 19 4 19H6.34293C4.30475 17.3508 3 14.8284 3 12C3 7.02944 7.02944 3 12 3C13.1917 3 14.3316 3.23213 15.3752 3.65458C15.8871 3.8618 16.1342 4.4448 15.9269 4.95673C15.7197 5.46867 15.1367 5.71568 14.6248 5.50845C13.8155 5.18088 12.9301 5 12 5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13 21C13.5523 21 14 20.5523 14 20C14 19.4477 13.5523 19 13 19C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21 11C21 10.4477 20.5523 9.99999 20 9.99999C19.4477 9.99999 19 10.4477 19 11C19 11.5523 19.4477 12 20 12C20.5523 12 21 11.5523 21 11Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.9295 14.2679C20.4078 14.5441 20.5716 15.1557 20.2955 15.634C20.0193 16.1123 19.4078 16.2761 18.9295 16C18.4512 15.7238 18.2873 15.1123 18.5634 14.634C18.8396 14.1557 19.4512 13.9918 19.9295 14.2679Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.3676 19.2942C17.8459 19.0181 18.0098 18.4065 17.7336 17.9282C17.4575 17.4499 16.8459 17.286 16.3676 17.5621C15.8893 17.8383 15.7254 18.4499 16.0016 18.9282C16.2777 19.4065 16.8893 19.5703 17.3676 19.2942Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.9269 7.99998C18.4487 8.27612 17.8371 8.11225 17.5609 7.63396C17.2848 7.15566 17.4487 6.54407 17.9269 6.26793C18.4052 5.99179 19.0168 6.15566 19.293 6.63396C19.5691 7.11225 19.4052 7.72384 18.9269 7.99998Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function IconStop({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
+    </svg>
+  )
+}
+
+function IconCopy({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
+    </svg>
+  )
+}
+
+function IconCheck({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
+    </svg>
+  )
+}
+
+function IconDownload({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
+    </svg>
+  )
+}
+
+function IconClose({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" />
+    </svg>
+  )
+}
+
+function IconSparkles({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={cn('size-4', className)}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+      />
+    </svg>
+  )
+}
+
+export function IconChat(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function IconInfo({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={cn('size-4', className)}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.75869 3C7.95372 2.99999 7.28937 2.99998 6.74818 3.04419C6.18608 3.09012 5.66937 3.18868 5.18404 3.43598C4.43139 3.81947 3.81947 4.43139 3.43598 5.18404C3.18868 5.66937 3.09012 6.18608 3.04419 6.74818C2.99998 7.28937 2.99999 7.95372 3 8.75869V15.2413C2.99999 16.0463 2.99998 16.7106 3.04419 17.2518C3.09012 17.8139 3.18868 18.3306 3.43598 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.66937 20.8113 6.18608 20.9099 6.74818 20.9558C7.28937 21 7.95372 21 8.75868 21H15.2413C16.0463 21 16.7106 21 17.2518 20.9558C17.8139 20.9099 18.3306 20.8113 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.8113 18.3306 20.9099 17.8139 20.9558 17.2518C21 16.7106 21 16.0463 21 15.2413V8.75868C21 7.95372 21 7.28936 20.9558 6.74818C20.9099 6.18608 20.8113 5.66937 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43598C18.3306 3.18868 17.8139 3.09012 17.2518 3.04419C16.7106 2.99998 16.0463 2.99999 15.2413 3H8.75869ZM9.5 11C9.5 10.4477 9.94772 10 10.5 10H12C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12H10.5C9.94772 12 9.5 11.5523 9.5 11ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55229 11.4477 9 12 9C12.5523 9 13 8.55229 13 8C13 7.44772 12.5523 7 12 7Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function IconFork({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={cn('size-4', className)}
+    >
+      <path
+        d="M3 5.5C3 3.567 4.567 2 6.5 2C8.433 2 10 3.567 10 5.5C10 7.08551 8.94574 8.42479 7.5 8.85506V11H11C11.3643 11 11.7058 11.0974 12 11.2676C12.2942 11.0974 12.6357 11 13 11H16.5V8.85506C15.0543 8.42479 14 7.08551 14 5.5C14 3.567 15.567 2 17.5 2C19.433 2 21 3.567 21 5.5C21 7.08551 19.9457 8.42479 18.5 8.85506V11C18.5 12.1046 17.6046 13 16.5 13H13V15.1449C14.4457 15.5752 15.5 16.9145 15.5 18.5C15.5 20.433 13.933 22 12 22C10.067 22 8.5 20.433 8.5 18.5C8.5 16.9145 9.55426 15.5752 11 15.1449V13H7.5C6.39543 13 5.5 12.1046 5.5 11V8.85506C4.05426 8.42479 3 7.08551 3 5.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconCommand(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5V8H14V6.5C14 4.567 15.567 3 17.5 3C19.433 3 21 4.567 21 6.5C21 8.433 19.433 10 17.5 10H16V14H17.5C19.433 14 21 15.567 21 17.5C21 19.433 19.433 21 17.5 21C15.567 21 14 19.433 14 17.5V16H10V17.5C10 19.433 8.433 21 6.5 21C4.567 21 3 19.433 3 17.5C3 15.567 4.567 14 6.5 14H8V10H6.5C4.567 10 3 8.433 3 6.5ZM8 8V6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H8ZM10 10V14H14V10H10ZM8 16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19C7.32843 19 8 18.3284 8 17.5V16ZM16 16V17.5C16 18.3284 16.6716 19 17.5 19C18.3284 19 19 18.3284 19 17.5C19 16.6716 18.3284 16 17.5 16H16ZM16 8H17.5C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5V8Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconDocs(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 4C4 2.89543 4.89543 2 6 2H19C19.5523 2 20 2.44772 20 3V21C20 21.5523 19.5523 22 19 22H6C4.89543 22 4 21.1046 4 20V4ZM6 16H18V4H6L6 16ZM18 18H6V20H18V18Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.1845 7.40787C12.2813 7.35949 12.3598 7.28103 12.4081 7.18426L13.0531 5.89443C13.2373 5.5259 13.7632 5.5259 13.9475 5.89443L14.5924 7.18426C14.6408 7.28103 14.7192 7.35949 14.816 7.40787L16.1058 8.05279C16.4744 8.23705 16.4744 8.76295 16.1058 8.94721L14.816 9.59213C14.7192 9.64051 14.6408 9.71897 14.5924 9.81574L13.9475 11.1056C13.7632 11.4741 13.2373 11.4741 13.0531 11.1056L12.4081 9.81574C12.3598 9.71897 12.2813 9.64051 12.1845 9.59213L10.8947 8.94721C10.5262 8.76295 10.5262 8.23705 10.8947 8.05279L12.1845 7.40787Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.5775 11.7114C8.63556 11.6824 8.68263 11.6353 8.71166 11.5772L9.23194 10.5367C9.3425 10.3155 9.65804 10.3155 9.7686 10.5367L10.2889 11.5772C10.3179 11.6353 10.365 11.6824 10.423 11.7114L11.4636 12.2317C11.6847 12.3422 11.6847 12.6578 11.4636 12.7683L10.423 13.2886C10.365 13.3176 10.3179 13.3647 10.2889 13.4228L9.7686 14.4633C9.65804 14.6845 9.3425 14.6845 9.23195 14.4633L8.71166 13.4228C8.68263 13.3647 8.63556 13.3176 8.5775 13.2886L7.53693 12.7683C7.31582 12.6578 7.31581 12.3422 7.53693 12.2317L8.5775 11.7114Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+
+  // return (
+  //   <svg
+  //     {...props}
+  //     xmlns="http://www.w3.org/2000/svg"
+  //     width="24"
+  //     height="24"
+  //     viewBox="0 0 24 24"
+  //     fill="none"
+  //   >
+  //     <path
+  //       d="M7 8C7 8.55228 6.55228 9 6 9C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7C6.55228 7 7 7.44772 7 8Z"
+  //       fill="currentColor"
+  //     />
+  //     <path
+  //       d="M10 8C10 8.55228 9.55228 9 9 9C8.44772 9 8 8.55228 8 8C8 7.44772 8.44772 7 9 7C9.55228 7 10 7.44772 10 8Z"
+  //       fill="currentColor"
+  //     />
+  //     <path
+  //       d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z"
+  //       fill="currentColor"
+  //     />
+  //     <path
+  //       d="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V6H4V18H10C10.5523 18 11 18.4477 11 19C11 19.5523 10.5523 20 10 20H4C2.89543 20 2 19.1046 2 18V6Z"
+  //       fill="currentColor"
+  //     />
+  //     <path
+  //       d="M18 11C18.5523 11 19 11.4477 19 12C19 13.2668 19.2816 13.9508 19.6654 14.3346C20.0492 14.7184 20.7332 15 22 15C22.5523 15 23 15.4477 23 16C23 16.5523 22.5523 17 22 17C20.7332 17 20.0492 17.2816 19.6654 17.6654C19.2816 18.0492 19 18.7332 19 20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20C17 18.7332 16.7184 18.0492 16.3346 17.6654C15.9508 17.2816 15.2668 17 14 17C13.4477 17 13 16.5523 13 16C13 15.4477 13.4477 15 14 15C15.2668 15 15.9508 14.7184 16.3346 14.3346C16.7184 13.9508 17 13.2668 17 12C17 11.4477 17.4477 11 18 11Z"
+  //       fill="currentColor"
+  //     />
+  //   </svg>
+  // )
+}
+
+export {
+  IconArrowRight,
+  IconCheck,
+  IconClose,
+  IconCopy,
+  IconDownload,
+  IconFork,
+  IconGitHub,
+  IconInfo,
+  IconMessage,
+  IconOpenAI,
+  IconRefresh,
+  IconSparkles,
+  IconSpinner,
+  IconStop,
+  IconUser
+}
diff --git a/examples/agents/ask-my-text-documents-agent/components/ui/separator.tsx b/examples/agents/ask-my-text-documents-agent/components/ui/separator.tsx
new file mode 100755
index 00000000..7ba06b3a
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/ui/separator.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import cn from 'mxcn'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal'
+          ? 'h-[2px] w-full border-0 border-b-[1px] border-border bg-muted'
+          : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/examples/agents/ask-my-text-documents-agent/components/ui/textarea.tsx b/examples/agents/ask-my-text-documents-agent/components/ui/textarea.tsx
new file mode 100755
index 00000000..93b82cb8
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import cn from 'mxcn'
+import * as React from 'react'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/examples/agents/ask-my-text-documents-agent/components/welcome.tsx b/examples/agents/ask-my-text-documents-agent/components/welcome.tsx
new file mode 100644
index 00000000..440e75f9
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/components/welcome.tsx
@@ -0,0 +1,16 @@
+import { IconDocs } from './ui/icons'
+
+export const Welcome = () => {
+  return (
+    <div className="mx-auto flex max-w-4xl flex-col items-center gap-y-4">
+      <h2 className="flex gap-4 font-mono text-2xl font-semibold tracking-wide sm:text-5xl">
+        <IconDocs className="rotate-30 size-12" />
+        Ask My Text Documents Agent
+      </h2>
+      <span className="text-muted-foreground w-full text-center leading-7 sm:w-2/3">
+      Ask My Text Documents Agent example is built with BaseAI framework that enables question and answering from your docs
+        using Langbase agentic Pipes and Memory. The example supports conversation with .pdf, .txt, .md format. 
+      </span>
+    </div>
+  )
+}
diff --git a/examples/agents/ask-my-text-documents-agent/env.d.ts b/examples/agents/ask-my-text-documents-agent/env.d.ts
new file mode 100644
index 00000000..68a2a989
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/env.d.ts
@@ -0,0 +1,5 @@
+// Generated by Wrangler
+// by running `wrangler types --env-interface CloudflareEnv env.d.ts`
+
+interface CloudflareEnv {
+}
diff --git a/examples/agents/ask-my-text-documents-agent/lib/hooks/use-copy-to-clipboard.tsx b/examples/agents/ask-my-text-documents-agent/lib/hooks/use-copy-to-clipboard.tsx
new file mode 100755
index 00000000..62f7156d
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/lib/hooks/use-copy-to-clipboard.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import * as React from 'react'
+
+export interface useCopyToClipboardProps {
+  timeout?: number
+}
+
+export function useCopyToClipboard({
+  timeout = 2000
+}: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = React.useState<Boolean>(false)
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+      return
+    }
+
+    if (!value) {
+      return
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    })
+  }
+
+  return { isCopied, copyToClipboard }
+}
diff --git a/examples/agents/ask-my-text-documents-agent/lib/hooks/use-enter-submit.tsx b/examples/agents/ask-my-text-documents-agent/lib/hooks/use-enter-submit.tsx
new file mode 100755
index 00000000..d66b2d32
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/lib/hooks/use-enter-submit.tsx
@@ -0,0 +1,23 @@
+import { useRef, type RefObject } from 'react'
+
+export function useEnterSubmit(): {
+  formRef: RefObject<HTMLFormElement>
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
+} {
+  const formRef = useRef<HTMLFormElement>(null)
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ): void => {
+    if (
+      event.key === 'Enter' &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      formRef.current?.requestSubmit()
+      event.preventDefault()
+    }
+  }
+
+  return { formRef, onKeyDown: handleKeyDown }
+}
diff --git a/examples/agents/ask-my-text-documents-agent/lib/types.ts b/examples/agents/ask-my-text-documents-agent/lib/types.ts
new file mode 100755
index 00000000..cd0a5f03
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/lib/types.ts
@@ -0,0 +1,11 @@
+import { type Message } from 'ai'
+
+export interface Chat extends Record<string, any> {
+  id: string
+  title: string
+  createdAt: Date
+  userId: string
+  path: string
+  messages: Message[]
+  sharePath?: string
+}
diff --git a/examples/agents/ask-my-text-documents-agent/lib/utils.ts b/examples/agents/ask-my-text-documents-agent/lib/utils.ts
new file mode 100755
index 00000000..a5cc2c68
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/lib/utils.ts
@@ -0,0 +1,8 @@
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input)
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
diff --git a/examples/agents/ask-my-text-documents-agent/next.config.mjs b/examples/agents/ask-my-text-documents-agent/next.config.mjs
new file mode 100644
index 00000000..2a73efec
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/next.config.mjs
@@ -0,0 +1,13 @@
+import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
+// (when running the application with `next dev`), for more information see:
+// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
+if (process.env.NODE_ENV === 'development') {
+  await setupDevPlatform();
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/examples/agents/ask-my-text-documents-agent/package.json b/examples/agents/ask-my-text-documents-agent/package.json
new file mode 100644
index 00000000..42ecf6b7
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "ask-my-text-documents-agent",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "pages:build": "npx @cloudflare/next-on-pages",
+    "preview": "npm run pages:build && wrangler pages dev",
+    "deploy": "npm run pages:build && wrangler pages deploy",
+    "cf-typegen": "wrangler types --env-interface CloudflareEnv env.d.ts",
+    "baseai": "baseai"
+  },
+  "dependencies": {
+    "@baseai/core": "^0.9.8",
+    "@tailwindcss/typography": "github:tailwindcss/typography",
+    "ai": "^3.4.9",
+    "class-variance-authority": "^0.7.0",
+    "mxcn": "^2.0.0",
+    "next": "14.2.5",
+    "openai": "^4.67.3",
+    "radix-ui": "^1.0.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.5.4",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "sonner": "^1.5.0"
+  },
+  "devDependencies": {
+    "@cloudflare/next-on-pages": "^1.13.5",
+    "@cloudflare/workers-types": "^4.20241011.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "baseai": "^0.9.8",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "eslint-plugin-next-on-pages": "^1.13.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5",
+    "vercel": "^37.8.0",
+    "wrangler": "^3.80.4"
+  }
+}
diff --git a/examples/agents/ask-my-text-documents-agent/postcss.config.mjs b/examples/agents/ask-my-text-documents-agent/postcss.config.mjs
new file mode 100644
index 00000000..1a69fd2a
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/examples/agents/ask-my-text-documents-agent/public/ask-my-text-documents-agent.jpg b/examples/agents/ask-my-text-documents-agent/public/ask-my-text-documents-agent.jpg
new file mode 100644
index 00000000..6265c85c
Binary files /dev/null and b/examples/agents/ask-my-text-documents-agent/public/ask-my-text-documents-agent.jpg differ
diff --git a/examples/agents/ask-my-text-documents-agent/tailwind.config.ts b/examples/agents/ask-my-text-documents-agent/tailwind.config.ts
new file mode 100644
index 00000000..8a0ab881
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/tailwind.config.ts
@@ -0,0 +1,177 @@
+const { fontFamily } = require('tailwindcss/defaultTheme')
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: 'selector',
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {
+    transparent: 'transparent',
+    current: 'currentColor',
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        },
+        // light mode
+        tremor: {
+          brand: {
+            faint: '#eff6ff', // blue-50
+            muted: '#bfdbfe', // blue-200
+            subtle: '#60a5fa', // blue-400
+            DEFAULT: '#3b82f6', // blue-500
+            emphasis: '#1d4ed8', // blue-700
+            inverted: '#ffffff' // white
+          },
+          background: {
+            muted: '#f9fafb', // gray-50
+            subtle: '#f3f4f6', // gray-100
+            DEFAULT: '#ffffff', // white
+            emphasis: '#374151' // gray-700
+          },
+          border: {
+            DEFAULT: '#e5e7eb' // gray-200
+          },
+          ring: {
+            DEFAULT: '#e5e7eb' // gray-200
+          },
+          content: {
+            subtle: '#9ca3af', // gray-400
+            DEFAULT: '#6b7280', // gray-500
+            emphasis: '#374151', // gray-700
+            strong: '#111827', // gray-900
+            inverted: '#ffffff' // white
+          }
+        },
+        // dark mode
+        'dark-tremor': {
+          brand: {
+            faint: 'hsl(var(--background))', // custom
+            muted: 'hsl(var(--muted))', // blue-950
+            subtle: '#1e40af', // blue-800
+            DEFAULT: '#3b82f6', // blue-500
+            emphasis: '#60a5fa', // blue-400
+            inverted: 'hsl(var(--muted))' // gray-950
+          },
+          background: {
+            muted: 'hsl(var(--muted))', // custom
+            subtle: 'hsl(var(--muted))', // gray-800
+            DEFAULT: 'hsl(var(--background))', // gray-900
+            emphasis: '#d1d5db' // gray-300
+          },
+          border: {
+            DEFAULT: 'hsl(var(--border))' // gray-800
+          },
+          ring: {
+            DEFAULT: 'hsl(var(--muted))' // gray-800
+          },
+          content: {
+            subtle: '#4b5563', // gray-600
+            DEFAULT: '#6b7280', // gray-600
+            emphasis: '#e5e7eb', // gray-200
+            strong: '#f9fafb', // gray-50
+            inverted: '#000000' // black
+          }
+        }
+      },
+      boxShadow: {
+        // light
+        'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'tremor-card':
+          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'tremor-dropdown':
+          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        // dark
+        'dark-tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'dark-tremor-card':
+          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'dark-tremor-dropdown':
+          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+        'tremor-small': '0.375rem',
+        'tremor-default': '0.5rem',
+        'tremor-full': '9999px'
+      },
+      fontSize: {
+        // 'tremor-label': ['0.75rem'],
+        'tremor-label': '0.75rem',
+        'tremor-default': ['0.875rem', { lineHeight: '1.25rem' }],
+        'tremor-title': ['1.125rem', { lineHeight: '1.75rem' }],
+        'tremor-metric': ['1.875rem', { lineHeight: '2.25rem' }]
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...fontFamily.sans]
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' }
+        },
+
+        slide: {
+          to: {
+            transform: 'translate(calc(100cqw - 100%), 0)'
+          }
+        }
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        // spin: 'spin calc(var(--speed) * 2) infinite linear',
+        slide: 'slide var(--speed) ease-in-out infinite alternate'
+      }
+    }
+  },
+  plugins: [require('@tailwindcss/typography')]
+}
+export default config
diff --git a/examples/agents/ask-my-text-documents-agent/tsconfig.json b/examples/agents/ask-my-text-documents-agent/tsconfig.json
new file mode 100644
index 00000000..574a1c8c
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "types": [
+        "@cloudflare/workers-types/2023-07-01"
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/agents/ask-my-text-documents-agent/wrangler.toml b/examples/agents/ask-my-text-documents-agent/wrangler.toml
new file mode 100644
index 00000000..bad71d34
--- /dev/null
+++ b/examples/agents/ask-my-text-documents-agent/wrangler.toml
@@ -0,0 +1,87 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "ask-my-text-documents-agent"
+compatibility_date = "2024-10-11"
+compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = ".vercel/output/static"
+
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Pages Function, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/pages/functions/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
+# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
+# Note: Use secrets to store sensitive data.
+# - https://developers.cloudflare.com/pages/functions/bindings/#secrets
+# [vars]
+# MY_VARIABLE = "production_value"
+
+# Bind the Workers AI model catalog. Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#workers-ai
+# [ai]
+# binding = "AI"
+
+# Bind a D1 database. D1 is Cloudflare’s native serverless SQL database.
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#d1-databases
+# [[d1_databases]]
+# binding = "MY_DB"
+# database_name = "my-database"
+# database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
+# Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
+# Docs: https://developers.cloudflare.com/workers/runtime-apis/durable-objects
+# [[durable_objects.bindings]]
+# name = "MY_DURABLE_OBJECT"
+# class_name = "MyDurableObject"
+# script_name = 'my-durable-object'
+
+# Bind a KV Namespace. Use KV as persistent storage for small key-value pairs.
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#kv-namespaces
+# KV Example:
+# [[kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer.
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#queue-producers
+# [[queues.producers]]
+# binding = "MY_QUEUE"
+# queue = "my-queue"
+
+# Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files.
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#r2-buckets
+# [[r2_buckets]]
+# binding = "MY_BUCKET"
+# bucket_name = "my-bucket"
+
+# Bind another Worker service. Use this binding to call another Worker without network overhead.
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#service-bindings
+# [[services]]
+# binding = "MY_SERVICE"
+# service = "my-service"
+
+# To use different bindings for preview and production environments, follow the examples below.
+# When using environment-specific overrides for bindings, ALL bindings must be specified on a per-environment basis.
+# Docs: https://developers.cloudflare.com/pages/functions/wrangler-configuration#environment-specific-overrides
+
+######## PREVIEW environment config ########
+
+# [env.preview.vars]
+# API_KEY = "xyz789"
+
+# [[env.preview.kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "<PREVIEW_NAMESPACE_ID>"
+
+######## PRODUCTION environment config ########
+
+# [env.production.vars]
+# API_KEY = "abc123"
+
+# [[env.production.kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "<PRODUCTION_NAMESPACE_ID>"