{"id":48138721,"url":"https://github.com/statico/kidcode","last_synced_at":"2026-04-04T16:48:33.330Z","repository":{"id":344210137,"uuid":"1180956846","full_name":"statico/kidcode","owner":"statico","description":"🧒 A kid-friendly web app that wraps Claude Code CLI to let kids build things with AI through a chat interface","archived":false,"fork":false,"pushed_at":"2026-03-13T20:14:22.000Z","size":202,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-14T04:05:43.093Z","etag":null,"topics":["ai","claude-code","coding-for-kids","education","kids","nextjs","shadcn-ui","tailwindcss","typescript","vibe-coded","vibe-coding"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/statico.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-03-13T15:39:51.000Z","updated_at":"2026-03-14T01:45:26.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/statico/kidcode","commit_stats":null,"previous_names":["statico/kidcode"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/statico/kidcode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statico%2Fkidcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statico%2Fkidcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statico%2Fkidcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statico%2Fkidcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/statico","download_url":"https://codeload.github.com/statico/kidcode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statico%2Fkidcode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31406158,"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":["ai","claude-code","coding-for-kids","education","kids","nextjs","shadcn-ui","tailwindcss","typescript","vibe-coded","vibe-coding"],"created_at":"2026-04-04T16:48:32.360Z","updated_at":"2026-04-04T16:48:33.321Z","avatar_url":"https://github.com/statico.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KidCode\n\nA kid-friendly web app that wraps the [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) to let kids build things with AI through a chat interface. Think of it as Claude Desktop for kids — type what you want to build, and watch it come to life in a split-view preview.\n\n\u003cimg width=\"2884\" height=\"1986\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/508f26d0-a56b-4a9d-815e-f0e80a574647\" /\u003e\n\n\u003e [!WARNING]\n\u003e **Intended for local use only.** KidCode runs Claude Code with `--dangerously-skip-permissions`, meaning Claude can read, write, and execute anything on the host without confirmation. Do not expose this to the internet. Consider running it inside a sandbox, VM, or container.\n\n## How it works\n\nKidCode is a Next.js app with a three-panel layout:\n\n- **Sidebar** — project list with create/delete (deleted projects are archived, not destroyed)\n- **Chat** — conversation with Claude, streamed in real-time\n- **Preview** — live iframe showing whatever Claude builds (HTML games, tools, pages)\n- **Undo** — every iteration snapshots project files, so kids can undo mistakes with one click\n\nWhen you send a message, KidCode spawns `claude -p` as a child process in the project's subdirectory. Claude's streaming JSON output is parsed and forwarded to the browser via Server-Sent Events. When Claude creates or edits HTML files, the preview pane automatically opens and refreshes.\n\nEach project gets a UUID and its own directory under `public/projects/`. Files Claude creates (HTML, CSS, JS, images) are served via an API route and rendered in the iframe.\n\nA hardcoded system prompt keeps everything G-rated and kid-friendly, and instructs Claude to build things as self-contained HTML files.\n\n## Requirements\n\n- Node.js 18+\n- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and authenticated (uses your Claude Max subscription — no API key needed)\n\n## Setup\n\n```bash\nnpm install\nnpm run dev\n```\n\nThe app runs at `http://localhost:3000`.\n\n## Usage\n\n1. Click **Start a New Project**\n2. Type what you want to build (e.g. \"make me a tic tac toe game\")\n3. Watch Claude think and build in real-time\n4. The preview pane opens automatically when Claude creates an HTML file\n5. Ask for changes (\"make the colors purple\") and the preview updates\n\n## Tech stack\n\n- Next.js 15 (App Router)\n- TypeScript\n- Tailwind CSS v4\n- shadcn/ui\n- Lato font (self-hosted via fontsource)\n\n## Project structure\n\n```\nsrc/\n  app/\n    api/\n      projects/            # CRUD for projects\n        [id]/\n          chat/            # SSE streaming chat endpoint\n          files/           # Serves project files (HTML, CSS, etc.)\n  components/\n    chat/                  # Chat bubbles, input, activity indicator\n    preview/               # iframe preview panel\n    sidebar.tsx            # Project list sidebar\n  hooks/\n    use-chat.ts            # SSE streaming hook\n  lib/\n    claude-stream.ts       # Spawns claude CLI, parses stream-json output\n    constants.ts           # System prompt\n    projects.ts            # Project CRUD (JSON file storage)\n    sse.ts                 # SSE response helpers\ndata/\n  projects.json            # Project metadata\npublic/\n  projects/                # Project working directories (gitignored)\n```\n\n## Content safety\n\nKidCode includes a hardcoded system prompt that instructs Claude to keep all interactions G-rated. The default prompt is in `src/lib/constants.ts`:\n\n```\nYou are a helpful, friendly assistant helping a 10-year-old learn, explore, and build things.\nYou answer questions, build tools, games, and applications.\n\nWhen building web apps, games, or visual projects, create them as HTML files in the current directory.\nUse index.html as the main entry point. Include all CSS and JavaScript inline in the HTML file\nwhen possible to keep things simple. You can create multiple files if needed.\n\nMake things colorful, fun, and interactive! Add animations and sound effects when appropriate.\nKeep explanations simple and encouraging. Use analogies a kid would understand.\nCelebrate their ideas and help them learn by building.\n\nIf you don't know something, say so honestly and suggest ways to find out together.\nNEVER make up facts, statistics, historical events, or scientific claims you aren't sure about.\nIt's always better to say \"I'm not sure\" than to guess and get it wrong.\n\nCRITICAL: You must NEVER respond with or generate mature content that would be rated \"R\" in a movie.\nNo sexual content, graphic violence, drugs, alcohol, profanity, hate speech, or other\nage-inappropriate material. Keep everything G-rated and kid-friendly at all times.\nThis rule applies to ALL outputs including code, text, images, and any generated files.\n```\n\nTo customize the prompt, edit the `SYSTEM_PROMPT` export in `src/lib/constants.ts`. The `CRITICAL` content safety block at the end should be kept in any custom prompt.\n\n## How the CLI wrapper works\n\nKidCode spawns Claude Code as a subprocess:\n\n```\nclaude -p \u003cprompt\u003e \\\n  --output-format stream-json \\\n  --dangerously-skip-permissions \\\n  --verbose \\\n  --system-prompt \u003ckid-safe prompt\u003e \\\n  --model sonnet \\\n  --no-session-persistence \\\n  --disable-slash-commands\n```\n\nThe `stream-json` output emits one JSON object per line with types like `assistant` (text + tool use), `result` (final output), and `system` (init/hooks). KidCode parses these to:\n\n- Stream text to the chat UI as it arrives\n- Detect tool use (Write, Edit, Bash) and show activity indicators\n- Detect file changes and auto-refresh the preview iframe\n- Extract a title from the first response to name the project\n\n## Built with\n\nThis project was built entirely with [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [Superpowers](https://github.com/obra/superpowers).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatico%2Fkidcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstatico%2Fkidcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatico%2Fkidcode/lists"}