@nordsym/apiclaw 1.2.2 → 1.2.3

package/landing/src/app/providers/register/page.tsx

@@ -62,6 +62,7 @@ export default function RegisterPage() {
   const [isComplete, setIsComplete] = useState(false);
   const [parseStatus, setParseStatus] = useState<'idle' | 'parsing' | 'success' | 'error'>('idle');
   const [error, setError] = useState<string | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
   
   const [formData, setFormData] = useState<FormData>({
     providerName: "",
@@ -76,6 +77,29 @@ export default function RegisterPage() {
     pricingNotes: "",
   });
 
+  // Check if user is logged in and pre-fill provider info
+  useEffect(() => {
+    const token = localStorage.getItem('apiclaw_session');
+    const providerData = localStorage.getItem('apiclaw_provider');
+    
+    if (token && providerData) {
+      try {
+        const provider = JSON.parse(providerData);
+        setFormData(prev => ({
+          ...prev,
+          providerName: provider.name || prev.providerName,
+          email: provider.email || prev.email,
+          website: provider.website || prev.website,
+        }));
+        setIsLoggedIn(true);
+        // Skip to step 2 if logged in
+        setStep(2);
+      } catch {
+        // Invalid provider data, continue as guest
+      }
+    }
+  }, []);
+
   useEffect(() => {
     const saved = localStorage.getItem('theme');
     const prefersDark = saved ? saved === 'dark' : true;
@@ -175,8 +199,41 @@ export default function RegisterPage() {
     setError(null);
     
     try {
-      // Submit to Convex
-      const response = await fetch(`${process.env.NEXT_PUBLIC_CONVEX_URL || 'https://brilliant-puffin-712.eu-west-1.convex.cloud'}/api/mutation`, {
+      const token = localStorage.getItem('apiclaw_session');
+      
+      // If logged in, add API to existing account
+      if (token && isLoggedIn) {
+        const response = await fetch(`${process.env.NEXT_PUBLIC_CONVEX_URL || 'https://adventurous-avocet-799.convex.cloud'}/api/mutation`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            path: 'providers:addAPI',
+            args: {
+              token,
+              api: {
+                name: formData.apiName,
+                description: formData.description,
+                category: formData.category,
+                openApiUrl: formData.openApiUrl || undefined,
+                docsUrl: formData.docsUrl || undefined,
+                pricingModel: formData.pricingModel,
+                pricingNotes: formData.pricingNotes || undefined,
+              }
+            }
+          })
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || 'Failed to add API');
+        }
+        
+        setIsComplete(true);
+        return;
+      }
+      
+      // Submit to Convex (new provider)
+      const response = await fetch(`${process.env.NEXT_PUBLIC_CONVEX_URL || 'https://adventurous-avocet-799.convex.cloud'}/api/mutation`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -205,6 +262,12 @@ export default function RegisterPage() {
         throw new Error(errorData.message || 'Submission failed');
       }
 
+      // Parse response and save session token for auto-login
+      const result = await response.json();
+      if (result.value?.sessionToken) {
+        localStorage.setItem('apiclaw_session', result.value.sessionToken);
+      }
+
       // Send confirmation email via Symbot SMTP
       await fetch('https://nordsym.app.n8n.cloud/webhook/symbot-gmail', {
         method: 'POST',
@@ -300,6 +363,11 @@ export default function RegisterPage() {
             <span className="font-bold text-lg tracking-tight">APIClaw</span>
           </Link>
           <div className="flex items-center gap-3">
+            {isLoggedIn && (
+              <span className="text-sm text-text-muted hidden sm:block">
+                Logged in as <strong className="text-text-primary">{formData.providerName}</strong>
+              </span>
+            )}
             <button
               onClick={toggleTheme}
               className="p-2 rounded-lg hover:bg-[var(--surface)] transition"
@@ -307,14 +375,23 @@ export default function RegisterPage() {
             >
               {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
             </button>
-            <a
-              href="https://github.com/nordsym/apiclaw"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="btn-secondary !py-2 !px-4 text-sm"
-            >
-              <Github className="w-4 h-4" />
-            </a>
+            {isLoggedIn ? (
+              <Link
+                href="/providers/dashboard"
+                className="btn-secondary !py-2 !px-4 text-sm"
+              >
+                Dashboard
+              </Link>
+            ) : (
+              <a
+                href="https://github.com/nordsym/apiclaw"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-secondary !py-2 !px-4 text-sm"
+              >
+                <Github className="w-4 h-4" />
+              </a>
+            )}
           </div>
         </div>
       </header>

package/landing/src/components/AiClientDropdown.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+
+export type AiClient = "chatgpt" | "other";
+
+interface AiClientOption {
+  value: AiClient;
+  label: string;
+  configPath: string;
+  isGui?: boolean;
+}
+
+const clients: AiClientOption[] = [
+  {
+    value: "other",
+    label: "Claude, Cursor, Cline & others",
+    configPath: "Add to your MCP config file",
+  },
+  {
+    value: "chatgpt",
+    label: "ChatGPT",
+    configPath: "Settings → Connections → Add MCP",
+    isGui: true,
+  },
+];
+
+interface Props {
+  value: AiClient;
+  onChange: (client: AiClient) => void;
+}
+
+export function AiClientDropdown({ value, onChange }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selected = clients.find((c) => c.value === value) || clients[0];
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-between gap-3 w-full sm:w-64 px-4 py-3 rounded-xl bg-surface border border-border hover:border-accent/50 transition-colors text-left"
+      >
+        <span className="font-medium">{selected.label}</span>
+        <ChevronDown className={`w-4 h-4 text-text-muted transition-transform ${isOpen ? "rotate-180" : ""}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 mt-2 w-full sm:w-64 rounded-xl bg-surface-elevated border border-border shadow-xl overflow-hidden">
+          {clients.map((client) => (
+            <button
+              key={client.value}
+              onClick={() => {
+                onChange(client.value);
+                setIsOpen(false);
+              }}
+              className={`w-full px-4 py-3 text-left hover:bg-surface transition-colors ${
+                client.value === value ? "bg-accent/10 text-accent" : ""
+              }`}
+            >
+              <div className="font-medium">{client.label}</div>
+              <div className="text-xs text-text-muted truncate">{client.configPath}</div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function getClientConfig(client: AiClient): AiClientOption {
+  return clients.find((c) => c.value === client) || clients[0];
+}

package/landing/src/components/ConfigHelperModal.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { X, ExternalLink, Folder } from "lucide-react";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const configLocations = [
+  {
+    name: "Claude Desktop",
+    paths: [
+      { os: "Mac", path: "~/Library/Application Support/Claude/", file: "claude_desktop_config.json" },
+      { os: "Windows", path: "%APPDATA%\\Claude\\", file: "claude_desktop_config.json" },
+      { os: "Linux", path: "~/.config/Claude/", file: "claude_desktop_config.json" },
+    ],
+  },
+  {
+    name: "ChatGPT",
+    paths: [
+      { os: "All", path: "Settings → Connections → Add MCP Server", file: "" },
+    ],
+    isGui: true,
+  },
+  {
+    name: "Cursor",
+    paths: [
+      { os: "All", path: "~/.cursor/mcp.json", file: "" },
+    ],
+  },
+  {
+    name: "Cline",
+    paths: [
+      { os: "All", path: "~/.cline/mcp_config.json", file: "" },
+    ],
+  },
+];
+
+export function ConfigHelperModal({ isOpen, onClose }: Props) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-background border border-border rounded-2xl shadow-2xl max-w-lg w-full max-h-[85vh] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="p-4 sm:p-6 border-b border-border">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg sm:text-xl font-bold flex items-center gap-2">
+              <Folder className="w-5 h-5 text-accent" />
+              Config File Locations
+            </h3>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-surface rounded-lg transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-4 sm:p-6 space-y-3 max-h-[60vh] overflow-y-auto">
+          {configLocations.map((client, i) => (
+            <div key={i} className="p-3 sm:p-4 rounded-xl bg-surface border border-border">
+              <div className="flex items-center gap-2 mb-2">
+                <span className="font-semibold text-sm sm:text-base">{client.name}</span>
+                {client.isGui && (
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-accent/20 text-accent">GUI</span>
+                )}
+              </div>
+              
+              <div className="space-y-1.5">
+                {client.paths.map((p, j) => (
+                  <div key={j} className="text-xs sm:text-sm">
+                    {p.os !== "All" && (
+                      <span className="text-text-muted mr-1">{p.os}:</span>
+                    )}
+                    <code className="text-text-secondary bg-surface-elevated px-1.5 py-0.5 rounded text-xs break-all">
+                      {p.path}{p.file && ` ${p.file}`}
+                    </code>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 sm:p-6 border-t border-border bg-surface/50">
+          <p className="text-xs sm:text-sm text-text-muted mb-3 text-center">
+            After adding config, restart your AI app.
+          </p>
+          <a
+            href="https://github.com/nordsym/apiclaw#installation"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-secondary w-full justify-center text-sm"
+          >
+            <span>Full Setup Guide</span>
+            <ExternalLink className="w-4 h-4" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/landing/src/components/HeroTabs.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check, HelpCircle, ArrowRight, Users, Zap, BarChart3, Gift } from "lucide-react";
+import { AiClientDropdown, getClientConfig, type AiClient } from "./AiClientDropdown";
+import { ConfigHelperModal } from "./ConfigHelperModal";
+
+export function HeroTabs() {
+  const [activeTab, setActiveTab] = useState<"connect" | "add">("connect");
+  const [selectedClient, setSelectedClient] = useState<AiClient>("other");
+  const [showConfigHelper, setShowConfigHelper] = useState(false);
+  const [copiedConfig, setCopiedConfig] = useState(false);
+  const [copiedTerminal, setCopiedTerminal] = useState(false);
+
+  // Config snippets
+  const jsonConfig = JSON.stringify({
+    mcpServers: {
+      apiclaw: {
+        command: "npx",
+        args: ["@nordsym/apiclaw"]
+      }
+    }
+  }, null, 2);
+  
+  const chatGptInstructions = `1. Open ChatGPT Settings
+2. Go to Connections → Add MCP Server
+3. Enter:
+   • Name: apiclaw
+   • Command: npx @nordsym/apiclaw
+4. Save and restart ChatGPT`;
+
+  const configSnippetJson = selectedClient === "chatgpt" ? chatGptInstructions : jsonConfig;
+
+  const terminalCommand = "npx @nordsym/apiclaw";
+
+  const copyConfig = () => {
+    navigator.clipboard.writeText(configSnippetJson);
+    setCopiedConfig(true);
+    setTimeout(() => setCopiedConfig(false), 2000);
+  };
+
+  const copyTerminal = () => {
+    navigator.clipboard.writeText(terminalCommand);
+    setCopiedTerminal(true);
+    setTimeout(() => setCopiedTerminal(false), 2000);
+  };
+
+  const clientConfig = getClientConfig(selectedClient);
+
+  return (
+    <>
+      <div className="w-full max-w-2xl mx-auto lg:mx-0">
+        {/* Tab Buttons */}
+        <div className="flex gap-2 mb-6">
+          <button
+            onClick={() => setActiveTab("connect")}
+            className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
+              activeTab === "connect"
+                ? "bg-accent text-white shadow-lg shadow-accent/25"
+                : "bg-surface border border-border hover:border-accent/50"
+            }`}
+          >
+            Connect Your Agent
+          </button>
+          <button
+            onClick={() => setActiveTab("add")}
+            className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
+              activeTab === "add"
+                ? "bg-accent text-white shadow-lg shadow-accent/25"
+                : "bg-surface border border-border hover:border-accent/50"
+            }`}
+          >
+            Add Your API
+          </button>
+        </div>
+
+        {/* Tab Content */}
+        <div className="rounded-2xl bg-surface-elevated border border-border p-6 shadow-xl">
+          {activeTab === "connect" && (
+            <div className="space-y-6">
+              {/* Client Selector */}
+              <div>
+                <label className="block text-sm text-text-muted mb-2">Select your AI:</label>
+                <AiClientDropdown value={selectedClient} onChange={setSelectedClient} />
+              </div>
+
+              {/* Config Snippet */}
+              <div>
+                <label className="block text-sm text-text-muted mb-2">
+                  {clientConfig.isGui ? "Setup instructions:" : "Add to your config:"}
+                </label>
+                <div className="code-preview">
+                  <div className="code-preview-header">
+                    {clientConfig.isGui ? "Instructions" : clientConfig.configPath.split("/").pop()}
+                  </div>
+                  <div className="code-preview-body">
+                    <pre className="text-sm whitespace-pre-wrap text-text-secondary">{configSnippetJson}</pre>
+                  </div>
+                </div>
+                
+                <div className="flex flex-wrap items-center gap-3 mt-3">
+                  <button onClick={copyConfig} className="btn-primary !py-2 !px-4 text-sm">
+                    {copiedConfig ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                    {copiedConfig ? "Copied!" : "Copy Config"}
+                  </button>
+                  <button
+                    onClick={() => setShowConfigHelper(true)}
+                    className="btn-ghost !py-2 !px-4 text-sm"
+                  >
+                    <HelpCircle className="w-4 h-4" />
+                    Where's my config file?
+                  </button>
+                </div>
+              </div>
+
+              {/* Divider */}
+              <div className="flex items-center gap-4">
+                <div className="flex-1 h-px bg-border" />
+                <span className="text-sm text-text-muted">or run directly</span>
+                <div className="flex-1 h-px bg-border" />
+              </div>
+
+              {/* Terminal Command */}
+              <div>
+                <div className="code-preview">
+                  <div className="code-preview-header">terminal</div>
+                  <div className="code-preview-body">
+                    <pre className="text-sm">
+                      <span className="text-green-400">$</span> <span className="text-blue-400">npx</span> @nordsym/apiclaw
+                    </pre>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 mt-3">
+                  <button onClick={copyTerminal} className="btn-ghost !py-2 !px-4 text-sm">
+                    {copiedTerminal ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                    {copiedTerminal ? "Copied!" : "Copy"}
+                  </button>
+                  <span className="text-xs text-text-muted">← Run in terminal to test</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "add" && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-xl font-bold mb-2">Make your API available to AI agents</h3>
+                <p className="text-text-secondary">
+                  Self-service onboarding. Live in minutes. Free to list.
+                </p>
+              </div>
+
+              <ul className="space-y-3">
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <Users className="w-5 h-5 text-accent flex-shrink-0" />
+                  <span>Reach thousands of AI agents</span>
+                </li>
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <Zap className="w-5 h-5 text-accent flex-shrink-0" />
+                  <span>No code changes required</span>
+                </li>
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <BarChart3 className="w-5 h-5 text-accent flex-shrink-0" />
+                  <span>Analytics & usage insights</span>
+                </li>
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <Gift className="w-5 h-5 text-accent flex-shrink-0" />
+                  <span>Free to list</span>
+                </li>
+              </ul>
+
+              <a
+                href="/providers/dashboard"
+                className="btn-primary w-full justify-center"
+              >
+                Open Provider Dashboard
+                <ArrowRight className="w-4 h-4" />
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <ConfigHelperModal isOpen={showConfigHelper} onClose={() => setShowConfigHelper(false)} />
+    </>
+  );
+}