create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/model-selector.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from "@/components/ai-elements/model-selector";
+import { Button } from "@/components/ui/button";
+import { CheckIcon } from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const models = [
+  {
+    chef: "OpenAI",
+    chefSlug: "openai",
+    id: "gpt-4o",
+    name: "GPT-4o",
+    providers: ["openai", "azure"],
+  },
+  {
+    chef: "OpenAI",
+    chefSlug: "openai",
+    id: "gpt-4o-mini",
+    name: "GPT-4o Mini",
+    providers: ["openai", "azure"],
+  },
+  {
+    chef: "OpenAI",
+    chefSlug: "openai",
+    id: "o1",
+    name: "o1",
+    providers: ["openai", "azure"],
+  },
+  {
+    chef: "OpenAI",
+    chefSlug: "openai",
+    id: "o1-mini",
+    name: "o1 Mini",
+    providers: ["openai", "azure"],
+  },
+  {
+    chef: "Anthropic",
+    chefSlug: "anthropic",
+    id: "claude-opus-4-20250514",
+    name: "Claude 4 Opus",
+    providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"],
+  },
+  {
+    chef: "Anthropic",
+    chefSlug: "anthropic",
+    id: "claude-sonnet-4-20250514",
+    name: "Claude 4 Sonnet",
+    providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"],
+  },
+  {
+    chef: "Anthropic",
+    chefSlug: "anthropic",
+    id: "claude-3.5-sonnet",
+    name: "Claude 3.5 Sonnet",
+    providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"],
+  },
+  {
+    chef: "Anthropic",
+    chefSlug: "anthropic",
+    id: "claude-3.5-haiku",
+    name: "Claude 3.5 Haiku",
+    providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"],
+  },
+  {
+    chef: "Google",
+    chefSlug: "google",
+    id: "gemini-2.0-flash-exp",
+    name: "Gemini 2.0 Flash",
+    providers: ["google", "google-vertex"],
+  },
+  {
+    chef: "Google",
+    chefSlug: "google",
+    id: "gemini-1.5-pro",
+    name: "Gemini 1.5 Pro",
+    providers: ["google", "google-vertex"],
+  },
+  {
+    chef: "Google",
+    chefSlug: "google",
+    id: "gemini-1.5-flash",
+    name: "Gemini 1.5 Flash",
+    providers: ["google", "google-vertex"],
+  },
+  {
+    chef: "Meta",
+    chefSlug: "llama",
+    id: "llama-3.3-70b",
+    name: "Llama 3.3 70B",
+    providers: ["groq", "togetherai", "amazon-bedrock"],
+  },
+  {
+    chef: "Meta",
+    chefSlug: "llama",
+    id: "llama-3.1-405b",
+    name: "Llama 3.1 405B",
+    providers: ["togetherai", "amazon-bedrock"],
+  },
+  {
+    chef: "Meta",
+    chefSlug: "llama",
+    id: "llama-3.1-70b",
+    name: "Llama 3.1 70B",
+    providers: ["groq", "togetherai", "amazon-bedrock"],
+  },
+  {
+    chef: "Meta",
+    chefSlug: "llama",
+    id: "llama-3.1-8b",
+    name: "Llama 3.1 8B",
+    providers: ["groq", "togetherai"],
+  },
+  {
+    chef: "DeepSeek",
+    chefSlug: "deepseek",
+    id: "deepseek-r1",
+    name: "DeepSeek R1",
+    providers: ["deepseek", "openrouter"],
+  },
+  {
+    chef: "DeepSeek",
+    chefSlug: "deepseek",
+    id: "deepseek-v3",
+    name: "DeepSeek V3",
+    providers: ["deepseek", "openrouter"],
+  },
+  {
+    chef: "DeepSeek",
+    chefSlug: "deepseek",
+    id: "deepseek-coder-v2",
+    name: "DeepSeek Coder V2",
+    providers: ["deepseek", "openrouter"],
+  },
+  {
+    chef: "Mistral AI",
+    chefSlug: "mistral",
+    id: "mistral-large",
+    name: "Mistral Large",
+    providers: ["mistral", "azure"],
+  },
+  {
+    chef: "Mistral AI",
+    chefSlug: "mistral",
+    id: "mistral-small",
+    name: "Mistral Small",
+    providers: ["mistral", "azure"],
+  },
+  {
+    chef: "Mistral AI",
+    chefSlug: "mistral",
+    id: "codestral",
+    name: "Codestral",
+    providers: ["mistral"],
+  },
+  {
+    chef: "Alibaba",
+    chefSlug: "alibaba",
+    id: "qwen-2.5-72b",
+    name: "Qwen 2.5 72B",
+    providers: ["alibaba", "openrouter"],
+  },
+  {
+    chef: "Alibaba",
+    chefSlug: "alibaba",
+    id: "qwen-2.5-coder-32b",
+    name: "Qwen 2.5 Coder 32B",
+    providers: ["alibaba", "openrouter"],
+  },
+  {
+    chef: "Alibaba",
+    chefSlug: "alibaba",
+    id: "qwen-max",
+    name: "Qwen Max",
+    providers: ["alibaba"],
+  },
+  {
+    chef: "Cohere",
+    chefSlug: "cohere",
+    id: "command-r-plus",
+    name: "Command R+",
+    providers: ["cohere", "azure", "amazon-bedrock"],
+  },
+  {
+    chef: "Cohere",
+    chefSlug: "cohere",
+    id: "command-r",
+    name: "Command R",
+    providers: ["cohere", "azure", "amazon-bedrock"],
+  },
+  {
+    chef: "xAI",
+    chefSlug: "xai",
+    id: "grok-3",
+    name: "Grok 3",
+    providers: ["xai"],
+  },
+  {
+    chef: "xAI",
+    chefSlug: "xai",
+    id: "grok-2-1212",
+    name: "Grok 2 1212",
+    providers: ["xai"],
+  },
+  {
+    chef: "xAI",
+    chefSlug: "xai",
+    id: "grok-vision",
+    name: "Grok Vision",
+    providers: ["xai"],
+  },
+  {
+    chef: "Moonshot AI",
+    chefSlug: "moonshotai",
+    id: "moonshot-v1-128k",
+    name: "Moonshot v1 128K",
+    providers: ["moonshotai"],
+  },
+  {
+    chef: "Moonshot AI",
+    chefSlug: "moonshotai",
+    id: "moonshot-v1-32k",
+    name: "Moonshot v1 32K",
+    providers: ["moonshotai"],
+  },
+  {
+    chef: "Perplexity",
+    chefSlug: "perplexity",
+    id: "sonar-pro",
+    name: "Sonar Pro",
+    providers: ["perplexity"],
+  },
+  {
+    chef: "Perplexity",
+    chefSlug: "perplexity",
+    id: "sonar",
+    name: "Sonar",
+    providers: ["perplexity"],
+  },
+  {
+    chef: "Vercel",
+    chefSlug: "v0",
+    id: "v0-chat",
+    name: "v0 Chat",
+    providers: ["vercel"],
+  },
+  {
+    chef: "Amazon",
+    chefSlug: "amazon-bedrock",
+    id: "nova-pro",
+    name: "Nova Pro",
+    providers: ["amazon-bedrock"],
+  },
+  {
+    chef: "Amazon",
+    chefSlug: "amazon-bedrock",
+    id: "nova-lite",
+    name: "Nova Lite",
+    providers: ["amazon-bedrock"],
+  },
+  {
+    chef: "Amazon",
+    chefSlug: "amazon-bedrock",
+    id: "nova-micro",
+    name: "Nova Micro",
+    providers: ["amazon-bedrock"],
+  },
+];
+
+interface ModelItemProps {
+  model: (typeof models)[0];
+  selectedModel: string;
+  onSelect: (id: string) => void;
+}
+
+const ModelItem = memo(({ model, selectedModel, onSelect }: ModelItemProps) => {
+  const handleSelect = useCallback(() => onSelect(model.id), [onSelect, model.id]);
+  return (
+    <ModelSelectorItem key={model.id} onSelect={handleSelect} value={model.id}>
+      <ModelSelectorLogo provider={model.chefSlug} />
+      <ModelSelectorName>{model.name}</ModelSelectorName>
+      <ModelSelectorLogoGroup>
+        {model.providers.map((provider) => (
+          <ModelSelectorLogo key={provider} provider={provider} />
+        ))}
+      </ModelSelectorLogoGroup>
+      {selectedModel === model.id ? (
+        <CheckIcon className="ml-auto size-4" />
+      ) : (
+        <div className="ml-auto size-4" />
+      )}
+    </ModelSelectorItem>
+  );
+});
+
+ModelItem.displayName = "ModelItem";
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedModel, setSelectedModel] = useState<string>("gpt-4o");
+
+  const handleModelSelect = useCallback((id: string) => {
+    setSelectedModel(id);
+    setOpen(false);
+  }, []);
+
+  const selectedModelData = models.find((model) => model.id === selectedModel);
+
+  // Get unique chefs in order of appearance
+  const chefs = [...new Set(models.map((model) => model.chef))];
+
+  return (
+    <div className="flex size-full items-center justify-center p-8">
+      <ModelSelector onOpenChange={setOpen} open={open}>
+        <ModelSelectorTrigger asChild>
+          <Button className="w-[200px] justify-between" variant="outline">
+            {selectedModelData?.chefSlug && (
+              <ModelSelectorLogo provider={selectedModelData.chefSlug} />
+            )}
+            {selectedModelData?.name && (
+              <ModelSelectorName>{selectedModelData.name}</ModelSelectorName>
+            )}
+          </Button>
+        </ModelSelectorTrigger>
+        <ModelSelectorContent>
+          <ModelSelectorInput placeholder="Search models..." />
+          <ModelSelectorList>
+            <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+            {chefs.map((chef) => (
+              <ModelSelectorGroup heading={chef} key={chef}>
+                {models
+                  .filter((model) => model.chef === chef)
+                  .map((model) => (
+                    <ModelItem
+                      key={model.id}
+                      model={model}
+                      onSelect={handleModelSelect}
+                      selectedModel={selectedModel}
+                    />
+                  ))}
+              </ModelSelectorGroup>
+            ))}
+          </ModelSelectorList>
+        </ModelSelectorContent>
+      </ModelSelector>
+    </div>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/open-in-chat.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  OpenIn,
+  OpenInChatGPT,
+  OpenInClaude,
+  OpenInContent,
+  OpenInCursor,
+  OpenInScira,
+  OpenInT3,
+  OpenInTrigger,
+  OpenInv0,
+} from "@/components/ai-elements/open-in-chat";
+
+const Example = () => {
+  const sampleQuery = "How can I implement authentication in Next.js?";
+
+  return (
+    <OpenIn>
+      <OpenInTrigger />
+      <OpenInContent>
+        <OpenInChatGPT query={sampleQuery} />
+        <OpenInClaude query={sampleQuery} />
+        <OpenInCursor query={sampleQuery} />
+        <OpenInT3 query={sampleQuery} />
+        <OpenInScira query={sampleQuery} />
+        <OpenInv0 query={sampleQuery} />
+      </OpenInContent>
+    </OpenIn>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/package-info.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  PackageInfo,
+  PackageInfoChangeType,
+  PackageInfoContent,
+  PackageInfoDependencies,
+  PackageInfoDependency,
+  PackageInfoDescription,
+  PackageInfoHeader,
+  PackageInfoName,
+  PackageInfoVersion,
+} from "@/components/ai-elements/package-info";
+
+const Example = () => (
+  <div className="flex flex-col gap-4">
+    <PackageInfo changeType="major" currentVersion="18.2.0" name="react" newVersion="19.0.0">
+      <PackageInfoHeader>
+        <PackageInfoName />
+        <PackageInfoChangeType />
+      </PackageInfoHeader>
+      <PackageInfoVersion />
+      <PackageInfoDescription>
+        A JavaScript library for building user interfaces.
+      </PackageInfoDescription>
+      <PackageInfoContent>
+        <PackageInfoDependencies>
+          <PackageInfoDependency name="react-dom" version="^19.0.0" />
+          <PackageInfoDependency name="scheduler" version="^0.24.0" />
+        </PackageInfoDependencies>
+      </PackageInfoContent>
+    </PackageInfo>
+
+    <PackageInfo changeType="added" name="lodash">
+      <PackageInfoHeader>
+        <PackageInfoName />
+        <PackageInfoChangeType />
+      </PackageInfoHeader>
+      <PackageInfoVersion />
+    </PackageInfo>
+
+    <PackageInfo changeType="removed" currentVersion="2.29.4" name="moment" />
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/persona-command.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type { PersonaState } from "@/components/ai-elements/persona";
+import type { LucideIcon } from "lucide-react";
+
+import { Persona } from "@/components/ai-elements/persona";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { BrainIcon, CircleIcon, EyeClosedIcon, MegaphoneIcon, MicIcon } from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const states: {
+  state: PersonaState;
+  icon: LucideIcon;
+  label: string;
+}[] = [
+  {
+    icon: CircleIcon,
+    label: "Idle",
+    state: "idle",
+  },
+  {
+    icon: MicIcon,
+    label: "Listening",
+    state: "listening",
+  },
+  {
+    icon: BrainIcon,
+    label: "Thinking",
+    state: "thinking",
+  },
+  {
+    icon: MegaphoneIcon,
+    label: "Speaking",
+    state: "speaking",
+  },
+  {
+    icon: EyeClosedIcon,
+    label: "Asleep",
+    state: "asleep",
+  },
+];
+
+interface StateButtonProps {
+  state: (typeof states)[0];
+  currentState: PersonaState;
+  onStateChange: (state: PersonaState) => void;
+}
+
+const StateButton = memo(({ state, currentState, onStateChange }: StateButtonProps) => {
+  const handleClick = useCallback(() => onStateChange(state.state), [onStateChange, state.state]);
+  return (
+    <Tooltip key={state.state}>
+      <TooltipTrigger asChild>
+        <Button
+          onClick={handleClick}
+          size="icon-sm"
+          variant={currentState === state.state ? "default" : "outline"}
+        >
+          <state.icon className="size-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{state.label}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+StateButton.displayName = "StateButton";
+
+const Example = () => {
+  const [currentState, setCurrentState] = useState<PersonaState>("idle");
+
+  const handleStateChange = useCallback((state: PersonaState) => {
+    setCurrentState(state);
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <Persona className="size-32" state={currentState} variant="command" />
+
+      <ButtonGroup orientation="horizontal">
+        {states.map((state) => (
+          <StateButton
+            currentState={currentState}
+            key={state.state}
+            onStateChange={handleStateChange}
+            state={state}
+          />
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/persona-glint.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type { PersonaState } from "@/components/ai-elements/persona";
+import type { LucideIcon } from "lucide-react";
+
+import { Persona } from "@/components/ai-elements/persona";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { BrainIcon, CircleIcon, EyeClosedIcon, MegaphoneIcon, MicIcon } from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const states: {
+  state: PersonaState;
+  icon: LucideIcon;
+  label: string;
+}[] = [
+  {
+    icon: CircleIcon,
+    label: "Idle",
+    state: "idle",
+  },
+  {
+    icon: MicIcon,
+    label: "Listening",
+    state: "listening",
+  },
+  {
+    icon: BrainIcon,
+    label: "Thinking",
+    state: "thinking",
+  },
+  {
+    icon: MegaphoneIcon,
+    label: "Speaking",
+    state: "speaking",
+  },
+  {
+    icon: EyeClosedIcon,
+    label: "Asleep",
+    state: "asleep",
+  },
+];
+
+interface StateButtonProps {
+  state: (typeof states)[0];
+  currentState: PersonaState;
+  onStateChange: (state: PersonaState) => void;
+}
+
+const StateButton = memo(({ state, currentState, onStateChange }: StateButtonProps) => {
+  const handleClick = useCallback(() => onStateChange(state.state), [onStateChange, state.state]);
+  return (
+    <Tooltip key={state.state}>
+      <TooltipTrigger asChild>
+        <Button
+          onClick={handleClick}
+          size="icon-sm"
+          variant={currentState === state.state ? "default" : "outline"}
+        >
+          <state.icon className="size-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{state.label}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+StateButton.displayName = "StateButton";
+
+const Example = () => {
+  const [currentState, setCurrentState] = useState<PersonaState>("idle");
+
+  const handleStateChange = useCallback((state: PersonaState) => {
+    setCurrentState(state);
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <Persona className="size-32" state={currentState} variant="glint" />
+
+      <ButtonGroup orientation="horizontal">
+        {states.map((state) => (
+          <StateButton
+            currentState={currentState}
+            key={state.state}
+            onStateChange={handleStateChange}
+            state={state}
+          />
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Example;