=> {
+ try {
+ const response = await fetch(
+ APIRoutes.GetPlaygroundSessions(base, agentId),
+ {
+ method: 'GET'
+ }
+ )
+ if (!response.ok) {
+ if (response.status === 404) {
+ // Return empty array when storage is not enabled
+ return []
+ }
+ throw new Error(`Failed to fetch sessions: ${response.statusText}`)
+ }
+ return response.json()
+ } catch {
+ return []
+ }
+}
+
+export const getPlaygroundSessionAPI = async (
+ base: string,
+ agentId: string,
+ sessionId: string
+) => {
+ const response = await fetch(
+ APIRoutes.GetPlaygroundSession(base, agentId, sessionId),
+ {
+ method: 'GET'
+ }
+ )
+ return response.json()
+}
+
+export const deletePlaygroundSessionAPI = async (
+ base: string,
+ agentId: string,
+ sessionId: string
+) => {
+ const response = await fetch(
+ APIRoutes.DeletePlaygroundSession(base, agentId, sessionId),
+ {
+ method: 'DELETE'
+ }
+ )
+ return response
+}
diff --git a/src/api/routes.ts b/src/api/routes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a82443792b3b28d2309adbd8d4c9098530e41c80
--- /dev/null
+++ b/src/api/routes.ts
@@ -0,0 +1,23 @@
+export const APIRoutes = {
+ GetPlaygroundAgents: (PlaygroundApiUrl: string) =>
+ `${PlaygroundApiUrl}/v1/playground/agents`,
+ AgentRun: (PlaygroundApiUrl: string) =>
+ `${PlaygroundApiUrl}/v1/playground/agents/{agent_id}/runs`,
+ PlaygroundStatus: (PlaygroundApiUrl: string) =>
+ `${PlaygroundApiUrl}/v1/playground/status`,
+ GetPlaygroundSessions: (PlaygroundApiUrl: string, agentId: string) =>
+ `${PlaygroundApiUrl}/v1/playground/agents/${agentId}/sessions`,
+ GetPlaygroundSession: (
+ PlaygroundApiUrl: string,
+ agentId: string,
+ sessionId: string
+ ) =>
+ `${PlaygroundApiUrl}/v1/playground/agents/${agentId}/sessions/${sessionId}`,
+
+ DeletePlaygroundSession: (
+ PlaygroundApiUrl: string,
+ agentId: string,
+ sessionId: string
+ ) =>
+ `${PlaygroundApiUrl}/v1/playground/agents/${agentId}/sessions/${sessionId}`
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..ee1309022eb61c3fe0b4ac20bd99ab09e763ce96
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000000000000000000000000000000000000..c9e9f1b8f1577ae46094894b306861a1dad192c5
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --color-border-default: 255, 255, 255, 0.2;
+ --scrollbar-width: 0.1rem;
+ }
+
+ body {
+ @apply bg-background/80 text-secondary;
+ }
+}
+
+::-webkit-scrollbar {
+ width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-thumb {
+ --tw-border-opacity: 1;
+ @apply bg-border;
+ border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+ border-radius: 9999px;
+ border-width: 1px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: transparent;
+ border-radius: 9999px;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dacc1cfb30dced186703aa17a4b51a2d856f216d
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,37 @@
+import type { Metadata } from 'next'
+import { DM_Mono, Geist } from 'next/font/google'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { Toaster } from '@/components/ui/sonner'
+import './globals.css'
+const geistSans = Geist({
+ variable: '--font-geist-sans',
+ weight: '400',
+ subsets: ['latin']
+})
+
+const dmMono = DM_Mono({
+ subsets: ['latin'],
+ variable: '--font-dm-mono',
+ weight: '400'
+})
+
+export const metadata: Metadata = {
+ title: 'Agent UI',
+ description:
+ 'A modern chat interface for AI agents built with Next.js, Tailwind CSS, and TypeScript. This template provides a ready-to-use UI for interacting with Agno agents.'
+}
+
+export default function RootLayout({
+ children
+}: Readonly<{
+ children: React.ReactNode
+}>) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9bf075cee99f20f55f4a28bc141353a6e916da09
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,15 @@
+'use client'
+import Sidebar from '@/components/playground/Sidebar/Sidebar'
+import { ChatArea } from '@/components/playground/ChatArea'
+import { Suspense } from 'react'
+
+export default function Home() {
+ return (
+ Loading...}>
+
+
+
+
+
+ )
+}
diff --git a/src/components/playground/ChatArea/ChatArea.tsx b/src/components/playground/ChatArea/ChatArea.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5caf751d01b404eda96a3644a8a7a2642be17ddf
--- /dev/null
+++ b/src/components/playground/ChatArea/ChatArea.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import ChatInput from './ChatInput'
+import MessageArea from './MessageArea'
+const ChatArea = () => {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default ChatArea
diff --git a/src/components/playground/ChatArea/ChatInput/ChatInput.tsx b/src/components/playground/ChatArea/ChatInput/ChatInput.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..94c9e00df9c3b77c6604513220ade58acb4c6e2d
--- /dev/null
+++ b/src/components/playground/ChatArea/ChatInput/ChatInput.tsx
@@ -0,0 +1,68 @@
+'use client'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { TextArea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { usePlaygroundStore } from '@/store'
+import useAIChatStreamHandler from '@/hooks/useAIStreamHandler'
+import { useQueryState } from 'nuqs'
+import Icon from '@/components/ui/icon'
+
+const ChatInput = () => {
+ const { chatInputRef } = usePlaygroundStore()
+
+ const { handleStreamResponse } = useAIChatStreamHandler()
+ const [selectedAgent] = useQueryState('agent')
+ const [inputMessage, setInputMessage] = useState('')
+ const isStreaming = usePlaygroundStore((state) => state.isStreaming)
+ const handleSubmit = async () => {
+ if (!inputMessage.trim()) return
+
+ const currentMessage = inputMessage
+ setInputMessage('')
+
+ try {
+ await handleStreamResponse(currentMessage)
+ } catch (error) {
+ toast.error(
+ `Error in handleSubmit: ${
+ error instanceof Error ? error.message : String(error)
+ }`
+ )
+ }
+ }
+
+ return (
+
+