create-inox-app 0.1.0

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
+const Example = () => (
+  <div className="flex flex-col gap-6 p-8">
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">Fast (1 second)</p>
+      <Shimmer duration={1}>Loading quickly...</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">Default (2 seconds)</p>
+      <Shimmer duration={2}>Loading at normal speed...</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">Slow (4 seconds)</p>
+      <Shimmer duration={4}>Loading slowly...</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">Very Slow (6 seconds)</p>
+      <Shimmer duration={6}>Loading very slowly...</Shimmer>
+    </div>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
+const Example = () => (
+  <div className="flex flex-col gap-6 p-8">
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">As paragraph (default)</p>
+      <Shimmer as="p">This is rendered as a paragraph</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">As heading</p>
+      <Shimmer as="h2" className="text-2xl font-bold">
+        Large Heading with Shimmer
+      </Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">As span (inline)</p>
+      <div>
+        Processing your request{" "}
+        <Shimmer as="span" className="inline">
+          with AI magic
+        </Shimmer>
+        ...
+      </div>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-sm text-muted-foreground">As div with custom styling</p>
+      <Shimmer as="div" className="text-lg font-semibold">
+        Custom styled shimmer text
+      </Shimmer>
+    </div>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
+const Example = () => (
+  <div className="flex flex-col items-center justify-center gap-4 p-8">
+    <Shimmer>This text has a shimmer effect</Shimmer>
+    <Shimmer as="h1" className="text-4xl font-bold">
+      Large Heading
+    </Shimmer>
+    <Shimmer duration={3} spread={3}>
+      Slower shimmer with wider spread
+    </Shimmer>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,19 @@
+"use client";
+
+import {
+  Snippet,
+  SnippetAddon,
+  SnippetCopyButton,
+  SnippetInput,
+} from "@/components/ai-elements/snippet";
+
+const Example = () => (
+  <Snippet code="git clone https://github.com/user/repo">
+    <SnippetInput />
+    <SnippetAddon align="inline-end">
+      <SnippetCopyButton />
+    </SnippetAddon>
+  </Snippet>
+);
+
+export default Example;

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

@@ -0,0 +1,25 @@
+"use client";
+
+import {
+  Snippet,
+  SnippetAddon,
+  SnippetCopyButton,
+  SnippetInput,
+  SnippetText,
+} from "@/components/ai-elements/snippet";
+
+const Example = () => (
+  <div className="flex size-full items-center justify-center p-4">
+    <Snippet className="max-w-sm" code="npx ai-elements add snippet">
+      <SnippetAddon className="pl-1">
+        <SnippetText>$</SnippetText>
+      </SnippetAddon>
+      <SnippetInput />
+      <SnippetAddon align="inline-end" className="pr-2">
+        <SnippetCopyButton />
+      </SnippetAddon>
+    </Snippet>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { Source, Sources, SourcesContent, SourcesTrigger } from "@/components/ai-elements/sources";
+import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
+
+const sources = [
+  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },
+  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },
+  {
+    href: "https://docs.aws.amazon.com/sdk-for-javascript/",
+    title: "AWS SDK for JavaScript",
+  },
+];
+
+const Example = () => (
+  <div style={{ height: "110px" }}>
+    <Sources>
+      <SourcesTrigger count={sources.length}>
+        <p className="font-medium">Using {sources.length} citations</p>
+        <ChevronDownIcon className="size-4" />
+      </SourcesTrigger>
+      <SourcesContent>
+        {sources.map((source) => (
+          <Source href={source.href} key={source.href}>
+            {source.title}
+            <ExternalLinkIcon className="size-4" />
+          </Source>
+        ))}
+      </SourcesContent>
+    </Sources>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { Source, Sources, SourcesContent, SourcesTrigger } from "@/components/ai-elements/sources";
+
+const sources = [
+  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },
+  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },
+  {
+    href: "https://docs.aws.amazon.com/sdk-for-javascript/",
+    title: "AWS SDK for JavaScript",
+  },
+];
+
+const Example = () => (
+  <div style={{ height: "110px" }}>
+    <Sources>
+      <SourcesTrigger count={sources.length} />
+      <SourcesContent>
+        {sources.map((source) => (
+          <Source href={source.href} key={source.href} title={source.title} />
+        ))}
+      </SourcesContent>
+    </Sources>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { SpeechInput } from "@/components/ai-elements/speech-input";
+import { useCallback, useState } from "react";
+
+/**
+ * Fallback handler for browsers that don't support Web Speech API (Firefox, Safari).
+ * This function receives recorded audio and should send it to a transcription service.
+ * Example uses OpenAI Whisper API - replace with your preferred service.
+ */
+const handleAudioRecorded = async (audioBlob: Blob): Promise<string> => {
+  const formData = new FormData();
+  formData.append("file", audioBlob, "audio.webm");
+  formData.append("model", "whisper-1");
+
+  const response = await fetch("https://api.openai.com/v1/audio/transcriptions", {
+    body: formData,
+    headers: {
+      Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
+    },
+    method: "POST",
+  });
+
+  if (!response.ok) {
+    throw new Error("Transcription failed");
+  }
+
+  const data = await response.json();
+  return data.text;
+};
+
+const Example = () => {
+  const [transcript, setTranscript] = useState("");
+
+  const handleTranscriptionChange = useCallback((text: string) => {
+    setTranscript((prev) => {
+      const newText = prev ? `${prev} ${text}` : text;
+      return newText;
+    });
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setTranscript("");
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <div className="flex gap-2">
+        <SpeechInput
+          onAudioRecorded={handleAudioRecorded}
+          onTranscriptionChange={handleTranscriptionChange}
+          size="icon"
+          variant="outline"
+        />
+        {transcript && (
+          <button
+            className="text-sm text-muted-foreground underline hover:text-foreground"
+            onClick={handleClear}
+            type="button"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      {transcript ? (
+        <div className="max-w-md rounded-lg border bg-card p-4 text-sm">
+          <p className="text-muted-foreground">
+            <strong>Transcript:</strong>
+          </p>
+          <p className="mt-2">{transcript}</p>
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">Click the microphone to start speaking</p>
+      )}
+    </div>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/stack-trace-collapsed.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+
+const errorString = `TypeError: Cannot read properties of undefined (reading 'map')
+    at UserList (/app/src/components/UserList.tsx:15:23)
+    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)`;
+
+const Example = () => (
+  <StackTrace defaultOpen={false} trace={errorString}>
+    <StackTraceHeader>
+      <StackTraceError>
+        <StackTraceErrorType />
+        <StackTraceErrorMessage />
+      </StackTraceError>
+      <StackTraceActions>
+        <StackTraceCopyButton />
+        <StackTraceExpandButton />
+      </StackTraceActions>
+    </StackTraceHeader>
+    <StackTraceContent>
+      <StackTraceFrames />
+    </StackTraceContent>
+  </StackTrace>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/stack-trace-no-internal.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+
+const errorString = `TypeError: Cannot read properties of undefined (reading 'map')
+    at UserList (/app/src/components/UserList.tsx:15:23)
+    at App (/app/src/App.tsx:42:5)
+    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
+    at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)`;
+
+const Example = () => (
+  <StackTrace defaultOpen trace={errorString}>
+    <StackTraceHeader>
+      <StackTraceError>
+        <StackTraceErrorType />
+        <StackTraceErrorMessage />
+      </StackTraceError>
+      <StackTraceActions>
+        <StackTraceCopyButton />
+        <StackTraceExpandButton />
+      </StackTraceActions>
+    </StackTraceHeader>
+    <StackTraceContent>
+      <StackTraceFrames showInternalFrames={false} />
+    </StackTraceContent>
+  </StackTrace>
+);
+
+export default Example;

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

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+
+const handleFilePathClick = (path: string, line: number, col: number) => {
+  console.log(`Open file: ${path}:${line}:${col}`);
+};
+
+const handleCopy = () => {
+  console.log("Stack trace copied");
+};
+
+const sampleStackTrace = `TypeError: Cannot read properties of undefined (reading 'map')
+    at UserList (/app/components/UserList.tsx:15:23)
+    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
+    at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
+    at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
+    at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
+    at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
+    at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
+    at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22776:12)
+    at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)`;
+
+const Example = () => (
+  <StackTrace defaultOpen onFilePathClick={handleFilePathClick} trace={sampleStackTrace}>
+    <StackTraceHeader>
+      <StackTraceError>
+        <StackTraceErrorType />
+        <StackTraceErrorMessage />
+      </StackTraceError>
+      <StackTraceActions>
+        <StackTraceCopyButton onCopy={handleCopy} />
+        <StackTraceExpandButton />
+      </StackTraceActions>
+    </StackTraceHeader>
+    <StackTraceContent>
+      <StackTraceFrames />
+    </StackTraceContent>
+  </StackTrace>
+);
+
+export default Example;

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

@@ -0,0 +1,137 @@
+"use client";
+
+import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
+
+import {
+  PromptInput,
+  PromptInputButton,
+  PromptInputFooter,
+  PromptInputSelect,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectTrigger,
+  PromptInputSelectValue,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+} from "@/components/ai-elements/prompt-input";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+import { GlobeIcon, MicIcon, PlusIcon, SendIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import { memo, useCallback, useState } from "react";
+
+const suggestions: { key: string; value: string }[] = [
+  { key: nanoid(), value: "What are the latest trends in AI?" },
+  { key: nanoid(), value: "How does machine learning work?" },
+  { key: nanoid(), value: "Explain quantum computing" },
+  { key: nanoid(), value: "Best practices for React development" },
+  { key: nanoid(), value: "Tell me about TypeScript benefits" },
+  { key: nanoid(), value: "How to optimize database queries?" },
+  { key: nanoid(), value: "What is the difference between SQL and NoSQL?" },
+  { key: nanoid(), value: "Explain cloud computing basics" },
+];
+
+const models = [
+  { id: "gpt-4", name: "GPT-4" },
+  { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo" },
+  { id: "claude-2", name: "Claude 2" },
+  { id: "claude-instant", name: "Claude Instant" },
+  { id: "palm-2", name: "PaLM 2" },
+  { id: "llama-2-70b", name: "Llama 2 70B" },
+  { id: "llama-2-13b", name: "Llama 2 13B" },
+  { id: "cohere-command", name: "Command" },
+  { id: "mistral-7b", name: "Mistral 7B" },
+];
+
+const handleSubmit = (message: PromptInputMessage) => {
+  const hasText = Boolean(message.text);
+  const hasAttachments = Boolean(message.files?.length);
+
+  if (!(hasText || hasAttachments)) {
+    return;
+  }
+
+  console.log("Submitted message:", message.text || "Sent with attachments");
+  console.log("Attached files:", message.files);
+};
+
+interface SuggestionItemProps {
+  suggestion: { key: string; value: string };
+  onSuggestionClick: (value: string) => void;
+}
+
+const SuggestionItem = memo(({ suggestion, onSuggestionClick }: SuggestionItemProps) => {
+  const handleClick = useCallback(
+    () => onSuggestionClick(suggestion.value),
+    [onSuggestionClick, suggestion.value],
+  );
+  return <Suggestion key={suggestion.key} onClick={handleClick} suggestion={suggestion.value} />;
+});
+
+SuggestionItem.displayName = "SuggestionItem";
+
+const Example = () => {
+  const [model, setModel] = useState<string>(models[0].id);
+  const [text, setText] = useState<string>("");
+
+  const handleSuggestionClick = useCallback((suggestion: string) => {
+    setText(suggestion);
+  }, []);
+
+  const handleTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value),
+    [],
+  );
+
+  return (
+    <div className="grid gap-4">
+      <Suggestions>
+        {suggestions.map((suggestion) => (
+          <SuggestionItem
+            key={suggestion.key}
+            onSuggestionClick={handleSuggestionClick}
+            suggestion={suggestion}
+          />
+        ))}
+      </Suggestions>
+      <PromptInput onSubmit={handleSubmit}>
+        <PromptInputTextarea
+          onChange={handleTextChange}
+          placeholder="Ask me about anything..."
+          value={text}
+        />
+        <PromptInputFooter>
+          <PromptInputTools>
+            <PromptInputButton>
+              <PlusIcon size={16} />
+            </PromptInputButton>
+            <PromptInputButton>
+              <MicIcon size={16} />
+            </PromptInputButton>
+            <PromptInputButton>
+              <GlobeIcon size={16} />
+              <span>Search</span>
+            </PromptInputButton>
+            <PromptInputSelect onValueChange={setModel} value={model}>
+              <PromptInputSelectTrigger>
+                <PromptInputSelectValue />
+              </PromptInputSelectTrigger>
+              <PromptInputSelectContent>
+                {models.map((model) => (
+                  <PromptInputSelectItem key={model.id} value={model.id}>
+                    {model.name}
+                  </PromptInputSelectItem>
+                ))}
+              </PromptInputSelectContent>
+            </PromptInputSelect>
+          </PromptInputTools>
+          <PromptInputSubmit>
+            <SendIcon size={16} />
+          </PromptInputSubmit>
+        </PromptInputFooter>
+      </PromptInput>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+
+const suggestions = [
+  "What are the latest trends in AI?",
+  "How does machine learning work?",
+  "Explain quantum computing",
+  "Best practices for React development",
+  "Tell me about TypeScript benefits",
+  "How to optimize database queries?",
+  "What is the difference between SQL and NoSQL?",
+  "Explain cloud computing basics",
+];
+
+const handleSuggestionClick = (suggestion: string) => {
+  console.log("Selected suggestion:", suggestion);
+};
+
+const Example = () => (
+  <Suggestions>
+    {suggestions.map((suggestion) => (
+      <Suggestion key={suggestion} onClick={handleSuggestionClick} suggestion={suggestion} />
+    ))}
+  </Suggestions>
+);
+
+export default Example;

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

@@ -0,0 +1,60 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { SiReact } from "@icons-pack/react-simple-icons";
+import {
+  Task,
+  TaskContent,
+  TaskItem,
+  TaskItemFile,
+  TaskTrigger,
+} from "@/components/ai-elements/task";
+import { nanoid } from "nanoid";
+
+const Example = () => {
+  const tasks: { key: string; value: ReactNode }[] = [
+    { key: nanoid(), value: 'Searching "app/page.tsx, components structure"' },
+    {
+      key: nanoid(),
+      value: (
+        <span className="inline-flex items-center gap-1" key="read-page-tsx">
+          Read
+          <TaskItemFile>
+            <SiReact className="size-4" color="#149ECA" />
+            <span>page.tsx</span>
+          </TaskItemFile>
+        </span>
+      ),
+    },
+    { key: nanoid(), value: "Scanning 52 files" },
+    { key: nanoid(), value: "Scanning 2 files" },
+    {
+      key: nanoid(),
+      value: (
+        <span className="inline-flex items-center gap-1" key="read-layout-tsx">
+          Reading files
+          <TaskItemFile>
+            <SiReact className="size-4" color="#149ECA" />
+            <span>layout.tsx</span>
+          </TaskItemFile>
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ height: "200px" }}>
+      <Task className="w-full">
+        <TaskTrigger title="Found project files" />
+        <TaskContent>
+          {tasks.map((task) => (
+            <TaskItem key={task.key}>{task.value}</TaskItem>
+          ))}
+        </TaskContent>
+      </Task>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { Terminal } from "@/components/ai-elements/terminal";
+
+const Example = () => <Terminal output="npm install complete" />;
+
+export default Example;

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { Terminal } from "@/components/ai-elements/terminal";
+import { useCallback, useState } from "react";
+
+const initialOutput = `\u001B[36m$\u001B[0m npm run build
+Building project...
+\u001B[32m✓\u001B[0m Compiled successfully
+\u001B[32m✓\u001B[0m Bundle size: 124kb`;
+
+const Example = () => {
+  const [output, setOutput] = useState(initialOutput);
+
+  const handleClear = useCallback(() => setOutput(""), []);
+
+  return <Terminal onClear={handleClear} output={output} />;
+};
+
+export default Example;