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

package/src/cmd/project/templates/remix/app/routes/home.tsx

@@ -0,0 +1,241 @@
+import { useState, type ChangeEvent } from 'react';
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: 'Agentuity + React Router' },
+		{ name: 'description', content: 'AI translation demo with Agentuity' },
+	];
+}
+
+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.';
+
+export default function Home() {
+	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 [result, setResult] = useState<{
+		translation: string;
+		tokens: number;
+		model: string;
+		toLanguage: string;
+	} | null>(null);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleTranslate = async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const res = await fetch('/api/translate', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ text, toLanguage, model }),
+			});
+			if (!res.ok) {
+				const errBody = await res.json().catch(() => ({ message: `API error ${res.status}` }));
+				throw new Error(errBody.message || `API error ${res.status}`);
+			}
+			setResult(await res.json());
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Translation failed');
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	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">React Router</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}
+						</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: 'Route actions',
+								text: (
+									<>
+										Edit <code className="text-white">app/routes/api.translate.ts</code> to
+										change the AI model, prompt, or add new routes.
+									</>
+								),
+							},
+							{
+								title: 'React Router',
+								text: (
+									<>
+										Add routes in <code className="text-white">app/routes/</code> — nested
+										routing with built-in data loading.
+									</>
+								),
+							},
+						].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>
+	);
+}

package/src/cmd/project/templates/sveltekit/src/routes/+page.server.ts

@@ -0,0 +1,24 @@
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		const text = formData.get('text') as string;
+		const toLanguage = formData.get('toLanguage') as string;
+		const model = (formData.get('model') as string) || 'gpt-4o-mini';
+
+		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 {
+			translation,
+			tokens: usage?.totalTokens ?? 0,
+			model,
+			toLanguage,
+		};
+	},
+};

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));