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

package/src/cmd/project/templates/nextjs/src/app/page.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { useState, type ChangeEvent } from 'react';
+import useSWRMutation from 'swr/mutation';
+
+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 translateRequest(
+	url: string,
+	{ arg }: { arg: { text: string; toLanguage: string; model: string } },
+) {
+	const res = await fetch(url, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(arg),
+	});
+	if (!res.ok) {
+		throw new Error(`API error ${res.status}: ${await res.text()}`);
+	}
+	return res.json();
+}
+
+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 { trigger, data, error, isMutating } = useSWRMutation(
+		'/api/translate',
+		translateRequest,
+	);
+
+	const handleTranslate = () => {
+		trigger({ text, toLanguage, model });
+	};
+
+	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">Next.js</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={isMutating}
+							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={isMutating}
+							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={isMutating || !text.trim()}
+								onClick={handleTranslate}
+								type="button"
+								data-loading={isMutating}
+							>
+								{isMutating ? '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={isMutating}
+						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>
+					) : isMutating ? (
+						<div
+							className="rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600"
+							data-loading="true"
+						/>
+					) : !data?.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">
+								{data.translation}
+							</div>
+							<div className="flex gap-4 text-xs text-gray-500">
+								{data.tokens > 0 && (
+									<span>
+										Tokens <strong className="text-gray-400">{data.tokens}</strong>
+									</span>
+								)}
+								<span>
+									Model <strong className="text-gray-400">{data.model}</strong>
+								</span>
+								<span>
+									Language <strong className="text-gray-400">{data.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: 'API routes',
+								text: (
+									<>
+										Edit{' '}
+										<code className="text-white">src/app/api/translate/route.ts</code> to
+										change the AI model, prompt, or add new routes.
+									</>
+								),
+							},
+							{
+								title: 'Next.js App Router',
+								text: (
+									<>
+										Add routes in <code className="text-white">src/app/</code> — file-based
+										routing with React Server Components.
+									</>
+								),
+							},
+						].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/nuxt/app.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+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.';
+
+const text = ref(DEFAULT_TEXT);
+const toLanguage = ref<(typeof LANGUAGES)[number]>('Spanish');
+const model = ref<(typeof MODELS)[number]>('gpt-4o-mini');
+
+const {
+	data: result,
+	error,
+	status,
+	execute: handleTranslate,
+} = useFetch('/api/translate', {
+	method: 'POST',
+	body: computed(() => ({ text: text.value, toLanguage: toLanguage.value, model: model.value })),
+	immediate: false,
+});
+
+const isLoading = computed(() => status.value === 'pending');
+</script>
+
+<template>
+	<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">Nuxt</span> + AI Gateway
+				</p>
+			</div>
+
+			<!-- Translate Form -->
+			<div
+				class="flex flex-col gap-6 rounded-lg border border-gray-900 bg-black p-8 text-gray-400 shadow-2xl"
+			>
+				<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"
+						:disabled="isLoading"
+						v-model="toLanguage"
+					>
+						<option v-for="lang in LANGUAGES" :key="lang" :value="lang">{{ lang }}</option>
+					</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"
+						:disabled="isLoading"
+						v-model="model"
+					>
+						<option v-for="m in MODELS" :key="m" :value="m">{{ m }}</option>
+					</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()"
+							@click="handleTranslate()"
+							type="button"
+							:data-loading="isLoading"
+						>
+							{{ isLoading ? 'Translating' : 'Translate' }}
+						</button>
+					</div>
+				</div>
+
+				<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"
+					v-model="text"
+					placeholder="Enter text to translate..."
+					rows="4"
+				/>
+
+				<!-- Translation Result -->
+				<div
+					v-if="error"
+					class="rounded-md border border-red-800 bg-red-950 px-4 py-3 text-sm text-red-400"
+				>
+					{{ error.message }}
+				</div>
+				<div
+					v-else-if="isLoading"
+					class="rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600"
+					data-loading="true"
+				/>
+				<div
+					v-else-if="!result?.translation"
+					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>
+				<template v-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"
+						>
+							{{ result.translation }}
+						</div>
+						<div class="flex gap-4 text-xs text-gray-500">
+							<span v-if="(result as any).tokens > 0">
+								Tokens <strong class="text-gray-400">{{ (result as any).tokens }}</strong>
+							</span>
+							<span>
+								Model <strong class="text-gray-400">{{ (result as any).model }}</strong>
+							</span>
+							<span>
+								Language
+								<strong class="text-gray-400">{{ (result as any).toLanguage }}</strong>
+							</span>
+						</div>
+					</div>
+				</template>
+			</div>
+
+			<!-- 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">
+					<div v-for="step in [
+						{
+							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: 'Server routes',
+							text: 'Edit `server/api/translate.post.ts` to change the AI model, prompt, or add new server routes.',
+						},
+						{
+							title: 'Nuxt',
+							text: 'Add pages in `pages/` and server routes in `server/api/` — full-stack Vue framework with SSR.',
+						},
+					]" :key="step.title" 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>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>

package/src/cmd/project/templates/nuxt/server/api/translate.post.ts

@@ -0,0 +1,18 @@
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+export default defineEventHandler(async (event) => {
+	const { text, toLanguage, model = 'gpt-4o-mini' } = await readBody(event);
+
+	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/remix/app/routes/api.translate.ts

@@ -0,0 +1,24 @@
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+import { data } from 'react-router';
+import type { Route } from './+types/api.translate';
+
+export async function action({ request }: Route.ActionArgs) {
+	const { text, toLanguage, model = 'gpt-4o-mini' } = await request.json();
+
+	try {
+		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 data({
+			translation,
+			tokens: usage?.totalTokens ?? 0,
+			model,
+			toLanguage,
+		});
+	} catch (error) {
+		throw data({ message: error instanceof Error ? error.message : 'Translation failed' }, { status: 500 });
+	}
+}