ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

index.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordindex.html
DateNot specified in source
Path or archive memberarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html
Original SHA-256dbf9fb0b141565bdeaaf8076528d4f811309b46c26d2434cd8206442029f5177
Reading-copy SHA-25649f220eccdac64449be7fe64284261f4b358eade13c5d1c08f0e07eb7c549f96
Archive source{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html"}

Every recorded occurrence

These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.

Original recordBranch or archiveRevision / identifierOriginal location
index.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html"}libsrc-69ff7917a1bbarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html
e267899221df857620f99cd22bf3c580c3d334c0{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/.content_store/e2/e267899221df857620f99cd22bf3c580c3d334c0"}libsrc-14bfdc190dfaarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/.content_store/e2/e267899221df857620f99cd22bf3c580c3d334c0

Recovered source transcript

Download complete source text ↓1,798 lines · 60.7 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>That AI Guy - AI Development & Tools Platform</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> :root { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --border-color: #30363d; --text-primary: #f0f6fc; --text-secondary: #8b949e; --text-muted: #6e7681; --cyan: #58a6ff; --green: #3fb950; --orange: #d29922; --purple: #a371f7; --red: #f85149; --pink: #db61a2; --syntax-keyword: #ff7b72; --syntax-string: #a5d6ff; --syntax-function: #d2a8ff; --syntax-variable: #ffa657; --syntax-comment: #8b949e; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } code, pre, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; } a { color: var(--cyan); text-decoration: none; transition: all 0.2s ease; } a:hover { text-decoration: underline; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Gradient Border Utility */ .gradient-border { position: relative; background: var(--bg-secondary); border-radius: 12px; } .gradient-border::before { content: ''; position: absolute; inset: -1px; border-radius: 13px; background: linear-gradient(135deg, var(--cyan), var(--green), var(--orange)); z-index: -1; opacity: 0.5; transition: opacity 0.3s ease; } .gradient-border:hover::before { opacity: 1; } /* Glow Effect */ .glow { box-shadow: 0 0 40px rgba(88, 166, 255, 0.15); } .glow-green { box-shadow: 0 0 40px rgba(63, 185, 80, 0.15); } .glow-orange { box-shadow: 0 0 40px rgba(210, 153, 34, 0.15); } /* Navigation */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(13, 17, 23, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); } .nav-content { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1200px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; color: var(--text-primary); } .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--cyan), var(--green)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; transition: color 0.2s ease; } .nav-links a:hover { color: var(--text-primary); text-decoration: none; } .nav-cta { display: flex; align-items: center; gap: 12px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; border: none; } .btn-primary { background: linear-gradient(135deg, var(--cyan), #1f6feb); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(88, 166, 255, 0.3); text-decoration: none; } .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: var(--border-color); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); text-decoration: none; } /* Hero Section */ .hero { padding: 160px 0 100px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(88, 166, 255, 0.1) 0%, transparent 70%); pointer-events: none; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-text { position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(63, 185, 80, 0.1); border: 1px solid rgba(63, 185, 80, 0.3); border-radius: 100px; color: var(--green); font-size: 0.85rem; font-weight: 500; margin-bottom: 24px; } .hero-badge::before { content: ''; width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hero h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 24px; background: linear-gradient(135deg, var(--text-primary) 0%, var(--cyan) 50%, var(--green) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-tagline { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 32px; max-width: 500px; } .hero-tagline strong { color: var(--text-primary); } .hero-cta { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; } .hero-stats { display: flex; gap: 40px; } .stat { text-align: left; } .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); } .stat-label { font-size: 0.85rem; color: var(--text-muted); } /* Terminal Animation */ .terminal-wrapper { position: relative; } .terminal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .terminal-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); } .terminal-dot { width: 12px; height: 12px; border-radius: 50%; } .terminal-dot.red { background: var(--red); } .terminal-dot.yellow { background: var(--orange); } .terminal-dot.green { background: var(--green); } .terminal-title { flex: 1; text-align: center; font-size: 0.8rem; color: var(--text-muted); } .terminal-body { padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; line-height: 1.8; min-height: 300px; } .terminal-line { display: flex; margin-bottom: 8px; } .terminal-prompt { color: var(--green); margin-right: 12px; } .terminal-command { color: var(--text-primary); } .terminal-output { color: var(--text-secondary); margin-left: 24px; } .terminal-cursor { display: inline-block; width: 10px; height: 20px; background: var(--cyan); animation: blink 1s step-end infinite; vertical-align: middle; margin-left: 4px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .typing-text { overflow: hidden; white-space: nowrap; animation: typing 2s steps(40) forwards; } @keyframes typing { from { width: 0; } to { width: 100%; } } /* Tools Section */ .tools-section { padding: 100px 0; background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); } .section-header { text-align: center; margin-bottom: 60px; } .section-label { display: inline-block; padding: 6px 12px; background: rgba(88, 166, 255, 0.1); border: 1px solid rgba(88, 166, 255, 0.3); border-radius: 6px; color: var(--cyan); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } .section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 16px; } .section-desc { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; } .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .tool-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 32px 24px; transition: all 0.3s ease; position: relative; overflow: hidden; } .tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--green)); transform: scaleX(0); transition: transform 0.3s ease; } .tool-card:hover { transform: translateY(-8px); border-color: var(--cyan); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .tool-card:hover::before { transform: scaleX(1); } .tool-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; } .tool-icon.chat { background: linear-gradient(135deg, rgba(88, 166, 255, 0.2), rgba(88, 166, 255, 0.1)); color: var(--cyan); } .tool-icon.code { background: linear-gradient(135deg, rgba(63, 185, 80, 0.2), rgba(63, 185, 80, 0.1)); color: var(--green); } .tool-icon.image { background: linear-gradient(135deg, rgba(163, 113, 247, 0.2), rgba(163, 113, 247, 0.1)); color: var(--purple); } .tool-icon.voice { background: linear-gradient(135deg, rgba(210, 153, 34, 0.2), rgba(210, 153, 34, 0.1)); color: var(--orange); } .tool-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; } .tool-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 20px; } .tool-features { list-style: none; } .tool-features li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; } .tool-features li::before { content: '>'; color: var(--green); font-family: 'JetBrains Mono', monospace; } /* API Docs Section */ .api-section { padding: 100px 0; background: var(--bg-secondary); } .api-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; } .api-info h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 20px; } .api-info p { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 32px; } .api-endpoints { list-style: none; } .api-endpoint { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 12px; transition: all 0.2s ease; } .api-endpoint:hover { border-color: var(--cyan); } .api-method { padding: 4px 10px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; } .api-method.get { background: rgba(63, 185, 80, 0.2); color: var(--green); } .api-method.post { background: rgba(88, 166, 255, 0.2); color: var(--cyan); } .api-path { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--text-primary); } .code-block { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; } .code-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); } .code-lang { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); } .code-lang-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); } .copy-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; } .copy-btn:hover { background: var(--border-color); color: var(--text-primary); } .copy-btn.copied { background: rgba(63, 185, 80, 0.2); border-color: var(--green); color: var(--green); } .code-content { padding: 20px; overflow-x: auto; } .code-content pre { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.7; } .code-content .keyword { color: var(--syntax-keyword); } .code-content .string { color: var(--syntax-string); } .code-content .function { color: var(--syntax-function); } .code-content .variable { color: var(--syntax-variable); } .code-content .comment { color: var(--syntax-comment); } .code-content .number { color: var(--cyan); } /* Live Demo Section */ .demo-section { padding: 100px 0; background: var(--bg-primary); } .demo-container { max-width: 800px; margin: 0 auto; } .demo-window { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .demo-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); } .demo-title { display: flex; align-items: center; gap: 10px; font-weight: 600; } .demo-title-icon { width: 24px; height: 24px; background: linear-gradient(135deg, var(--cyan), var(--green)); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } .demo-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--green); } .demo-status::before { content: ''; width: 8px; height: 8px; background: var(--green); border-radius: 50%; } .demo-body { padding: 24px; min-height: 400px; } .demo-messages { margin-bottom: 24px; } .demo-message { display: flex; gap: 12px; margin-bottom: 20px; } .demo-avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .demo-avatar.user { background: var(--bg-tertiary); border: 1px solid var(--border-color); } .demo-avatar.ai { background: linear-gradient(135deg, var(--cyan), var(--green)); } .demo-bubble { flex: 1; } .demo-bubble-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .demo-name { font-weight: 600; font-size: 0.9rem; } .demo-time { font-size: 0.75rem; color: var(--text-muted); } .demo-text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; } .demo-text code { background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: var(--cyan); } .demo-input-area { display: flex; gap: 12px; padding: 16px; background: var(--bg-tertiary); border-radius: 12px; } .demo-input { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; color: var(--text-primary); font-size: 0.95rem; font-family: inherit; } .demo-input:focus { outline: none; border-color: var(--cyan); } .demo-input::placeholder { color: var(--text-muted); } .demo-send { padding: 12px 24px; background: linear-gradient(135deg, var(--cyan), #1f6feb); border: none; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .demo-send:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(88, 166, 255, 0.3); } /* Contribution Graph */ .activity-section { padding: 80px 0; background: var(--bg-secondary); } .activity-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .activity-title { font-size: 1.25rem; font-weight: 600; } .activity-legend { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); } .legend-scale { display: flex; gap: 3px; } .legend-box { width: 12px; height: 12px; border-radius: 2px; } .contribution-graph { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 16px; } .contribution-week { display: flex; flex-direction: column; gap: 3px; } .contribution-day { width: 12px; height: 12px; border-radius: 2px; background: var(--bg-tertiary); } .contribution-day.level-1 { background: rgba(63, 185, 80, 0.25); } .contribution-day.level-2 { background: rgba(63, 185, 80, 0.5); } .contribution-day.level-3 { background: rgba(63, 185, 80, 0.75); } .contribution-day.level-4 { background: var(--green); } /* Pricing Section */ .pricing-section { padding: 100px 0; background: var(--bg-primary); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; } .pricing-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 40px 32px; position: relative; transition: all 0.3s ease; } .pricing-card:hover { transform: translateY(-8px); } .pricing-card.featured { border-color: var(--cyan); box-shadow: 0 0 60px rgba(88, 166, 255, 0.15); } .pricing-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 16px; background: linear-gradient(135deg, var(--cyan), #1f6feb); border-radius: 100px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .pricing-tier { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; } .pricing-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; } .pricing-price { margin-bottom: 32px; } .pricing-amount { font-size: 3rem; font-weight: 700; } .pricing-period { color: var(--text-muted); font-size: 0.9rem; } .pricing-features { list-style: none; margin-bottom: 32px; } .pricing-features li { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text-secondary); font-size: 0.95rem; border-bottom: 1px solid var(--border-color); } .pricing-features li:last-child { border-bottom: none; } .pricing-features li::before { content: '✓'; color: var(--green); font-weight: 700; } .pricing-card .btn { width: 100%; justify-content: center; } /* Footer */ footer { padding: 60px 0 30px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; } .footer-brand .logo { margin-bottom: 16px; } .footer-brand p { color: var(--text-muted); font-size: 0.9rem; max-width: 280px; margin-bottom: 24px; } .social-links { display: flex; gap: 12px; } .social-link { width: 40px; height: 40px; border-radius: 8px; background: var(--bg-tertiary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s ease; } .social-link:hover { background: var(--border-color); color: var(--text-primary); } .footer-column h4 { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 20px; } .footer-column ul { list-style: none; } .footer-column li { margin-bottom: 12px; } .footer-column a { color: var(--text-secondary); font-size: 0.9rem; transition: color 0.2s ease; } .footer-column a:hover { color: var(--text-primary); text-decoration: none; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 30px; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-muted); } .footer-legal { display: flex; gap: 24px; } .footer-legal a { color: var(--text-muted); } .footer-legal a:hover { color: var(--text-secondary); } /* Mobile Menu */ .mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .mobile-menu-btn span { width: 24px; height: 2px; background: var(--text-primary); transition: all 0.3s ease; } /* Responsive */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-text { order: 1; } .terminal-wrapper { order: 2; } .hero-tagline { margin: 0 auto 32px; } .hero-cta { justify-content: center; } .hero-stats { justify-content: center; } .tools-grid { grid-template-columns: repeat(2, 1fr); } .api-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } .footer-content { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .mobile-menu-btn { display: flex; } .hero h1 { font-size: 2.5rem; } .tools-grid { grid-template-columns: 1fr; } .hero-stats { flex-direction: column; gap: 20px; } .footer-content { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } } </style> </head> <body> <!-- Navigation --> <nav> <div class="nav-content"> <a href="https://thataiguy.org" class="logo"> <div class="logo-icon">AI</div> That AI Guy </a> <ul class="nav-links"> <li><a href="#tools">Tools</a></li> <li><a href="#api">API</a></li> <li><a href="#demo">Demo</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="https://thataiguy.org">Blog</a></li> </ul> <div class="nav-cta"> <a href="#" class="btn btn-ghost">Sign In</a> <a href="#pricing" class="btn btn-primary">Get Started</a> </div> <button class="mobile-menu-btn"> <span></span> <span></span> <span></span> </button> </div> </nav> <!-- Hero Section --> <section class="hero"> <div class="container"> <div class="hero-content"> <div class="hero-text"> <div class="hero-badge"> <span>Now Available</span> </div> <h1>Build Smarter with AI-Powered Dev Tools</h1> <p class="hero-tagline"> <strong>Built by developers, for developers.</strong> Access powerful AI models through a simple API. Ship faster with intelligent code assistance, generation, and automation. </p> <div class="hero-cta"> <a href="#pricing" class="btn btn-primary"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0L6.59 1.41 12.17 7H0v2h12.17l-5.58 5.59L8 16l8-8-8-8z"/></svg> Start Building Free </a> <a href="#api" class="btn btn-secondary"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 4h12v1H4V4zm0 3h12v1H4V7zm0 3h12v1H4v-1zm0 3h8v1H4v-1zM0 4h2v1H0V4zm0 3h2v1H0V7zm0 3h2v1H0v-1zm0 3h2v1H0v-1z"/></svg> View Documentation </a> </div> <div class="hero-stats"> <div class="stat"> <div class="stat-value">50M+</div> <div class="stat-label">API Requests / Day</div> </div> <div class="stat"> <div class="stat-value">12K+</div> <div class="stat-label">Active Developers</div> </div> <div class="stat"> <div class="stat-value">99.9%</div> <div class="stat-label">Uptime SLA</div> </div> </div> </div> <div class="terminal-wrapper"> <div class="terminal glow"> <div class="terminal-header"> <div class="terminal-dot red"></div> <div class="terminal-dot yellow"></div> <div class="terminal-dot green"></div> <div class="terminal-title">Terminal - thatAIguy</div> </div> <div class="terminal-body" id="terminal-content"> <div class="terminal-line"> <span class="terminal-prompt">$</span> <span class="terminal-command">npm install @thataiguy/sdk</span> </div> <div class="terminal-output">+ @thataiguy/sdk@2.4.1</div> <div class="terminal-output">added 12 packages in 2.1s</div> <br> <div class="terminal-line"> <span class="terminal-prompt">$</span> <span class="terminal-command">thataiguy init</span> </div> <div class="terminal-output" style="color: var(--green);">&#10004; API key configured</div> <div class="terminal-output" style="color: var(--green);">&#10004; Project initialized</div> <br> <div class="terminal-line"> <span class="terminal-prompt">$</span> <span class="terminal-command">thataiguy generate --model gpt-4</span> </div> <div class="terminal-output" style="color: var(--cyan);">Generating response...</div> <div class="terminal-output" style="color: var(--green);">&#10004; Response generated in 1.2s</div> <br> <div class="terminal-line"> <span class="terminal-prompt">$</span> <span class="terminal-cursor"></span> </div> </div> </div> </div> </div> </div> </section> <!-- Tools Section --> <section class="tools-section" id="tools"> <div class="container"> <div class="section-header"> <span class="section-label">AI Tools</span> <h2 class="section-title">Everything You Need to Build with AI</h2> <p class="section-desc">A complete suite of AI-powered tools designed to accelerate your development workflow.</p> </div> <div class="tools-grid"> <div class="tool-card"> <div class="tool-icon chat"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/></svg> </div> <h3>AI Chat</h3> <p>Conversational AI with context awareness and memory for complex multi-turn dialogues.</p> <ul class="tool-features"> <li>Multi-model support</li> <li>Streaming responses</li> <li>Context management</li> <li>Custom personas</li> </ul> </div> <div class="tool-card"> <div class="tool-icon code"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> </div> <h3>Code Assistant</h3> <p>Intelligent code completion, refactoring, and generation across 50+ programming languages.</p> <ul class="tool-features"> <li>Auto-completion</li> <li>Bug detection</li> <li>Code explanation</li> <li>Test generation</li> </ul> </div> <div class="tool-card"> <div class="tool-icon image"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> </div> <h3>Image Generator</h3> <p>Create stunning visuals from text descriptions using state-of-the-art diffusion models.</p> <ul class="tool-features"> <li>Text-to-image</li> <li>Image editing</li> <li>Style transfer</li> <li>Upscaling</li> </ul> </div> <div class="tool-card"> <div class="tool-icon voice"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg> </div> <h3>Voice AI</h3> <p>Speech-to-text, text-to-speech, and voice cloning with natural sounding results.</p> <ul class="tool-features"> <li>Real-time transcription</li> <li>Voice synthesis</li> <li>Speaker diarization</li> <li>Accent support</li> </ul> </div> </div> </div> </section> <!-- API Documentation Section --> <section class="api-section" id="api"> <div class="container"> <div class="api-grid"> <div class="api-info"> <span class="section-label">API Reference</span> <h2>Simple, Powerful API</h2> <p>Get started in minutes with our RESTful API. Comprehensive SDKs available for Python, JavaScript, Go, and more.</p> <ul class="api-endpoints"> <li class="api-endpoint"> <span class="api-method post">POST</span> <span class="api-path">/v1/chat/completions</span> </li> <li class="api-endpoint"> <span class="api-method post">POST</span> <span class="api-path">/v1/images/generate</span> </li> <li class="api-endpoint"> <span class="api-method post">POST</span> <span class="api-path">/v1/audio/transcribe</span> </li> <li class="api-endpoint"> <span class="api-method get">GET</span> <span class="api-path">/v1/models</span> </li> </ul> <a href="#" class="btn btn-secondary" style="margin-top: 24px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 4h12v1H4V4zm0 3h12v1H4V7zm0 3h12v1H4v-1zm0 3h8v1H4v-1zM0 4h2v1H0V4zm0 3h2v1H0V7zm0 3h2v1H0v-1zm0 3h2v1H0v-1z"/></svg> Full Documentation </a> </div> <div class="code-block glow"> <div class="code-header"> <div class="code-lang"> <div class="code-lang-dot"></div> <span>JavaScript</span> </div> <button class="copy-btn" onclick="copyCode(this)"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> Copy </button> </div> <div class="code-content"> <pre><code><span class="keyword">import</span> { ThatAIGuy } <span class="keyword">from</span> <span class="string">'@thataiguy/sdk'</span>; <span class="keyword">const</span> <span class="variable">client</span> = <span class="keyword">new</span> <span class="function">ThatAIGuy</span>({ <span class="variable">apiKey</span>: process.env.<span class="variable">THATAIGUY_API_KEY</span> }); <span class="keyword">const</span> <span class="variable">response</span> = <span class="keyword">await</span> client.chat.<span class="function">create</span>({ <span class="variable">model</span>: <span class="string">'gpt-4-turbo'</span>, <span class="variable">messages</span>: [ { <span class="variable">role</span>: <span class="string">'user'</span>, <span class="variable">content</span>: <span class="string">'Explain quantum computing'</span> } ], <span class="variable">stream</span>: <span class="keyword">true</span> }); <span class="keyword">for await</span> (<span class="keyword">const</span> <span class="variable">chunk</span> <span class="keyword">of</span> response) { process.stdout.<span class="function">write</span>(chunk.content); }</code></pre> </div> </div> </div> </div> </section> <!-- Live Demo Section --> <section class="demo-section" id="demo"> <div class="container"> <div class="section-header"> <span class="section-label">Try It Now</span> <h2 class="section-title">Experience AI in Action</h2> <p class="section-desc">See how our AI responds to prompts in real-time. No signup required.</p> </div> <div class="demo-container"> <div class="demo-window gradient-border glow"> <div class="demo-header"> <div class="demo-title"> <div class="demo-title-icon">AI</div> <span>AI Chat Demo</span> </div> <div class="demo-status">Online</div> </div> <div class="demo-body"> <div class="demo-messages" id="demo-messages"> <div class="demo-message"> <div class="demo-avatar user">U</div> <div class="demo-bubble"> <div class="demo-bubble-header"> <span class="demo-name">You</span> <span class="demo-time">just now</span> </div> <div class="demo-text">Write a Python function to calculate the Fibonacci sequence</div> </div> </div> <div class="demo-message"> <div class="demo-avatar ai">AI</div> <div class="demo-bubble"> <div class="demo-bubble-header"> <span class="demo-name">That AI Guy</span> <span class="demo-time">just now</span> </div> <div class="demo-text"> Here's an efficient Python function using dynamic programming: <br><br> <code>def fibonacci(n):</code><br> <code>&nbsp;&nbsp;if n <= 1: return n</code><br> <code>&nbsp;&nbsp;fib = [0, 1]</code><br> <code>&nbsp;&nbsp;for i in range(2, n + 1):</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;fib.append(fib[i-1] + fib[i-2])</code><br> <code>&nbsp;&nbsp;return fib[n]</code> <br><br> This runs in O(n) time with O(n) space. Want me to show a more memory-efficient version? </div>

Search equations, builds, manuscript text, and recovered sources.