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

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"}

package/dist/cmd/project/frameworks-ai-examples.js

@@ -1,160 +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 function nextjsAiExample() {
-    return {
-        'app/api/chat/route.ts': `import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-import { NextResponse } from 'next/server';
-
-export async function POST(request: Request) {
-\tconst { message } = await request.json();
-
-\tconst { text } = await generateText({
-\t\tmodel: openai('gpt-4o-mini'),
-\t\tprompt: message,
-\t});
-
-\treturn NextResponse.json({ reply: text });
-}
-`,
-    };
-}
-export function nuxtAiExample() {
-    return {
-        'server/api/chat.post.ts': `import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-export default defineEventHandler(async (event) => {
-\tconst { message } = await readBody(event);
-
-\tconst { text } = await generateText({
-\t\tmodel: openai('gpt-4o-mini'),
-\t\tprompt: message,
-\t});
-
-\treturn { reply: text };
-});
-`,
-    };
-}
-export function remixAiExample() {
-    return {
-        'app/routes/api.chat.ts': `import { type ActionFunctionArgs, json } from '@remix-run/node';
-import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-export async function action({ request }: ActionFunctionArgs) {
-\tconst { message } = await request.json();
-
-\tconst { text } = await generateText({
-\t\tmodel: openai('gpt-4o-mini'),
-\t\tprompt: message,
-\t});
-
-\treturn json({ reply: text });
-}
-`,
-    };
-}
-export function sveltekitAiExample() {
-    return {
-        'src/routes/api/chat/+server.ts': `import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-export const POST: RequestHandler = async ({ request }) => {
-\tconst { message } = await request.json();
-
-\tconst { text } = await generateText({
-\t\tmodel: openai('gpt-4o-mini'),
-\t\tprompt: message,
-\t});
-
-\treturn json({ reply: text });
-};
-`,
-    };
-}
-export function astroAiExample() {
-    return {
-        'src/pages/api/chat.ts': `import type { APIRoute } from 'astro';
-import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-export const POST: APIRoute = async ({ request }) => {
-\tconst { message } = await request.json();
-
-\tconst { text } = await generateText({
-\t\tmodel: openai('gpt-4o-mini'),
-\t\tprompt: message,
-\t});
-
-\treturn new Response(
-\t\tJSON.stringify({ reply: text }),
-\t\t{ headers: { 'Content-Type': 'application/json' } }
-\t);
-};
-`,
-    };
-}
-export function honoAiExample() {
-    return {
-        'src/index.ts': `import { Hono } from 'hono';
-import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-const app = new Hono();
-
-app.get('/', (c) => c.text('Hello from Hono + Agentuity!'));
-
-app.post('/api/chat', async (c) => {
-\tconst { message } = await c.req.json();
-
-\tconst { text } = await generateText({
-\t\tmodel: openai('gpt-4o-mini'),
-\t\tprompt: message,
-\t});
-
-\treturn c.json({ reply: text });
-});
-
-export default app;
-`,
-    };
-}
-export function viteReactAiExample() {
-    return {
-        'server.ts': `import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-Bun.serve({
-\tport: process.env.PORT ?? 3000,
-\tasync fetch(request) {
-\t\tconst url = new URL(request.url);
-
-\t\tif (url.pathname === '/api/chat' && request.method === 'POST') {
-\t\t\tconst { message } = await request.json();
-
-\t\t\tconst { text } = await generateText({
-\t\t\t\tmodel: openai('gpt-4o-mini'),
-\t\t\t\tprompt: message,
-\t\t\t});
-
-\t\t\treturn Response.json({ reply: text });
-\t\t}
-
-\t\treturn new Response('Not Found', { status: 404 });
-\t},
-});
-
-console.log('Server running on http://localhost:' + (process.env.PORT ?? 3000));
-`,
-    };
-}
-//# sourceMappingURL=frameworks-ai-examples.js.map

package/dist/cmd/project/frameworks-ai-examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"frameworks-ai-examples.js","sourceRoot":"","sources":["../../../src/cmd/project/frameworks-ai-examples.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,eAAe;IAC9B,OAAO;QACN,uBAAuB,EAAE;;;;;;;;;;;;;;CAc1B;KACC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,OAAO;QACN,yBAAyB,EAAE;;;;;;;;;;;;;CAa5B;KACC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,wBAAwB,EAAE;;;;;;;;;;;;;;CAc3B;KACC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB;IACjC,OAAO;QACN,gCAAgC,EAAE;;;;;;;;;;;;;;;CAenC;KACC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,uBAAuB,EAAE;;;;;;;;;;;;;;;;;CAiB1B;KACC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,OAAO;QACN,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;CAoBjB;KACC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB;IACjC,OAAO;QACN,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;CAwBd;KACC,CAAC;AACH,CAAC"}

package/dist/cmd/project/frameworks-landing-pages.d.ts

@@ -1,17 +0,0 @@
-/**
- * Agentuity-branded landing page generators for each framework.
- *
- * Each function returns a map of relative file paths to file contents
- * that replace the framework's default landing page with a dark-themed
- * Agentuity welcome page matching the brand design system.
- *
- * Design: dark background (#09090b), cyan accent (#00FFFF), Agentuity
- * logo, "Welcome to Agentuity" heading, and framework-specific next steps.
- */
-export declare function nextjsLandingPage(): Record<string, string>;
-export declare function nuxtLandingPage(): Record<string, string>;
-export declare function remixLandingPage(): Record<string, string>;
-export declare function sveltekitLandingPage(): Record<string, string>;
-export declare function astroLandingPage(): Record<string, string>;
-export declare function viteReactLandingPage(): Record<string, string>;
-//# sourceMappingURL=frameworks-landing-pages.d.ts.map

package/dist/cmd/project/frameworks-landing-pages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"frameworks-landing-pages.d.ts","sourceRoot":"","sources":["../../../src/cmd/project/frameworks-landing-pages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA6EH,wBAAgB,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6B1D;AAED,wBAAgB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqBxD;AAED,wBAAgB,gBAAgB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2BzD;AAED,wBAAgB,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAe7D;AAED,wBAAgB,gBAAgB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBzD;AAED,wBAAgB,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6B7D"}