CYPHER0X9 Cosmic OS

A personal cosmic operating system exploring the intersection of decentralized technology, artificial intelligence, and digital innovation.

Features

• Multi-Model AI Router - Intelligent routing across Claude, GPT-4, Grok, Perplexity, and Gemini
• Web3 Integration - Wallet connections via RainbowKit supporting multiple chains
• Cosmic UI Theme - Beautiful space-inspired design with glassmorphism and neon effects
• AI Chat Assistant - Embedded AI assistant powered by Claude
• Knowledge Graph - Interactive exploration of interconnected content
• Responsive Design - Fully responsive across all devices

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• AI SDK: Vercel AI SDK
• Web3: RainbowKit, Wagmi, Viem
• State: TanStack Query
• Content: Contentlayer

Quick Start

Prerequisites

• Node.js 18.17 or later
• npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/cypher0x9/cypher0x9-website.git
cd cypher0x9-website

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Fill in your API keys in .env.local (at minimum OPENAI_API_KEY or ANTHROPIC_API_KEY)

# Start development server
npm run dev

Open http://localhost:3000 to view the site.

Project Structure

cypher0x9/
├── app/
│   ├── (marketing)/          # Marketing pages with header/footer
│   │   ├── page.tsx          # Landing page
│   │   ├── about/page.tsx    # About page
│   │   └── layout.tsx        # Marketing layout
│   ├── universe/page.tsx     # Knowledge graph
│   ├── learn/page.tsx        # Learning hub
│   ├── build/page.tsx        # Projects showcase
│   ├── lab/page.tsx          # Experiments
│   ├── api/
│   │   ├── chat/route.ts     # Streaming chat endpoint
│   │   ├── ai-router/route.ts # Multi-model AI router
│   │   └── health/route.ts   # Health check
│   ├── globals.css           # Cosmic theme CSS
│   ├── layout.tsx            # Root layout
│   └── providers.tsx         # React providers
├── components/
│   ├── layout/
│   │   ├── header.tsx        # Navigation header
│   │   ├── footer.tsx        # Site footer
│   │   └── nav.tsx           # Navigation component
│   ├── chat/
│   │   └── ai-assistant.tsx  # AI chat widget
│   └── web3/
│       └── wallet-button.tsx # Wallet connection
├── lib/
│   ├── utils.ts              # Utility functions
│   ├── wagmi-config.ts       # Web3 configuration
│   └── ai-models.ts          # AI model routing
└── .env.example             # Environment template

Environment Variables

Create a .env.local file with the following:

# AI Providers
ANTHROPIC_API_KEY=           # Claude (required if you want Claude)
OPENAI_API_KEY=              # GPT-4 (used as fallback/default if no Claude)
GOOGLE_AI_API_KEY=           # Gemini (optional)
XAI_API_KEY=                 # Grok (optional)
PERPLEXITY_API_KEY=          # Perplexity (optional)

# Web3
NEXT_PUBLIC_WALLET_CONNECT_ID=  # WalletConnect Project ID

See .env.example for the complete list.

AI Router

The multi-model AI router automatically selects the best model based on query intent:

Intent	Model	Use Case
Code, Reasoning	Claude	Complex problem-solving, code generation
Web3, Trends	Grok	Blockchain insights, real-time data
Research	Perplexity	Web search, citations
Math, Crypto	Gemini	Mathematical analysis, cryptography

API Endpoints

• POST /api/chat - Streaming chat with Claude
• POST /api/ai-router - Multi-model routing
• GET /api/ai-router - Model information
• GET /api/health - Health check

Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

Deployment

Deploy to Vercel with one click:

Manual Deployment

# Build the project
npm run build

# Deploy to Vercel
npx vercel --prod

Vercel Environment Setup

1. In your Vercel project, navigate to Settings → Environment Variables.
2. Add ANTHROPIC_API_KEY (Claude) and/or OPENAI_API_KEY (fallback model) with the same values you use locally.
3. If you rely on additional providers (Gemini, Grok, Perplexity), add their keys as well.
4. Trigger a redeploy so the new keys are available to the AI Router and Cosmic AI chat.

Roadmap

Phase 1 - Foundation (Current)

• Project setup with Next.js 14
• Cosmic UI theme
• Multi-model AI router
• Web3 wallet integration
• Core pages (Landing, About, Universe, Learn, Build, Lab)

Phase 2 - Content

• Blog system with MDX
• Project detail pages
• Tutorial content
• Interactive code examples

Phase 3 - Features

• 3D Knowledge Graph
• AI-powered search
• User authentication
• Progress tracking

Phase 4 - Community

• Comments system
• Newsletter integration
• Discord integration
• NFT gating

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

License

MIT License - see LICENSE for details.

---

Built with cosmic energy by CYPHER0X9