[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2791":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":15,"starSnapshotCount":15,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},2791,"ghost-ai","adrianhajdin\u002Fghost-ai","adrianhajdin","Ghost AI is an interactive systems architecture builder.","https:\u002F\u002Fjsmastery.com",null,"JavaScript",212,74,4,0,10,13,89,30,5.63,false,"main",true,[25,26,27,28,29,30],"clerk","coderabbit","liveblocks","nextjs","react","triggerdev","2026-06-12 02:00:43","\u003Cdiv align=\"center\">\n  \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F14RP8liACqo\" target=\"_blank\">\n      \u003Cimg src=\"public\u002Freadme\u002Freadme-hero.webp\" alt=\"Project Banner\">\n    \u003C\u002Fa>\n  \u003Cbr \u002F>\n\n  \u003Cdiv>\n\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Next.js-black?style=for-the-badge&logo=nextdotjs&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-shadcn\u002Fui-000000?style=for-the-badge&logo=shadcnui&logoColor=white\" \u002F>\u003Cbr\u002F>\n\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Prisma-2D3748?style=for-the-badge&logo=prisma&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-PostgreSQL-336791?style=for-the-badge&logo=postgresql&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Clerk-6C47FF?style=for-the-badge&logo=clerk&logoColor=white\" \u002F>\u003Cbr\u002F>\n\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTrigger.dev-22c55e?style=for-the-badge&logo=triggerdotdev&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Liveblocks-050505?style=for-the-badge&logo=liveblocks&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-CodeRabbit-orange?style=for-the-badge&logo=coderabbit&logoColor=white\" \u002F>\n\n  \u003C\u002Fdiv>\n\n  \u003Ch3 align=\"center\">AI-Powered Collaborative System Architect\u003C\u002Fh3>\n\n   \u003Cdiv align=\"center\">\n     Build this project step by step with our detailed tutorial on \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=XUkNR-JfHwo\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa> YouTube. Join the JSM family!\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n## 📋 \u003Ca name=\"table\">Table of Contents\u003C\u002Fa>\n\n1. ✨ [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🔗 [Assets](#links)\n6. 🚀 [More](#more)\n\n## 🚨 Tutorial\n\nThis repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@javascriptmastery\u002Fvideos\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa>.\n\nIf you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!\n\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F14RP8liACqo\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fsujatagunale\u002FEasyRead\u002Fassets\u002F151519281\u002F1736fca5-a031-4854-8c09-bc110e3bc16d\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"introduction\">✨ Introduction\u003C\u002Fa>\n\nGhost Arc is an agentic planning application built for software teams. A user submits a natural-language prompt (e.g., \"Design a scalable e-commerce backend\") and a Google Gemini-powered AI agent autonomously places nodes and edges onto a shared React Flow canvas in real-time. Human teammates can watch the AI build the diagram live, then jump in to collaboratively refine it. Once the team is satisfied, a second AI background task converts the visual graph into a comprehensive, multi-page Markdown technical specification that can be downloaded directly from the app.\n\nIf you're getting started and need assistance or face any bugs, join our active Discord community with over **50k+** members. It's a place where people help each other out.\n\n\u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fn6EdbFJ\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fsujatagunale\u002FEasyRead\u002Fassets\u002F151519281\u002F618f4872-1e10-42da-8213-1d69e486d02e\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"tech-stack\">⚙️ Tech Stack\u003C\u002Fa>\n\n- **[Next.js](https:\u002F\u002Fnextjs.org\u002F)** is a production-ready React framework that offers server-side rendering, static site generation, and powerful routing features. It streamlines the development of full-stack web applications by providing a comprehensive ecosystem for performance optimization, data fetching, and API development.\n\n- **[React](https:\u002F\u002Freact.dev\u002F)** is a popular JavaScript library for building declarative and component-based user interfaces. It excels at creating reusable UI components and efficient state management, making it the standard choice for building dynamic and interactive single-page applications.\n\n- **[TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F)** is a strongly typed superset of JavaScript that adds static type definitions to your code. It significantly improves developer productivity and code reliability by catching errors during development, enhancing IDE support, and facilitating maintainability in large-scale projects.\n\n- **[Liveblocks](https:\u002F\u002Fjsm.dev\u002Fghost-liveblocks)** is a real-time collaboration infrastructure that enables developers to build multiplayer experiences. It provides robust APIs for presence, shared state, and text synchronization, allowing you to easily add collaborative features like cursors, whiteboard tools, and shared document editing to your apps.\n\n- **[Clerk](https:\u002F\u002Fjsm.dev\u002Fghost-clerk)** is a specialized authentication and user management platform for React and Next.js. It offers drop-in pre-built components for sign-in, sign-up, and profile management, while handling complex requirements like session management, multi-factor authentication, and organization hierarchies out of the box.\n\n- **[Trigger.dev](https:\u002F\u002Fjsm.dev\u002Fghost-triggerdev)** is an open-source platform for orchestrating long-running background jobs and workflows. It allows developers to define jobs directly in their code that respond to webhooks, schedules, or events, handling retries, delays, and state management without the need for complex infrastructure.\n\n- **[Prisma ORM](https:\u002F\u002Fwww.prisma.io\u002F)** is a next-generation ORM for Node.js and TypeScript that simplifies database interactions. By providing a type-safe client generated from your schema, it makes querying your database intuitive, readable, and highly efficient, effectively eliminating common SQL-related runtime errors.\n\n- **[PostgreSQL](https:\u002F\u002Fwww.postgresql.org\u002F)** is an advanced, open-source object-relational database system widely recognized for its reliability, extensibility, and standard compliance. It provides the persistent storage layer for your application, supporting complex queries, transactional integrity, and large-scale data handling.\n\n- **[Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F)** is a utility-first CSS framework that enables rapid custom UI development. By utilizing low-level utility classes directly in your markup, it removes the need to switch between CSS and HTML files, allowing for highly consistent and responsive design systems.\n\n- **[shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F)** is a collection of beautifully designed, accessible, and re-usable UI components that you can copy and paste directly into your projects. Built on top of Radix UI and Tailwind CSS, it grants you full control over your component code, avoiding the bloat of traditional component libraries.\n\n- **[CodeRabbit](https:\u002F\u002Fjsm.dev\u002Fghost-coderabbit)** is an AI-powered code review assistant that automates pull request analysis. It provides line-by-line feedback, suggests code improvements, summarizes changes, and helps maintain high code quality by integrating seamlessly into your git-based development workflow.\n\n## \u003Ca name=\"features\">🔋 Features\u003C\u002Fa>\n\n👉 **AI Architecture Agent**: Submit a plain-English prompt; Gemini draws nodes and edges onto the live canvas in real-time via Trigger.dev background tasks and the Liveblocks Node.js SDK.\n\n👉 **Multiplayer Canvas**: Full real-time collaboration powered by Liveblocks: synchronized node\u002Fedge state, live cursor positions, and presence avatars for every connected user.\n\n👉 **Custom Canvas Nodes**: Double-click to edit node labels inline; select to resize with NodeResizer; choose from 12 colour swatches via a floating NodeToolbar — all synced across clients instantly.\n\n👉 **AI Spec Generation**: One click converts the current graph into a detailed Markdown technical specification using a second Gemini-powered Trigger.dev task.\n\n👉 **Multi-Spec Storage**: Each project stores multiple specs. Metadata lives in PostgreSQL (Prisma); content is stored as Markdown files on disk (`data\u002Fspecs\u002F{projectId}\u002F{specId}.md`).\n\n👉 **Downloadable Specs**: Every generated spec is available via a dedicated download API route.\n\n👉 **Clerk Authentication**: Global route protection via `clerkMiddleware`; Liveblocks tokens are only issued to authenticated users.\n\n👉 **Auto-Save Canvas**: The canvas state is debounced-saved to `data\u002Fcanvas\u002F{projectId}.json` every 3 seconds of inactivity.\n\n👉 **Project Management**: Create projects from a slide-in sidebar; project slugs auto-generate room IDs; the active room is highlighted.\n\n👉 **Share**: One-click URL copy with a 1.5 s \"Copied\" confirmation.\n\nAnd many more, including code architecture and reusability.\n\n## \u003Ca name=\"quick-start\">🤸 Quick Start\u003C\u002Fa>\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https:\u002F\u002Fgit-scm.com\u002F)\n- [Node.js](https:\u002F\u002Fnodejs.org\u002Fen)\n- [npm](https:\u002F\u002Fwww.npmjs.com\u002F) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fghost-ai.git\ncd ghost-ai\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env` in the root of your project and add the following content:\n\n```env\n# Clerk\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=\u002Fsign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=\u002Fsign-up\n\nLIVEBLOCKS_SECRET_KEY=\n\nTRIGGER_SECRET_KEY=\nNEXT_PUBLIC_TRIGGER_PUBLIC_API_KEY=\n\nDATABASE_URL=\n\n━━━━━━━━━━━━━━━━━━━━\n# Google\nGOOGLE_GENERATIVE_AI_API_KEY=\n# Optional: override the default Gemini model (default: gemini-2.0-flash)\nGEMINI_MODEL=\n# Optional: override model used specifically for spec generation\nGEMINI_SPEC_MODEL=\n\n━━━━━━━━━━━━━━━━━━━━\nAPP_URL=http:\u002F\u002Flocalhost:3000\n```\n\nReplace the placeholder values with your real credentials. You can get these by signing up at: [**Clerk**](https:\u002F\u002Fjsm.dev\u002Fghost-clerk), [**Liveblocks**](https:\u002F\u002Fjsm.dev\u002Fghost-liveblocks), [**Trigger.dev**](https:\u002F\u002Fjsm.dev\u002Fghost-triggerdev), [**Google AI Studio**](https:\u002F\u002Faistudio.google.com\u002F).\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) in your browser to view the project.\n\n**Run Trigger.dev (Background Tasks)**\n\nIn a second terminal, start the Trigger.dev dev worker so background AI tasks execute locally:\n\n```bash\nnpx trigger.dev@latest dev\n```\n\n## Available Scripts\n\n| Command                   | Description                           |\n| ------------------------- | ------------------------------------- |\n| `npm run dev`             | Start Next.js development server      |\n| `npm run build`           | Build for production                  |\n| `npm run start`           | Start production server               |\n| `npm run lint`            | Run ESLint                            |\n| `npm run prisma:generate` | Regenerate Prisma client              |\n| `npm run prisma:migrate`  | Create and apply a new migration      |\n| `npm run prisma:deploy`   | Apply pending migrations (production) |\n| `npm run prisma:studio`   | Open Prisma Studio GUI                |\n\n---\n\n## Project Structure\n\n```\n.\n├── app\u002F\n│   ├── api\u002F              # Next.js API routes (auth, AI, projects, specs)\n│   ├── editor\u002F           # Canvas editor pages\n│   ├── generated\u002Fprisma\u002F # Auto-generated Prisma client\n│   ├── sign-in\u002F          # Clerk sign-in page\n│   └── sign-up\u002F          # Clerk sign-up page\n├── components\u002F\n│   ├── editor\u002F           # Canvas UI components (editor, sidebar, AI chat)\n│   └── ui\u002F               # Reusable shadcn\u002Fui primitives\n├── data\u002F\n│   ├── canvas\u002F           # Auto-saved React Flow graph JSON per project\n│   └── specs\u002F            # Generated Markdown specs per project\n├── docs\u002F                 # Project documentation\n├── hooks\u002F                # Custom React hooks (auto-save, keyboard shortcuts)\n├── lib\u002F                  # Shared utilities (Prisma client, Liveblocks, AI agents)\n├── prisma\u002F               # Prisma schema and migrations\n├── trigger\u002F              # Trigger.dev background task definitions\n│   ├── design-agent.ts   # AI canvas generation task\n│   └── generate-spec-gemini.ts  # AI spec generation task\n└── types\u002F                # Shared TypeScript types\n```\n\n\n\n## \u003Ca name=\"links\">🔗 Assets\u003C\u002Fa>\n\nAssets and snippets used in the project can be found in the **[video kit](https:\u002F\u002Fjsmastery.com\u002Fvideo-kit\u002Ff94dd75a-4d9c-4c7c-af39-6e4668389421)**.\n\n\u003Ca href=\"https:\u002F\u002Fjsmastery.com\u002Fvideo-kit\u002Ff94dd75a-4d9c-4c7c-af39-6e4668389421\" target=\"_blank\">\n  \u003Cimg src=\"public\u002Freadme\u002Freadme-videokit.webp\" alt=\"Video Kit Banner\">\n\u003C\u002Fa>\n\n## \u003Ca name=\"more\">🚀 More\u003C\u002Fa>\n\n**Advance your skills with our Pro Courses**\n\nEnjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with\ndetailed explanations, cool features, and exercises to boost your skills. Give it a go!\n\n\u003Ca href=\"https:\u002F\u002Fjsm.dev\u002Fghost-jsm\" target=\"_blank\">\n  \u003Cimg src=\"public\u002Freadme\u002Freadme-jsmpro.webp\" alt=\"Project Banner\">\n\u003C\u002Fa>\n","Ghost AI 是一个交互式的系统架构构建工具。它利用AI技术，根据用户提供的自然语言指令自动生成系统架构图，并支持团队成员实时协作编辑。项目基于Next.js和TypeScript开发，使用了Tailwind CSS、Prisma ORM以及PostgreSQL数据库等现代Web技术栈。Ghost AI特别适合需要快速设计或讨论软件架构的场景，无论是初创公司的敏捷开发还是大型企业的复杂系统规划都能从中受益。此外，通过与Clerk集成实现了用户认证功能，而Liveblocks则提供了流畅的实时协作体验。",2,"2026-06-11 02:51:15","CREATED_QUERY"]