create-githat-app 1.0.0 → 1.0.1

package/package.json

@@ -1,35 +1,53 @@
 {
   "name": "create-githat-app",
-  "version": "1.0.0",
-  "description": "Scaffold enterprise-grade apps with GitHat identity — for humans, AI agents, and MCP servers",
+  "version": "1.0.1",
+  "description": "GitHat CLI — scaffold apps and manage the skills marketplace",
   "type": "module",
   "bin": {
-    "create-githat-app": "./bin/index.js"
+    "create-githat-app": "./bin/index.js",
+    "githat": "./bin/index.js"
   },
-  "files": ["bin", "dist", "templates"],
+  "files": [
+    "bin",
+    "dist",
+    "templates"
+  ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "test": "node bin/index.js --help"
   },
   "dependencies": {
-    "@clack/prompts": "^0.9.1",
+    "@clack/prompts": "^1.0.1",
     "chalk": "^5.4.1",
-    "commander": "^13.1.0",
+    "commander": "^14.0.3",
     "figlet": "^1.8.0",
     "fs-extra": "^11.2.0",
     "gradient-string": "^3.0.0",
     "handlebars": "^4.7.8",
-    "ora": "^8.1.1"
+    "ora": "^9.3.0",
+    "unzipper": "^0.12.3"
   },
   "devDependencies": {
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
     "@types/gradient-string": "^1.1.6",
+    "@types/unzipper": "^0.10.10",
     "tsup": "^8.4.0",
     "typescript": "^5.9.0"
   },
-  "keywords": ["githat", "nextjs", "react", "vite", "create-app", "cli", "auth", "identity", "mcp", "ai-agents"],
+  "keywords": [
+    "githat",
+    "nextjs",
+    "react",
+    "vite",
+    "create-app",
+    "cli",
+    "auth",
+    "identity",
+    "mcp",
+    "ai-agents"
+  ],
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
     "access": "public",

package/templates/base/README.md.hbs

@@ -0,0 +1,94 @@
+# {{projectName}}
+
+Built with [GitHat](https://githat.io) — your backend is already set up. Auth, teams, orgs, API keys, MCP verification, and AI agent identity are handled by GitHat's hosted platform.
+
+## Getting Started
+
+1. Install dependencies:
+
+```bash
+{{#ifEquals packageManager "yarn"}}yarn{{else}}{{packageManager}} install{{/ifEquals}}
+```
+
+2. Add your GitHat publishable key to `{{#ifEquals framework "nextjs"}}.env.local{{else}}.env{{/ifEquals}}`:
+
+```env
+{{#ifEquals framework "nextjs"}}NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY{{else}}VITE_GITHAT_PUBLISHABLE_KEY{{/ifEquals}}=pk_live_your_key_here
+```
+
+Get your key at [githat.io/dashboard/apps](https://githat.io/dashboard/apps).
+
+3. Start the dev server:
+
+```bash
+{{#ifEquals packageManager "npm"}}npm run dev{{else}}{{packageManager}} dev{{/ifEquals}}
+```
+
+4. Open [http://localhost:{{#ifEquals framework "nextjs"}}3000{{else}}5173{{/ifEquals}}](http://localhost:{{#ifEquals framework "nextjs"}}3000{{else}}5173{{/ifEquals}})
+
+## Your Backend
+
+All API calls go to `api.githat.io`. Your data is stored in GitHat's database. **No backend to deploy.**
+
+GitHat handles:
+
+- User auth (sign-up, sign-in, email verification, password reset)
+- Organizations (create, switch, branding)
+- Team management (invite members, assign roles)
+- API key management (publishable + secret keys)
+{{#if includeMcpModule}}- MCP server registration and domain verification
+{{/if}}{{#if includeAgentModule}}- AI agent registration and wallet verification
+{{/if}}- Email delivery (verification, invitations, password resets)
+
+The `githat/` folder in your project is a typed API client that talks to `api.githat.io`. You write frontend code, GitHat handles the rest.
+
+Manage everything at [githat.io/dashboard](https://githat.io/dashboard).
+
+## Pages
+
+- `/sign-in` — Sign in
+- `/sign-up` — Create account
+{{#if includeForgotPassword}}- `/forgot-password` — Password recovery
+{{/if}}{{#if includeDashboard}}- `/dashboard` — Protected dashboard
+{{/if}}{{#if includeOrgManagement}}- `/dashboard/members` — Invite members, manage roles
+{{/if}}
+
+## GitHat SDK
+
+This project uses [`@githat/nextjs`](https://www.npmjs.com/package/@githat/nextjs) for connecting to the GitHat platform:
+
+```{{#if typescript}}tsx{{else}}jsx{{/if}}
+import { useAuth, UserButton, OrgSwitcher } from '@githat/nextjs';
+
+const { user, org, signIn, signUp, signOut } = useAuth();
+```
+
+## Deploy
+
+{{#ifEquals framework "nextjs"}}### Vercel (recommended)
+
+```bash
+npx vercel
+```
+
+Add `NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY` to your Vercel project environment variables.
+{{else}}### Vercel
+
+```bash
+npx vercel
+```
+
+### Netlify
+
+```bash
+npx netlify deploy
+```
+
+Add `VITE_GITHAT_PUBLISHABLE_KEY` to your hosting provider's environment variables.
+{{/ifEquals}}
+
+## Learn More
+
+- [GitHat Documentation](https://githat.io/docs)
+- [SDK Reference](https://www.npmjs.com/package/@githat/nextjs)
+- [API Reference (42+ endpoints)](https://githat.io/docs/api)

package/templates/nextjs/app/(auth)/reset-password/page.tsx.hbs

@@ -0,0 +1,98 @@
+{{#if includeForgotPassword}}
+'use client';
+
+import { useState } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+{{#if includeGithatFolder}}
+import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
+{{/if}}
+
+export default function ResetPasswordPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
+    e.preventDefault();
+    if (password !== confirm) {
+      setError('Passwords do not match');
+      return;
+    }
+    setError('');
+    setLoading(true);
+    try {
+{{#if includeGithatFolder}}
+      await authApi.resetPassword(token!, password);
+{{else}}
+      const res = await fetch('{{apiUrl}}/auth/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) throw new Error('Reset failed');
+{{/if}}
+      router.push('/sign-in?reset=success');
+    } catch (err) {
+      setError('Failed to reset password. The link may have expired.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+        <div style=\{{ textAlign: 'center' }}>
+          <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Invalid reset link</h1>
+          <p style=\{{ color: '#a1a1aa' }}>
+            <a href="/forgot-password" style=\{{ color: '#7c3aed' }}>Request a new one</a>
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <div style=\{{ width: '100%', maxWidth: '24rem', padding: '2rem' }}>
+        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Reset password</h1>
+        <p style=\{{ color: '#a1a1aa', marginBottom: '1.5rem' }}>Enter your new password below.</p>
+        {error && <p style=\{{ color: '#ef4444', marginBottom: '1rem', fontSize: '0.875rem' }}>{error}</p>}
+        <form onSubmit={handleSubmit}>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="New password"
+            required
+            minLength={8}
+            disabled={loading}
+            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
+          />
+          <input
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="Confirm password"
+            required
+            disabled={loading}
+            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            style=\{{ width: '100%', padding: '0.625rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.7 : 1 }}
+          >
+            {loading ? 'Resetting...' : 'Reset password'}
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}
+{{/if}}

package/templates/nextjs/app/page.tsx.hbs

@@ -1,6 +1,61 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
 
+const hasKey = !!process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY;
+
+function SetupGuide() {
+  return (
+    <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-8 bg-[#09090b] text-[#fafafa] px-6"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '2rem', background: '#09090b', color: '#fafafa', padding: '0 1.5rem' }}{{/if}}>
+      <div {{#if useTailwind}}className="text-center"{{else}}style=\{{ textAlign: 'center' }}{{/if}}>
+        <h1 {{#if useTailwind}}className="text-4xl font-bold mb-2"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700, marginBottom: '0.5rem' }}{{/if}}>
+          {{businessName}}
+        </h1>
+        <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
+          Get started in 3 steps
+        </p>
+      </div>
+
+      <div {{#if useTailwind}}className="flex flex-col gap-4 max-w-md w-full"{{else}}style=\{{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '28rem', width: '100%' }}{{/if}}>
+        <div {{#if useTailwind}}className="flex gap-4 items-start p-4 rounded-lg border border-zinc-800 bg-zinc-900"{{else}}style=\{{ display: 'flex', gap: '1rem', alignItems: 'flex-start', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #27272a', background: '#18181b' }}{{/if}}>
+          <span {{#if useTailwind}}className="text-xl font-bold text-violet-400 shrink-0"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa', flexShrink: 0 }}{{/if}}>1</span>
+          <div>
+            <p {{#if useTailwind}}className="font-semibold"{{else}}style=\{{ fontWeight: 600 }}{{/if}}>Sign up at GitHat</p>
+            <a href="https://githat.io/sign-up" target="_blank" rel="noopener noreferrer" {{#if useTailwind}}className="text-violet-400 hover:underline text-sm"{{else}}style=\{{ color: '#a78bfa', fontSize: '0.875rem' }}{{/if}}>
+              githat.io/sign-up →
+            </a>
+          </div>
+        </div>
+
+        <div {{#if useTailwind}}className="flex gap-4 items-start p-4 rounded-lg border border-zinc-800 bg-zinc-900"{{else}}style=\{{ display: 'flex', gap: '1rem', alignItems: 'flex-start', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #27272a', background: '#18181b' }}{{/if}}>
+          <span {{#if useTailwind}}className="text-xl font-bold text-violet-400 shrink-0"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa', flexShrink: 0 }}{{/if}}>2</span>
+          <div>
+            <p {{#if useTailwind}}className="font-semibold"{{else}}style=\{{ fontWeight: 600 }}{{/if}}>Copy your publishable key</p>
+            <a href="https://githat.io/dashboard/apps" target="_blank" rel="noopener noreferrer" {{#if useTailwind}}className="text-violet-400 hover:underline text-sm"{{else}}style=\{{ color: '#a78bfa', fontSize: '0.875rem' }}{{/if}}>
+              Dashboard → Apps →
+            </a>
+          </div>
+        </div>
+
+        <div {{#if useTailwind}}className="flex gap-4 items-start p-4 rounded-lg border border-zinc-800 bg-zinc-900"{{else}}style=\{{ display: 'flex', gap: '1rem', alignItems: 'flex-start', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #27272a', background: '#18181b' }}{{/if}}>
+          <span {{#if useTailwind}}className="text-xl font-bold text-violet-400 shrink-0"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa', flexShrink: 0 }}{{/if}}>3</span>
+          <div>
+            <p {{#if useTailwind}}className="font-semibold"{{else}}style=\{{ fontWeight: 600 }}{{/if}}>Add to .env.local and restart</p>
+            <code {{#if useTailwind}}className="text-xs text-zinc-400 bg-zinc-800 px-2 py-1 rounded mt-1 block"{{else}}style=\{{ fontSize: '0.75rem', color: '#a1a1aa', background: '#27272a', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', marginTop: '0.25rem', display: 'block' }}{{/if}}>
+              NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY=pk_live_...
+            </code>
+          </div>
+        </div>
+      </div>
+
+      <a href="https://githat.io/docs/quickstart" target="_blank" rel="noopener noreferrer" {{#if useTailwind}}className="text-sm text-zinc-500 hover:text-zinc-300"{{else}}style=\{{ fontSize: '0.875rem', color: '#71717a' }}{{/if}}>
+        Read the docs →
+      </a>
+    </main>
+  );
+}
+
 export default function Home() {
+  if (!hasKey) return <SetupGuide />;
+
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-6 bg-[#09090b] text-[#fafafa]"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1.5rem', background: '#09090b', color: '#fafafa' }}{{/if}}>
       <h1 {{#if useTailwind}}className="text-4xl font-bold"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700 }}{{/if}}>

package/templates/nextjs/proxy.ts.hbs

@@ -0,0 +1,10 @@
+import { authProxy } from '@githat/nextjs/proxy';
+
+export const proxy = authProxy({
+  publicRoutes: ['/', '/sign-in', '/sign-up'{{#if includeForgotPassword}}, '/forgot-password', '/reset-password'{{/if}}{{#if includeEmailVerification}}, '/verify-email'{{/if}}],
+  signInUrl: '/sign-in',
+});
+
+export const config = {
+  matcher: ['/((?!_next|api|.*\\..*).*)'],
+};

package/templates/react-vite/src/pages/Home.tsx.hbs

@@ -1,6 +1,61 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
 
+const hasKey = !!import.meta.env.VITE_GITHAT_PUBLISHABLE_KEY;
+
+function SetupGuide() {
+  return (
+    <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-8 bg-[#09090b] text-[#fafafa] px-6"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '2rem', background: '#09090b', color: '#fafafa', padding: '0 1.5rem' }}{{/if}}>
+      <div {{#if useTailwind}}className="text-center"{{else}}style=\{{ textAlign: 'center' }}{{/if}}>
+        <h1 {{#if useTailwind}}className="text-4xl font-bold mb-2"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700, marginBottom: '0.5rem' }}{{/if}}>
+          {{businessName}}
+        </h1>
+        <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
+          Get started in 3 steps
+        </p>
+      </div>
+
+      <div {{#if useTailwind}}className="flex flex-col gap-4 max-w-md w-full"{{else}}style=\{{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '28rem', width: '100%' }}{{/if}}>
+        <div {{#if useTailwind}}className="flex gap-4 items-start p-4 rounded-lg border border-zinc-800 bg-zinc-900"{{else}}style=\{{ display: 'flex', gap: '1rem', alignItems: 'flex-start', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #27272a', background: '#18181b' }}{{/if}}>
+          <span {{#if useTailwind}}className="text-xl font-bold text-violet-400 shrink-0"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa', flexShrink: 0 }}{{/if}}>1</span>
+          <div>
+            <p {{#if useTailwind}}className="font-semibold"{{else}}style=\{{ fontWeight: 600 }}{{/if}}>Sign up at GitHat</p>
+            <a href="https://githat.io/sign-up" target="_blank" rel="noopener noreferrer" {{#if useTailwind}}className="text-violet-400 hover:underline text-sm"{{else}}style=\{{ color: '#a78bfa', fontSize: '0.875rem' }}{{/if}}>
+              githat.io/sign-up →
+            </a>
+          </div>
+        </div>
+
+        <div {{#if useTailwind}}className="flex gap-4 items-start p-4 rounded-lg border border-zinc-800 bg-zinc-900"{{else}}style=\{{ display: 'flex', gap: '1rem', alignItems: 'flex-start', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #27272a', background: '#18181b' }}{{/if}}>
+          <span {{#if useTailwind}}className="text-xl font-bold text-violet-400 shrink-0"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa', flexShrink: 0 }}{{/if}}>2</span>
+          <div>
+            <p {{#if useTailwind}}className="font-semibold"{{else}}style=\{{ fontWeight: 600 }}{{/if}}>Copy your publishable key</p>
+            <a href="https://githat.io/dashboard/apps" target="_blank" rel="noopener noreferrer" {{#if useTailwind}}className="text-violet-400 hover:underline text-sm"{{else}}style=\{{ color: '#a78bfa', fontSize: '0.875rem' }}{{/if}}>
+              Dashboard → Apps →
+            </a>
+          </div>
+        </div>
+
+        <div {{#if useTailwind}}className="flex gap-4 items-start p-4 rounded-lg border border-zinc-800 bg-zinc-900"{{else}}style=\{{ display: 'flex', gap: '1rem', alignItems: 'flex-start', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #27272a', background: '#18181b' }}{{/if}}>
+          <span {{#if useTailwind}}className="text-xl font-bold text-violet-400 shrink-0"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa', flexShrink: 0 }}{{/if}}>3</span>
+          <div>
+            <p {{#if useTailwind}}className="font-semibold"{{else}}style=\{{ fontWeight: 600 }}{{/if}}>Add to .env and restart</p>
+            <code {{#if useTailwind}}className="text-xs text-zinc-400 bg-zinc-800 px-2 py-1 rounded mt-1 block"{{else}}style=\{{ fontSize: '0.75rem', color: '#a1a1aa', background: '#27272a', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', marginTop: '0.25rem', display: 'block' }}{{/if}}>
+              VITE_GITHAT_PUBLISHABLE_KEY=pk_live_...
+            </code>
+          </div>
+        </div>
+      </div>
+
+      <a href="https://githat.io/docs/quickstart" target="_blank" rel="noopener noreferrer" {{#if useTailwind}}className="text-sm text-zinc-500 hover:text-zinc-300"{{else}}style=\{{ fontSize: '0.875rem', color: '#71717a' }}{{/if}}>
+        Read the docs →
+      </a>
+    </main>
+  );
+}
+
 export default function Home() {
+  if (!hasKey) return <SetupGuide />;
+
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-6 bg-[#09090b] text-[#fafafa]"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1.5rem', background: '#09090b', color: '#fafafa' }}{{/if}}>
       <h1 {{#if useTailwind}}className="text-4xl font-bold"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700 }}{{/if}}>

package/templates/nextjs/middleware.ts.hbs

@@ -1,10 +0,0 @@
-import { authMiddleware } from '@githat/nextjs/middleware';
-
-export default authMiddleware({
-  publicRoutes: ['/', '/sign-in', '/sign-up'{{#if includeForgotPassword}}, '/forgot-password'{{/if}}{{#if includeEmailVerification}}, '/verify-email'{{/if}}],
-  signInUrl: '/sign-in',
-});
-
-export const config = {
-  matcher: ['/((?!_next|api|.*\\..*).*)'],
-};