{"id":26986660,"url":"https://github.com/tiwater/pagen","last_synced_at":"2025-04-03T19:19:16.060Z","repository":{"id":277594478,"uuid":"903337568","full_name":"tiwater/pagen","owner":"tiwater","description":"Mimic of v0.dev: Generate webpage and take screenshots.","archived":false,"fork":false,"pushed_at":"2025-02-25T12:00:50.000Z","size":117432,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T13:19:38.146Z","etag":null,"topics":["v0dev"],"latest_commit_sha":null,"homepage":"https://pages.dustland.ai","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tiwater.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-14T10:49:28.000Z","updated_at":"2025-02-25T12:00:54.000Z","dependencies_parsed_at":"2025-02-15T05:33:22.879Z","dependency_job_id":null,"html_url":"https://github.com/tiwater/pagen","commit_stats":null,"previous_names":["dustland/pagen","tiwater/pagen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiwater%2Fpagen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiwater%2Fpagen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiwater%2Fpagen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiwater%2Fpagen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiwater","download_url":"https://codeload.github.com/tiwater/pagen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247061882,"owners_count":20877176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["v0dev"],"created_at":"2025-04-03T19:19:15.584Z","updated_at":"2025-04-03T19:19:16.046Z","avatar_url":"https://github.com/tiwater.png","language":"TypeScript","readme":"# Pages - Generate professional-looking SaaS-style webpages using AI\n\nA monorepo containing applications and packages for generating professional-looking SaaS-style webpages using AI. Built with Next.js, TypeScript, shadcn/ui components, and the Vercel AI SDK.\n\n## Features\n\n- Generate webpages from natural language descriptions\n- Real-time preview of generated webpages\n- View and edit source code\n- Live chat interface with AI\n- Modern UI with shadcn/ui components\n- Persistent chat history with Zustand\n\n## Project Structure\n\n```\npagen/\n├── web/                     # Main web application\n│   ├── app/                # Next.js app directory\n│   ├── components/         # React components\n│   ├── lib/               # Utility functions\n│   └── store/             # State management\n│\n└── renderer/              # Preview/renderer application\n    ├── app/              # Next.js app directory\n    ├── components/       # React components\n    └── lib/             # Utility functions\n```\n\n## Getting Started\n\n### Prerequisites\n\n1. Set up the Webshot Service:\n\n   ```bash\n   # Pull and run the container on port 8842 (or any available port)\n   docker run -p 8842:3000 ghcr.io/browserless/chromium\n   ```\n\n   Note: The default port is 3000, but we use 8842 to avoid conflicts with the renderer service.\n   You can choose a different port if needed.\n\n   Note: The default image on docker hub for browserless/chrome is v1, we use the image from ghcr.io, which is v2.\n   If you deployed different versions, you need to adjust the API call in the webshot service.\n\n2. Set up environment variables:\n   ```bash\n   # Set the webshot service URL (use the port you chose above)\n   NEXT_PUBLIC_WEBSHOT_URL=http://localhost:3001\n   ```\n\n### Using Docker Compose (Recommended)\n\n1. Clone the repository\n2. Copy the example environment file:\n\n   ```bash\n   cp .env.example .env\n   ```\n\n3. Update the `.env` file with your credentials:\n\n   - `NEXT_PUBLIC_SUPABASE_URL`\n   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`\n   - `NEXT_PUBLIC_WEBSHOT_URL` (set to http://localhost:3001 or your chosen port)\n\n4. Build and start the services:\n\n   ```bash\n   # First-time build and start\n   docker compose up --build\n\n   # Subsequent starts\n   docker compose up -d\n\n   # View logs\n   docker compose logs -f\n   ```\n\n5. Access the applications:\n   - Web App: [http://localhost:1578](http://localhost:1578)\n   - Renderer: [http://localhost:3000](http://localhost:3000)\n   - Webshot Service: [http://localhost:3001](http://localhost:3001) (or your chosen port)\n\n### Local Development\n\n1. Install dependencies:\n\n   ```bash\n   pnpm install\n   ```\n\n2. Copy the environment file:\n\n   ```bash\n   cp web/.env.example web/.env.local\n   ```\n\n3. Start the development servers:\n\n   ```bash\n   # Start all applications\n   pnpm dev\n\n   # Start specific application\n   pnpm --filter @pagen/web dev\n   pnpm --filter @pagen/renderer dev\n\n   # Ensure webshot service is running\n   docker ps | grep webshot # Check if running\n   docker start webshot    # Start if not running\n   ```\n\n4. Open:\n   - Web App: [http://localhost:1578](http://localhost:1578)\n   - Renderer: [http://localhost:3345](http://localhost:3345)\n   - Webshot Service: [http://localhost:3001](http://localhost:3001) (or your chosen port)\n\n## Technologies Used\n\n- Next.js 15 (App Router)\n- TypeScript\n- shadcn/ui components\n- Tailwind CSS\n- Zustand for state management\n- Turborepo for monorepo management\n- pnpm for package management\n- Docker \u0026 Docker Compose for containerization\n\n## Docker Commands\n\n```bash\n# View service status\ndocker compose ps\n\n# Restart services\ndocker compose restart web\ndocker compose restart renderer\n\n# View logs\ndocker compose logs -f web\ndocker compose logs -f renderer\n\n# Stop services\ndocker compose down\n\n# Rebuild services\ndocker compose build --no-cache\n```\n\n## Applications\n\n### Web App (@pagen/web)\n\n- Main application for webpage generation\n- Chat interface\n- Real-time preview of generated pages\n- Code editing capabilities\n\n### Renderer (@pagen/renderer)\n\n- Preview service for generated components\n- Dynamic component rendering\n- Isolated environment for previews\n\n### Webshot\n\n- Screenshot service for generated pages, based on browserless/chromium\n- Read docs https://pages-webshot.tisvc.com/docs\n\n## Development\n\n### Adding Dependencies\n\n```bash\n# Add to specific app/package\npnpm --filter @pagen/web add \u003cpackage\u003e\n\n# Add to all apps/packages\npnpm add -w \u003cpackage\u003e\n```\n\n### Running Commands\n\n```bash\n# Run in all packages\npnpm build\n\n# Run in specific package\npnpm --filter @pagen/web build\n```\n\n## Contributing\n\nFeel free to open issues and pull requests for any improvements you'd like to add.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiwater%2Fpagen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiwater%2Fpagen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiwater%2Fpagen/lists"}