create-janux 0.1.0

package/README.md

@@ -0,0 +1,10 @@
+# create-janux
+
+Scaffold a new [Janux](https://github.com/aralroca/Janux) app:
+
+```bash
+bunx create-janux my-app
+cd my-app && bun install && bun run dev
+```
+
+Includes a resumable counter island, an `api()` example, and the built-in copilot (configure with `JANUX_MODEL` or a provider API key).

package/bin.ts

@@ -0,0 +1,28 @@
+#!/usr/bin/env bun
+import { cpSync, existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const name = process.argv[2];
+
+if (!name || !/^[a-z0-9-]+$/.test(name)) {
+  console.error('Usage: create-janux <app-name>   (kebab-case)');
+  process.exit(1);
+}
+const target = join(process.cwd(), name);
+
+if (existsSync(target)) {
+  console.error(`create-janux: "${name}" already exists`);
+  process.exit(1);
+}
+cpSync(join(import.meta.dirname, 'template'), target, { recursive: true });
+
+const pkgPath = join(target, 'package.json');
+
+writeFileSync(pkgPath, readFileSync(pkgPath, 'utf-8').replace(/__APP_NAME__/g, name));
+console.log(`✔ ${name} created
+
+  cd ${name}
+  bun install
+  bun run dev
+
+Configure the copilot with JANUX_MODEL or a provider API key (optional).`);

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-janux",
+  "version": "0.1.0",
+  "description": "Scaffold a new Janux app: bunx create-janux my-app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aralroca/Janux.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Aral Roca Gomez",
+    "email": "contact@aralroca.com"
+  },
+  "type": "module",
+  "bin": {
+    "create-janux": "./bin.ts"
+  },
+  "files": [
+    "bin.ts",
+    "template"
+  ],
+  "homepage": "https://github.com/aralroca/Janux#readme",
+  "bugs": "https://github.com/aralroca/Janux/issues",
+  "keywords": [
+    "janux",
+    "agentic-ui",
+    "mcp",
+    "webmcp",
+    "ai-agents",
+    "fullstack",
+    "framework",
+    "bun",
+    "vite",
+    "resumability",
+    "copilot"
+  ],
+  "engines": {
+    "bun": ">=1.3.0"
+  }
+}

package/template/.env.example

@@ -0,0 +1,9 @@
+# Copilot model — pick ONE option (RFC §8.1 resolution order)
+
+# Option 1: explicit model
+# JANUX_MODEL=anthropic/claude-fable-5
+
+# Option 2: provider key only — default model inferred
+# ANTHROPIC_API_KEY=sk-ant-...
+# OPENAI_API_KEY=sk-...
+# GOOGLE_GENERATIVE_AI_API_KEY=...

package/template/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "janux dev",
+    "build": "janux build",
+    "start": "janux start"
+  },
+  "dependencies": {
+    "janux": "^0.1.0",
+    "@janux/server": "^0.1.0",
+    "@janux/agent": "^0.1.0",
+    "@janux/cli": "^0.1.0"
+  }
+}

package/template/src/agent.ts

@@ -0,0 +1,5 @@
+import { defineAgent } from '@janux/agent';
+
+export default defineAgent({
+  instructions: 'You are this app’s copilot. Use the counter tools and api.hello.greet.',
+});

package/template/src/client.ts

@@ -0,0 +1,4 @@
+import { boot } from 'janux/client';
+import { Counter } from './components/Counter';
+
+boot({ defs: [Counter] });

package/template/src/components/Counter.tsx

@@ -0,0 +1,29 @@
+import { component, intent, schema, int } from 'janux';
+
+export const Counter = component({
+  name: 'counter',
+  description: 'A counter. Agents can read it (ui://counter) and bump it (counter.inc).',
+
+  state: schema({ n: int() }),
+
+  intents: {
+    inc: intent({
+      description: 'Increment the counter',
+      input: schema({ by: int().default(1) }),
+      run: ({ state, input }) => (state.n += input.by),
+    }),
+    reset: intent({
+      description: 'Reset the counter to zero',
+      guard: 'confirm',
+      run: ({ state }) => (state.n = 0),
+    }),
+  },
+
+  view: ({ state, intents }) => (
+    <section>
+      <output>{state.n}</output>
+      <button on={intents.inc}>+1</button>
+      <button on={intents.reset}>Reset</button>
+    </section>
+  ),
+});

package/template/src/routes/index.tsx

@@ -0,0 +1,14 @@
+import { Counter } from '../components/Counter';
+
+export default function Home() {
+  return (
+    <main>
+      <h1>Welcome to Janux</h1>
+      <p>This heading is static HTML (0 KB JS). The counter below is a resumable island.</p>
+      <Counter />
+      <p>
+        Try the agent surface: <code>curl localhost:3000/_janux/manifest</code>
+      </p>
+    </main>
+  );
+}

package/template/src/server/hello.api.ts

@@ -0,0 +1,8 @@
+import { api } from '@janux/server';
+import { schema, str } from 'janux';
+
+export const greet = api({
+  description: 'Greet someone by name',
+  input: schema({ name: str() }),
+  run: ({ input }) => ({ message: `Hello, ${input.name}! — from a Janux api() tool` }),
+});

package/template/src/styles.css

@@ -0,0 +1,220 @@
+:root {
+  --ink: #1e1b4b;
+  --violet: #7c3aed;
+  --cyan: #06b6d4;
+  --text: #334155;
+  --border: #e2e8f0;
+  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
+  color: var(--text);
+  background: #f8fafc;
+  -webkit-font-smoothing: antialiased;
+}
+
+main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 48px 24px 120px;
+}
+
+main.shop {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 28px;
+}
+
+main.shop > h1 {
+  grid-column: 1 / -1;
+}
+
+h1 {
+  margin: 0 0 20px;
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+}
+
+h2,
+h3 {
+  color: var(--ink);
+  letter-spacing: -0.02em;
+}
+
+a {
+  color: var(--violet);
+  font-weight: 600;
+}
+
+code {
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: #ede9fe;
+  color: #5b21b6;
+  font-family: var(--mono);
+  font-size: 0.88em;
+}
+
+button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 9px;
+  background: var(--ink);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.12s, opacity 0.12s;
+}
+
+button:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+/* ── Cart ───────────────────────────────────────────────────────── */
+.cart {
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 30px -18px rgba(30, 27, 75, 0.35);
+}
+
+.cart ul {
+  margin: 12px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cart .catalog li,
+.cart .items li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--border);
+  font-size: 15px;
+}
+
+.cart .catalog button {
+  background: linear-gradient(90deg, var(--violet), var(--cyan));
+}
+
+.cart .items li {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.cart .total {
+  margin: 16px 0 8px;
+  font-size: 1.2rem;
+  font-weight: 800;
+  color: var(--ink);
+}
+
+.cart .order {
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: #ecfdf5;
+  color: #047857;
+  font-weight: 600;
+}
+
+/* ── Copilot ────────────────────────────────────────────────────── */
+.copilot {
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 30px -18px rgba(30, 27, 75, 0.35);
+}
+
+.copilot h3 {
+  margin: 0 0 12px;
+}
+
+.copilot .chat {
+  margin: 0 0 12px;
+  padding: 0;
+  list-style: none;
+  max-height: 340px;
+  overflow-y: auto;
+}
+
+.copilot .chat li {
+  margin-bottom: 8px;
+  padding: 9px 13px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  max-width: 88%;
+}
+
+.copilot .chat li.user {
+  margin-left: auto;
+  background: linear-gradient(90deg, var(--violet), #6d28d9);
+  color: #fff;
+}
+
+.copilot .chat li.assistant {
+  background: #f1f5f9;
+  color: var(--ink);
+}
+
+.copilot form {
+  display: flex;
+  gap: 8px;
+}
+
+.copilot input {
+  flex: 1;
+  padding: 9px 13px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  font-size: 14px;
+  outline: none;
+}
+
+.copilot input:focus {
+  border-color: var(--violet);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
+}
+
+.proposal {
+  margin: 0 0 12px;
+  padding: 14px;
+  border: 1px solid #fde68a;
+  border-radius: 12px;
+  background: #fffbeb;
+}
+
+.proposal p {
+  margin: 0 0 10px;
+  font-size: 14px;
+  color: #92400e;
+}
+
+.proposal button + button {
+  margin-left: 8px;
+  background: #e2e8f0;
+  color: var(--ink);
+}
+
+@media (max-width: 900px) {
+  main.shop {
+    grid-template-columns: 1fr;
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "janux"
+  },
+  "include": ["src/**/*"]
+}