create-gentiq-app 0.7.27 → 0.7.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-gentiq-app",
-  "version": "0.7.27",
+  "version": "0.7.28",
   "description": "CLI to scaffold a new Gentiq application",
   "type": "module",
   "bin": {

package/templates/starter/backend/main.py

@@ -1,12 +1,18 @@
+import asyncio
+import random
 from dataclasses import dataclass
+from typing import Annotated
 
-from fastapi import APIRouter
-from pydantic_ai import Agent
+from fastapi import APIRouter, Depends
+from pydantic_ai import Agent, RunContext
 
 from gentiq import (
     AgentDeps,
     GentiqApp,
+    ProgressUpdateEvent,
+    User,
     create_title_agent,
+    get_current_user,
 )
 
 
@@ -14,7 +20,7 @@ from gentiq import (
 @dataclass
 class AppContext:
     # Add any application-specific state here (e.g. user preferences, active project Id)
-    pass
+    user_city: str = "London"
 
 
 # 2. Define custom agent with specified context type
@@ -25,16 +31,51 @@ You are a helpful AI assistant.
 agent = Agent[AgentDeps[AppContext]](name="agent", instructions=instructions, model="openai:gpt-5.1")
 
 
-# 3. Add custom tools
-# @agent.tool
-# async def my_tool(ctx: RunContext[AgentDeps[AppContext]], param: str) -> str:
-#     """
-#     A tool description goes here.
-#     """
-#     return f"Processed {param}"
+# 3. Add custom tools that leverage the user context via deps.context
+@agent.tool
+async def get_weather(ctx: RunContext[AgentDeps[AppContext]], city: str | None = None) -> dict:
+    """
+    Get weather of the specified city or if not specified, the user's location
+    """
+    city = city or ctx.deps.context.user_city
 
+    await ctx.deps.stream(
+        ProgressUpdateEvent(
+            tool_name=ctx.tool_name or "get_weather",
+            status="running",
+            message=f"Getting weather for {city}...",
+        )
+    )
 
-# 4. Initialize the core backend framework application
+    # simulate network delay
+    await asyncio.sleep(1)
+
+    choices = ["sunny", "rainy", "snowy", "windy"]
+    condition = random.choice(choices)
+
+    await ctx.deps.stream(
+        ProgressUpdateEvent(
+            tool_name=ctx.tool_name or "get_weather",
+            status="completed",
+            message=f"Weather fetched for {city}",
+        )
+    )
+
+    return {
+        "city": city,
+        "condition": condition,
+    }
+
+
+# 4. Add user's info in the instructions
+@agent.instructions
+def add_user_info(ctx: RunContext[AgentDeps[AppContext]]) -> str | None:
+    user_info = "Here's additional info about the current user you're talking to:\n"
+    user_info += f"User's name is `{ctx.deps.user.name} {ctx.deps.user.surname}`"
+    return user_info
+
+
+# 5. Initialize the core backend framework application with the agent and its context
 # The framework automatically injects internal Stores into AgentDeps
 app = GentiqApp[AppContext](
     agent,
@@ -47,12 +88,14 @@ app = GentiqApp[AppContext](
 )
 
 
-# 5. (Optional) Extend the API with custom routes protected by Gentiq's authentication
+# 6. Extend the API with custom routes protected by Gentiq's authentication
 custom_router = APIRouter()
 
-# @custom_router.get("/my-custom-endpoint")
-# async def my_endpoint(user: Annotated[User, Depends(get_current_user)]):
-#     return {"message": f"Hello {user.name}!"}
+
+@custom_router.get("/my-custom-endpoint")
+async def my_endpoint(user: Annotated[User, Depends(get_current_user)]):
+    return {"message": f"Hello {user.name}, this is a custom extension endpoint."}
+
 
 app.add_router(custom_router, prefix="/ext", tags=["Extensions"])
 

package/templates/starter/backend/pyproject.toml

@@ -5,7 +5,7 @@ description = ""
 readme = "README.md"
 requires-python = ">=3.12"
 dependencies = [
-    "gentiq",
+    "gentiq[engines]",
 ]
 
 [tool.ruff]

package/templates/starter/frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "gentiq": "workspace:*",
+    "lucide-react": "^0.542.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.1"

package/templates/starter/frontend/src/App.tsx

@@ -1,8 +1,101 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import { GentiqProvider, ChatUI, AdminPanel, RequireAuth, UserLoginPage, SharedChatView } from 'gentiq'
-import type { GentiqComponents } from 'gentiq'
+import { GentiqProvider, ChatUI, RequireAuth, UserLoginPage, SharedChatView } from 'gentiq'
+import { AdminPanel } from 'gentiq/admin'
+import type { ToolCallComponentProps, GentiqComponents } from 'gentiq'
 import 'gentiq/style.css'
 import './index.css'
+import { Sun, CloudRain, Snowflake, Wind, Cloud, Sparkles, Lightbulb, Zap } from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Custom tool component: WeatherCard
+// Receives `part`, `message`, and `chat` — see ToolCallComponentProps.
+// ---------------------------------------------------------------------------
+const WeatherCard = ({ part }: ToolCallComponentProps) => {
+  try {
+    const result = (part as any).result || (part as any).output
+    if (!result) return null
+
+    let data: any
+    if (typeof result === 'string') {
+      try {
+        data = JSON.parse(result)
+      } catch {
+        return (
+          <div className="my-2 p-3 bg-destructive/10 text-destructive rounded-xl text-[10px] font-mono border border-destructive/20 flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-destructive animate-pulse" />
+            Invalid Weather Data: {result}
+          </div>
+        )
+      }
+    } else {
+      data = result
+    }
+
+    if (!data || typeof data !== 'object') return null
+    const { city, condition } = data
+
+    const getIcon = (size = 24) => {
+      switch (condition) {
+        case 'sunny':  return <Sun size={size} strokeWidth={2.5} className="text-amber-100" />
+        case 'rainy':  return <CloudRain size={size} strokeWidth={2.5} className="text-blue-100" />
+        case 'snowy':  return <Snowflake size={size} strokeWidth={2.5} className="text-slate-600" />
+        case 'windy':  return <Wind size={size} strokeWidth={2.5} className="text-emerald-100" />
+        default:       return <Cloud size={size} strokeWidth={2.5} className="text-indigo-100" />
+      }
+    }
+
+    const getColors = () => {
+      switch (condition) {
+        case 'sunny':  return 'from-amber-400 via-orange-500 to-rose-500'
+        case 'rainy':  return 'from-blue-600 via-indigo-700 to-violet-800'
+        case 'snowy':  return 'from-slate-100 via-blue-50 to-slate-200'
+        case 'windy':  return 'from-emerald-400 via-teal-500 to-cyan-600'
+        default:       return 'from-indigo-500 via-purple-500 to-pink-500'
+      }
+    }
+
+    const isLight = condition === 'snowy'
+
+    return (
+      <div className={`my-1.5 overflow-hidden rounded-xl shadow-lg bg-gradient-to-br ${getColors()} p-3 ${isLight ? 'text-slate-800' : 'text-white'} animate-in fade-in slide-in-from-bottom-1 duration-500 border border-white/10 backdrop-blur-md max-w-sm w-fit min-w-[280px]`}>
+        <div className="flex items-center gap-4">
+          <div className="relative group flex-shrink-0">
+            <div className={`absolute inset-0 blur-xl opacity-30 scale-125 ${isLight ? 'bg-slate-400' : 'bg-white'}`}>
+              {getIcon(32)}
+            </div>
+            <div className="relative drop-shadow-md">{getIcon(36)}</div>
+          </div>
+
+          <div className="flex-grow min-w-0">
+            <div className="flex items-baseline justify-between gap-2">
+              <h3 className="text-base font-black tracking-tight truncate leading-tight">{city}</h3>
+              <span className="text-xl font-black leading-none tabular-nums shrink-0">24°C</span>
+            </div>
+            <div className="flex items-center gap-3 mt-1">
+              <div className="flex items-center gap-1.5 min-w-0">
+                <div className={`w-1 h-1 rounded-full shrink-0 ${isLight ? 'bg-slate-500/50' : 'bg-white/50'}`} />
+                <p className="capitalize text-[10px] font-bold tracking-wide opacity-80 truncate">{condition}</p>
+              </div>
+              <div className={`flex items-center gap-2 border-l ${isLight ? 'border-slate-800/10' : 'border-white/10'} pl-3 shrink-0`}>
+                <div className="flex flex-col items-center">
+                  <span className={`text-[8px] uppercase ${isLight ? 'opacity-40' : 'opacity-60'} font-black leading-none`}>Hum</span>
+                  <span className="text-[10px] font-black leading-tight">42%</span>
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className={`text-[8px] uppercase ${isLight ? 'opacity-40' : 'opacity-60'} font-black leading-none`}>UV</span>
+                  <span className="text-[10px] font-black leading-tight">Low</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  } catch (err) {
+    console.error('WeatherCard error:', err)
+    return null
+  }
+}
 
 // ---------------------------------------------------------------------------
 // Auth adapter
@@ -21,10 +114,9 @@ const LocalStorageAuthAdapter = {
 // Component overrides registered through the unified GentiqComponents map.
 // ---------------------------------------------------------------------------
 const appComponents: GentiqComponents = {
-  // Add your custom tool components here:
-  // toolComponents: {
-  //   my_tool_name: MyCustomToolComponent,
-  // },
+  toolComponents: {
+    get_weather: WeatherCard,
+  },
 }
 
 // ---------------------------------------------------------------------------
@@ -39,10 +131,23 @@ export default function App() {
         favicon: "/favicon.svg",
         basePath: "/chat",
         cacheNamespace: "my_app_cache",
-        // Example: Add custom fields to user profiles and signup
-        // userMetadataFields: [
-        //   { key: 'grade', label: 'settings:profile.grade', type: 'select', options: [...], showInSignup: true, showInProfile: true }
-        // ]
+        showToolDetails: false,
+        showSettings: true,
+        userMetadataFields: [
+          {
+            key: 'job_position',
+            label: 'settings:profile.job_position',
+            type: 'select',
+            options: [
+              { label: 'settings:profile.job_position_options.manager', value: 'manager' },
+              { label: 'settings:profile.job_position_options.developer', value: 'developer' },
+              { label: 'settings:profile.job_position_options.other', value: 'other' }
+            ],
+            showInSignup: true,
+            showInProfile: true,
+            required: true,
+          }
+        ]
       }}
       api={{
         authAdapter: LocalStorageAuthAdapter,
@@ -56,15 +161,19 @@ export default function App() {
         showShare: true
       }}
       welcome={{
-        greeting: "chat.welcome.title",
-        prompts: [] // Add initial quick prompts here
+        greeting: "chat:welcome.greeting",
+        prompts: [
+          { text: 'chat:welcome.suggestion.features', icon: Sparkles },
+          { text: 'chat:welcome.suggestion.tools', icon: Zap },
+          { text: 'chat:welcome.suggestion.weather', icon: Sun }
+        ]
       }}
       threadActions={{
         feedback: true,
         retry: true,
       }}
       composer={{
-        placeholder: "chat.input_placeholder",
+        placeholder: "chat:input_placeholder",
         attachments: {
           enabled: true,
           maxSize: 10 * 1024 * 1024, // 10MB
@@ -72,18 +181,95 @@ export default function App() {
         }
       }}
       theme={{
+        typography: { 
+          fontFamily: {
+            en: 'Lato',
+            fa: 'Vazirmatn'
+          }
+        },
         radius: 16,
         accent: '#3c85f1',
       }}
+      disclaimer="chat:disclaimer"
       i18n={{
         resources: {
           en: { 
             chat: { 
-              input_placeholder: 'Type your message...',
+              input_placeholder: 'Type your query to the AI...',
+              disclaimer: "AI can make mistakes! Check important information.",
               welcome: {
-                title: "Hello! How can I help you today?",
+                greeting: "How can I help you today?",
+                suggestion: {
+                  features: "What things can you do?",
+                  tools: "Tell me an unbelievable fact!",
+                  weather: "How is the weather in my area?"
+                }
               }
             },
+            settings: {
+              profile: {
+                job_position: "Job Position",
+                job_position_options: {
+                  manager: "Manager",
+                  developer: "Developer",
+                  other: "Other"
+                }
+              }
+            }
+          },
+          fa: { 
+            chat: { 
+              input_placeholder: 'هر چی میخوای ازم بپرس',
+              disclaimer: "هوش مصنوعی می‌تواند اشتباه کند! اطلاعات مهم را بررسی کنید.",
+              welcome: {
+                greeting: "چطور می‌تونم امروز بهت کمک کنم؟",
+                suggestion: {
+                  features: "چه کارهایی میتونی انجام بدی؟",
+                  tools: "یه حقیقت باورنکردنی بگو!",
+                  weather: "هوا سمت من چطوره؟"
+                }
+              }
+            },
+            settings: {
+              profile: {
+                job_position: "سمت شغلی",
+                job_position_options: {
+                  manager: "مدیر",
+                  developer: "توسعه‌دهنده",
+                  other: "سایر موارد"
+                }
+              }
+            }
+          },
+        }
+      }}
+      settings={{
+        sections: {
+          general: {
+            enabled: true,
+            fields: {
+              theme: 'editable',
+              accent: 'editable',
+              radius: 'editable',
+              language: 'editable',
+            }
+          },
+          profile: {
+            enabled: true,
+            fields: {
+              name: 'editable',
+              surname: 'editable',
+              phone: 'editable',
+              password: 'editable',
+              job_position: 'editable',
+            }
+          },
+          account: {
+            enabled: true,
+            fields: {
+              balance: 'editable',
+              logout: 'editable',
+            }
           }
         }
       }}