Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Interactive pages in the conversation with ShowUI (#189 phase 2)

Aperta
  • Qualcosa non va?
#202 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
html, typescript
Ambito
backend, desktop, frontend, security

Direzione di ricerca

Read the design and decisions in issue #189 and docs/session-state-tech-design.md first. Trace the built-in CLI tool, sidecar session storage and reducer, page host, and desktop/H5 rendering entry points; the issue does not name their source files. Done means the three CI checks and listed tests pass, including sandbox and network isolation, and the specified desktop and phone-width checks succeed.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Phase 2 of #189. The design and the decisions behind it are in #189; this issue tracks the work.

Summary

The agent can answer with a small interactive HTML page (a chart, a calculator, a comparison table) that renders inline in the conversation, sandboxed and offline. Pages have ids and revisions, so the agent can change a page later instead of writing a new one.

Scope

  • Tool. A built-in CLI tool, ShowUI:
    • ShowUI({ title, html }) creates a page and returns { pageId, revision };
    • ShowUI({ pageId, baseRevision, title?, html }) replaces it;
    • ShowUI({ pageId, baseRevision, edits }) applies old/new string pairs, each old matching exactly once, all or nothing.
    • An update whose baseRevision is not the latest is rejected with an error that tells the agent to read the latest revision first.
  • Storage. The sidecar stores every revision as a file under the session's data directory. Revisions are immutable. There is a size limit per page. Session state records the page ids and revisions through the session reducer, so the desktop app and the H5 page show the same items after a refresh or reconnect (docs/session-state-tech-design.md).
  • Rendering.
    • The page renders only once the tool call completes, never while it streams.
    • The first revision renders inline. Later revisions show as a compact card ("Login page · rev 3") that expands in place to show that revision and collapses again.
  • Page host.
    • Pages are served by the sidecar from a separate origin, never the app's origin.
    • The page runs in <iframe sandbox="allow-scripts"> without allow-same-origin.
    • The CSP is sent as a response header, with no network access: default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'. The exact string is settled in the PR.
  • Messages.
    • The page may send only ready, resize and error, using the MCP Apps method names so an MCP Apps host can reuse the bridge later.
    • Every message is checked against the frame's event.source.
    • The frame has a maximum height.
    • The host injects the theme tokens as CSS variables and updates them when the theme changes.
  • Prompting. The tool description tells the agent that pages are offline: no CDN, no fetch; draw charts with inline SVG or canvas.

Out of scope

  • A component runtime, page editing by the user, templates and export (later steps in #189).
  • Pages calling back to the agent or the host.
  • MCP Apps.
  • Opening a page in the Browser tab (#201). It can follow as its own issue once both phases have landed.

Done when

  • The three CI checks pass, and the new behavior has tests:
    • tool create, replace and edit;
    • the baseRevision conflict;
    • the size limit;
    • session-state sync to a second client;
    • message validation.
  • A test proves the frame can't reach window.parent, the preload bridge, the app's storage or the sidecar API (cf. LobeChat GHSA-xq4x-622m-q8fq, where artifact XSS reached an Electron IPC through window.parent). The test also proves a page can't load anything from the network.
  • Checked by hand on macOS desktop and on the H5 page at phone width, in a light and a dark theme: a chart page and a form-like page render and resize; a theme switch updates an open page; a revision shows as a card that expands in place.

References

From the source review behind #189:

  • the MCP Apps spec and its sandbox proxy (modelcontextprotocol/ext-apps);
  • ShowAI's artifact format (MIT);
  • LobeChat Canvas's tools and versioning, as a design reference only (LobeHub Community License, no code reuse).
Lingua principale
TypeScript
Stelle
490
Fork
47
Merge medio
9h 31m
PR unite (30g)
76

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di GoDiao/dreamcoder

Tutte le issue di GoDiao/dreamcoder

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.