@agentuity/cli 3.0.0-alpha.1 → 3.0.0-alpha.3

package/src/cmd/project/templates/sveltekit/src/routes/+page.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+
+const LANGUAGES = ['Spanish', 'French', 'German', 'Chinese'] as const;
+const MODELS = ['gpt-4o-mini', 'gpt-4o', 'gpt-4.1-nano'] as const;
+const DEFAULT_TEXT =
+	'Welcome to Agentuity! This translation demo shows what you can build with the platform. It connects to AI models through our gateway — no separate API keys needed. Try translating this text into different languages to see it in action.';
+
+let text = $state(DEFAULT_TEXT);
+let toLanguage: (typeof LANGUAGES)[number] = $state('Spanish');
+let model: (typeof MODELS)[number] = $state('gpt-4o-mini');
+let isLoading = $state(false);
+
+let { form } = $props();
+</script>
+
+<svelte:head>
+	<title>Agentuity + SvelteKit</title>
+</svelte:head>
+
+<div class="flex min-h-screen justify-center font-sans text-white">
+	<div class="flex w-full max-w-3xl flex-col gap-4 p-16">
+		<!-- Header -->
+		<div class="relative mb-8 flex flex-col items-center justify-center gap-2 text-center">
+			<svg
+				aria-hidden="true"
+				class="mb-4 h-auto w-12"
+				fill="none"
+				height="191"
+				viewBox="0 0 220 191"
+				width="220"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					clip-rule="evenodd"
+					d="M220 191H0L31.427 136.5H0L8 122.5H180.5L220 191ZM47.5879 136.5L24.2339 177H195.766L172.412 136.5H47.5879Z"
+					fill="var(--color-cyan-500)"
+					fill-rule="evenodd"
+				/>
+				<path
+					clip-rule="evenodd"
+					d="M110 0L157.448 82.5H189L197 96.5H54.5L110 0ZM78.7021 82.5L110 28.0811L141.298 82.5H78.7021Z"
+					fill="var(--color-cyan-500)"
+					fill-rule="evenodd"
+				/>
+			</svg>
+			<h1 class="text-5xl font-thin">Welcome to Agentuity</h1>
+			<p class="text-lg text-gray-400">
+				<span class="font-serif italic">SvelteKit</span> + AI Gateway
+			</p>
+		</div>
+
+		<!-- Translate Form -->
+		<form
+			class="flex flex-col gap-6 rounded-lg border border-gray-900 bg-black p-8 text-gray-400 shadow-2xl"
+			method="POST"
+			use:enhance={() => {
+				isLoading = true;
+				return async ({ update }) => {
+					await update();
+					isLoading = false;
+				};
+			}}
+		>
+			<div class="flex flex-wrap items-center gap-1.5">
+				Translate to
+				<select
+					class="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400"
+					{...isLoading ? { disabled: true } : {}}
+					name="toLanguage"
+					bind:value={toLanguage}
+				>
+					{#each LANGUAGES as lang}
+						<option value={lang}>{lang}</option>
+					{/each}
+				</select>
+				using
+				<select
+					class="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400"
+					{...isLoading ? { disabled: true } : {}}
+					name="model"
+					bind:value={model}
+				>
+					{#each MODELS as m}
+						<option value={m}>{m}</option>
+					{/each}
+				</select>
+				<div class="group relative z-0 ml-auto">
+					<div
+						class="absolute inset-0 rounded-lg bg-linear-to-r from-cyan-700 via-blue-500 to-purple-600 opacity-75 blur-xl transition-all duration-700 group-hover:opacity-100 group-hover:blur-2xl"
+					/>
+					<div class="absolute inset-0 rounded-lg bg-cyan-500/50 opacity-50 blur-3xl" />
+					<button
+						class="relative cursor-pointer rounded-lg bg-gray-950 px-4 py-2 font-semibold text-white shadow-2xl disabled:cursor-not-allowed disabled:opacity-50"
+						disabled={isLoading || !text.trim()}
+						type="submit"
+						data-loading={isLoading}
+					>
+						{isLoading ? 'Translating' : 'Translate'}
+					</button>
+				</div>
+			</div>
+
+			<input type="hidden" name="text" bind:value={text} />
+			<textarea
+				class="z-10 min-h-28 resize-y rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-white focus:outline-2 focus:outline-offset-2 focus:outline-cyan-500"
+				disabled={isLoading}
+				bind:value={text}
+				placeholder="Enter text to translate..."
+				rows="4"
+				name="textDisplay"
+				oninput={() => { text = (event?.target as HTMLTextAreaElement)?.value ?? text; }}
+			/>
+
+			<!-- Translation Result -->
+			{#if form?.error}
+				<div
+					class="rounded-md border border-red-800 bg-red-950 px-4 py-3 text-sm text-red-400"
+				>
+					{form.error.message ?? 'Translation failed'}
+				</div>
+			{:else if isLoading}
+				<div
+					class="rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600"
+					data-loading="true"
+				/>
+			{:else if !form?.translation}
+				<div
+					class="output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600"
+				>
+					Translation will appear here
+				</div>
+			{:else}
+				<div class="flex flex-col gap-3">
+					<div
+						class="output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-cyan-500"
+					>
+						{form.translation}
+					</div>
+					<div class="flex gap-4 text-xs text-gray-500">
+						{#if form.tokens > 0}
+							<span>
+								Tokens <strong class="text-gray-400">{form.tokens}</strong>
+							</span>
+						{/if}
+						<span>
+							Model <strong class="text-gray-400">{form.model}</strong>
+						</span>
+						<span>
+							Language <strong class="text-gray-400">{form.toLanguage}</strong>
+						</span>
+					</div>
+				</div>
+			{/if}
+		</form>
+
+		<!-- How it works -->
+		<div class="rounded-lg border border-gray-900 bg-black p-8">
+			<h3 class="m-0 mb-6 text-xl font-normal leading-none text-white">How it works</h3>
+			<div class="flex flex-col gap-6">
+				{#each [
+					{
+						title: 'AI Gateway routing',
+						text: '`agentuity dev` automatically sets OPENAI_API_KEY and OPENAI_BASE_URL so the AI SDK routes through the Agentuity gateway.',
+					},
+					{
+						title: 'Form actions',
+						text: 'Edit `src/routes/+page.server.ts` to change the AI model, prompt, or add new actions.',
+					},
+					{
+						title: 'SvelteKit',
+						text: 'Add routes in `src/routes/` — file-based routing with SSR and form actions.',
+					},
+				] as step}
+					<div class="flex items-start gap-3">
+						<div
+							class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950"
+						>
+							<svg
+								aria-hidden="true"
+								class="size-2.5"
+								fill="none"
+								height="24"
+								stroke="var(--color-green-500)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								width="24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path d="M20 6 9 17l-5-5" />
+							</svg>
+						</div>
+						<div>
+							<h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">{step.title}</h4>
+							<p class="text-xs text-gray-400">{step.text}</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>

package/src/cmd/project/templates/vite-react/server.ts

@@ -0,0 +1,39 @@
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+Bun.serve({
+	port: process.env.PORT ?? 3000,
+	async fetch(request) {
+		const url = new URL(request.url);
+
+		if (url.pathname === '/api/translate' && request.method === 'POST') {
+			const { text, toLanguage, model = 'gpt-4o-mini' } = await request.json();
+
+			const { text: translation, usage } = await generateText({
+				model: openai(model),
+				prompt: `Translate the following text to ${toLanguage}. Return only the translation, nothing else.\n\n${text}`,
+			});
+
+			return Response.json({
+				translation,
+				tokens: usage?.totalTokens ?? 0,
+				model,
+				toLanguage,
+			});
+		}
+
+		// Proxy all other requests to Vite dev server
+		const viteUrl = 'http://localhost:5173' + url.pathname + url.search;
+		const viteRes = await fetch(viteUrl, {
+			method: request.method,
+			headers: request.headers,
+			body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : undefined,
+		});
+		return new Response(viteRes.body, {
+			status: viteRes.status,
+			headers: viteRes.headers,
+		});
+	},
+});
+
+console.log('Server running on http://localhost:' + (process.env.PORT ?? 3000));

package/src/cmd/project/templates/vite-react/src/App.tsx

@@ -0,0 +1,241 @@
+import { useState, type ChangeEvent } from 'react';
+import { useMutation } from '@tanstack/react-query';
+
+const LANGUAGES = ['Spanish', 'French', 'German', 'Chinese'] as const;
+const MODELS = ['gpt-4o-mini', 'gpt-4o', 'gpt-4.1-nano'] as const;
+const DEFAULT_TEXT =
+	'Welcome to Agentuity! This translation demo shows what you can build with the platform. It connects to AI models through our gateway — no separate API keys needed. Try translating this text into different languages to see it in action.';
+
+async function translateText({
+	text,
+	toLanguage,
+	model,
+}: {
+	text: string;
+	toLanguage: string;
+	model: string;
+}) {
+	const res = await fetch('/api/translate', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ text, toLanguage, model }),
+	});
+	if (!res.ok) {
+		throw new Error(`API error ${res.status}: ${await res.text()}`);
+	}
+	return res.json();
+}
+
+function App() {
+	const [text, setText] = useState(DEFAULT_TEXT);
+	const [toLanguage, setToLanguage] = useState<(typeof LANGUAGES)[number]>('Spanish');
+	const [model, setModel] = useState<(typeof MODELS)[number]>('gpt-4o-mini');
+
+	const mutation = useMutation({
+		mutationFn: translateText,
+	});
+
+	const handleTranslate = () => {
+		mutation.mutate({ text, toLanguage, model });
+	};
+
+	const isLoading = mutation.isPending;
+	const error = mutation.error;
+	const result = mutation.data;
+
+	return (
+		<div className="flex min-h-screen justify-center font-sans text-white">
+			<div className="flex w-full max-w-3xl flex-col gap-4 p-16">
+				{/* Header */}
+				<div className="relative mb-8 flex flex-col items-center justify-center gap-2 text-center">
+					<svg
+						aria-hidden="true"
+						className="mb-4 h-auto w-12"
+						fill="none"
+						height="191"
+						viewBox="0 0 220 191"
+						width="220"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							clipRule="evenodd"
+							d="M220 191H0L31.427 136.5H0L8 122.5H180.5L220 191ZM47.5879 136.5L24.2339 177H195.766L172.412 136.5H47.5879Z"
+							fill="var(--color-cyan-500)"
+							fillRule="evenodd"
+						/>
+						<path
+							clipRule="evenodd"
+							d="M110 0L157.448 82.5H189L197 96.5H54.5L110 0ZM78.7021 82.5L110 28.0811L141.298 82.5H78.7021Z"
+							fill="var(--color-cyan-500)"
+							fillRule="evenodd"
+						/>
+					</svg>
+					<h1 className="text-5xl font-thin">Welcome to Agentuity</h1>
+					<p className="text-lg text-gray-400">
+						<span className="font-serif italic">Vite + React</span> + AI Gateway
+					</p>
+				</div>
+
+				{/* Translate Form */}
+				<div className="flex flex-col gap-6 rounded-lg border border-gray-900 bg-black p-8 text-gray-400 shadow-2xl">
+					<div className="flex flex-wrap items-center gap-1.5">
+						Translate to
+						<select
+							className="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400"
+							disabled={isLoading}
+							onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+								setToLanguage(e.currentTarget.value as (typeof LANGUAGES)[number])
+							}
+							value={toLanguage}
+						>
+							{LANGUAGES.map((lang) => (
+								<option key={lang} value={lang}>
+									{lang}
+								</option>
+							))}
+						</select>
+						using
+						<select
+							className="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400"
+							disabled={isLoading}
+							onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+								setModel(e.currentTarget.value as (typeof MODELS)[number])
+							}
+							value={model}
+						>
+							{MODELS.map((m) => (
+								<option key={m} value={m}>
+									{m}
+								</option>
+							))}
+						</select>
+						<div className="group relative z-0 ml-auto">
+							<div className="absolute inset-0 rounded-lg bg-linear-to-r from-cyan-700 via-blue-500 to-purple-600 opacity-75 blur-xl transition-all duration-700 group-hover:opacity-100 group-hover:blur-2xl" />
+							<div className="absolute inset-0 rounded-lg bg-cyan-500/50 opacity-50 blur-3xl" />
+							<button
+								className="relative cursor-pointer rounded-lg bg-gray-950 px-4 py-2 font-semibold text-white shadow-2xl disabled:cursor-not-allowed disabled:opacity-50"
+								disabled={isLoading || !text.trim()}
+								onClick={handleTranslate}
+								type="button"
+								data-loading={isLoading}
+							>
+								{isLoading ? 'Translating' : 'Translate'}
+							</button>
+						</div>
+					</div>
+
+					<textarea
+						className="z-10 min-h-28 resize-y rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-white focus:outline-2 focus:outline-offset-2 focus:outline-cyan-500"
+						disabled={isLoading}
+						onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.currentTarget.value)}
+						placeholder="Enter text to translate..."
+						rows={4}
+						value={text}
+					/>
+
+					{/* Translation Result */}
+					{error ? (
+						<div className="rounded-md border border-red-800 bg-red-950 px-4 py-3 text-sm text-red-400">
+							{error.message}
+						</div>
+					) : isLoading ? (
+						<div
+							className="rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600"
+							data-loading="true"
+						/>
+					) : !result?.translation ? (
+						<div className="output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600">
+							Translation will appear here
+						</div>
+					) : (
+						<div className="flex flex-col gap-3">
+							<div className="output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-cyan-500">
+								{result.translation}
+							</div>
+							<div className="flex gap-4 text-xs text-gray-500">
+								{result.tokens > 0 && (
+									<span>
+										Tokens <strong className="text-gray-400">{result.tokens}</strong>
+									</span>
+								)}
+								<span>
+									Model <strong className="text-gray-400">{result.model}</strong>
+								</span>
+								<span>
+									Language <strong className="text-gray-400">{result.toLanguage}</strong>
+								</span>
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* How it works */}
+				<div className="rounded-lg border border-gray-900 bg-black p-8">
+					<h3 className="m-0 mb-6 text-xl font-normal leading-none text-white">
+						How it works
+					</h3>
+					<div className="flex flex-col gap-6">
+						{[
+							{
+								title: 'AI Gateway routing',
+								text: (
+									<>
+										<code className="text-white">agentuity dev</code> automatically sets
+										OPENAI_API_KEY and OPENAI_BASE_URL so the AI SDK routes through the
+										Agentuity gateway.
+									</>
+								),
+							},
+							{
+								title: 'Server API',
+								text: (
+									<>
+										Edit <code className="text-white">server.ts</code> to change the AI
+										model, prompt, or add new endpoints.
+									</>
+								),
+							},
+							{
+								title: 'Vite + React',
+								text: (
+									<>
+										Edit <code className="text-white">src/App.tsx</code> for the frontend —
+										fast HMR with Vite and TanStack Query for data fetching.
+									</>
+								),
+							},
+						].map((step) => (
+							<div key={step.title} className="flex items-start gap-3">
+								<div className="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950">
+									<svg
+										aria-hidden="true"
+										className="size-2.5"
+										fill="none"
+										height="24"
+										stroke="var(--color-green-500)"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										viewBox="0 0 24 24"
+										width="24"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path d="M20 6 9 17l-5-5" />
+									</svg>
+								</div>
+								<div>
+									<h4 className="-mt-0.5 mb-0.5 text-sm font-normal text-white">
+										{step.title}
+									</h4>
+									<p className="text-xs text-gray-400">{step.text}</p>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default App;

package/src/cmd/project/templates/vite-react/src/index.css

@@ -0,0 +1,31 @@
+@import 'tailwindcss';
+
+@theme {
+	--color-cyan-500: oklch(0.9054 0.15455 194.769);
+	--color-cyan-700: oklch(0.6183 0.10555 194.769);
+	--color-green-500: oklch(0.723 0.219 149.579);
+	--color-green-950: oklch(0.171 0.052 150.3);
+	--color-red-400: oklch(0.704 0.191 22.216);
+	--color-red-800: oklch(0.395 0.141 25.723);
+	--color-red-950: oklch(0.258 0.092 26.042);
+	--color-blue-500: oklch(0.623 0.214 259.815);
+	--color-purple-600: oklch(0.558 0.288 302.321);
+	--animate-ellipsis: ellipsis 1.5s steps(4, end) infinite;
+	@keyframes ellipsis {
+		0% { content: '.'; }
+		25% { content: '..'; }
+		50% { content: '...'; }
+		75% { content: ''; }
+	}
+}
+
+[data-loading='true']::after {
+	content: '.';
+	@apply inline-block w-4 animate-ellipsis text-left;
+}
+
+body {
+	background-color: oklch(0.141 0.005 285.823);
+	font-family: system-ui, -apple-system, sans-serif;
+	margin: 0;
+}

package/src/cmd/project/templates/vite-react/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import App from './App.tsx';
+import './index.css';
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<QueryClientProvider client={queryClient}>
+			<App />
+		</QueryClientProvider>
+	</StrictMode>,
+);

package/dist/cmd/project/frameworks-ai-examples.d.ts

@@ -1,15 +0,0 @@
-/**
- * AI SDK example generators for each framework.
- *
- * Each function returns a map of relative file paths to file contents
- * that demonstrate a simple AI chat endpoint using the Vercel AI SDK
- * with the Agentuity AI Gateway.
- */
-export declare function nextjsAiExample(): Record<string, string>;
-export declare function nuxtAiExample(): Record<string, string>;
-export declare function remixAiExample(): Record<string, string>;
-export declare function sveltekitAiExample(): Record<string, string>;
-export declare function astroAiExample(): Record<string, string>;
-export declare function honoAiExample(): Record<string, string>;
-export declare function viteReactAiExample(): Record<string, string>;
-//# sourceMappingURL=frameworks-ai-examples.d.ts.map

package/dist/cmd/project/frameworks-ai-examples.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"frameworks-ai-examples.d.ts","sourceRoot":"","sources":["../../../src/cmd/project/frameworks-ai-examples.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBxD;AAED,wBAAgB,aAAa,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBtD;AAED,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBvD;AAED,wBAAgB,kBAAkB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmB3D;AAED,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqBvD;AAED,wBAAgB,aAAa,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAwBtD;AAED,wBAAgB,kBAAkB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA4B3D"}