domitriusclark

Ecommerce Storefront Generation Recipe

Use as-is. Replace Inputs. Keep identifiers, paths, and events unchanged.

Inputs

Brand Name: "<YOUR BRAND NAME>"
Aesthetic Theme: "<YOUR AESTHETIC THEME>"
Reference Sites:

domitriusclark

npm create @tanstack/start@latest

domitriusclark

npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

domitriusclark

git add -A && git commit -m "initial commit of our demo"

domitriusclark

gh repo create -s=. --public --push

domitriusclark

netlify deploy --create-site <your-site-name> --prod

domitriusclark

// src/routes/api/chat.ts
// We'll need to import createFileRoute from Tanstack Router
import { createFileRoute } from "@tanstack/react-router"
import { chat, toStreamResponse } from "@tanstack/ai";
import { openai } from "@tanstack/ai-openai";

// Then we'll wrap the POST request in the expected shell using createFileRoute

export const Route = createFileRoute("/api/chat")({
  server: {

domitriusclark

// components/Chat.tsx
import { useState } from "react";
import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";

export function Chat() {
  const [input, setInput] = useState("");

  const { messages, sendMessage, isLoading } = useChat({
    connection: fetchServerSentEvents("/api/chat"),
  });

domitriusclark

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'
import { Chat } from '../components/Chat'
export const Route = createFileRoute('/')({ component: App })

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 text-white">
      <Chat />
    </div>