From 9a980f2f9fcc713f4da8d5b556d8a155bd45ed34 Mon Sep 17 00:00:00 2001
From: arkml <arkm85@gmail.com>
Date: Mon, 11 Aug 2025 23:46:30 +0530
Subject: [PATCH] Project modals (#190)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added the project create and select modals

* Added logo and link to home page

* minor changes to side bar

* added import json and blank template options

* added website like home page

* change homepage to be more like website

* fixed landing page text box

* minor size changes to the home page

* added prebuilt agents section

* Minor changes to the prebuilt agent card

* removed the project selection and new project options from side bar

* fixed prebuilt agents

* fixed import json

* my assistants has pagination

* add dark mode support to home page

* addressed review comments

* increase build agents textbox lines

* fixed PR comments

* move prebuilt assistant under build view

* minor changes to home page

* minor changes to home page

* removed my assistants from side bar

* removed sidebar items

* fixed review comments

* fixed review comments

* Add "use client" directive to project-creation-utils.ts

This file uses localStorage and calls server actions directly, requiring client-side execution.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix import of pipeline agents

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 apps/rowboat/app/actions/project_actions.ts   |  14 +-
 .../app/components/ui/textarea-with-send.tsx  |  78 +++
 apps/rowboat/app/projects/app.tsx             |  46 +-
 .../components/build-assistant-section.tsx    | 467 ++++++++++++++++++
 .../projects/components/create-project.tsx    | 119 +++--
 .../projects/components/templates-section.tsx | 145 ++++++
 .../projects/layout/components/sidebar.tsx    | 266 +++++++---
 .../projects/lib/project-creation-utils.ts    | 121 +++++
 8 files changed, 1092 insertions(+), 164 deletions(-)
 create mode 100644 apps/rowboat/app/components/ui/textarea-with-send.tsx
 create mode 100644 apps/rowboat/app/projects/components/build-assistant-section.tsx
 create mode 100644 apps/rowboat/app/projects/components/templates-section.tsx
 create mode 100644 apps/rowboat/app/projects/lib/project-creation-utils.ts

diff --git a/apps/rowboat/app/actions/project_actions.ts b/apps/rowboat/app/actions/project_actions.ts
index 2cb425e4..3f54db97 100644
--- a/apps/rowboat/app/actions/project_actions.ts
+++ b/apps/rowboat/app/actions/project_actions.ts
@@ -20,6 +20,17 @@ const KLAVIS_API_KEY = process.env.KLAVIS_API_KEY || '';
 
 const projectActionAuthorizationPolicy = container.resolve<IProjectActionAuthorizationPolicy>('projectActionAuthorizationPolicy');
 
+export async function listTemplates() {
+    const templatesArray = Object.entries(templates)
+        .filter(([key]) => key !== 'default') // Exclude the default template
+        .map(([key, template]) => ({
+            id: key,
+            ...template
+        }));
+    
+    return templatesArray;
+}
+
 export async function projectAuthCheck(projectId: string) {
     if (!USE_AUTH) {
         return;
@@ -115,11 +126,12 @@ export async function createProjectFromWorkflowJson(formData: FormData): Promise
     const name = formData.get('name') as string | null;
 
     const workflowJson = formData.get('workflowJson') as string;
-    const { agents, prompts, tools, startAgent } = Workflow.parse(workflowJson);
+    const { agents, prompts, tools, pipelines, startAgent } = Workflow.parse(JSON.parse(workflowJson));
     const response = await createBaseProject(name || 'Imported project', user, {
         agents,
         prompts,
         tools,
+        pipelines,
         startAgent,
         lastUpdatedAt: (new Date()).toISOString(),
     });
diff --git a/apps/rowboat/app/components/ui/textarea-with-send.tsx b/apps/rowboat/app/components/ui/textarea-with-send.tsx
new file mode 100644
index 00000000..96531554
--- /dev/null
+++ b/apps/rowboat/app/components/ui/textarea-with-send.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { Send } from 'lucide-react';
+import clsx from 'clsx';
+
+interface TextareaWithSendProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  isSubmitting?: boolean;
+  submitDisabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  rows?: number;
+  autoFocus?: boolean;
+  autoResize?: boolean;
+}
+
+export const TextareaWithSend = forwardRef<HTMLTextAreaElement, TextareaWithSendProps>(
+  ({ 
+    value, 
+    onChange, 
+    onSubmit, 
+    isSubmitting = false, 
+    submitDisabled = false,
+    placeholder,
+    className,
+    rows = 3,
+    autoFocus = false,
+    autoResize = false,
+    ...props 
+  }, ref) => {
+    return (
+      <div className="relative">
+        <Textarea
+          ref={ref}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className={clsx("pr-14", className)}
+          rows={rows}
+          autoFocus={autoFocus}
+          autoResize={autoResize}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              onSubmit();
+            }
+          }}
+          {...props}
+        />
+        <div className="absolute right-3 bottom-3">
+          <button
+            onClick={onSubmit}
+            disabled={isSubmitting || submitDisabled || !value.trim()}
+            className={clsx(
+              "rounded-full p-2 transition-all duration-200",
+              value.trim()
+                ? "bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:hover:bg-indigo-800/60 dark:text-indigo-300"
+                : "bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500",
+              isSubmitting ? "opacity-50" : "hover:scale-105 active:scale-95"
+            )}
+          >
+            {isSubmitting ? (
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-current"></div>
+            ) : (
+              <Send size={18} />
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+TextareaWithSend.displayName = 'TextareaWithSend';
\ No newline at end of file
diff --git a/apps/rowboat/app/projects/app.tsx b/apps/rowboat/app/projects/app.tsx
index db85968b..312fa161 100644
--- a/apps/rowboat/app/projects/app.tsx
+++ b/apps/rowboat/app/projects/app.tsx
@@ -4,17 +4,14 @@ import { Project } from "../lib/types/project_types";
 import { useEffect, useState } from "react";
 import { z } from "zod";
 import { listProjects } from "../actions/project_actions";
-import { USE_MULTIPLE_PROJECTS } from "@/app/lib/feature_flags";
-import { SearchProjects } from "./components/search-projects";
-import { CreateProject } from "./components/create-project";
-import clsx from 'clsx';
+import { BuildAssistantSection } from "./components/build-assistant-section";
+
 
 export default function App() {
     const [projects, setProjects] = useState<z.infer<typeof Project>[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [isProjectPaneOpen, setIsProjectPaneOpen] = useState(false);
     const [defaultName, setDefaultName] = useState('Assistant 1');
 
+
     const getNextAssistantNumber = (projects: z.infer<typeof Project>[]) => {
         const untitledProjects = projects
             .map(p => p.name)
@@ -32,22 +29,16 @@ export default function App() {
         let ignore = false;
 
         async function fetchProjects() {
-            setIsLoading(true);
             const projects = await listProjects();
             if (!ignore) {
-                const sortedProjects = [...projects].sort((a, b) => 
+                const sortedProjects = [...projects].sort((a, b) =>
                     new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
                 );
-                
+
                 setProjects(sortedProjects);
-                setIsLoading(false);
                 const nextNumber = getNextAssistantNumber(sortedProjects);
                 const newDefaultName = `Assistant ${nextNumber}`;
                 setDefaultName(newDefaultName);
-                // Default open project pane if there is at least one project
-                if (sortedProjects.length > 0) {
-                    setIsProjectPaneOpen(true);
-                }
             }
         }
 
@@ -59,29 +50,8 @@ export default function App() {
     }, []);
 
     return (
-        <div className="flex gap-8 px-16 pt-8">
-            {USE_MULTIPLE_PROJECTS && isProjectPaneOpen && (
-                <div className="w-1/3 min-w-[300px] max-w-[400px]">
-                    <SearchProjects
-                        projects={projects}
-                        isLoading={isLoading}
-                        heading="Select existing assistant"
-                        className="h-full"
-                        onClose={() => setIsProjectPaneOpen(false)}
-                    />
-                </div>
-            )}
-
-            <div className={clsx(
-                "flex-1",
-                !isProjectPaneOpen && "w-full",
-            )}>
-                <CreateProject
-                    defaultName={defaultName}
-                    onOpenProjectPane={() => setIsProjectPaneOpen(true)}
-                    isProjectPaneOpen={isProjectPaneOpen}
-                />
-            </div>
+        <div className="min-h-screen bg-white dark:bg-gray-900">
+            <BuildAssistantSection defaultName={defaultName} />
         </div>
     );
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/apps/rowboat/app/projects/components/build-assistant-section.tsx b/apps/rowboat/app/projects/components/build-assistant-section.tsx
new file mode 100644
index 00000000..c5be3a41
--- /dev/null
+++ b/apps/rowboat/app/projects/components/build-assistant-section.tsx
@@ -0,0 +1,467 @@
+'use client';
+
+import { useState, useRef, useEffect } from "react";
+import { listTemplates, listProjects } from "@/app/actions/project_actions";
+import { createProjectWithOptions, createProjectFromJsonWithOptions, createProjectFromTemplate } from "../lib/project-creation-utils";
+import { useRouter } from 'next/navigation';
+import clsx from 'clsx';
+import Image from 'next/image';
+import mascotImage from '/public/mascot.png';
+import { Button } from "@/components/ui/button";
+import { Upload, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { TextareaWithSend } from "@/app/components/ui/textarea-with-send";
+import { Workflow } from '../../lib/types/workflow_types';
+import { PictureImg } from '@/components/ui/picture-img';
+import { Tabs, Tab } from "@/components/ui/tabs";
+import { Project } from "@/app/lib/types/project_types";
+import { z } from "zod";
+import Link from 'next/link';
+
+
+
+interface BuildAssistantSectionProps {
+    defaultName: string;
+}
+
+const ITEMS_PER_PAGE = 6;
+
+export function BuildAssistantSection({ defaultName }: BuildAssistantSectionProps) {
+    const [userPrompt, setUserPrompt] = useState('');
+    const [isCreating, setIsCreating] = useState(false);
+    const [promptError, setPromptError] = useState<string | null>(null);
+    const [importLoading, setImportLoading] = useState(false);
+    const [importError, setImportError] = useState<string | null>(null);
+    const [templates, setTemplates] = useState<any[]>([]);
+    const [templatesLoading, setTemplatesLoading] = useState(false);
+    const [templatesError, setTemplatesError] = useState<string | null>(null);
+    const [projects, setProjects] = useState<z.infer<typeof Project>[]>([]);
+    const [projectsLoading, setProjectsLoading] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [selectedTab, setSelectedTab] = useState('new');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const router = useRouter();
+
+    const totalPages = Math.ceil(projects.length / ITEMS_PER_PAGE);
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    const currentProjects = projects.slice(startIndex, endIndex);
+
+    // Extract unique tools from template - using same approach as ToolkitCard
+    const getUniqueTools = (template: any) => {
+        if (!template.tools) return [];
+
+        const uniqueToolsMap = new Map();
+        template.tools.forEach((tool: any) => {
+            if (!uniqueToolsMap.has(tool.name)) {
+                // Include all tools, following the same pattern as Composio toolkit cards
+                const toolData = {
+                    name: tool.name,
+                    isComposio: tool.isComposio,
+                    isLibrary: tool.isLibrary,
+                    logo: tool.isComposio && tool.composioData?.logo ? tool.composioData.logo : null,
+                };
+
+                uniqueToolsMap.set(tool.name, toolData);
+            }
+        });
+
+        return Array.from(uniqueToolsMap.values()).filter(tool => tool.logo); // Only show tools with logos like ToolkitCard
+    };
+
+    const fetchTemplates = async () => {
+        setTemplatesLoading(true);
+        setTemplatesError(null);
+        try {
+            const templatesArray = await listTemplates();
+            setTemplates(templatesArray);
+        } catch (error) {
+            console.error('Error fetching templates:', error);
+            setTemplatesError(error instanceof Error ? error.message : 'Failed to load templates');
+        } finally {
+            setTemplatesLoading(false);
+        }
+    };
+
+    // Handle template selection
+    const handleTemplateSelect = async (templateId: string, templateName: string) => {
+        await createProjectFromTemplate(templateId, templateName, router);
+    };
+
+    const fetchProjects = async () => {
+        setProjectsLoading(true);
+        try {
+            const projectsList = await listProjects();
+            const sortedProjects = [...projectsList].sort((a, b) =>
+                new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+            );
+            setProjects(sortedProjects);
+        } catch (error) {
+            console.error('Error fetching projects:', error);
+        } finally {
+            setProjectsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchTemplates();
+        fetchProjects();
+    }, []);
+
+    const handleCreateAssistant = async () => {
+        if (!userPrompt.trim()) {
+            setPromptError("Prompt cannot be empty");
+            return;
+        }
+
+        setIsCreating(true);
+        try {
+            await createProjectWithOptions({
+                name: defaultName,
+                prompt: userPrompt,
+                router,
+                onError: (error) => {
+                    console.error('Error creating project:', error);
+                }
+            });
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    // Import JSON functionality
+    const handleImportJsonClick = () => {
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+            setTimeout(() => {
+                fileInputRef.current?.click();
+            }, 0);
+        }
+    };
+
+    // Handle file selection
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) {
+            return;
+        }
+        setImportLoading(true);
+        setImportError(null);
+        try {
+            const text = await file.text();
+            let parsed = Workflow.safeParse(JSON.parse(text));
+            if (!parsed.success) {
+                setImportError('Invalid workflow JSON: ' + JSON.stringify(parsed.error.issues));
+                setImportLoading(false);
+                return;
+            }
+
+            // Create project from imported JSON
+            await createProjectFromJsonWithOptions({
+                name: defaultName,
+                workflowJson: text,
+                router,
+                onError: (error) => {
+                    setImportError(error instanceof Error ? error.message : String(error));
+                }
+            });
+        } catch (err) {
+            setImportError('Invalid JSON: ' + (err instanceof Error ? err.message : String(err)));
+        } finally {
+            setImportLoading(false);
+        }
+    };
+
+    // Handle "I'll build it myself" button
+    const handleBuildItMyself = async () => {
+        await createProjectWithOptions({
+            name: defaultName,
+            template: 'default',
+            router
+        });
+    };
+
+    return (
+        <>
+            <input
+                ref={fileInputRef}
+                type="file"
+                accept="application/json"
+                className="hidden"
+                onChange={handleFileChange}
+            />
+            <div className="px-8 py-16">
+                <div className="max-w-7xl mx-auto">
+                    {/* Main Headline */}
+                    <div className="text-center mb-16">
+                        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6 leading-tight">
+                            Build <span className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">Rowboats</span> that Work for You
+                        </h1>
+                    </div>
+
+                    {/* Tabs Section */}
+                    <div className="max-w-5xl mx-auto">
+                        <div className="p-6 pb-0">
+                            <Tabs defaultSelectedKey="new" selectedKey={selectedTab} onSelectionChange={(key) => setSelectedTab(key as string)} className="w-full">
+                                <Tab key="new" title="New Assistant">
+                                    <div className="pt-4">
+                                        <div className="flex items-center gap-12">
+                                            {/* Mascot */}
+                                            <div className="flex-shrink-0">
+                                                <Image
+                                                    src={mascotImage}
+                                                    alt="Rowboat Mascot"
+                                                    width={200}
+                                                    height={200}
+                                                    className="w-[200px] h-[200px] object-contain"
+                                                />
+                                            </div>
+
+                                            {/* Input Area */}
+                                            <div className="flex-1">
+                                                <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
+                                                    <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                                                        Hey! What agents can I build for you?
+                                                    </h2>
+                                                    <div className="relative group flex flex-col">
+                                                    <TextareaWithSend
+                                                        value={userPrompt}
+                                                        onChange={(value) => {
+                                                            setUserPrompt(value);
+                                                            setPromptError(null);
+                                                        }}
+                                                        onSubmit={handleCreateAssistant}
+                                                        isSubmitting={isCreating}
+                                                        placeholder="Example: build me an AI SDR agent..."
+                                                        className={clsx(
+                                                            "w-full rounded-lg p-3 border border-gray-200 dark:border-gray-700",
+                                                            "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750",
+                                                            "focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20",
+                                                            "placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-all duration-200",
+                                                            "text-base text-gray-900 dark:text-gray-100 min-h-32",
+                                                            promptError && "border-red-500 focus:ring-red-500/20",
+                                                            !userPrompt && "animate-pulse border-2 border-indigo-500/40 dark:border-indigo-400/40 shadow-lg shadow-indigo-500/20 dark:shadow-indigo-400/20"
+                                                        )}
+                                                        rows={3}
+                                                        autoFocus
+                                                        autoResize
+                                                    />
+                                                    {promptError && (
+                                                        <p className="text-sm text-red-500 m-0 mt-2">
+                                                            {promptError}
+                                                        </p>
+                                                    )}
+                                                </div>
+
+                                                {/* Separation line with OR */}
+                                                <div className="relative my-3">
+                                                    <div className="absolute inset-0 flex items-center">
+                                                        <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
+                                                    </div>
+                                                    <div className="relative flex justify-center text-sm">
+                                                        <span className="bg-white dark:bg-gray-800 px-3 text-gray-500 dark:text-gray-400">OR</span>
+                                                    </div>
+                                                </div>
+
+                                                {/* Action buttons */}
+                                                <div className="flex gap-3 justify-start">
+                                                    <Button
+                                                        variant="primary"
+                                                        size="sm"
+                                                        onClick={handleImportJsonClick}
+                                                        type="button"
+                                                        startContent={<Upload size={14} />}
+                                                        className="bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
+                                                        disabled={importLoading}
+                                                    >
+                                                        {importLoading ? 'Importing...' : 'Import JSON'}
+                                                    </Button>
+                                                    <Button
+                                                        variant="primary"
+                                                        size="sm"
+                                                        onClick={handleBuildItMyself}
+                                                        type="button"
+                                                        className="bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
+                                                    >
+                                                        Go to Builder
+                                                    </Button>
+                                                </div>
+
+                                                {importError && (
+                                                    <p className="text-sm text-red-500 mt-2">
+                                                        {importError}
+                                                    </p>
+                                                )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </Tab>
+                                <Tab key="existing" title="My Assistants">
+                                    <div className="pt-4">
+                                        <div className="h-96 flex flex-col bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-4">
+                                            {projectsLoading ? (
+                                                <div className="flex items-center justify-center h-full text-sm text-gray-500 dark:text-gray-400">
+                                                    Loading assistants...
+                                                </div>
+                                            ) : projects.length === 0 ? (
+                                                <div className="flex items-center justify-center h-full text-sm text-gray-500 dark:text-gray-400">
+                                                    No assistants found. Create your first assistant to get started!
+                                                </div>
+                                            ) : (
+                                                <>
+                                                    <div className="flex-1 overflow-y-auto">
+                                                        <div className="space-y-2">
+                                                            {currentProjects.map((project) => (
+                                                                <Link
+                                                                    key={project._id}
+                                                                    href={`/projects/${project._id}/workflow`}
+                                                                    className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-300 dark:hover:border-blue-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all group hover:shadow-sm"
+                                                                >
+                                                                    <div className="flex-1 min-w-0">
+                                                                        <div className="flex items-center gap-3">
+                                                                            <div className="w-2 h-2 rounded-full bg-green-500 opacity-75 flex-shrink-0"></div>
+                                                                            <div className="flex-1 min-w-0">
+                                                                                <div className="font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">
+                                                                                    {project.name}
+                                                                                </div>
+                                                                                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                                                                                    Created {new Date(project.createdAt).toLocaleDateString()} • Last updated {new Date(project.lastUpdatedAt).toLocaleDateString()}
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div className="flex-shrink-0 ml-4">
+                                                                        <div className="text-xs text-gray-400 dark:text-gray-500">
+                                                                            →
+                                                                        </div>
+                                                                    </div>
+                                                                </Link>
+                                                            ))}
+                                                        </div>
+                                                    </div>
+
+                                                    {totalPages > 1 && (
+                                                        <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700 mt-4">
+                                                            <button
+                                                                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                                                                disabled={currentPage === 1}
+                                                                className={clsx(
+                                                                    "p-2 rounded-md transition-colors",
+                                                                    "text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400",
+                                                                    "disabled:opacity-50 disabled:cursor-not-allowed",
+                                                                    "hover:bg-gray-100 dark:hover:bg-gray-700"
+                                                                )}
+                                                            >
+                                                                <ChevronLeftIcon className="w-5 h-5" />
+                                                            </button>
+                                                            <span className="text-sm text-gray-600 dark:text-gray-400">
+                                                                Page {currentPage} of {totalPages} ({projects.length} assistants)
+                                                            </span>
+                                                            <button
+                                                                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                                                                disabled={currentPage === totalPages}
+                                                                className={clsx(
+                                                                    "p-2 rounded-md transition-colors",
+                                                                    "text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400",
+                                                                    "disabled:opacity-50 disabled:cursor-not-allowed",
+                                                                    "hover:bg-gray-100 dark:hover:bg-gray-700"
+                                                                )}
+                                                            >
+                                                                <ChevronRightIcon className="w-5 h-5" />
+                                                            </button>
+                                                        </div>
+                                                    )}
+                                                </>
+                                            )}
+                                        </div>
+                                    </div>
+                                </Tab>
+                            </Tabs>
+                        </div>
+                    </div>
+
+                    {/* Pre-built Assistants Section - Only show for New Assistant tab */}
+                    {selectedTab === 'new' && (
+                        <div className="max-w-5xl mx-auto mt-16">
+                        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
+                            <div className="text-left mb-6">
+                                <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                                    Pre-built Assistants
+                                </h2>
+                            </div>
+                            {templatesLoading ? (
+                                <div className="flex items-center justify-center py-12 text-sm text-gray-500 dark:text-gray-400">
+                                    Loading pre-built assistants...
+                                </div>
+                            ) : templatesError ? (
+                                <div className="flex items-center justify-center py-12 text-sm text-red-500 dark:text-red-400">
+                                    Error: {templatesError}
+                                </div>
+                            ) : templates.length === 0 ? (
+                                <div className="flex items-center justify-center py-12 text-sm text-gray-500 dark:text-gray-400">
+                                    No pre-built assistants available
+                                </div>
+                            ) : (
+                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                                    {templates.map((template) => (
+                                        <button
+                                            key={template.id}
+                                            onClick={() => handleTemplateSelect(template.id, template.name)}
+                                            className="block p-4 border border-gray-200 dark:border-gray-700 rounded-xl hover:border-blue-300 dark:hover:border-blue-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all group hover:shadow-md text-left"
+                                        >
+                                            <div className="space-y-2">
+                                                <div className="font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-1">
+                                                    {template.name}
+                                                </div>
+                                                <div className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+                                                    {template.description}
+                                                </div>
+
+                                                {/* Tool logos */}
+                                                {(() => {
+                                                    const tools = getUniqueTools(template);
+                                                    return tools.length > 0 && (
+                                                        <div className="flex items-center gap-2 mt-2">
+                                                            <div className="text-xs text-gray-400 dark:text-gray-500">
+                                                                Tools:
+                                                            </div>
+                                                            <div className="flex items-center gap-1">
+                                                                {tools.slice(0, 4).map((tool) => (
+                                                                    tool.logo && (
+                                                                        <PictureImg
+                                                                            key={tool.name}
+                                                                            src={tool.logo}
+                                                                            alt={`${tool.name} logo`}
+                                                                            className="w-4 h-4 rounded-sm object-cover flex-shrink-0"
+                                                                            title={tool.name}
+                                                                        />
+                                                                    )
+                                                                ))}
+                                                                {tools.length > 4 && (
+                                                                    <span className="text-xs text-gray-400 dark:text-gray-500">
+                                                                        +{tools.length - 4}
+                                                                    </span>
+                                                                )}
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })()}
+
+                                                <div className="flex items-center justify-between mt-2">
+                                                    <div className="text-xs text-gray-400 dark:text-gray-500">
+                                                    </div>
+                                                    <div className="w-2 h-2 rounded-full bg-blue-500 opacity-75"></div>
+                                                </div>
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/rowboat/app/projects/components/create-project.tsx b/apps/rowboat/app/projects/components/create-project.tsx
index 931dd80e..a54cb057 100644
--- a/apps/rowboat/app/projects/components/create-project.tsx
+++ b/apps/rowboat/app/projects/components/create-project.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState, useRef } from "react";
-import { createProject, createProjectFromWorkflowJson } from "@/app/actions/project_actions";
+import { createProjectWithOptions, createProjectFromJsonWithOptions } from "../lib/project-creation-utils";
 import { useRouter, useSearchParams } from 'next/navigation';
 import clsx from 'clsx';
 import { Textarea } from "@/components/ui/textarea";
@@ -128,9 +128,10 @@ interface CreateProjectProps {
     defaultName: string;
     onOpenProjectPane: () => void;
     isProjectPaneOpen: boolean;
+    hideHeader?: boolean;
 }
 
-export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpen }: CreateProjectProps) {
+export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpen, hideHeader = false }: CreateProjectProps) {
     const [selectedTab, setSelectedTab] = useState<TabState>(TabType.Describe);
     const [customPrompt, setCustomPrompt] = useState("");
     const [name, setName] = useState(defaultName);
@@ -168,26 +169,17 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
             if ((urlPrompt || urlTemplate) && !importLoading && !autoCreateLoading) {
                 setAutoCreateLoading(true);
                 try {
-                    const formData = new FormData();
-                    
-                    // If template is provided, use it
-                    if (urlTemplate) {
-                        formData.append('template', urlTemplate);
-                    }
-                    
-                    const response = await createProject(formData);
-                    
-                    if ('id' in response) {
-                        // Store prompt in localStorage if provided
-                        if (urlPrompt) {
-                            localStorage.setItem(`project_prompt_${response.id}`, urlPrompt);
+                    await createProjectWithOptions({
+                        name: 'New Assistant', // Default name for auto-creation
+                        template: urlTemplate || undefined,
+                        prompt: urlPrompt || undefined,
+                        router,
+                        onError: (error) => {
+                            // Auto-creation failed, show the form instead
+                            setBillingError(error instanceof Error ? error.message : String(error));
+                            setAutoCreateLoading(false);
                         }
-                        router.push(`/projects/${response.id}/workflow`);
-                    } else {
-                        // Auto-creation failed, show the form instead
-                        setBillingError(response.billingError);
-                        setAutoCreateLoading(false);
-                    }
+                    });
                 } catch (error) {
                     console.error('Error auto-creating project:', error);
                     setAutoCreateLoading(false);
@@ -288,43 +280,47 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
         try {
             if (importedJson) {
                 // Use imported JSON
-                const formData = new FormData();
-                formData.append('name', name);
-                formData.append('workflowJson', importedJson);
-                const response = await createProjectFromWorkflowJson(formData);
-                if ('id' in response) {
-                    router.push(`/projects/${response.id}/workflow`);
-                } else {
-                    setBillingError(response.billingError);
-                }
+                await createProjectFromJsonWithOptions({
+                    name,
+                    workflowJson: importedJson,
+                    router,
+                    onError: (error) => {
+                        setBillingError(error instanceof Error ? error.message : String(error));
+                    }
+                });
                 return;
             }
+            
             if (!customPrompt.trim()) {
                 setPromptError("Prompt cannot be empty");
                 return;
             }
-            const newFormData = new FormData();
-            newFormData.append('name', name);
             
-            // If template is provided via URL, use it
-            if (urlTemplate) {
-                newFormData.append('template', urlTemplate);
-            }
-            
-            const response = await createProject(newFormData);
-            if ('id' in response) {
-                if (customPrompt) {
-                    localStorage.setItem(`project_prompt_${response.id}`, customPrompt);
+            await createProjectWithOptions({
+                name,
+                template: urlTemplate || undefined,
+                prompt: customPrompt,
+                router,
+                onError: (error) => {
+                    setBillingError(error instanceof Error ? error.message : String(error));
                 }
-                router.push(`/projects/${response.id}/workflow`);
-            } else {
-                setBillingError(response.billingError);
-            }
+            });
         } catch (error) {
             console.error('Error creating project:', error);
         }
     }
 
+    async function handleSubmitWithTemplate(template: string) {
+        await createProjectWithOptions({
+            name,
+            template,
+            router,
+            onError: (error) => {
+                setBillingError(error instanceof Error ? error.message : String(error));
+            }
+        });
+    }
+
     return (
         <>
             <input
@@ -344,7 +340,7 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
                     !USE_MULTIPLE_PROJECTS && "px-24",
                     USE_MULTIPLE_PROJECTS && "px-8"
                 )}>
-                    {USE_MULTIPLE_PROJECTS && (
+                    {USE_MULTIPLE_PROJECTS && !hideHeader && (
                         <>
                             <div className="px-4 pt-4 pb-6 flex justify-between items-center">
                                 <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
@@ -477,17 +473,40 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
                                                         </p>
                                                     )}
                                                 </div>
-                                                {/* Import JSON button always below the main input, left-aligned, when no file is selected */}
-                                                <div className="mt-2">
+                                                
+                                                {/* Separation line with OR */}
+                                                <div className="relative my-6">
+                                                    <div className="absolute inset-0 flex items-center">
+                                                        <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
+                                                    </div>
+                                                    <div className="relative flex justify-center text-sm">
+                                                        <span className="bg-white dark:bg-gray-900 px-3 text-gray-500 dark:text-gray-400">OR</span>
+                                                    </div>
+                                                </div>
+
+                                                {/* Action buttons */}
+                                                <div className="flex gap-3 justify-start">
                                                     <Button
-                                                        variant="secondary"
+                                                        variant="primary"
                                                         size="sm"
                                                         onClick={handleImportJsonClick}
                                                         type="button"
-                                                        startContent={<Upload size={16} />}
+                                                        startContent={<Upload size={14} />}
+                                                        className="bg-white dark:bg-white text-gray-900 hover:bg-gray-50 border border-gray-300 dark:border-gray-300"
                                                     >
                                                         Import JSON
                                                     </Button>
+                                                    <Button
+                                                        variant="primary"
+                                                        size="sm"
+                                                        onClick={() => {
+                                                            handleSubmitWithTemplate('default');
+                                                        }}
+                                                        type="button"
+                                                        className="bg-white dark:bg-white text-gray-900 hover:bg-gray-50 border border-gray-300 dark:border-gray-300"
+                                                    >
+                                                        I&apos;ll build it myself
+                                                    </Button>
                                                 </div>
                                             </>
                                         )}
diff --git a/apps/rowboat/app/projects/components/templates-section.tsx b/apps/rowboat/app/projects/components/templates-section.tsx
new file mode 100644
index 00000000..59fc77e5
--- /dev/null
+++ b/apps/rowboat/app/projects/components/templates-section.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { useRouter } from 'next/navigation';
+import { listTemplates } from "@/app/actions/project_actions";
+import { createProjectFromTemplate } from "../lib/project-creation-utils";
+import { PictureImg } from '@/components/ui/picture-img';
+
+interface TemplatesSectionProps {}
+
+export function TemplatesSection({}: TemplatesSectionProps) {
+    const [templates, setTemplates] = useState<any[]>([]);
+    const [templatesLoading, setTemplatesLoading] = useState(false);
+    const [templatesError, setTemplatesError] = useState<string | null>(null);
+    const router = useRouter();
+
+    // Extract unique tools from template - using same approach as ToolkitCard
+    const getUniqueTools = (template: any) => {
+        if (!template.tools) return [];
+        
+        const uniqueToolsMap = new Map();
+        template.tools.forEach((tool: any) => {
+            if (!uniqueToolsMap.has(tool.name)) {
+                // Include all tools, following the same pattern as Composio toolkit cards
+                const toolData = {
+                    name: tool.name,
+                    isComposio: tool.isComposio,
+                    isLibrary: tool.isLibrary,
+                    logo: tool.isComposio && tool.composioData?.logo ? tool.composioData.logo : null,
+                };
+                
+                uniqueToolsMap.set(tool.name, toolData);
+            }
+        });
+        
+        return Array.from(uniqueToolsMap.values()).filter(tool => tool.logo); // Only show tools with logos like ToolkitCard
+    };
+
+    const fetchTemplates = async () => {
+        setTemplatesLoading(true);
+        setTemplatesError(null);
+        try {
+            const templatesArray = await listTemplates();
+            setTemplates(templatesArray);
+        } catch (error) {
+            console.error('Error fetching templates:', error);
+            setTemplatesError(error instanceof Error ? error.message : 'Failed to load templates');
+        } finally {
+            setTemplatesLoading(false);
+        }
+    };
+
+    // Handle template selection
+    const handleTemplateSelect = async (templateId: string, templateName: string) => {
+        await createProjectFromTemplate(templateId, templateName, router);
+    };
+
+    useEffect(() => {
+        fetchTemplates();
+    }, []);
+
+    return (
+        <div className="h-screen flex flex-col px-8 py-8 overflow-hidden">
+            <div className="max-w-7xl mx-auto w-full flex flex-col h-full">
+                <div className="px-6 pb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                        Pre-built agents
+                    </h2>
+                </div>
+                <div className="px-6 flex-1 overflow-hidden">
+                        {templatesLoading ? (
+                            <div className="flex items-center justify-center h-full text-sm text-gray-500 dark:text-gray-400">
+                                Loading templates...
+                            </div>
+                        ) : templatesError ? (
+                            <div className="flex items-center justify-center h-full text-sm text-red-500 dark:text-red-400">
+                                Error: {templatesError}
+                            </div>
+                        ) : templates.length === 0 ? (
+                            <div className="flex items-center justify-center h-full text-sm text-gray-500 dark:text-gray-400">
+                                No templates available
+                            </div>
+                        ) : (
+                            <div className="h-full overflow-y-auto">
+                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-4">
+                                    {templates.map((template) => (
+                                    <button
+                                        key={template.id}
+                                        onClick={() => handleTemplateSelect(template.id, template.name)}
+                                        className="block p-4 border border-gray-200 dark:border-gray-700 rounded-xl hover:border-blue-300 dark:hover:border-blue-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all group hover:shadow-md text-left"
+                                    >
+                                        <div className="space-y-2">
+                                            <div className="font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-1">
+                                                {template.name}
+                                            </div>
+                                            <div className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+                                                {template.description}
+                                            </div>
+                                            
+                                            {/* Tool logos */}
+                                            {(() => {
+                                                const tools = getUniqueTools(template);
+                                                return tools.length > 0 && (
+                                                    <div className="flex items-center gap-2 mt-2">
+                                                        <div className="text-xs text-gray-400 dark:text-gray-500">
+                                                            Tools:
+                                                        </div>
+                                                        <div className="flex items-center gap-1">
+                                                            {tools.slice(0, 4).map((tool) => (
+                                                                tool.logo && (
+                                                                    <PictureImg
+                                                                        key={tool.name}
+                                                                        src={tool.logo}
+                                                                        alt={`${tool.name} logo`}
+                                                                        className="w-4 h-4 rounded-sm object-cover flex-shrink-0"
+                                                                        title={tool.name}
+                                                                    />
+                                                                )
+                                                            ))}
+                                                            {tools.length > 4 && (
+                                                                <span className="text-xs text-gray-400 dark:text-gray-500">
+                                                                    +{tools.length - 4}
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })()}
+                                            
+                                            <div className="flex items-center justify-between mt-2">
+                                                <div className="text-xs text-gray-400 dark:text-gray-500">
+                                                </div>
+                                                <div className="w-2 h-2 rounded-full bg-blue-500 opacity-75"></div>
+                                            </div>
+                                        </div>
+                                    </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/rowboat/app/projects/layout/components/sidebar.tsx b/apps/rowboat/app/projects/layout/components/sidebar.tsx
index 300debcf..fb2d36e1 100644
--- a/apps/rowboat/app/projects/layout/components/sidebar.tsx
+++ b/apps/rowboat/app/projects/layout/components/sidebar.tsx
@@ -1,14 +1,15 @@
 'use client';
 import { useEffect, useState } from 'react';
 import Link from "next/link";
+import Image from "next/image";
+import logoImage from '/public/logo-only.png';
 import { usePathname } from "next/navigation";
-import { Tooltip } from "@heroui/react";
+import { Tooltip, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@heroui/react";
 import { UserButton } from "@/app/lib/components/user_button";
 import { 
   SettingsIcon, 
   WorkflowIcon, 
   PlayIcon,
-  FolderOpenIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   Moon,
@@ -18,9 +19,13 @@ import {
   LogsIcon
 } from "lucide-react";
 import { getProjectConfig } from "@/app/actions/project_actions";
+import { createProjectWithOptions } from "../../lib/project-creation-utils";
 import { useTheme } from "@/app/providers/theme-provider";
 import { USE_PRODUCT_TOUR } from '@/app/lib/feature_flags';
 import { useHelpModal } from "@/app/providers/help-modal-provider";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { TextareaWithSend } from "@/app/components/ui/textarea-with-send";
 
 interface SidebarProps {
   projectId?: string;
@@ -35,10 +40,15 @@ const COLLAPSED_ICON_SIZE = 20; // DO NOT CHANGE THIS
 
 export default function Sidebar({ projectId, useAuth, collapsed = false, onToggleCollapse, useBilling }: SidebarProps) {
   const pathname = usePathname();
+  const router = useRouter();
   const [projectName, setProjectName] = useState<string>("Select Project");
+  const [assistantName, setAssistantName] = useState("");
+  const [assistantPrompt, setAssistantPrompt] = useState("");
+  const [isCreatingAssistant, setIsCreatingAssistant] = useState(false);
   const isProjectsRoute = pathname === '/projects';
   const { theme, toggleTheme } = useTheme();
   const { showHelpModal } = useHelpModal();
+  const { isOpen: isCreateModalOpen, onOpen: onCreateModalOpen, onClose: onCreateModalClose } = useDisclosure();
 
   useEffect(() => {
     async function fetchProjectName() {
@@ -55,6 +65,35 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
     fetchProjectName();
   }, [projectId, isProjectsRoute]);
 
+
+
+  const handleCreateAssistant = async () => {
+    if (!assistantPrompt.trim()) return;
+
+    setIsCreatingAssistant(true);
+    try {
+      await createProjectWithOptions({
+        name: assistantName || 'New Assistant',
+        prompt: assistantPrompt,
+        router,
+        onSuccess: () => {
+          onCreateModalClose();
+        },
+        onError: (error) => {
+          console.error('Error creating assistant:', error);
+        }
+      });
+    } finally {
+      setIsCreatingAssistant(false);
+    }
+  };
+
+  const handleCreateModalClose = () => {
+    setAssistantName("");
+    setAssistantPrompt("");
+    onCreateModalClose();
+  };
+
   const navItems = [
     {
       href: 'workflow',
@@ -82,6 +121,13 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
     }
   ];
 
+  const projectsNavItems: Array<{
+    href: string;
+    label: string;
+    icon: any;
+    requiresProject: boolean;
+  }> = [];
+
   const handleStartTour = () => {
     localStorage.removeItem('user_product_tour_completed');
     window.location.reload();
@@ -91,84 +137,86 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
     <>
       <aside className={`${collapsed ? 'w-16' : 'w-60'} bg-transparent flex flex-col h-full transition-all duration-300`}>
         <div className="flex flex-col grow">
-          {!isProjectsRoute && (
-            <>
-              {/* Project Selector */}
-              <div className="p-3 border-b border-zinc-100 dark:border-zinc-800">
-                <Tooltip content={collapsed ? projectName : "Change project"} showArrow placement="right">
-                  <Link 
-                    href="/projects"
-                    className={`
-                      flex items-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800/50 transition-all
-                      ${collapsed ? 'justify-center py-4' : 'gap-3 px-4 py-2.5'}
-                    `}
-                  >
-                    <FolderOpenIcon 
-                      size={collapsed ? COLLAPSED_ICON_SIZE : EXPANDED_ICON_SIZE} 
-                      className="text-zinc-500 dark:text-zinc-400 transition-all duration-200" 
-                    />
-                    {!collapsed && (
-                      <span className="text-sm font-medium truncate">
-                        {projectName}
-                      </span>
-                    )}
-                  </Link>
-                </Tooltip>
-              </div>
+          {/* Rowboat Logo */}
+          <div className="p-3 border-b border-zinc-100 dark:border-zinc-800">
+            <Tooltip content={collapsed ? "Rowboat" : ""} showArrow placement="right">
+              <Link
+                href="/projects"
+                className={`
+                  w-full flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800/50 transition-all
+                  ${collapsed ? 'py-3' : 'gap-3 px-4 py-2.5 justify-start'}
+                `}
+              >
+                <Image
+                  src={logoImage}
+                  alt="Rowboat"
+                  width={collapsed ? 24 : 24}
+                  height={collapsed ? 24 : 24}
+                  className="rounded-full transition-all duration-200 flex-shrink-0"
+                />
+                {!collapsed && (
+                  <span className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                    Rowboat
+                  </span>
+                )}
+              </Link>
+            </Tooltip>
+          </div>
 
-              {/* Project-specific navigation Items */}
-              {projectId && <nav className="p-3 space-y-4">
-                {navItems.map((item) => {
-                  const Icon = item.icon;
-                  const fullPath = `/projects/${projectId}/${item.href}`;
-                  const isActive = pathname.startsWith(fullPath);
-                  const isDisabled = isProjectsRoute && item.requiresProject;
-                  
-                  return (
-                    <Tooltip 
-                      key={item.href}
-                      content={collapsed ? item.label : ""}
-                      showArrow 
-                      placement="right"
+          {/* Navigation Items */}
+          <nav className="p-3 space-y-4">
+            {!isProjectsRoute && projectId && (
+              // Project-specific navigation
+              navItems.map((item) => {
+                const Icon = item.icon;
+                const fullPath = `/projects/${projectId}/${item.href}`;
+                const isActive = pathname.startsWith(fullPath);
+                const isDisabled = isProjectsRoute && item.requiresProject;
+                
+                return (
+                  <Tooltip 
+                    key={item.href}
+                    content={collapsed ? item.label : ""}
+                    showArrow 
+                    placement="right"
+                  >
+                    <Link 
+                      href={isDisabled ? '#' : fullPath}
+                      className={`
+                        relative w-full rounded-md flex items-center
+                        text-[15px] font-medium transition-all duration-200
+                        ${collapsed ? 'justify-center py-4' : 'px-2.5 py-3 gap-2.5'}
+                        ${isActive 
+                          ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-600 dark:border-indigo-400' 
+                          : isDisabled
+                            ? 'text-zinc-300 dark:text-zinc-600 cursor-not-allowed'
+                            : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-zinc-300'
+                        }
+                        ${isDisabled ? 'pointer-events-none' : ''}
+                      `}
+                      data-tour-target={item.href === 'config' ? 'settings' : item.href === 'sources' ? 'entity-data-sources' : undefined}
                     >
-                      <Link 
-                        href={isDisabled ? '#' : fullPath}
+                      <Icon 
+                        size={collapsed ? COLLAPSED_ICON_SIZE : EXPANDED_ICON_SIZE} 
                         className={`
-                          relative w-full rounded-md flex items-center
-                          text-[15px] font-medium transition-all duration-200
-                          ${collapsed ? 'justify-center py-4' : 'px-2.5 py-3 gap-2.5'}
-                          ${isActive 
-                            ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-600 dark:border-indigo-400' 
-                            : isDisabled
-                              ? 'text-zinc-300 dark:text-zinc-600 cursor-not-allowed'
-                              : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-zinc-300'
+                          transition-all duration-200
+                          ${isDisabled 
+                            ? 'text-zinc-300 dark:text-zinc-600' 
+                            : isActive
+                              ? 'text-indigo-600 dark:text-indigo-400'
+                              : 'text-zinc-500 dark:text-zinc-400'
                           }
-                          ${isDisabled ? 'pointer-events-none' : ''}
                         `}
-                        data-tour-target={item.href === 'config' ? 'settings' : item.href === 'sources' ? 'entity-data-sources' : undefined}
-                      >
-                        <Icon 
-                          size={collapsed ? COLLAPSED_ICON_SIZE : EXPANDED_ICON_SIZE} 
-                          className={`
-                            transition-all duration-200
-                            ${isDisabled 
-                              ? 'text-zinc-300 dark:text-zinc-600' 
-                              : isActive
-                                ? 'text-indigo-600 dark:text-indigo-400'
-                                : 'text-zinc-500 dark:text-zinc-400'
-                            }
-                          `}
-                        />
-                        {!collapsed && (
-                          <span>{item.label}</span>
-                        )}
-                      </Link>
-                    </Tooltip>
-                  );
-                })}
-              </nav>}
-            </>
-          )}
+                      />
+                      {!collapsed && (
+                        <span>{item.label}</span>
+                      )}
+                    </Link>
+                  </Tooltip>
+                );
+              })
+            )}
+          </nav>
         </div>
 
         {/* Bottom section */}
@@ -242,6 +290,74 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
           </div>
         </div>
       </aside>
+
+
+      {/* Create Assistant Modal */}
+      <Modal 
+        isOpen={isCreateModalOpen} 
+        onClose={handleCreateModalClose}
+        size="2xl"
+      >
+        <ModalContent>
+          <ModalHeader className="flex flex-col gap-1">
+            Create New Assistant
+          </ModalHeader>
+          <ModalBody>
+            <div className="space-y-4">
+              {/* Assistant Name Input */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Assistant Name
+                </label>
+                <input
+                  type="text"
+                  value={assistantName}
+                  onChange={(e) => setAssistantName(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                  placeholder="Assistant 1"
+                />
+              </div>
+
+              {/* Assistant Description/Prompt */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  What do you want to build?
+                </label>
+                <TextareaWithSend
+                  value={assistantPrompt}
+                  onChange={setAssistantPrompt}
+                  onSubmit={handleCreateAssistant}
+                  isSubmitting={isCreatingAssistant}
+                  placeholder="Example: Create a customer support assistant that can handle product inquiries and returns"
+                  className="w-full min-h-[120px] border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                  autoFocus
+                />
+              </div>
+
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                In the next step, our AI copilot will create agents for you, complete with mock-tools.
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant="secondary"
+              onClick={handleCreateModalClose}
+              disabled={isCreatingAssistant}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleCreateAssistant}
+              disabled={isCreatingAssistant || !assistantPrompt.trim()}
+            >
+              {isCreatingAssistant ? "Creating..." : "Create Assistant"}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
     </>
   );
 } 
\ No newline at end of file
diff --git a/apps/rowboat/app/projects/lib/project-creation-utils.ts b/apps/rowboat/app/projects/lib/project-creation-utils.ts
new file mode 100644
index 00000000..d5eb552f
--- /dev/null
+++ b/apps/rowboat/app/projects/lib/project-creation-utils.ts
@@ -0,0 +1,121 @@
+"use client";
+
+import { createProject, createProjectFromWorkflowJson } from "@/app/actions/project_actions";
+
+export interface CreateProjectOptions {
+  name: string;
+  template?: string;
+  prompt?: string;
+  router: any; // NextJS router instance
+  onSuccess?: (projectId: string) => void;
+  onError?: (error: any) => void;
+}
+
+export interface CreateProjectFromJsonOptions {
+  name: string;
+  workflowJson: string;
+  router: any; // NextJS router instance
+  onSuccess?: (projectId: string) => void;
+  onError?: (error: any) => void;
+}
+
+/**
+ * Consolidated function to create a project with consistent error handling and navigation
+ */
+export async function createProjectWithOptions(options: CreateProjectOptions): Promise<void> {
+  try {
+    const formData = new FormData();
+    formData.append('name', options.name);
+    
+    if (options.template) {
+      formData.append('template', options.template);
+    }
+
+    const response = await createProject(formData);
+    
+    if ('id' in response) {
+      // Store prompt in localStorage if provided
+      if (options.prompt?.trim()) {
+        localStorage.setItem(`project_prompt_${response.id}`, options.prompt);
+      }
+      
+      // Call success callback if provided
+      if (options.onSuccess) {
+        options.onSuccess(response.id);
+      }
+      
+      // Navigate to workflow page
+      options.router.push(`/projects/${response.id}/workflow`);
+    } else {
+      // Handle error response
+      const error = (response as any).billingError || 'Failed to create project';
+      if (options.onError) {
+        options.onError(error);
+      } else {
+        throw new Error(error);
+      }
+    }
+  } catch (error) {
+    console.error('Error creating project:', error);
+    if (options.onError) {
+      options.onError(error);
+    } else {
+      throw error;
+    }
+  }
+}
+
+/**
+ * Consolidated function to create a project from JSON workflow
+ */
+export async function createProjectFromJsonWithOptions(options: CreateProjectFromJsonOptions): Promise<void> {
+  try {
+    const formData = new FormData();
+    formData.append('name', options.name);
+    formData.append('workflowJson', options.workflowJson);
+
+    const response = await createProjectFromWorkflowJson(formData);
+    
+    if ('id' in response) {
+      // Call success callback if provided
+      if (options.onSuccess) {
+        options.onSuccess(response.id);
+      }
+      
+      // Navigate to workflow page
+      options.router.push(`/projects/${response.id}/workflow`);
+    } else {
+      // Handle error response
+      const error = (response as any).billingError || 'Failed to create project';
+      if (options.onError) {
+        options.onError(error);
+      } else {
+        throw new Error(error);
+      }
+    }
+  } catch (error) {
+    console.error('Error creating project from JSON:', error);
+    if (options.onError) {
+      options.onError(error);
+    } else {
+      throw error;
+    }
+  }
+}
+
+/**
+ * Consolidated function to create a project from template selection
+ */
+export async function createProjectFromTemplate(
+  templateId: string,
+  templateName: string,
+  router: any,
+  onError?: (error: any) => void
+): Promise<void> {
+  return createProjectWithOptions({
+    name: templateName,
+    template: templateId,
+    router,
+    onError
+  });
+}
\ No newline at end of file