[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-black text-white font-mono; } } /* Enhanced terminal animations and effects for black/grey theme with more ASCII animations */ @keyframes terminal-glow { 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4); } 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 5px rgba(255, 255, 255, 0.4), 0 0 8px rgba(255, 255, 255, 0.2); } } .terminal-glow { animation: terminal-glow 2s ease-in-out infinite; } @keyframes matrix-rain { 0% { transform: translateY(-100vh); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .matrix-rain { animation: matrix-rain 3s linear infinite; } @keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .cursor-blink { animation: cursor-blink 1s infinite; } @keyframes scan-line { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } .scan-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); animation: scan-line 3s linear infinite; pointer-events: none; z-index: 1000; } @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .terminal-flicker { animation: flicker 0.15s ease-in-out infinite alternate; } /* Enhanced ASCII animation keyframes for more dynamic effects */ @keyframes ascii-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes ascii-slide { 0% { transform: translateX(-10px); opacity: 0.5; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(10px); opacity: 0.5; } } @keyframes ascii-rotate { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes ascii-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .ascii-pulse { animation: ascii-pulse 2s ease-in-out infinite; } .ascii-slide { animation: ascii-slide 3s ease-in-out infinite; } .ascii-rotate { animation: ascii-rotate 4s linear infinite; } .ascii-bounce { animation: ascii-bounce 2s infinite; } /* Added slow spin animation for SVG elements */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 3s linear infinite; } /* Enhanced hover effects for better interactivity with grey colors only */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); } } .hover-glow:hover { animation: pulse-glow 1.5s ease-in-out infinite; } /* Enhanced matrix background animation */ @keyframes matrix-flow { 0% { transform: translateY(-20px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } } .matrix-flow { animation: matrix-flow 4s linear infinite; } /* Custom scrollbar styling for black/grey terminal theme */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #000000; } ::-webkit-scrollbar-thumb { background: #404040; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #606060; } /* Terminal-specific utility classes */ .terminal-border { border: 1px solid #404040; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } .terminal-bg { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); } .terminal-text { font-family: "Courier New", "Monaco", "Menlo", monospace; letter-spacing: 0.5px; } /* Enhanced responsive grid for matrix background with more density */ .grid-cols-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); } .grid-cols-25 { grid-template-columns: repeat(25, minmax(0, 1fr)); } @media (min-width: 768px) { .grid-cols-20 { grid-template-columns: repeat(30, minmax(0, 1fr)); } .grid-cols-25 { grid-template-columns: repeat(35, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-cols-20 { grid-template-columns: repeat(40, minmax(0, 1fr)); } .grid-cols-25 { grid-template-columns: repeat(50, minmax(0, 1fr)); } } /* Enhanced button hover effects for terminal theme */ .btn-terminal { transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-terminal:hover { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); } .btn-terminal::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-terminal:hover::before { left: 100%; } /* Enhanced card hover effects with better shadows */ .card-interactive { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .card-interactive:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); background: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%); } /* Added ASCII art specific hover effects */ .ascii-hover:hover { text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.6); transition: all 0.3s ease; } .ascii-container:hover .ascii-art { animation: ascii-pulse 1s ease-in-out infinite; } /* Terminal window effects */ .terminal-window { background: linear-gradient(145deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%); border: 1px solid #333; box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5); } .terminal-window:hover { box-shadow: 0 0 30px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.5); } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Copy, Check } from "lucide-react" export default function TerminalIDE() { const [currentCommand, setCurrentCommand] = useState(0) const [showCursor, setShowCursor] = useState(true) const [matrixChars, setMatrixChars] = useState([]) const [animatedBoxes, setAnimatedBoxes] = useState([]) const [terminalLines, setTerminalLines] = useState([]) const [currentTyping, setCurrentTyping] = useState("") const [isExecuting, setIsExecuting] = useState(false) const [executionStep, setExecutionStep] = useState(0) const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>({}) const copyToClipboard = async (text: string, key: string) => { try { await navigator.clipboard.writeText(text) setCopiedStates((prev) => ({ ...prev, [key]: true })) setTimeout(() => { setCopiedStates((prev) => ({ ...prev, [key]: false })) }, 2000) } catch (err) { console.error("Failed to copy text: ", err) } } const commands = [ "hexa-cli init --ai-powered", "hexa-cli generate --model gpt-5 --context full", "hexa-cli review --agent claude-4 --interactive", "hexa-cli deploy --env production --optimize", ] const terminalSequences = [ { command: "hexa-cli init --ai-powered", outputs: [ "🚀 Initializing HEXA CLI project...", "📦 Installing dependencies...", "🤖 Configuring AI models...", "✅ Project initialized successfully!", ], }, { command: "hexa-cli generate --model gpt-5 --context full", outputs: [ "🧠 Loading GPT-5 model...", "📊 Analyzing codebase context...", "⚡ Generating optimized code...", "✨ Code generation complete!", ], }, { command: "hexa-cli review --agent claude-4 --interactive", outputs: [ "👁️ Starting interactive review...", "🔍 Claude-4 analyzing changes...", "💡 Suggesting improvements...", "🎯 Review session active!", ], }, { command: "hexa-cli deploy --env production --optimize", outputs: [ "🏗️ Building for production...", "⚡ Optimizing bundle size...", "🌐 Deploying to production...", "🎉 Deployment successful!", ], }, ] const heroAsciiText = `██╗ ██╗███████╗██╗ ██╗ █████╗ ██████╗██╗ ██╗ ██║ ██║██╔════╝╚██╗██╔╝██╔══██╗ ██╔════╝██║ ██║ ███████║█████╗ ╚███╔╝ ███████║ ██║ ██║ ██║ ██╔══██║██╔══╝ ██╔██╗ ██╔══██║ ██║ ██║ ██║ ██║ ██║███████╗██╔╝ ██╗██║ ██║ ╚██████╗███████╗██║ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝╚══════╝╚═╝` useEffect(() => { const chars = "HEXACLI01010101ABCDEF█▓▒░▄▀■□▪▫".split("") const newMatrixChars = Array.from({ length: 100 }, () => chars[Math.floor(Math.random() * chars.length)]) setMatrixChars(newMatrixChars) const interval = setInterval(() => { setMatrixChars((prev) => prev.map(() => chars[Math.floor(Math.random() * chars.length)])) }, 1500) return () => clearInterval(interval) }, []) useEffect(() => { const boxes = Array.from({ length: 6 }, () => Math.random() > 0.5) setAnimatedBoxes(boxes) const interval = setInterval(() => { setAnimatedBoxes((prev) => prev.map(() => Math.random() > 0.3)) }, 2000) return () => clearInterval(interval) }, []) useEffect(() => { const interval = setInterval(() => { setShowCursor((prev) => !prev) }, 500) return () => clearInterval(interval) }, []) useEffect(() => { const sequence = terminalSequences[currentCommand] const timeouts: NodeJS.Timeout[] = [] const runSequence = async () => { setTerminalLines([]) setCurrentTyping("") setIsExecuting(false) setExecutionStep(0) const command = sequence.command for (let i = 0; i <= command.length; i++) { timeouts.push( setTimeout(() => { setCurrentTyping(command.slice(0, i)) }, i * 50), ) } timeouts.push( setTimeout( () => { setIsExecuting(true) setCurrentTyping("") setTerminalLines((prev) => [...prev, `user@dev:~/project$ ${command}`]) }, command.length * 50 + 500, ), ) sequence.outputs.forEach((output, index) => { timeouts.push( setTimeout( () => { setExecutionStep(index + 1) setTerminalLines((prev) => [...prev, output]) }, command.length * 50 + 1000 + index * 800, ), ) }) timeouts.push( setTimeout( () => { setCurrentCommand((prev) => (prev + 1) % commands.length) }, command.length * 50 + 1000 + sequence.outputs.length * 800 + 2000, ), ) } runSequence() return () => { timeouts.forEach(clearTimeout) } }, [currentCommand]) return (

{/* ... existing nav code ... */}

HEXA CLI

Features

AI Models

Integrations

Docs

v2.1.0

copyToClipboard("npm install -g hexa-cli", "nav-install")} >

{copiedStates["nav-install"] ? ( ) : ( )} $ Install

{/* ... existing matrix background ... */}

{matrixChars.map((char, i) => (

{char}

))}

{/* ... existing hero section ... */}

{heroAsciiText}

Built to help you ship,
right from your{" "} terminal.

Use it in your IDE or any terminal. Same commands, any environment. Plug into your setup anywhere. Full control from your terminal.

copyToClipboard("npm install -g hexa-cli", "hero-install")} >

{copiedStates["hero-install"] ? ( ) : ( )} $ npm install -g hexa-cli

→ View Documentation

{/* ... existing terminal section ... */}

hexa-terminal

LIVE

{terminalLines.map((line, index) => (

{line}

))} {!isExecuting && (

user@dev : ~/project $ {currentTyping} █

)} {isExecuting && (

Processing...

)}

Commands executed: {currentCommand + 1}

AI Models: Active

Status: {isExecuting ? "Running" : "Ready"}

{/* ... existing integrations section ... */}

Universal IDE Support

HEXA CLI works everywhere. One installation, infinite possibilities.

hexa-cli ide --list

ALL SUPPORTED

$ hexa-cli ide --scan

{[ { name: "cursor", status: "✓", desc: "AI-powered editor" }, { name: "vscode", status: "✓", desc: "Microsoft VS Code" }, { name: "jetbrains", status: "✓", desc: "IntelliJ family" }, { name: "android-studio", status: "✓", desc: "Android development" }, { name: "vim/neovim", status: "✓", desc: "Terminal editors" }, { name: "intellij", status: "✓", desc: "Java development" }, ].map((ide) => (

{ide.status} {ide.name}

{ide.desc}

))}

$ hexa-cli ide --install-all # Setup all IDEs

$ hexa-cli ide --status # Check integration

6 Active

Zero config

● Universal compatibility • Instant setup • Works everywhere

{/* ... existing models section ... */}

Latest AI Models

Select your preferred AI model from the terminal

hexa-cli model select

6 AVAILABLE

$ hexa-cli model --list

{[ { id: "1", name: "gpt-5", provider: "openai", status: "●", color: "text-green-400" }, { id: "2", name: "claude-4-sonnet", provider: "anthropic", status: "●", color: "text-green-400" }, { id: "3", name: "claude-4.1-opus", provider: "anthropic", status: "●", color: "text-green-400" }, { id: "4", name: "o3", provider: "openai", status: "●", color: "text-green-400" }, { id: "5", name: "gemini-2.5-pro", provider: "google", status: "●", color: "text-green-400" }, { id: "6", name: "grok-4", provider: "xai", status: "●", color: "text-green-400" }, ].map((model) => (

[{model.id}] {model.status} {model.name} ({model.provider})

Press {model.id} to select

))}

Usage:

$ hexa-cli generate --model gpt-5 "Create a React component"

$ hexa-cli model set claude-4-sonnet # Set as default

$ hexa-cli model status # Check model availability

4 Active

2 Pending

Auto-sync enabled

● Models auto-updated • Zero configuration required

Ready to ship faster?

Write powerful scripts and automations. Automatically update docs, trigger security reviews, or build custom coding agents.

Initialize

Start new AI-powered projects with zero configuration

copyToClipboard("hexa-cli init", "init-cmd")} >

$ hexa-cli init

{copiedStates["init-cmd"] ? ( ) : ( )}

Generate

Create code with cutting-edge AI models instantly

copyToClipboard("hexa-cli generate", "generate-cmd")} >

$ hexa-cli generate

{copiedStates["generate-cmd"] ? ( ) : ( )}

Deploy

Ship to production with automated optimization

copyToClipboard("hexa-cli deploy", "deploy-cmd")} >

$ hexa-cli deploy

{copiedStates["deploy-cmd"] ? ( ) : ( )}

▶ Get Started Now

copyToClipboard("npm install -g hexa-cli", "bottom-install")} > {copiedStates["bottom-install"] ? ( ) : ( )} $ npm install -g hexa-cli

{/* ... existing footer ... */}

) } [V0_FILE]typescriptreact:file="app/docs/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Copy, Check, Menu, X, ChevronRight, Terminal, Zap, Settings, Book, Code, Rocket } from "lucide-react" export default function DocsPage() { const [activeSection, setActiveSection] = useState("getting-started") const [sidebarOpen, setSidebarOpen] = useState(false) const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>({}) const copyToClipboard = async (text: string, key: string) => { try { await navigator.clipboard.writeText(text) setCopiedStates((prev) => ({ ...prev, [key]: true })) setTimeout(() => { setCopiedStates((prev) => ({ ...prev, [key]: false })) }, 2000) } catch (err) { console.error("Failed to copy text: ", err) } } const sidebarSections = [ { title: "Getting Started", id: "getting-started", icon: Rocket, items: [ { title: "Installation", id: "installation" }, { title: "Quick Start", id: "quick-start" }, { title: "Configuration", id: "configuration" }, ], }, { title: "Commands", id: "commands", icon: Terminal, items: [ { title: "hexa-cli init", id: "init" }, { title: "hexa-cli generate", id: "generate" }, { title: "hexa-cli review", id: "review" }, { title: "hexa-cli deploy", id: "deploy" }, ], }, { title: "AI Models", id: "models", icon: Zap, items: [ { title: "Model Selection", id: "model-selection" }, { title: "Custom Models", id: "custom-models" }, { title: "Model Configuration", id: "model-config" }, ], }, { title: "Integrations", id: "integrations", icon: Settings, items: [ { title: "IDE Setup", id: "ide-setup" }, { title: "CI/CD Integration", id: "cicd" }, { title: "Custom Agents", id: "custom-agents" }, ], }, { title: "API Reference", id: "api", icon: Code, items: [ { title: "CLI API", id: "cli-api" }, { title: "Configuration API", id: "config-api" }, { title: "Plugin API", id: "plugin-api" }, ], }, ] const renderContent = () => { switch (activeSection) { case "getting-started": return (

Getting Started with HEXA CLI

HEXA CLI is an AI-powered development tool that helps you ship faster from your terminal.

01
Installation

Install HEXA CLI globally using npm:

copyToClipboard("npm install -g hexa-cli", "install-cmd")} >

$ npm install -g hexa-cli

{copiedStates["install-cmd"] ? ( ) : ( )}

02
Quick Start

Initialize your first AI-powered project:

copyToClipboard("hexa-cli init my-project", "init-cmd")} >

$ hexa-cli init my-project

{copiedStates["init-cmd"] ? ( ) : ( )}

copyToClipboard("cd my-project", "cd-cmd")} >

$ cd my-project

{copiedStates["cd-cmd"] ? ( ) : ( )}

copyToClipboard("hexa-cli generate --model gpt-5 'Create a React component'", "generate-cmd") } >

$ hexa-cli generate --model gpt-5 "Create a React component"

{copiedStates["generate-cmd"] ? ( ) : ( )}

03
What's Next?

setActiveSection("configuration")} >

Configure AI Models

Set up your preferred AI models and customize settings

setActiveSection("ide-setup")} >

IDE Integration

Connect HEXA CLI with your favorite development environment

) case "installation": return (

Installation

Multiple ways to install HEXA CLI on your system.

NPM (Recommended)

Install globally for system-wide access:

copyToClipboard("npm install -g hexa-cli", "npm-install")} >

$ npm install -g hexa-cli

{copiedStates["npm-install"] ? ( ) : ( )}

Yarn

Alternative package manager installation:

copyToClipboard("yarn global add hexa-cli", "yarn-install")} >

$ yarn global add hexa-cli

{copiedStates["yarn-install"] ? ( ) : ( )}

Direct Download

Download pre-built binaries for your platform:

macOS: hexa-cli-darwin-x64

Linux: hexa-cli-linux-x64

Windows: hexa-cli-win-x64.exe

Verification

Verify your installation:

copyToClipboard("hexa-cli --version", "version-check")} >

$ hexa-cli --version

{copiedStates["version-check"] ? ( ) : ( )}

) case "configuration": return (

Configuration

Customize HEXA CLI to match your workflow and preferences.

Global Configuration

Set up your global preferences:

copyToClipboard("hexa-cli config set model gpt-5", "config-model")} >

$ hexa-cli config set model gpt-5

{copiedStates["config-model"] ? ( ) : ( )}

copyToClipboard("hexa-cli config set auto-review true", "config-review")} >

$ hexa-cli config set auto-review true

{copiedStates["config-review"] ? ( ) : ( )}

Project Configuration

Create a hexa.config.json file in your project root:

{`{
  "model": "claude-4-sonnet",
  "rules": [
    "Use TypeScript for all new files",
    "Follow React best practices",
    "Add comprehensive error handling"
  ],
  "integrations": {
    "ide": "vscode",
    "ci": "github-actions"
  },
  "agents": {
    "reviewer": {
      "model": "claude-4",
      "focus": ["security", "performance"]
    }
  }
}`}

Environment Variables

HEXA_API_KEY

Your HEXA CLI API key for premium features

HEXA_MODEL

Default AI model to use (overrides config)

HEXA_DEBUG

Enable debug logging (true/false)

) case "generate": return (

hexa-cli generate

Generate code, components, and entire features using AI models.

Basic Usage

copyToClipboard("hexa-cli generate [prompt]", "basic-generate")} >

$ hexa-cli generate [prompt]

{copiedStates["basic-generate"] ? ( ) : ( )}

Options

--model, -m

Specify AI model (gpt-5, claude-4, gemini-2.5)

--context, -c

Include project context (full, minimal, none)

--output, -o

Specify output file or directory

--interactive, -i

Enable interactive mode for refinements

Examples

Generate a React component:

copyToClipboard( "hexa-cli generate 'Create a responsive navbar component with dark mode toggle'", "example-navbar", ) } >

$ hexa-cli generate "Create a responsive navbar component with dark mode toggle"

{copiedStates["example-navbar"] ? ( ) : ( )}

Generate API endpoints:

copyToClipboard( "hexa-cli generate --model claude-4 'Create REST API for user management with authentication'", "example-api", ) } >

$ hexa-cli generate --model claude-4 "Create REST API for user management with authentication"

{copiedStates["example-api"] ? ( ) : ( )}

Interactive generation:

copyToClipboard( "hexa-cli generate --interactive 'Build a dashboard with charts'", "example-interactive", ) } >

$ hexa-cli generate --interactive "Build a dashboard with charts"

{copiedStates["example-interactive"] ? ( ) : ( )}

) case "model-selection": return (

Model Selection

Choose and configure AI models for different tasks.

Available Models

GPT-5 (OpenAI)

● Active

Latest OpenAI model with enhanced reasoning and code generation

Code Generation Reasoning Fast

Claude-4 Sonnet (Anthropic)

● Active

Excellent for code review and complex reasoning tasks

Code Review Analysis Detailed

Gemini-2.5 Pro (Google)

● Active

Great for multimodal tasks and large context understanding

Multimodal Large Context Versatile

Model Commands

copyToClipboard("hexa-cli model list", "model-list")} >

$ hexa-cli model list

{copiedStates["model-list"] ? ( ) : ( )}

copyToClipboard("hexa-cli model set gpt-5", "model-set")} >

$ hexa-cli model set gpt-5

{copiedStates["model-set"] ? ( ) : ( )}

copyToClipboard("hexa-cli model status", "model-status")} >

$ hexa-cli model status

{copiedStates["model-status"] ? ( ) : ( )}

) case "ide-setup": return (

IDE Setup

Integrate HEXA CLI with your development environment.

VS Code Integration

Install the HEXA CLI extension for VS Code:

copyToClipboard("code --install-extension hexa-cli.vscode-extension", "vscode-install") } >

$ code --install-extension hexa-cli.vscode-extension

{copiedStates["vscode-install"] ? ( ) : ( )}

Features:

Inline code generation
AI-powered code completion
Integrated terminal commands
Real-time code review

JetBrains IDEs

Compatible with IntelliJ IDEA, WebStorm, PyCharm, and more:

copyToClipboard("hexa-cli ide setup jetbrains", "jetbrains-setup")} >

$ hexa-cli ide setup jetbrains

{copiedStates["jetbrains-setup"] ? ( ) : ( )}

Terminal Integration

Add shell completions and aliases:

copyToClipboard("hexa-cli completion bash >> ~/.bashrc", "bash-completion")} >

$ hexa-cli completion bash {">"} ~/.bashrc

{copiedStates["bash-completion"] ? ( ) : ( )}

copyToClipboard("hexa-cli completion zsh >> ~/.zshrc", "zsh-completion")} >

$ hexa-cli completion zsh {">"} ~/.zshrc

{copiedStates["zsh-completion"] ? ( ) : ( )}

) default: return (

Documentation

Select a section from the sidebar to get started.

setActiveSection("getting-started")} >

Getting Started

Quick installation and setup guide

setActiveSection("commands")} >

Commands

Complete CLI command reference

setActiveSection("models")} >

AI Models

Configure and use different AI models

setActiveSection("integrations")} >

Integrations

IDE setup and workflow integration

) } } return (

Documentation

{sidebarSections.map((section) => (

{ setActiveSection(section.id) setSidebarOpen(false) }} > {section.title}

{section.items.map((item) => (

{ setActiveSection(item.id) setSidebarOpen(false) }} > {item.title}

))}

{renderContent()}

{sidebarOpen && (

setSidebarOpen(false)} /> )}

) }

Built to help you ship, right from your{" "} terminal.

Universal IDE Support

Latest AI Models

Ready to ship faster?

Initialize

Generate

Deploy

Getting Started with HEXA CLI

01 Installation

02 Quick Start

03 What's Next?

Configure AI Models

IDE Integration

Installation

NPM (Recommended)

Yarn

Direct Download

Verification

Configuration

Global Configuration

Project Configuration

Environment Variables

hexa-cli generate

Basic Usage

Options

Examples

Model Selection

Available Models

GPT-5 (OpenAI)

Claude-4 Sonnet (Anthropic)

Gemini-2.5 Pro (Google)

Model Commands

IDE Setup

VS Code Integration

JetBrains IDEs

Terminal Integration

Documentation

Getting Started

Commands

AI Models

Integrations

Built to help you ship,
right from your{" "} terminal.

01
Installation

02
Quick Start

03
What's Next?

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This