{"id":50697256,"url":"https://github.com/fredericbarthelet/generative-ui-alpic","last_synced_at":"2026-06-09T07:30:29.936Z","repository":{"id":360485775,"uuid":"1250313005","full_name":"fredericbarthelet/generative-ui-alpic","owner":"fredericbarthelet","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-26T15:54:56.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-26T17:10:27.519Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fredericbarthelet.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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-26T14:04:49.000Z","updated_at":"2026-05-26T14:28:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/fredericbarthelet/generative-ui-alpic","commit_stats":null,"previous_names":["fredericbarthelet/generative-ui-alpic"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/fredericbarthelet/generative-ui-alpic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericbarthelet%2Fgenerative-ui-alpic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericbarthelet%2Fgenerative-ui-alpic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericbarthelet%2Fgenerative-ui-alpic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericbarthelet%2Fgenerative-ui-alpic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fredericbarthelet","download_url":"https://codeload.github.com/fredericbarthelet/generative-ui-alpic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericbarthelet%2Fgenerative-ui-alpic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34096950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-06-09T07:30:29.256Z","updated_at":"2026-06-09T07:30:29.931Z","avatar_url":"https://github.com/fredericbarthelet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Generative UI on Alpic\n\nAn MCP app built with Skybridge and [json-render](https://json-render.dev), rendering dynamic, model-generated UIs from a curated catalog of [`@alpic-ai/ui`](https://www.npmjs.com/package/@alpic-ai/ui) components — the Alpic design system.\n\n## What This App Does\n\nThe app exposes two tools to the model:\n\n1. **`get-ui-catalog`** — returns the full UI component catalog (props, slots, events, descriptions) as a single text payload. Call this first so the model knows what's available.\n2. **`render`** — accepts a json-render spec, runs `autoFix` + structural validation, and pipes it to the matching view, where it gets rendered into real React components from `@alpic-ai/ui`.\n\n```mermaid\nsequenceDiagram\n    participant Host as Host (ChatGPT, Claude…)\n    participant Server as MCP Server\n    participant View as View (iframe)\n\n    Host-\u003e\u003eServer: call get-ui-catalog\n    Server--\u003e\u003eHost: component definitions, props \u0026 spec format\n\n    Host-\u003e\u003eServer: call render({ spec })\n    Server-\u003e\u003eServer: autoFixSpec + validateSpec\n    Server--\u003e\u003eHost: structuredContent: { spec }\n\n    Host-\u003e\u003eView: render iframe with tool output\n    View-\u003e\u003eView: json-render turns spec into @alpic-ai/ui React components\n```\n\n### Why a custom catalog?\n\nInstead of the default `@json-render/shadcn` catalog, this app ships its own catalog (`src/catalog.ts`) targeting `@alpic-ai/ui`. The component implementations live in `src/components.tsx` and map the json-render props to actual Alpic design system primitives (`Button`, `Card`, `Tabs`, `Input`, `Alert`, …) with the proper design tokens loaded from `@alpic-ai/ui/theme`.\n\nThe catalog is exposed verbosely (~few kilotokens) on each call so the LLM has the full schema in context. For production usage, curate it down to a smaller, domain-specific surface.\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 24+\n- pnpm (recommended), npm, yarn, or bun\n\n### Install\n\n```bash\npnpm install\n```\n\n### Run Locally\n\n```bash\npnpm dev\n```\n\nThis starts:\n\n- Your MCP server at `http://localhost:3000/mcp`\n- The Skybridge DevTools UI at `http://localhost:3000`\n\n### Project Structure\n\n```\nsrc/\n├── server.ts          # MCP server: get-ui-catalog + render tools\n├── catalog.ts         # json-render component definitions for @alpic-ai/ui\n├── components.tsx     # React implementations mapping spec → @alpic-ai/ui\n├── helpers.ts         # Type-safe useToolInfo hook\n├── index.css          # Tailwind v4 + @alpic-ai/ui/theme tokens\n└── views/\n    └── render.tsx     # Renderer widget (json-render Renderer)\n```\n\n### Customize the Catalog\n\nTo add or remove components:\n\n1. Register the component definition in `src/catalog.ts` (Zod schema for props, slots, events, description, example).\n2. Add a matching implementation in `src/components.tsx` that consumes `{ props, children, bindings, emit, on }` and returns a JSX tree built from `@alpic-ai/ui`.\n\nBoth files share the same key (e.g., `\"Card\"`), and json-render keeps them in sync via the catalog passed to `defineRegistry`.\n\n## Testing your App\n\nTest locally with the Skybridge DevTools UI on `http://localhost:3000` while running `pnpm dev`. To connect a remote MCP client (ChatGPT, Claude, …), expose your server with `pnpm dev:tunnel`.\n\n## Deploy\n\nSkybridge is infrastructure-agnostic. The fastest path is Alpic:\n\n```bash\npnpm deploy\n```\n\n## Resources\n\n- [Skybridge documentation](https://docs.skybridge.tech/)\n- [json-render](https://json-render.dev/)\n- [`@alpic-ai/ui`](https://www.npmjs.com/package/@alpic-ai/ui)\n- [Apps SDK documentation](https://developers.openai.com/apps-sdk)\n- [Alpic documentation](https://docs.alpic.ai/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericbarthelet%2Fgenerative-ui-alpic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffredericbarthelet%2Fgenerative-ui-alpic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericbarthelet%2Fgenerative-ui-alpic/lists"}