hide templates feature from UI and agent

Remove template library drawer, template chips, template tools registration,
and template-related agent state fields. Component files are kept in the
codebase for future re-enablement.

Closes #59

Author: GeneralJerel

apps/agent/main.py

@@ -18,13 +18,12 @@
 from src.query import query_data
 from src.todos import AgentState, todo_tools
 from src.form import generate_form
-from src.templates import template_tools
 
 load_dotenv()
 
 agent = create_deep_agent(
     model=ChatOpenAI(model=os.environ.get("LLM_MODEL", "gpt-5.4-2026-03-05")),
-    tools=[query_data, *todo_tools, generate_form, *template_tools],
+    tools=[query_data, *todo_tools, generate_form],
     middleware=[CopilotKitMiddleware()],
     context_schema=AgentState,
     skills=[str(Path(__file__).parent / "skills")],
@@ -67,27 +66,6 @@
 
         **Critical**: `<script type="module">` is REQUIRED when using import map libraries. Regular `<script>` tags cannot use `import` statements.
 
-        ## UI Templates
-
-        Users can save generated UIs as reusable templates and apply them later.
-        You have backend tools: `save_template`, `list_templates`, `apply_template`, `delete_template`.
-
-        **When a user asks to apply/recreate a template with new data:**
-        Check `pending_template` in state — the frontend sets this when the user picks a template.
-        If `pending_template` is present (has `id` and `name`):
-        1. Call `apply_template(template_id=pending_template["id"])` to retrieve the HTML
-        2. Take the returned HTML and COPY IT EXACTLY, only replacing the data values
-           (names, numbers, dates, labels, amounts) to match the user's message
-        3. Render the modified HTML using `widgetRenderer`
-        4. Call `clear_pending_template` to reset the pending state
-
-        If no `pending_template` is set but the user mentions a template by name, use
-        `apply_template(name="...")` instead.
-
-        CRITICAL: Do NOT rewrite or generate HTML from scratch. Take the original HTML string,
-        find-and-replace ONLY the data values, and pass the result to widgetRenderer.
-        This preserves the exact layout and styling of the original template.
-        For bar/pie chart templates, use `barChart` or `pieChart` component instead.
     """,
 )
 

apps/agent/src/todos.py

@@ -2,26 +2,18 @@
 from langchain.tools import ToolRuntime, tool
 from langchain.messages import ToolMessage
 from langgraph.types import Command
-from typing import Optional, TypedDict, Literal
+from typing import TypedDict, Literal
 import uuid
 
-from src.templates import UITemplate
-
 class Todo(TypedDict):
     id: str
     title: str
     description: str
     emoji: str
     status: Literal["pending", "completed"]
 
-class PendingTemplate(TypedDict, total=False):
-    id: str
-    name: str
-
 class AgentState(BaseAgentState):
     todos: list[Todo]
-    templates: list[UITemplate]
-    pending_template: Optional[PendingTemplate]
 
 @tool
 def manage_todos(todos: list[Todo], runtime: ToolRuntime) -> Command:

apps/app/src/app/page.tsx

@@ -1,20 +1,16 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
-import { TemplateLibrary } from "@/components/template-library";
-import { TemplateChip } from "@/components/template-library/template-chip";
 
 import { CopilotChat } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
-  const [templateDrawerOpen, setTemplateDrawerOpen] = useState(false);
-
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -60,23 +56,6 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-2">
-                {/* Template Library toggle */}
-                <button
-                  onClick={() => setTemplateDrawerOpen(true)}
-                  className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
-                  style={{
-                    color: "var(--text-secondary)",
-                    border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-                    background: "var(--surface-primary, rgba(255,255,255,0.6))",
-                    fontFamily: "var(--font-family)",
-                  }}
-                  title="Open Template Library"
-                >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
-                  </svg>
-                  Templates
-                </button>
                 <a
                   href="https://github.com/CopilotKit/OpenGenerativeUI"
                   target="_blank"
@@ -105,14 +84,6 @@ export default function HomePage() {
         </div>
       </div>
 
-      {/* Template chip — portal renders above chat input */}
-      <TemplateChip />
-
-      {/* Template Library Drawer */}
-      <TemplateLibrary
-        open={templateDrawerOpen}
-        onClose={() => setTemplateDrawerOpen(false)}
-      />
     </>
   );
 }

apps/app/src/components/demo-gallery/demo-data.ts

@@ -0,0 +1,127 @@
+export type DemoCategory =
+  | "3D / Animation"
+  | "Data Visualization"
+  | "Diagrams"
+  | "Interactive"
+  | "UI Components";
+
+export interface DemoItem {
+  id: string;
+  title: string;
+  description: string;
+  category: DemoCategory;
+  emoji: string;
+  prompt: string;
+  html?: string;
+}
+
+export const DEMO_EXAMPLES: DemoItem[] = [
+  {
+    id: "demo-pitch-roll-yaw",
+    title: "Pitch, Roll & Yaw",
+    description:
+      "Interactive 3D airplane in Three.js explaining pitch, roll, and yaw with control buttons",
+    category: "3D / Animation",
+    emoji: "✈️",
+    prompt:
+      "Create a 3D plane in Three.js to explain how pitch, roll, and yaw work. Give me buttons to control each axis. Add labels showing which rotation is which.",
+  },
+  {
+    id: "demo-weather",
+    title: "Weather Card",
+    description:
+      "Current weather conditions with temperature, humidity, wind, and UV index",
+    category: "UI Components",
+    emoji: "🌤️",
+    prompt:
+      "Create a beautiful weather card showing current conditions for San Francisco with temperature, humidity, wind speed, UV index, and a 5-day mini forecast.",
+  },
+  {
+    id: "demo-binary-search",
+    title: "Binary Search",
+    description:
+      "Step-by-step visualization of binary search on a sorted array",
+    category: "Diagrams",
+    emoji: "🔍",
+    prompt:
+      "Visualize how binary search works on a sorted list. Step by step with animation. Show the high, low, and mid pointers moving.",
+  },
+  {
+    id: "demo-solar-system",
+    title: "Solar System",
+    description:
+      "3D solar system with orbiting planets you can click for facts",
+    category: "3D / Animation",
+    emoji: "🪐",
+    prompt:
+      "Build a 3D solar system with orbiting planets using Three.js. Let me click on each planet to see facts about it. Include realistic relative sizes and orbital speeds.",
+  },
+  {
+    id: "demo-dashboard",
+    title: "KPI Dashboard",
+    description:
+      "Quarterly performance dashboard with metrics cards and bar chart",
+    category: "Data Visualization",
+    emoji: "📊",
+    prompt:
+      "Create a KPI dashboard showing Q1 2026 performance with revenue, active users, and conversion rate. Include a monthly revenue bar chart and trend indicators.",
+  },
+  {
+    id: "demo-sorting",
+    title: "Sorting Comparison",
+    description:
+      "Animated side-by-side comparison of bubble sort vs quicksort",
+    category: "Diagrams",
+    emoji: "📶",
+    prompt:
+      "Create an animated comparison of bubble sort vs quicksort running side by side on the same random array. Add speed controls and a step counter.",
+  },
+  {
+    id: "demo-pomodoro",
+    title: "Pomodoro Timer",
+    description:
+      "Focus timer with circular progress ring, session counter, and controls",
+    category: "Interactive",
+    emoji: "🍅",
+    prompt:
+      "Build a Pomodoro timer with a circular progress ring, start/pause/reset buttons, and a session counter. Use 25 min work / 5 min break intervals. Make it look clean and minimal.",
+  },
+  {
+    id: "demo-neural-network",
+    title: "Neural Network",
+    description:
+      "Interactive neural network diagram with animated forward pass",
+    category: "Diagrams",
+    emoji: "🧠",
+    prompt:
+      "Visualize a simple neural network with input, hidden, and output layers. Animate the forward pass showing data flowing through the network. Let me adjust the number of neurons per layer.",
+  },
+  {
+    id: "demo-invoice",
+    title: "Invoice Card",
+    description:
+      "Compact invoice card with amount, client info, and action buttons",
+    category: "UI Components",
+    emoji: "🧾",
+    prompt:
+      "Create an invoice card showing a monthly billing summary with client name, amount due, invoice number, and send/expand action buttons.",
+  },
+  {
+    id: "demo-music-visualizer",
+    title: "Music Equalizer",
+    description:
+      "Audio equalizer visualization with animated frequency bars and controls",
+    category: "3D / Animation",
+    emoji: "🎵",
+    prompt:
+      "Create a music equalizer visualization with animated bars that respond to frequency sliders. Add controls for bass, mid, and treble. Use a gradient color scheme.",
+  },
+];
+
+export const DEMO_CATEGORIES: DemoCategory[] = [
+  "3D / Animation",
+  "Data Visualization",
+  "Diagrams",
+  "Interactive",
+  "UI Components",
+];

apps/app/src/components/demo-gallery/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { DEMO_EXAMPLES, type DemoCategory, type DemoItem } from "./demo-data";
+import { DemoCard } from "./demo-card";
+import { CategoryFilter } from "./category-filter";
+
+interface DemoGalleryProps {
+  onTryDemo: (demo: DemoItem) => void;
+}
+
+export function DemoGallery({ onTryDemo }: DemoGalleryProps) {
+  const [selectedCategory, setSelectedCategory] =
+    useState<DemoCategory | null>(null);
+
+  const filtered = selectedCategory
+    ? DEMO_EXAMPLES.filter((d) => d.category === selectedCategory)
+    : DEMO_EXAMPLES;
+
+  return (
+    <div className="flex flex-col gap-4 h-full overflow-hidden">
+      {/* Header */}
+      <div className="flex flex-col gap-3 px-6 pt-6 shrink-0">
+        <div>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: "var(--text-primary, #1a1a1a)" }}
+          >
+            Demo Gallery
+          </h2>
+          <p
+            className="text-xs mt-0.5"
+            style={{ color: "var(--text-secondary, #666)" }}
+          >
+            Click any demo to try it with the AI agent
+          </p>
+        </div>
+        <CategoryFilter
+          selected={selectedCategory}
+          onSelect={setSelectedCategory}
+        />
+      </div>
+
+      {/* Grid */}
+      <div className="flex-1 overflow-y-auto px-6 pb-6">
+        <div
+          className="grid gap-4"
+          style={{
+            gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+          }}
+        >
+          {filtered.map((demo) => (
+            <DemoCard key={demo.id} demo={demo} onTry={onTryDemo} />
+          ))}
+        </div>
+
+        {filtered.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-16 gap-2">
+            <p
+              className="text-sm font-medium"
+              style={{ color: "var(--text-secondary, #666)" }}
+            >
+              No demos in this category
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}