feat: starter templates

added starter templates

app/components/chat/BaseChat.tsx

@@ -5,6 +5,7 @@ import styles from './BaseChat.module.scss';
 import FilePreview from './FilePreview';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
+import StarterTemplates from './StarterTemplates';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
 import { Workbench } from '~/components/workbench/Workbench.client';
@@ -245,6 +246,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     );
                   })}
                 </div>
+                <StarterTemplates />
               </div>
             )}
           </div>

app/components/chat/StarterTemplates.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+import type { Template } from '~/types/template';
+import { STARTER_TEMPLATES } from '~/utils/constants';
+
+interface FrameworkLinkProps {
+  template: Template;
+}
+
+const FrameworkLink = memo<FrameworkLinkProps>(({ template }) => (
+  <a
+    href={`/git?url=https://github.com/${template.githubRepo}.git`}
+    data-state="closed"
+    data-discover="true"
+    className="items-center justify-center"
+    target="_self"
+  >
+    <img
+      src={template.icon}
+      alt={template.label}
+      className="w-8 h-8 opacity-25 hover:opacity-75 transition-all"
+    />
+  </a>
+));
+
+const StarterTemplates = memo(() => {
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
+      <div className="flex justify-center">
+        <div className="flex w-70 flex-wrap items-center justify-center gap-4">
+          {STARTER_TEMPLATES.map((template) => (
+            <FrameworkLink key={template.name} template={template} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default StarterTemplates; 

app/components/git/GitUrlImport.client.tsx

@@ -6,7 +6,7 @@ import { ClientOnly } from 'remix-utils/client-only';
 import { BaseChat } from '~/components/chat/BaseChat';
 import { Chat } from '~/components/chat/Chat.client';
 import { useGit } from '~/lib/hooks/useGit';
-import { useChatHistory } from '~/lib/persistence';
+import { useChatHistory, chatId } from '~/lib/persistence';
 import { createCommandsMessage, detectProjectCommands } from '~/utils/projectCommands';
 
 const IGNORE_PATTERNS = [
@@ -37,6 +37,10 @@ interface GitUrlImportProps {
   initialUrl?: string;
 }
 
+function navigateChat(nextId: string) {
+  window.location.href = `/chat/${nextId}`;
+}
+
 export function GitUrlImport({ initialUrl }: GitUrlImportProps) {
   const [searchParams] = useSearchParams();
   const { ready: historyReady, importChat } = useChatHistory();
@@ -97,6 +101,12 @@ ${file.content}
         }
 
         await importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, messages);
+        
+        // Wait for the chat ID to be set
+        const id = chatId.get();
+        if (id) {
+          navigateChat(id);
+        }
       }
     }
   };

app/types/template.ts

@@ -0,0 +1,8 @@
+export interface Template {
+  name: string;
+  label: string;
+  description: string;
+  githubRepo: string;
+  tags?: string[];
+  icon?: string;
+} 

app/utils/constants.ts

@@ -1,3 +1,96 @@
 export const WORK_DIR_NAME = 'project';
 export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
 export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
+
+import type { Template } from '~/types/template';
+
+export const STARTER_TEMPLATES: Template[] = [
+  {
+    name: 'bolt-astro-basic',
+    label: 'Astro Basic',
+    description: 'Lightweight Astro starter template for building fast static websites',
+    githubRepo: 'thecodacus/bolt-astro-basic-template',
+    tags: ['astro', 'blog', 'performance'],
+    icon: '/icons/astro.svg',
+  },
+  {
+    name: 'bolt-nextjs-shadcn',
+    label: 'Next.js with shadcn/ui',
+    description: 'Next.js starter fullstack template integrated with shadcn/ui components and styling system',
+    githubRepo: 'thecodacus/bolt-nextjs-shadcn-template',
+    tags: ['nextjs', 'react', 'typescript', 'shadcn', 'tailwind'],
+    icon: '/icons/nextjs.svg',
+  },
+  {
+    name: 'bolt-qwik-ts',
+    label: 'Qwik TypeScript',
+    description: 'Qwik framework starter with TypeScript for building resumable applications',
+    githubRepo: 'thecodacus/bolt-qwik-ts-template',
+    tags: ['qwik', 'typescript', 'performance', 'resumable'],
+    icon: '/icons/qwik.svg',
+  },
+  {
+    name: 'bolt-remix-ts',
+    label: 'Remix TypeScript',
+    description: 'Remix framework starter with TypeScript for full-stack web applications',
+    githubRepo: 'thecodacus/bolt-remix-ts-template',
+    tags: ['remix', 'typescript', 'fullstack', 'react'],
+    icon: '/icons/remix.svg',
+  },
+  {
+    name: 'bolt-slidev',
+    label: 'Slidev Presentation',
+    description: 'Slidev starter template for creating developer-friendly presentations using Markdown',
+    githubRepo: 'thecodacus/bolt-slidev-template',
+    tags: ['slidev', 'presentation', 'markdown'],
+    icon: '/icons/slidev.svg',
+  },
+  {
+    name: 'bolt-sveltekit',
+    label: 'SvelteKit',
+    description: 'SvelteKit starter template for building fast, efficient web applications',
+    githubRepo: 'bolt-sveltekit-template',
+    tags: ['svelte', 'sveltekit', 'typescript'],
+    icon: '/icons/svelte.svg',
+  },
+  {
+    name: 'vanilla-vite',
+    label: 'Vanilla + Vite',
+    description: 'Minimal Vite starter template for vanilla JavaScript projects',
+    githubRepo: 'thecodacus/vanilla-vite-template',
+    tags: ['vite', 'vanilla-js', 'minimal'],
+    icon: '/icons/vite.svg',
+  },
+  {
+    name: 'bolt-vite-react',
+    label: 'React + Vite + typescript',
+    description: 'React starter template powered by Vite for fast development experience',
+    githubRepo: 'thecodacus/bolt-vite-react-ts-template',
+    tags: ['react', 'vite', 'frontend'],
+    icon: '/icons/react.svg',
+  },
+  {
+    name: 'bolt-vite-ts',
+    label: 'Vite + TypeScript',
+    description: 'Vite starter template with TypeScript configuration for type-safe development',
+    githubRepo: 'thecodacus/bolt-vite-ts-template',
+    tags: ['vite', 'typescript', 'minimal'],
+    icon: '/icons/typescript.svg',
+  },
+  {
+    name: 'bolt-vue',
+    label: 'Vue.js',
+    description: 'Vue.js starter template with modern tooling and best practices',
+    githubRepo: 'thecodacus/bolt-vue-template',
+    tags: ['vue', 'typescript', 'frontend'],
+    icon: '/icons/vue.svg',
+  },
+  {
+    name: 'bolt-angular',
+    label: 'Angular Starter',
+    description: 'A modern Angular starter template with TypeScript support and best practices configuration',
+    githubRepo: 'thecodacus/bolt-angular-template',
+    tags: ['angular', 'typescript', 'frontend', 'spa'],
+    icon: '/icons/angular.svg',
+  },
+];