Add ex/hyperpages

hyperpages/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

hyperpages/README.md

@@ -0,0 +1,144 @@
+**Built with [Hyperbrowser](https://hyperbrowser.ai)**
+
+# HyperPages
+
+A production-ready AI-powered research page builder. Create beautiful, long-form content pages with automatic research (Hyperbrowser), AI content generation (GPT-5-nano), and image integration (Unsplash + Google Gemini).
+
+## Features
+
+- **AI-Powered Content Generation**: GPT-5-nano generates comprehensive, well-structured content
+- **Smart Web Research**: Hyperbrowser scrapes and analyzes topics for accurate content
+- **Unsplash Integration**: Beautiful stock photos from Unsplash
+- **Real-Time Streaming**: Watch content generate word-by-word with smooth animations
+- **Local Storage**: All pages saved to browser localStorage (perfect for open-source)
+- **Beautiful Typography**: Premium Manrope + Playfair Display fonts with -2% letter spacing
+- **Smart TOC**: Auto-generated table of contents with smooth scrolling
+- **Responsive Design**: Looks great on all devices
+
+## Get Started
+
+### Prerequisites
+
+- Node.js 18+ installed
+- Get an API key from [Hyperbrowser](https://hyperbrowser.ai)
+- OpenAI API key for GPT-5-nano
+- Unsplash API key for stock photos
+
+### Installation
+
+```bash
+npm install
+```
+
+### Environment Setup
+
+1. Copy `.env.local.example` to `.env.local`
+2. Fill in your API keys:
+
+```env
+HYPERBROWSER_API_KEY=your_key
+OPENAI_API_KEY=your_key
+UNSPLASH_ACCESS_KEY=your_unsplash_key
+```
+
+### Storage
+
+Pages are automatically saved to browser localStorage. No database setup required! Perfect for open-source projects.
+
+### Run Development Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to start creating pages.
+
+## Tech Stack
+
+- **Next.js 16** - React framework with App Router
+- **TypeScript** - Type safety
+- **Tailwind CSS** - Styling
+- **Framer Motion** - Smooth animations
+- **Lucide React** - Consistent icons
+- **localStorage** - Browser storage (no database needed)
+- **OpenAI GPT-5-nano** - Fast, cost-effective content generation
+- **Hyperbrowser SDK** - Web research and scraping
+- **Unsplash** - Stock photo library
+
+## Project Structure
+
+```
+/app
+  /page.tsx              # Homepage with topic input
+  /editor/page.tsx       # Main editor interface
+  /p/[slug]/page.tsx     # Published page view
+  /api
+    /generate/route.ts   # Content generation endpoint
+    /pages/route.ts      # CRUD for pages
+    /pages/[slug]/route.ts
+    /images
+      /unsplash/route.ts # Unsplash search
+/components
+  /sidebar.tsx           # Navigation with saved pages
+  /navbar.tsx            # Top nav with Launch Hyperbrowser button
+  /logo.tsx              # HyperPages logo
+  /button.tsx            # Reusable button component
+  /share-modal.tsx       # Share & export modal
+  /streaming-text.tsx    # Text streaming animation
+/lib
+  /storage.ts            # localStorage utilities
+  /openai.ts             # OpenAI GPT-5-nano client
+  /hyperbrowser.ts       # Hyperbrowser SDK
+  /unsplash.ts           # Unsplash API helper
+```
+
+## Usage
+
+### Creating a Page
+
+1. Enter a topic on the homepage
+2. Select your target audience
+3. Watch as AI researches and generates content
+4. Add images to sections (Unsplash or AI-generated)
+5. Edit and refine the content
+6. Page auto-saves to localStorage
+
+### Accessing Pages
+
+- View all your pages in the sidebar under "Your Pages"
+- Click any page to view the published version
+- Pages are stored in your browser's localStorage
+- Share pages with the unique URL: `pages.hyperbrowser.ai/p/[slug]`
+
+### Image Integration
+
+Add beautiful stock photos from Unsplash to your sections with smart search.
+
+## Growth Use Case
+
+HyperPages demonstrates the power of [Hyperbrowser](https://hyperbrowser.ai) for:
+
+- Automated content research and curation
+- Fast, AI-powered page generation
+- Beautiful, shareable content pages
+- Perfect for content marketers, researchers, educators, and creators
+
+## API Architecture
+
+```
+User Input → /api/generate
+  ↓
+Hyperbrowser (research) + GPT-5-nano (content)
+  ↓
+Stream to Editor → Save to localStorage
+  ↓
+Published at /p/[slug]
+```
+
+## Follow for Updates
+
+Follow [@hyperbrowser](https://x.com/hyperbrowser) for updates.
+
+---
+
+Built with ❤️ using [Hyperbrowser](https://hyperbrowser.ai)

hyperpages/SETUP.md

@@ -0,0 +1,111 @@
+# HyperPages Setup Guide
+
+Follow these steps to get HyperPages running in production.
+
+## 1. Install Dependencies
+
+```bash
+npm install
+```
+
+## 2. Get API Keys
+
+### Hyperbrowser
+1. Visit [https://hyperbrowser.ai](https://hyperbrowser.ai)
+2. Sign up for an account
+3. Get your API key from the dashboard
+
+### OpenAI (GPT-5-nano)
+1. Visit [https://platform.openai.com](https://platform.openai.com)
+2. Create an account
+3. Generate an API key
+4. Make sure you have access to GPT-5-nano model
+
+### Unsplash
+1. Visit [https://unsplash.com/developers](https://unsplash.com/developers)
+2. Create a new application
+3. Get your Access Key
+
+## 3. Configure Environment
+
+Create `.env.local` file:
+
+```env
+HYPERBROWSER_API_KEY=your_hyperbrowser_key
+OPENAI_API_KEY=your_openai_key
+UNSPLASH_ACCESS_KEY=your_unsplash_key
+```
+
+**Note**: Pages are stored in browser localStorage. No database setup required!
+
+## 4. Run Development Server
+
+```bash
+npm run dev
+```
+
+Visit `http://localhost:3000` to test the application.
+
+## 5. Test the Features
+
+### Create a Page
+1. Enter a topic (e.g., "Machine Learning Basics")
+2. Select audience
+3. Watch content generate in real-time
+4. Add images to sections
+
+### View Pages
+1. Check sidebar for saved pages
+2. Click to view published version
+3. Test share functionality
+
+## 6. Deploy to Production
+
+### Vercel (Recommended)
+
+1. Push your code to GitHub
+2. Import project in Vercel
+3. Add environment variables in Vercel dashboard
+4. Deploy!
+
+### Environment Variables in Vercel
+Go to Project Settings → Environment Variables and add all keys from your `.env.local`.
+
+## 7. Troubleshooting
+
+### Content not generating
+- Check OpenAI API key is valid
+- Verify Hyperbrowser key has credits
+- Check browser console for errors
+
+### Images not loading
+- Verify Unsplash API key is active
+- Check for API rate limits
+
+### Pages not saving
+- Check browser console for localStorage errors
+- Verify localStorage is not full (quota exceeded)
+- Make sure browser allows localStorage
+
+### Build errors
+- Run `npm install` again
+- Check Node.js version (18+)
+- Clear `.next` folder and rebuild
+
+## Production Checklist
+
+- [ ] All API keys configured
+- [ ] Environment variables set in production
+- [ ] Test page creation end-to-end
+- [ ] Test image upload/generation
+- [ ] Test localStorage saving/loading
+- [ ] Check mobile responsiveness
+- [ ] Monitor API usage and costs
+
+## Need Help?
+
+- Check [Hyperbrowser Docs](https://docs.hyperbrowser.ai)
+- Review [Next.js Documentation](https://nextjs.org/docs)
+
+Built with [Hyperbrowser](https://hyperbrowser.ai)
+

hyperpages/app/api/chat/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { openai, MODEL } from '@/lib/openai';
+
+export async function POST(req: NextRequest) {
+  try {
+    const { message, pageContent, topic } = await req.json();
+
+    if (!message) {
+      return NextResponse.json({ error: 'Message is required' }, { status: 400 });
+    }
+
+    const prompt = `You are a helpful research assistant helping someone understand a topic about "${topic}".
+
+Here is the content from their research page:
+${pageContent.slice(0, 3000)} // Limit context to avoid token limits
+
+Based on this content, answer the user's question: "${message}"
+
+Guidelines:
+- Be concise and clear
+- Reference specific information from the content when possible
+- If the question isn't covered in the content, say so politely
+- Use a friendly, helpful tone
+- Keep responses under 200 words`;
+
+    const response = await openai.chat.completions.create({
+      model: MODEL,
+      messages: [
+        {
+          role: 'system',
+          content: 'You are a helpful research assistant. Answer questions based on the provided research content.',
+        },
+        {
+          role: 'user',
+          content: prompt,
+        },
+      ],
+    });
+
+    const assistantResponse = response.choices[0].message.content || 'I apologize, but I could not generate a response.';
+
+    return NextResponse.json({ response: assistantResponse });
+  } catch (error) {
+    console.error('Chat API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to get response' },
+      { status: 500 }
+    );
+  }
+}
+