[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81351":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":14,"forks30d":14,"starsTrendScore":15,"compositeScore":16,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":8,"pushedAt":8,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":14,"starSnapshotCount":14,"syncStatus":12,"lastSyncTime":24,"discoverSource":25},81351,"Generative-UI-Global-Hackathon-Starter-Kit","jerelvelarde\u002FGenerative-UI-Global-Hackathon-Starter-Kit","jerelvelarde",null,"TypeScript",41,48,2,1,0,3,5.07,false,"main",true,[],"2026-06-12 02:04:14","# Generative UI Global Hackathon: Agentic Interfaces Starter Kit\n\n![Hackathon Banner](apps\u002Ffrontend\u002Fpublic\u002Fbanner.jpg)\n\nWelcome to the **Generative UI Global Hackathon: Agentic Interfaces**! This starter kit gives you a complete AI-powered application with durable conversation threads, an agent-driven canvas, real-world MCP integrations, and a deployable MCP App — wired up with CopilotKit, LangChain Deep Agents, Gemini, A2UI, Notion MCP (via mcp-use), Manufact, and Daytona.\n\n## About this starter\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff2a405c3-3cf4-44c8-bca3-2c8b8e6fed90\n\nThis is a starter template for building agentic interfaces using Generative UI. It provides a modern Next.js application with an integrated [LangGraph Deep Agent](https:\u002F\u002Fdocs.langchain.com\u002Foss\u002Fpython\u002Fdeepagents\u002Foverview) that manages a visual canvas of interactive cards with real-time AI synchronization and external tool integrations (a Notion \"Leads\" database, for this example) through MCP. A second deployable MCP server, built on mcp-use, gives the agent a third surface that runs natively in Claude or ChatGPT.\n\nThis is an example application that we built to help you get started quickly. Everything you see can be customized, replaced, augmented, or built upon.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F6f44cf84-e485-4c26-8703-481e0c9c2c54\n\n- **Persistent threads.** Every conversation is named, listed in the sidebar, and survives reloads, restarts, and resumes mid-run.\n- **Agent-driven canvas.** Lead cards, follow-up notes, and pipeline charts the AI can create, edit, and organize while you watch.\n- **Real integrations via MCP.** Notion Leads database sync out of the box; swap to any other MCP server with one config edit.\n- **Deployable MCP server.** A third agent surface that runs in Claude or ChatGPT, deployable with one command.\n- **Generative UI primed.** Stream Gemini-rendered components without re-plumbing.\n\n---\n\n## Generative UI\n\n![Generative UI spectrum: Controlled → Declarative → Open-ended](apps\u002Ffrontend\u002Fpublic\u002Fgenerative-ui-spectrum-v2.jpg)\n\n\"Generative UI\" describes any AI-driven interface that the agent **chooses, composes, or writes at runtime**. Approaches sit on a spectrum — from **more control** on one end to **more flexibility** on the other — and most real apps mix several tiers.\n\n### Controlled (`useComponent`)\n\nThe highest level of control. The developer provides the agent with a set of predefined React components, and the agent selects the appropriate one and populates it with props. This ensures the interface stays on-brand and pixel-perfect, making it ideal for standard, repeatable application workflows. See [Display Components](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\u002Fyour-components\u002Fdisplay-only) in the CopilotKit docs.\n\n### Declarative (`A2UI`)\n\nUtilizing the [A2UI](https:\u002F\u002Fa2ui.org\u002F) specification, this method uses a schema to map agent outputs to a catalog of renderers. It offers a balance between control and flexibility, allowing the agent to handle more varied UI layouts without requiring a unique tool for every single component. It is particularly effective for the \"long tail\" of user interactions. See [A2UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\u002Fa2ui) in the CopilotKit docs.\n\n### Open-ended (`MCP Apps`, `openGenerativeUI`)\n\nThe \"Wild West\" of generative UI — the agent generates raw HTML that is rendered within a secure, sandboxed double-iframe. While it is the most flexible — enabling the creation of disposable, data-grounded interfaces on the fly — it is the hardest to style consistently and can behave unpredictably. See [opengenerativeui.copilotkit.ai](https:\u002F\u002Fopengenerativeui.copilotkit.ai\u002F) for a live demo, and the CopilotKit docs on [MCP Apps](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\u002Fmcp-apps) and [Open Generative UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\u002Fopen-generative-ui).\n\nThis kit is wired for all three: the canvas surface uses controlled cards for lead entities, A2UI streams declarative components from Gemini, and the deployable MCP server in `apps\u002Fmcp\u002F` extends the same agent into Claude and ChatGPT's open-ended generative UI surface.\n\n**Go deeper:**\n\n- 🎥 Talk — [The Generative UI spectrum](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=y4lln0yGMSE)\n- 📝 Article — [CopilotKit on Generative UI](https:\u002F\u002Fx.com\u002FCopilotKit\u002Fstatus\u002F2047327612163293286)\n\n---\n\n## Stack\n\n### CopilotKit\n\nCopilotKit connects your app's logic, state, and user context to the AI agents that deliver the animated and interactive part of your app experience — across both embedded UIs and fully headless interfaces. The kit ships with **CopilotKit Intelligence** wired in, giving you durable conversation threads (Postgres-backed), a runtime that bridges your frontend to any LangGraph agent, and built-in support for generative UI and MCP App composition.\n\n[More about CopilotKit ->](https:\u002F\u002Fdocs.copilotkit.ai)\n\n### LangChain Deep Agents\n\nLangChain Deep Agents is a Python framework that gives an LLM agent built-in planning, sub-agent dispatch, a virtual filesystem, and a TODO loop — the patterns popularized by Claude Code and Manus, packaged as a `create_deep_agent(...)` call on top of LangGraph. The kit uses Deep Agents as the brain behind the canvas: a single prompt like \"import the workshop leads and draft outreach to the top 5\" triggers a multi-step plan that the agent executes tool-by-tool while you watch the cards appear.\n\n[More about Deep Agents ->](https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fdeepagents)\n\n### Gemini\n\nGemini 3.1 Flash-Lite is Google's high-volume workhorse in the Gemini 3 family — fast, cheap, and tool-calling-capable. The kit defaults to **`gemini-3.1-flash-lite`** for chat — pick up an API key from [Google AI Studio](https:\u002F\u002Faistudio.google.com), drop it into `.env`, and you're done. Need a more reasoning-heavy model? Swap to **Gemini 3 Pro Preview** or **Gemini 3 Flash** with a one-line edit in `apps\u002Fagent\u002Fsrc\u002Fruntime.py` (`_gemini_llm`). Swapping to OpenAI, Anthropic, or any other LangChain-supported model is also a one-line edit (see [Switching to a different model](dev-docs\u002Fmodel-switching.md)).\n\n[More about Gemini ->](https:\u002F\u002Fai.google.dev\u002Fgemini-api\u002Fdocs)\n\n### A2UI\n\n[A2UI](https:\u002F\u002Fa2ui.org\u002F) is a protocol for agent-driven interfaces — it lets AI agents generate rich, interactive UI that renders natively across web, mobile, and desktop **without executing arbitrary code**. That sandboxed-by-default model pairs well with the kit's generative UI surface: Gemini emits A2UI components, the renderer paints them, and the agent never ships executable code to the client. Browse the [custom catalog](https:\u002F\u002Fa2ui-composer.ag-ui.com\u002Fcustom-catalog) for component examples.\n\n[More about A2UI ->](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FA2UI)\n\n### Notion MCP (via mcp-use)\n\nThe kit ships with a **Notion Leads database demo** wired through the official [Notion MCP server](https:\u002F\u002Fgithub.com\u002Fmakenotion\u002Fnotion-mcp-server) (`@notionhq\u002Fnotion-mcp-server`), called from Python via [mcp-use](https:\u002F\u002Fmanufact.com\u002Fmcp-use). MCP is the open protocol for connecting LLMs to tools — Anthropic publishes it, and Notion ships a first-party server. Swap to any other MCP server (Linear, Slack, GitHub, Google Drive, …) by changing one config dict in `apps\u002Fagent\u002Fsrc\u002Fnotion_mcp.py` and updating the prompt's `INTEGRATION_PROMPT`.\n\n[More about MCP ->](https:\u002F\u002Fmodelcontextprotocol.io)\n\n### Manufact \u002F mcp-use\n\nThe kit's `apps\u002Fmcp\u002F` package is an MCP server built with [`mcp-use`](https:\u002F\u002Fmanufact.com\u002Fmcp-use), an open-source TypeScript framework for building MCP servers and MCP Apps. `npm run dev:mcp` gives you a full development environment with a local Inspector and support for hot reload for quick iteration. Easily deploy the server to Manufact Cloud with `npm run -w mcp deploy`.\n\n[More about Manufact ->](https:\u002F\u002Fmanufact.com)\n\n### Daytona\n\n[Daytona](https:\u002F\u002Fwww.daytona.io\u002F) is a secure and elastic infrastructure runtime for AI-generated code execution and agent workflows. Sandboxes spin up in under 90ms with full isolation — dedicated kernel, filesystem, network stack, and allocated vCPU\u002FRAM\u002Fdisk — and run any Python, TypeScript, or JavaScript code. Built on OCI\u002FDocker compatibility with stateful environment snapshots, it's a natural fit when an agent in this kit needs to execute generated code or persist a workspace across sessions. Agents and developers interact with sandboxes programmatically through Daytona's SDKs, API, and CLI.\n\n[More about Daytona ->](https:\u002F\u002Fgithub.com\u002Fdaytonaio\u002Fdaytona)\n\n---\n\n## Run it locally\n\n**Prerequisites** — install these before step 1:\n\n- **Node.js 20+** (bundles `npm`\u002F`npx`).\n- **Python 3.10+**.\n- **[`uv`](https:\u002F\u002Fdocs.astral.sh\u002Fuv\u002Fgetting-started\u002Finstallation\u002F)** — `npm install` triggers a `uv sync` post-install for the Python agent and will fail without it.\n- **Docker Desktop**, installed and running before step 4 — the kit boots Postgres + Redis + Intelligence via `docker compose` as part of `npm run dev`. (Can't run Docker? See [Removing Intelligence (Docker-free mode)](dev-docs\u002Fsetup.md#removing-intelligence-docker-free-mode).)\n\n1. Copy the env templates: `cp .env.example .env && cp apps\u002Fagent\u002F.env.example apps\u002Fagent\u002F.env`.\n2. Get a CopilotKit Intelligence license — run `npx copilotkit@latest license` (or sign in at [dashboard.operations.copilotkit.ai\u002Fsign-in](https:\u002F\u002Fdashboard.operations.copilotkit.ai\u002Fsign-in) for the manual path). Paste the token into `.env` as `COPILOTKIT_LICENSE_TOKEN`.\n3. Add a Gemini API key — paste it into **both** `.env` and `apps\u002Fagent\u002F.env` (the slot is already in each template from step 1). Then follow [Notion setup](#notion-setup) below for the integration token + database id.\n4. Run `npm install` then `npm run dev` (or `npm run dev:full` to include the MCP server).\n5. Once the `ui`, `bff`, and `agent` streams are running, open **[http:\u002F\u002Flocalhost:3010](http:\u002F\u002Flocalhost:3010)**.\n\n> `npm run dev` runs a pre-flight check (`scripts\u002Fcheck-env.sh`) before booting anything — it'll fail loudly with a numbered list of any missing keys, an unreachable Notion database, or a Docker daemon that isn't running. Fix what it lists, re-run, and you're off. See [dev-docs\u002Ftroubleshooting.md](dev-docs\u002Ftroubleshooting.md) for fixes per failure mode.\n\nPlease give us feedback on your experience with it!\n\n### Notion setup\n\nThe kit calls Notion through the official [Notion MCP server](https:\u002F\u002Fgithub.com\u002Fmakenotion\u002Fnotion-mcp-server) — a standalone process spawned on demand via `npx -y @notionhq\u002Fnotion-mcp-server`. Auth is a single Notion integration token plus an explicit per-database share. No global install, no OAuth flow, no third-party broker.\n\nThe kit is wired against an \"AI Workshop Provider Community\" lead-form database. The fastest path is to duplicate the public sample into your own workspace; you can also re-import a CSV\u002FZIP if you'd rather start from a snapshot.\n\n**1. Get the database into your workspace.**\n\n- *Option A — duplicate the public sample (recommended).* Open the public template: [AI Workshop Provider Community](https:\u002F\u002Fassorted-stomach-b12.notion.site\u002Fa274791c4e1e826d882d01562af74de9?v=0e04791c4e1e83ca834988083174d19e&source=copy_link). In the top-right of the page, click the **Duplicate** icon (two overlapping squares, next to the share icon and the `…` menu) and pick a destination workspace — schema, views, and seed rows all come along. Bookmark the URL of the duplicated copy; you'll need its database id in step 3.\n- *Option B — re-import the bundled snapshot.* In Notion, **Settings → Workspace → Import → Notion (CSV\u002FZIP)** and upload [`data\u002Fnotion-leads-sample\u002Fai-workshop-provider-community.zip`](data\u002Fnotion-leads-sample\u002Fai-workshop-provider-community.zip). A quick-look CSV lives next to it at [`ai-workshop-provider-community.csv`](data\u002Fnotion-leads-sample\u002Fai-workshop-provider-community.csv).\n\n**2. Create an integration and share it with the database.**\n\n1. Go to [notion.so\u002Fprofile\u002Fintegrations\u002Finternal](https:\u002F\u002Fwww.notion.so\u002Fprofile\u002Fintegrations\u002Finternal) → **New integration** → name it (e.g. \"genai-starterkit\") → copy the **Internal Integration Token** (starts with `ntn_…` or `secret_…`). Bookmark this page — it's also where you'll come back to rotate the token or audit which databases the integration can see.\n2. Open the duplicated database in Notion. Click the `…` menu in the top-right → **Connections** (count badge will read `0`) → **Add connection** → pick the integration you just created. The panel will flip to **Active connections** with your integration listed.\n\n> Notion's permission model is per-database — a fresh integration token sees zero databases until it's been shared into them. **Forgetting this share step is the most common point of failure.** If `npm run dev` boots cleanly but `Import the leads` fails with \"object not found\", come back here.\n\n> **Learn more:** Notion's [Getting started with the Notion API](https:\u002F\u002Fdevelopers.notion.com\u002Fguides\u002Fget-started\u002Foverview) covers integration types, the per-database share model, and the API surface the official MCP server wraps.\n\n**3. Paste the credentials into `.env`.**\n\nPull the database id from the URL of your duplicated copy: it's the 32-char hex string between the workspace slug and the `?v=` query (e.g. `a274791c4e1e826d882d01562af74de9`).\n\nPaste both into `apps\u002Fagent\u002F.env` (and `.env` at the repo root):\n\n```bash\nNOTION_TOKEN=\u003Cpaste the Internal Integration Token>\nNOTION_LEADS_DATABASE_ID=\u003Cpaste the database id from its Notion URL>\n```\n\n**4. Restart the agent.**\n\n```bash\nnpm run dev\n```\n\nThen try: **\"Import the workshop leads.\"**\n\n> Need the manual \u002F Docker-free path, or want to swap Notion for a different MCP server (Linear, Slack, GitHub, …)? See [dev-docs\u002Fsetup.md](dev-docs\u002Fsetup.md).\n\n---\n\n## Vibe coding\n\nThe kit ships with skills pre-installed for Cursor, Claude Code, and any agent reading `.agent\u002F`. Open the project in your coding tool and they're picked up automatically — no extra setup. They teach your coding agent CopilotKit's v2 API surface, MCP server \u002F MCP App authoring patterns, and this kit's own conventions.\n\n```\n.\n├── .agent\u002Fskills\u002F   ← agent-tool-agnostic (read by any agent following the AGENTS.md convention)\n├── .claude\u002Fskills\u002F  ← Claude Code\n└── .cursor\u002Fskills\u002F  ← Cursor\n```\n\nEach directory carries the same set of 11 skills:\n\n- **CopilotKit (8):** `copilotkit-{setup, develop, integrations, debug, upgrade, contribute, agui, self-update}` — from [CopilotKit\u002Fskills](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fskills).\n- **MCP (3):** `mcp-builder`, `mcp-apps-builder`, `chatgpt-app-builder` — from the Manufact reference. They cover authoring an MCP server (the open protocol Anthropic publishes for wiring LLMs to external tools — the same protocol the kit's Notion integration uses) and packaging it as an MCP App that runs natively in Claude or ChatGPT.\n\nTo **update** the CopilotKit skills to the latest upstream:\n\n```bash\nnpx skills add copilotkit\u002Fskills --full-depth -y\n```\n\n### Connect to the CopilotKit docs MCP server\n\nCopilotKit also exposes a hosted MCP server that gives your coding agent live access to the latest CopilotKit reference material — handy when the checked-in skills lag upstream or you want to ask the docs questions interactively.\n\n**MCP endpoint:** `https:\u002F\u002Fmcp.copilotkit.ai\u002Fmcp`\n\n**Claude Web** (Anthropic's web app — attaches MCP servers via Connectors):\n\n1. Open [Claude](https:\u002F\u002Fclaude.ai\u002F), click your user in the bottom-left of the chat box, and select **Settings**.\n2. In the left-hand menu, select **Connectors** (or jump straight to the [Connectors settings page](https:\u002F\u002Fclaude.ai\u002Fsettings\u002Fconnectors)).\n3. Click **Add custom connector**.\n4. **Name:** `CopilotKit`\n5. **URL:** `https:\u002F\u002Fmcp.copilotkit.ai\u002Fmcp`\n6. Click **Add**.\n\nSetup for Claude Code, Cursor, ChatGPT, and other coding agents is documented at [docs.copilotkit.ai\u002Fcoding-agents](https:\u002F\u002Fdocs.copilotkit.ai\u002Fcoding-agents).\n\nReference docs: [CopilotKit Coding Agents](https:\u002F\u002Fdocs.copilotkit.ai\u002Fcoding-agents) · [CopilotKit Skills repo](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fskills) · [Agent Skills standard](https:\u002F\u002Fagentskills.io).\n\n---\n\n## Documentation\n\nDeeper guides live in [`dev-docs\u002F`](dev-docs\u002F):\n\n- [Setup](dev-docs\u002Fsetup.md) · [Model switching](dev-docs\u002Fmodel-switching.md) · [MCP server](dev-docs\u002Fmcp-server.md)\n- [Architecture](dev-docs\u002Farchitecture.md) · [Customization](dev-docs\u002Fcustomization.md) · [Threads \u002F Intelligence](dev-docs\u002Fthreads.md)\n- [Scripts](dev-docs\u002Fscripts.md) · [Demo prompts](dev-docs\u002Fdemo-prompts.md) · [Troubleshooting](dev-docs\u002Ftroubleshooting.md)\n\n## License\n\nMIT.\n\n---\n\n> Built for the Generative UI Global Hackathon: Agentic Interfaces.\n","Generative UI Global Hackathon: Agentic Interfaces Starter Kit 是一个用于构建由AI驱动的交互界面的启动工具包。该项目使用TypeScript开发，提供了一个基于Next.js的应用程序框架，集成了LangGraph Deep Agent以管理可视化画布上的互动卡片，并支持实时AI同步和通过MCP实现的外部工具集成（例如与Notion数据库同步）。此外，还包含一个可部署的MCP服务器，可在Claude或ChatGPT中运行。核心功能包括持久会话线程、代理驱动的画布、真实的MCP集成以及Gemini渲染组件的支持。此项目非常适合需要快速搭建具有高级对话管理和数据可视化能力的应用场景，如客户服务自动化、销售线索管理等。","2026-06-11 04:04:43","CREATED_QUERY"]