{"id":48153800,"url":"https://github.com/yungookim/n.codes","last_synced_at":"2026-04-04T17:14:12.699Z","repository":{"id":333044760,"uuid":"1131931144","full_name":"yungookim/n.codes","owner":"yungookim","description":"Let users generate features with prompts in your app","archived":false,"fork":false,"pushed_at":"2026-02-14T16:21:36.000Z","size":10898,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-15T00:50:25.958Z","etag":null,"topics":["agent","agentic-coding","ai-agents","automation","customer-support","llm","low-code","no-code","open-source","react","saas","user-generated-ui","vibe-coding","vue"],"latest_commit_sha":null,"homepage":"https://n.codes","language":"JavaScript","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/yungookim.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-11T01:09:00.000Z","updated_at":"2026-02-14T23:03:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/yungookim/n.codes","commit_stats":null,"previous_names":["yungookim/newui.ai","yungookim/n.codes"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yungookim/n.codes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yungookim%2Fn.codes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yungookim%2Fn.codes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yungookim%2Fn.codes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yungookim%2Fn.codes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yungookim","download_url":"https://codeload.github.com/yungookim/n.codes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yungookim%2Fn.codes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31407644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["agent","agentic-coding","ai-agents","automation","customer-support","llm","low-code","no-code","open-source","react","saas","user-generated-ui","vibe-coding","vue"],"created_at":"2026-04-04T17:14:12.607Z","updated_at":"2026-04-04T17:14:12.678Z","avatar_url":"https://github.com/yungookim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![CLI Tests](https://github.com/yungookim/n.codes/actions/workflows/coverage.yml/badge.svg)\n![License](https://img.shields.io/github/license/yungookim/n.codes)\n![Stars](https://img.shields.io/github/stars/yungookim/n.codes)\n![Issues](https://img.shields.io/github/issues/yungookim/n.codes)\n![Last Commit](https://img.shields.io/github/last-commit/yungookim/n.codes)\n![Top Language](https://img.shields.io/github/languages/top/yungookim/n.codes)\n\n\u003e ⚠️ **Early Access**: n.codes is in active development. Star ⭐️ to follow along!\n\nIf you like n.codes, please star the repo.\n\nhttps://github.com/user-attachments/assets/157b9656-d762-4281-9d6f-910b950d6545\n\n# Add Agentic UI to your app\n\n## Getting Started\n\n### For Humans\n\n```bash\n# 1. Initialize — picks your LLM provider and model\nnpx ncodes init\n\n# 2. Generate capability map from your codebase\nnpx ncodes sync\n\n# 3. Generate framework-specific widget installation instructions\nnpx ncodes install\n\n# 4. Follow the generated instructions\ncat .n.codes/INSTALL.md\n\n# 5. Verify everything is wired up\nnpx ncodes verify\n```\n\n### For AI Coding Agents\n\nCopy-paste this prompt to any LLM coding agent (Claude Code, Codex, Cursor, etc.):\n\n```\nInstall n.codes in this project (widget + backend).\n\nStep 1: Generate capability map\n  npx ncodes init --auto\n  npx ncodes sync\n\nStep 2: Set up the backend (standalone service)\nThe server/ directory contains API handlers and LLM integration. Set it up as a runnable service:\n  cd server\n  npm install\n  cp .env.example .env\n\nserver/index.js is a minimal Express server that:\n- Mounts handleGenerate at POST /api/generate\n- Mounts handleStreamGenerate at POST /api/generate/stream\n- Uses express.json() middleware\n- Enables CORS for the main app's origin (set APP_ORIGIN or MAIN_APP_ORIGIN if needed)\n- Listens on port 3001 (or PORT env var)\n- Imports handlers from ./api/generate.js\n\nEnsure OPENAI_API_KEY or ANTHROPIC_API_KEY is set in server/.env\nThe server reads the capability map from ../n.codes.capabilities.json by default (set CAPABILITY_MAP_PATH if needed).\n\nStep 3: Install and wire up the widget\n  cd ..\n  npm install @ncodes/widget\n\nAdd the widget to the app's root layout using a dynamic import:\n\n  const NCodes = await import('@ncodes/widget');\n  NCodes.init({\n    user: { id: 'demo', name: 'Demo User' },\n    apiUrl: 'http://localhost:3001/api/generate',\n    mode: 'live',\n    theme: 'auto',\n  });\n\n  Call NCodes.destroy() on cleanup/unmount.\n\n  Framework hints:\n  - Next.js App Router: 'use client' component with useEffect + dynamic import, render in app/layout.tsx\n  - Next.js Pages Router: useEffect in pages/_app.tsx\n  - SvelteKit: onMount/onDestroy in src/routes/+layout.svelte\n  - Vue + Vite: Vue plugin with mixin in mounted/unmounted, register in main.js\n  - Express/static: \u003cscript src=\"/ncodes-widget.js\"\u003e\u003c/script\u003e + NCodes.init() — copy dist/ncodes-widget.js to public/ first\n\nStep 4: Verify\n  npx ncodes verify — all checks must show [PASS]\n  Start the backend: cd server \u0026\u0026 node index.js\n  Open the app, click \"Build with AI\", enter a prompt, and confirm a generated UI appears.\n\nNotes\n- The user object is an auth gate. Pass null to hide the widget. Replace demo user with your auth.\n- The server reads OPENAI_API_KEY or ANTHROPIC_API_KEY from environment.\n- Ongoing: npx ncodes dev — watches for file changes and keeps the capability map up to date.\n```\n\n## Demo\n\nLet users generate their own solutions within your app without waiting for your backlog to clear. It's like having a forward-deployed engineer for every user. Users ask for what they need, agents build it instantly.\n\n[Try the interactive demo](https://n.codes/demo/)\n\n## The Problem\n\nEvery SaaS company has the same bottleneck: feature requests. Customers want more all the time. They provide great feedback and ideas, but it's hard to keep up fast enough. Sometimes, they'd ask for something that'd solve their problem, but it's not a priority for the company. This leads to frustration and dissatisfaction.\n\nWhen I started my last company, the only thing I wanted was to hit Product-Market-Fit. Once we hit product-market fit, we were overwhelmed by feature requests. It was the most intense 2 years of my life, and still is.\n\nUsers never run out of problems they want to solve with our product. We just could not hire fast enough to build. Even after we 10x'ed our development throughput with AI development tools and doubled our engineering bandwidth, users just kept wanting more.\n\nThese were Fortune 500 company customers paying serious money to solve multi-hundred-million-dollar problems, and we just did not have the bandwidth to build. Interestingly, many of the requests were not that complicated.\n\n_Examples:_\n\n- Need a custom dashboard, but you can use the same charts you already have. We just want to organize them in a specific way for our executives.\n- We need data export formatted in a specific way for our accounting team.\n- We need a bulk action to archive 1000s of records at once.\n\nMany of these requests were not that complicated. They were just different arrangements of the same building blocks.\n\nWe were so severely bottlenecked that even simple requests like the above had to be backlogged for months or risk building a Frankenstein monster of a feature that would be difficult to maintain and scale.\n\nMeanwhile, the backend API can already do most of what they're asking for. The bottleneck isn't capability—it's UI.\n\n## Solution\n\nI'm creating n.codes. It's an open-source project that lets users build the feature they need with just a prompt in your app. It's agentic UI. Like Lovable, Replit, etc, but tightly integrated into your app, with access to the app's APIs/docs/whatever, and keeps a consistent style.\n\n## How It Works\n\nThe LLM doesn't write arbitrary code.\n\n### Local configuration\n\n- Store local API keys in `.env.local` (not `.env`) so they stay out of version control.\n- Capability map generation is LLM-based and requires a configured provider/model plus a valid API key.\n\n### Capability map example\n\nWhen you add or change a route, `n.codes sync` turns it into structured capabilities.\n\nInput route:\n\n```ts\n// pages/api/bookings/[id].ts\nexport async function GET(req) {\n  // fetch booking by id\n}\n```\n\nOutput capability map snippet:\n\n```yaml\nqueries:\n  getBooking:\n    endpoint:\n      method: \"GET\"\n      path: \"/api/bookings/:id\"\n    description: \"Retrieves a booking by ID with its related details.\"\n    entities:\n      - \"Booking\"\n    analysisSource: \"llm\"\n\nentities:\n  Booking:\n    fields:\n      - id\n      - status\n    sources:\n      - \"prisma\"\n    referencedBy:\n      - getBooking\n```\n\n1. It reads through your frontend components to understand the capabilities of your app and styles. It then uses that knowledge to build the UI that the user asks for. It keeps a consistent style.\n\n2. It reads through your backend APIs, docs, and schemas to create a _\"capability map\"_ of your app. This includes entities, actions, queries, and constraints.\n\n3. Given the user's prompt, it uses the capability map to build the UI that the user asks for, and creates a private component for that user in a sandboxed runtime.\n\nn.codes is like a forward-deployed engineer for the user. It's Cloud Code that lives in your app for the user.\n\n## Project Links\n\n**GitHub:** https://github.com/yungookim/n.codes\n**website** https://n.codes\n\n## Rules\n\n### Safety/control\n\n- No arbitrary code execution\n- Permission-aware (RBAC scoped)\n- Audit trail of generated UIs + actions taken\n\n### Product boundaries\n\n- It’s for the 90%: CRUD + analytics + workflows\n- Not for pixel-perfect marketing pages\n- Not for bypassing business logic\n\n### Ownership\n\nGenerated UIs can be:\n\n- Private per user\n- Shared with a team\n- Promoted to “official” UI by admins\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyungookim%2Fn.codes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyungookim%2Fn.codes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyungookim%2Fn.codes/lists"}