Repository navigation
feat: add agentic UX skill and deployable shell - #48
Merged
Merged
Conversation
Co-authored-by: carlosvin <carlosvin@gmail.com>
✅ Deploy Preview for fullstack-promptable-app-example ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for fullstack-promptable-prompt-first ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
PROMPT_CONCEPT=agentic renders a thin prompt shell and sandboxed task views, plus a third Netlify site script and CI build. Co-authored-by: carlosvin <carlosvin@gmail.com>
cursor
Bot
force-pushed
the
cursor/agentic-example-fead
branch
from
October 3, 2026 18:00
05b7fc1 to
4cde4b9
Compare
carlosvin
marked this pull request as ready for review
October 3, 2026 19:01
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Composer sizing, resource handling, and conflicting navigation instructions leave core agentic workflows unreliable.
Review effort: Balanced
Findings: 7
Open (7)
What changed in this PR
Adds a third deployable, tool-only shell, implementing the agentic UX introduced in #47 alongside the existing side and prompt-first concepts.
Changes:
- Adds agentic conversation state, a pinned composer, and sandboxed task views.
- Selects agentic tools and layout through
PROMPT_CONCEPT. - Adds tests, CI coverage, deployment setup, and skill documentation.
| File | Description |
|---|---|
| src/utils/browserContext.ts | Adds location-free agentic context. |
| src/services/schemas/shellSession.ts | Accepts the agentic concept. |
| src/services/mcpUi/mcpUiResources.ts | Builds interactive task resources. |
| src/services/mcpUi/mcpUiResource.ts | Validates and decodes resources. |
| src/services/mcpUi/mcpUiResource.test.ts | Tests resource handling. |
| src/services/ai/tools.ts | Adds task-view tools. |
| src/routes/index.tsx | Hides the agentic dashboard. |
| src/routes/api/chat.ts | Selects concept-specific prompts and tools. |
| src/env/webEnv.server.ts | Updates configuration description. |
| src/env/webEnv.server.test.ts | Tests agentic configuration. |
| src/components/AppLayout/AppLayout.tsx | Selects the agentic shell. |
| src/components/AppLayout/AppLayout.agentic.test.tsx | Tests shell isolation. |
| src/components/AgenticShell/AgenticThread.tsx | Renders conversation and resources. |
| src/components/AgenticShell/AgenticShell.tsx | Adds the tool-only layout. |
| src/components/AgenticShell/AgenticShell.test.tsx | Tests layout and availability states. |
| src/components/AgenticShell/AgenticComposer.tsx | Adds conversation controls. |
| src/components/AgenticMcp/AgenticMcpRenderer.tsx | Hosts sandboxed interactive resources. |
| src/components/AgenticMcp/AgenticMcpRenderer.test.tsx | Tests sandbox and validation. |
| src/components/AgenticChat/AgenticChatContext.tsx | Manages agentic chat state. |
| skills/README.md | Lists the agentic skill. |
| scripts/skills/runSkillEvals.mjs | Checks the agentic contract. |
| scripts/netlify/setup-agentic-site.sh | Configures an agentic deployment. |
| README.md | Documents the third demo. |
| evals/agentic-ux/tasks/agentic-ui-action-tool.yaml | Adds action evaluation case. |
| evals/agentic-ux/tasks/agentic-shell-layout.yaml | Adds layout evaluation case. |
| evals/agentic-ux/tasks/agentic-mcp-ui-render.yaml | Adds rendering evaluation case. |
| evals/agentic-ux/tasks/agentic-contract-overview.yaml | Adds contract evaluation case. |
| evals/agentic-ux/tasks/agentic-anti-ui-library.yaml | Covers UI-library skill routing. |
| evals/agentic-ux/tasks/agentic-anti-route-components.yaml | Covers route-based UX routing. |
| evals/agentic-ux/tasks/agentic-anti-env.yaml | Covers environment skill routing. |
| evals/agentic-ux/tasks/agentic-anti-architecture.yaml | Covers architecture skill routing. |
| evals/agentic-ux/eval.yaml | Configures mock skill evaluations. |
| AGENTS.md | Extends three-demo deployment guidance. |
| .github/workflows/ci.yml | Adds an agentic build. |
| .env.example | Documents the agentic setting. |
| .agents/skills/tanstack-promptable-fullstack-app-template/SKILL.md | Links the agentic companion. |
| .agents/skills/reference-tech-stack/SKILL.md | Documents the renderer approach. |
| .agents/skills/promptable-ux/SKILL.md | Links the agentic companion. |
| .agents/skills/observability-and-env/SKILL.md | Links the agentic companion. |
| .agents/skills/agentic-ux/SKILL.md | Defines the agentic UX contract. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
AppRenderer uses onCallTool, onMessage, and onOpenLink. The five onUIAction types stay on UIResourceRenderer only. Co-authored-by: carlosvin <carlosvin@gmail.com>
cursor
Bot
changed the title
Retry re-requests views, resize the composer footer, scroll the thread, map markdown links to prompts, use an agentic system prompt, skip home task loads, and reject oversized MCP UI HTML instead of truncating. Co-authored-by: carlosvin <carlosvin@gmail.com>
The agentic skill now requires the example's metadata URI and sandboxed iframe. The architecture skill asks which UX and defaults to prompt-first. Co-authored-by: carlosvin <carlosvin@gmail.com>
Link view tools with metadata._meta.ui.resourceUri, build HTML with createUIResource, and emit a ui-resource part. The shell renders that part with MCPAppResource, the sandbox proxy, and the ext-apps guest SDK. Co-authored-by: carlosvin <carlosvin@gmail.com>
TanStack AI validates inputSchema before execute, so tool handlers pass those args to server functions without parsing them again. Co-authored-by: carlosvin <carlosvin@gmail.com>
carlosvin
commented
Oct 3, 2026
TanStack AI validates inputSchema before client handlers run. The navigate client now uses those parsed args directly. Co-authored-by: carlosvin <carlosvin@gmail.com>
carlosvin
commented
Oct 3, 2026
carlosvin
commented
Oct 3, 2026
carlosvin
commented
Oct 3, 2026
carlosvin
commented
Oct 3, 2026
Tool execute context stays ToolExecutionContext. Home data and screens are selected per prompt concept, and agentic views fill a shared HTML document instead of interpolating task fields into markup. Co-authored-by: carlosvin <carlosvin@gmail.com>
✅ Deploy Preview for fullstack-promptable-agentic ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
MCPAppResource still needs the hosted proxy page. Guest HTML now loads in an inner iframe with no allow-same-origin, and the proxy only relays messages instead of replacing its own document. Co-authored-by: carlosvin <carlosvin@gmail.com>
Reindent the proxy page, keep the inner-iframe isolation note, and point the duplicated guest CORS paths at each other. Co-authored-by: carlosvin <carlosvin@gmail.com>
Register the task view once with createUIResource. View tools return data only, chat reads the document by URI, and AppRenderer paints it from the tool result. Co-authored-by: carlosvin <carlosvin@gmail.com>
View tools and their ui:// documents live on createMCPServer.
Agentic chat connects with createMCPClient and chat({ mcp }), so
discovery stamps uiResourceUri and binds resources/read.
Co-authored-by: carlosvin <carlosvin@gmail.com>
Co-authored-by: carlosvin <carlosvin@gmail.com>
Starter chips ask for views, provider errors stay short, and task cards drop raw ids. The model is told not to repeat the view or filter my tasks onto an anonymous assignee. Co-authored-by: carlosvin <carlosvin@gmail.com>
A card click names the task id and title. Empty markdown links to task routes show that follow-up instead of a bare colon. Co-authored-by: carlosvin <carlosvin@gmail.com>
Show my tasks was filtered to the auto-generated test email, so the view came back empty. That email is not an assignee. Co-authored-by: carlosvin <carlosvin@gmail.com>
The card prompt names the title and id, and the model is told to call showTaskView instead of emitting links to other tasks. Co-authored-by: carlosvin <carlosvin@gmail.com>
A card already names the task, so the shell loads that detail view directly instead of asking the model to list the other tasks. Co-authored-by: carlosvin <carlosvin@gmail.com>
The shell skill now states the hero, short answers, demo-assignee filter, short errors, and direct detail open that the example ships. Co-authored-by: carlosvin <carlosvin@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Combines the
agentic-uxskill from #47 with the deployable example. Merge this pull request only.Deploy previews (this PR)
Each linked Netlify site builds a deploy preview for this pull request. Smoke-test the agentic shell on its own preview. Side and prompt-first stay on theirs.
fullstack-promptable-app-examplefullstack-promptable-prompt-firstfullstack-promptable-agenticThe agentic preview uses
PROMPT_CONCEPT=agenticandDISPLAY_NAME=TaskHub Agentic. It shows the thin shell: identity, conversation stage, and bottom composer. It does not show the drawer, the prompt-first bar, or task pages.Production after merge: https://fullstack-promptable-agentic.netlify.app
The empty stage is a centered hero with view starters (
Show my tasks,Show pending tasks,Show high priority tasks). Provider failures render as a short alert. Task cards show status and priority, and a click opens that task's detail view directly. "My tasks" is not filtered to the demo visitor email. After a list, the model is asked for one sentence instead of repeating every row.Those rules are the
agentic-uxskill contract (v0.2.7), not only the example. The skill covers the hero, sentence-case tool status, short error alerts, one-sentence answers, the demo-assignee filter, guest cards without raw ids, and opening a named item without another model turn. The skill eval checks the example still implements each one.The skill defines a tool-only shell: identity, a conversation stage, and a bottom-pinned composer. Views come from MCP Apps resources. The example follows the recommended MCP Apps pattern and TanStack AI MCP registration:
ui://documents are registered with@tanstack/ai-mcpcreateMCPServerandresourceDefinition. Each tool setsmetadata._meta.ui.resourceUrionly. The handler returns task data and does not attachreadResource.createMCPClientand passes it tochat({ mcp: { clients } }). Discovery stampsmetadata.mcp.uiResourceUri, andMCPManagerbindsresources/read. The same server is mounted at/api/mcp. Side and prompt-first chats do not connect this client.@mcp-ui/servercreateUIResource(text/html;profile=mcp-app). Task rows are not embedded in the HTML.UIResourcePartwithAppRendererfrom@mcp-ui/client, passingtoolInputandtoolResult. The guest handlesontoolresultand writes text withtextContent.sandbox.urlispublic/sandbox_proxy.html, which keeps the guest in an inner iframe with noallow-same-origin. Prompts and links go throughuseMcpAppBridge. The guest uses@modelcontextprotocol/ext-appsAppfrompublic/mcp-app.js(sendMessage,openLink).http,https, andmailto. Widget buttons send a follow-up prompt.POST /api/mcp-apps/callrefuses a direct widget tool call, so writes stay on the chat tools and the auth ticket.executeand client.client()handlers receive arguments already parsed byinputSchemaand pass them through. They do not parse those arguments again.The architecture skill asks which UX to follow before building chrome. If the user does not choose, the default is prompt-first. Side and agentic stay explicit choices. This template's three Netlify sites keep their existing
PROMPT_CONCEPTvalues.The example selects the agentic shell with
PROMPT_CONCEPT=agentic. It does not mount the drawer, the prompt-first bar, the navbar, or domain pages.showTasksViewandshowTaskViewproduce the inline views. There is nonavigateorinvalidateRouteron this concept.The site
fullstack-promptable-agenticis linked to this repo withPROMPT_CONCEPT=agentic,DISPLAY_NAME=TaskHub Agentic, andREPOSITORY_TYPE=seedon production and deploy-preview. Side and prompt-first previews stay on their own sites.