create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/web-preview.md

@@ -0,0 +1,197 @@
+# Web Preview
+
+A composable component for previewing the result of a generated UI, with support for live examples and code display.
+
+The `WebPreview` component provides a flexible way to showcase the result of a generated UI component, along with its source code. It is designed for documentation and demo purposes, allowing users to interact with live examples and view the underlying implementation.
+
+See `scripts/web-preview.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add web-preview
+```
+
+## Usage with AI SDK
+
+Build a simple v0 clone using the [v0 Platform API](https://v0.dev/docs/api/platform).
+
+Install the `v0-sdk` package:
+
+```package-install
+npm i v0-sdk
+```
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  WebPreview,
+  WebPreviewBody,
+  WebPreviewNavigation,
+  WebPreviewUrl,
+} from "@/components/ai-elements/web-preview";
+import { useState } from "react";
+import {
+  Input,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import { Spinner } from "@/components/ui/spinner";
+
+const WebPreviewDemo = () => {
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!prompt.trim()) return;
+    setPrompt("");
+
+    setIsGenerating(true);
+    try {
+      const response = await fetch("/api/v0", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt }),
+      });
+
+      const data = await response.json();
+      setPreviewUrl(data.demo || "/");
+      console.log("Generation finished:", data);
+    } catch (error) {
+      console.error("Generation failed:", error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex-1 mb-4">
+          {isGenerating ? (
+            <div className="flex flex-col items-center justify-center h-full">
+              <Spinner />
+              <p className="mt-4 text-muted-foreground">
+                Generating app, this may take a few seconds...
+              </p>
+            </div>
+          ) : previewUrl ? (
+            <WebPreview defaultUrl={previewUrl}>
+              <WebPreviewNavigation>
+                <WebPreviewUrl />
+              </WebPreviewNavigation>
+              <WebPreviewBody src={previewUrl} />
+            </WebPreview>
+          ) : (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              Your generated app will appear here
+            </div>
+          )}
+        </div>
+
+        <Input onSubmit={handleSubmit} className="w-full max-w-2xl mx-auto relative">
+          <PromptInputTextarea
+            value={prompt}
+            placeholder="Describe the app you want to build..."
+            onChange={(e) => setPrompt(e.currentTarget.value)}
+            className="pr-12 min-h-[60px]"
+          />
+          <PromptInputSubmit
+            status={isGenerating ? "streaming" : "ready"}
+            disabled={!prompt.trim()}
+            className="absolute bottom-1 right-1"
+          />
+        </Input>
+      </div>
+    </div>
+  );
+};
+
+export default WebPreviewDemo;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/v0/route.ts"
+import { v0 } from "v0-sdk";
+
+export async function POST(req: Request) {
+  const { prompt }: { prompt: string } = await req.json();
+
+  const result = await v0.chats.create({
+    system: "You are an expert coder",
+    message: prompt,
+    modelConfiguration: {
+      modelId: "v0-1.5-sm",
+      imageGenerations: false,
+      thinking: false,
+    },
+  });
+
+  return Response.json({
+    demo: result.demo,
+    webUrl: result.webUrl,
+  });
+}
+```
+
+## Features
+
+- Live preview of UI components
+- Composable architecture with dedicated sub-components
+- Responsive design modes (Desktop, Tablet, Mobile)
+- Navigation controls with back/forward functionality
+- URL input and example selector
+- Full screen mode support
+- Console logging with timestamps
+- Context-based state management
+- Consistent styling with the design system
+- Easy integration into documentation pages
+
+## Props
+
+### `<WebPreview />`
+
+| Prop          | Type                                   | Default | Description                                 |
+| ------------- | -------------------------------------- | ------- | ------------------------------------------- |
+| `defaultUrl`  | `string`                               | -       | The initial URL to load in the preview.     |
+| `onUrlChange` | `(url: string) => void`                | -       | Callback fired when the URL changes.        |
+| `...props`    | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div. |
+
+### `<WebPreviewNavigation />`
+
+| Prop       | Type                                   | Default | Description                                             |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the navigation container. |
+
+### `<WebPreviewNavigationButton />`
+
+| Prop       | Type                                  | Default | Description                                                              |
+| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `tooltip`  | `string`                              | -       | Tooltip text to display on hover.                                        |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<WebPreviewUrl />`
+
+| Prop       | Type                                 | Default | Description                                                             |
+| ---------- | ------------------------------------ | ------- | ----------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Input>` | -       | Any other props are spread to the underlying shadcn/ui Input component. |
+
+### `<WebPreviewBody />`
+
+| Prop       | Type                                            | Default | Description                                             |
+| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------- |
+| `loading`  | `React.ReactNode`                               | -       | Optional loading indicator to display over the preview. |
+| `...props` | `React.IframeHTMLAttributes<HTMLIFrameElement>` | -       | Any other props are spread to the underlying iframe.    |
+
+### `<WebPreviewConsole />`
+
+| Prop       | Type                                   | Default | Description                                          |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |
+| `logs`     | `Array<{ level: `                      | -       | Console log entries to display in the console panel. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div.          |

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

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  Agent,
+  AgentContent,
+  AgentHeader,
+  AgentInstructions,
+  AgentOutput,
+  AgentTool,
+  AgentTools,
+} from "@/components/ai-elements/agent";
+import { z } from "zod";
+
+const webSearchTool = {
+  description: "Search the web for information",
+  inputSchema: z.object({
+    query: z.string().describe("The search query"),
+  }),
+};
+
+const readUrlTool = {
+  description: "Read and parse a URL",
+  inputSchema: z.object({
+    url: z.string().url().describe("The URL to read"),
+  }),
+};
+
+const summarizeTool = {
+  description: "Summarize text into key points",
+  inputSchema: z.object({
+    maxPoints: z.number().optional().describe("Maximum number of key points"),
+    text: z.string().describe("The text to summarize"),
+  }),
+};
+
+const outputSchema = `z.object({
+  sentiment: z.enum(['positive', 'negative', 'neutral']),
+  score: z.number(),
+  summary: z.string(),
+})`;
+
+const Example = () => (
+  <Agent>
+    <AgentHeader model="openai/gpt-5.2-pro" name="Research Assistant" />
+    <AgentContent>
+      <AgentInstructions>
+        You are a helpful research assistant. Your job is to search the web for information and
+        summarize findings for the user. Always cite your sources and provide accurate, up-to-date
+        information.
+      </AgentInstructions>
+      <AgentTools type="multiple">
+        <AgentTool tool={webSearchTool} value="web_search" />
+        <AgentTool tool={readUrlTool} value="read_url" />
+        <AgentTool tool={summarizeTool} value="summarize" />
+      </AgentTools>
+      <AgentOutput schema={outputSchema} />
+    </AgentContent>
+  </Agent>
+);
+
+export default Example;

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

@@ -0,0 +1,111 @@
+"use client";
+
+import {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactContent,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle,
+} from "@/components/ai-elements/artifact";
+import { CodeBlock } from "@/components/ai-elements/code-block";
+import { CopyIcon, DownloadIcon, PlayIcon, RefreshCwIcon, ShareIcon } from "lucide-react";
+
+const handleRun = () => {
+  console.log("Run");
+};
+
+const handleCopy = () => {
+  console.log("Copy");
+};
+
+const handleRegenerate = () => {
+  console.log("Regenerate");
+};
+
+const handleDownload = () => {
+  console.log("Download");
+};
+
+const handleShare = () => {
+  console.log("Share");
+};
+
+const code = `# Dijkstra's Algorithm implementation
+import heapq
+
+def dijkstra(graph, start):
+    distances = {node: float('inf') for node in graph}
+    distances[start] = 0
+    heap = [(0, start)]
+    visited = set()
+    
+    while heap:
+        current_distance, current_node = heapq.heappop(heap)
+        if current_node in visited:
+            continue
+        visited.add(current_node)
+        
+        for neighbor, weight in graph[current_node].items():
+            distance = current_distance + weight
+            if distance < distances[neighbor]:
+                distances[neighbor] = distance
+                heapq.heappush(heap, (distance, neighbor))
+    
+    return distances
+
+# Example graph
+ graph = {
+    'A': {'B': 1, 'C': 4},
+    'B': {'A': 1, 'C': 2, 'D': 5},
+    'C': {'A': 4, 'B': 2, 'D': 1},
+    'D': {'B': 5, 'C': 1}
+}
+
+print(dijkstra(graph, 'A'))`;
+
+const Example = () => (
+  <Artifact>
+    <ArtifactHeader>
+      <div>
+        <ArtifactTitle>Dijkstra&apos;s Algorithm Implementation</ArtifactTitle>
+        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
+      </div>
+      <div className="flex items-center gap-2">
+        <ArtifactActions>
+          <ArtifactAction icon={PlayIcon} label="Run" onClick={handleRun} tooltip="Run code" />
+          <ArtifactAction
+            icon={CopyIcon}
+            label="Copy"
+            onClick={handleCopy}
+            tooltip="Copy to clipboard"
+          />
+          <ArtifactAction
+            icon={RefreshCwIcon}
+            label="Regenerate"
+            onClick={handleRegenerate}
+            tooltip="Regenerate content"
+          />
+          <ArtifactAction
+            icon={DownloadIcon}
+            label="Download"
+            onClick={handleDownload}
+            tooltip="Download file"
+          />
+          <ArtifactAction
+            icon={ShareIcon}
+            label="Share"
+            onClick={handleShare}
+            tooltip="Share artifact"
+          />
+        </ArtifactActions>
+      </div>
+    </ArtifactHeader>
+    <ArtifactContent className="p-0">
+      <CodeBlock className="border-none" code={code} language="python" showLineNumbers />
+    </ArtifactContent>
+  </Artifact>
+);
+
+export default Example;

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

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  Attachment,
+  AttachmentHoverCard,
+  AttachmentHoverCardContent,
+  AttachmentHoverCardTrigger,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+  getAttachmentLabel,
+  getMediaCategory,
+} from "@/components/ai-elements/attachments";
+import { nanoid } from "nanoid";
+import { memo, useCallback, useState } from "react";
+
+const initialAttachments = [
+  {
+    filename: "mountain-landscape.jpg",
+    id: nanoid(),
+    mediaType: "image/jpeg",
+    type: "file" as const,
+    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
+  },
+  {
+    filename: "quarterly-report.pdf",
+    id: nanoid(),
+    mediaType: "application/pdf",
+    type: "file" as const,
+    url: "",
+  },
+  {
+    id: nanoid(),
+    mediaType: "text/html",
+    title: "React Documentation",
+    type: "source-document" as const,
+    url: "https://react.dev",
+  },
+  {
+    filename: "podcast-episode.mp3",
+    id: nanoid(),
+    mediaType: "audio/mp3",
+    type: "file" as const,
+    url: "",
+  },
+];
+
+interface AttachmentItemProps {
+  attachment: (typeof initialAttachments)[0];
+  onRemove: (id: string) => void;
+}
+
+const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
+  const handleRemove = useCallback(() => onRemove(attachment.id), [onRemove, attachment.id]);
+  const mediaCategory = getMediaCategory(attachment);
+  const label = getAttachmentLabel(attachment);
+
+  return (
+    <AttachmentHoverCard key={attachment.id}>
+      <AttachmentHoverCardTrigger asChild>
+        <Attachment data={attachment} onRemove={handleRemove}>
+          <div className="relative size-5 shrink-0">
+            <div className="absolute inset-0 transition-opacity group-hover:opacity-0">
+              <AttachmentPreview />
+            </div>
+            <AttachmentRemove className="absolute inset-0" />
+          </div>
+          <AttachmentInfo />
+        </Attachment>
+      </AttachmentHoverCardTrigger>
+      <AttachmentHoverCardContent>
+        <div className="space-y-3">
+          {mediaCategory === "image" && attachment.type === "file" && attachment.url && (
+            <div className="flex max-h-96 w-80 items-center justify-center overflow-hidden rounded-md border">
+              <img
+                alt={label}
+                className="max-h-full max-w-full object-contain"
+                height={384}
+                src={attachment.url}
+                width={320}
+              />
+            </div>
+          )}
+          <div className="space-y-1 px-0.5">
+            <h4 className="text-sm leading-none font-semibold">{label}</h4>
+            {attachment.mediaType && (
+              <p className="font-mono text-xs text-muted-foreground">{attachment.mediaType}</p>
+            )}
+          </div>
+        </div>
+      </AttachmentHoverCardContent>
+    </AttachmentHoverCard>
+  );
+});
+
+AttachmentItem.displayName = "AttachmentItem";
+
+const Example = () => {
+  const [attachments, setAttachments] = useState(initialAttachments);
+
+  const handleRemove = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center p-8">
+      <Attachments variant="inline">
+        {attachments.map((attachment) => (
+          <AttachmentItem attachment={attachment} key={attachment.id} onRemove={handleRemove} />
+        ))}
+      </Attachments>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  Attachment,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+} from "@/components/ai-elements/attachments";
+import { nanoid } from "nanoid";
+import { memo, useCallback, useState } from "react";
+
+const initialAttachments = [
+  {
+    filename: "mountain-landscape.jpg",
+    id: nanoid(),
+    mediaType: "image/jpeg",
+    type: "file" as const,
+    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
+  },
+  {
+    filename: "quarterly-report-2024.pdf",
+    id: nanoid(),
+    mediaType: "application/pdf",
+    type: "file" as const,
+    url: "",
+  },
+  {
+    filename: "product-demo.mp4",
+    id: nanoid(),
+    mediaType: "video/mp4",
+    type: "file" as const,
+    url: "",
+  },
+  {
+    filename: "api-reference",
+    id: nanoid(),
+    mediaType: "text/html",
+    title: "API Documentation",
+    type: "source-document" as const,
+    url: "https://docs.example.com/api",
+  },
+  {
+    filename: "meeting-recording.mp3",
+    id: nanoid(),
+    mediaType: "audio/mpeg",
+    type: "file" as const,
+    url: "",
+  },
+];
+
+interface AttachmentItemProps {
+  attachment: (typeof initialAttachments)[0];
+  onRemove: (id: string) => void;
+}
+
+const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
+  const handleRemove = useCallback(() => onRemove(attachment.id), [onRemove, attachment.id]);
+  return (
+    <Attachment data={attachment} key={attachment.id} onRemove={handleRemove}>
+      <AttachmentPreview />
+      <AttachmentInfo showMediaType />
+      <AttachmentRemove />
+    </Attachment>
+  );
+});
+
+AttachmentItem.displayName = "AttachmentItem";
+
+const Example = () => {
+  const [attachments, setAttachments] = useState(initialAttachments);
+
+  const handleRemove = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center p-8">
+      <Attachments className="w-full max-w-md" variant="list">
+        {attachments.map((attachment) => (
+          <AttachmentItem attachment={attachment} key={attachment.id} onRemove={handleRemove} />
+        ))}
+      </Attachments>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Attachment,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+} from "@/components/ai-elements/attachments";
+import { nanoid } from "nanoid";
+import { memo, useCallback, useState } from "react";
+
+const initialAttachments = [
+  {
+    filename: "mountain-landscape.jpg",
+    id: nanoid(),
+    mediaType: "image/jpeg",
+    type: "file" as const,
+    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
+  },
+  {
+    filename: "ocean-sunset.jpg",
+    id: nanoid(),
+    mediaType: "image/jpeg",
+    type: "file" as const,
+    url: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=400&fit=crop",
+  },
+  {
+    filename: "document.pdf",
+    id: nanoid(),
+    mediaType: "application/pdf",
+    type: "file" as const,
+    url: "",
+  },
+  {
+    filename: "video.mp4",
+    id: nanoid(),
+    mediaType: "video/mp4",
+    type: "file" as const,
+    url: "",
+  },
+];
+
+interface AttachmentItemProps {
+  attachment: (typeof initialAttachments)[0];
+  onRemove: (id: string) => void;
+}
+
+const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
+  const handleRemove = useCallback(() => onRemove(attachment.id), [onRemove, attachment.id]);
+  return (
+    <Attachment data={attachment} onRemove={handleRemove}>
+      <AttachmentPreview />
+      <AttachmentRemove />
+    </Attachment>
+  );
+});
+
+AttachmentItem.displayName = "AttachmentItem";
+
+const Example = () => {
+  const [attachments, setAttachments] = useState(initialAttachments);
+
+  const handleRemove = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center p-8">
+      <Attachments variant="grid">
+        {attachments.map((attachment) => (
+          <AttachmentItem attachment={attachment} key={attachment.id} onRemove={handleRemove} />
+        ))}
+      </Attachments>
+    </div>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/audio-player-remote.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerElement,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerSeekBackwardButton,
+  AudioPlayerSeekForwardButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+  AudioPlayerVolumeRange,
+} from "@/components/ai-elements/audio-player";
+
+const Example = () => (
+  <div className="flex size-full items-center justify-center">
+    <AudioPlayer>
+      <AudioPlayerElement src="https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2025-11-10T22_07_46_Hayden_pvc_sp108_s50_sb75_se0_b_m2.mp3" />
+      <AudioPlayerControlBar>
+        <AudioPlayerPlayButton />
+        <AudioPlayerSeekBackwardButton seekOffset={10} />
+        <AudioPlayerSeekForwardButton seekOffset={10} />
+        <AudioPlayerTimeDisplay />
+        <AudioPlayerTimeRange />
+        <AudioPlayerDurationDisplay />
+        <AudioPlayerMuteButton />
+        <AudioPlayerVolumeRange />
+      </AudioPlayerControlBar>
+    </AudioPlayer>
+  </div>
+);
+
+export default Example;