Skip to content

Show agent chat artifacts in a sandboxed viewer - #1270

Draft
koutst wants to merge 1 commit into
mainfrom
claude/agent-artifact-parity-486352
Draft

koutst wants to merge 1 commit into
mainfrom
claude/agent-artifact-parity-486352

Conversation

@koutst

@koutst koutst commented Nov 3, 2026

Copy link
Copy Markdown
Member

Overview

Shows the artifacts the notebook and assistant chat agents make: a card in the activity feed that opens a near full-screen viewer with Preview and Code, version stepping, copy and download.

Backend PR: ResearchHub/researchhub-backend#4473

  • Sandbox: pages, React components, SVG and Mermaid render in an <iframe sandbox="allow-scripts"> from srcdoc, so they get an opaque origin with no access to the app's cookies, storage or DOM. A CSP in the page allows scripts only from cdnjs, jsdelivr, unpkg, esm.sh and the Tailwind CDN and has no connect-src, so model-written code can't send data anywhere. Uncaught errors are posted to the parent and shown over the preview.
  • React: compiled in the frame with Babel standalone; an import map serves react, recharts, lucide-react, d3 and lodash from esm.sh, with Tailwind from its CDN.
  • In the app: Markdown and code render outside the frame, through the existing sanitizing renderers.
  • Live drafts: while the agent writes an artifact, its card opens a code view that follows the stream, then switches to the saved, rendered artifact when the turn records it.

New network request

GET /api/research_ai/artifacts/<id>/?version=n (ArtifactService.getArtifact, via useArtifact), made only when a user opens an artifact in the viewer, once per version: versions never change, so they're cached for the session. The content isn't in the chat response because that would bloat every activity poll.

Testing

lint, type-check and Prettier pass. Checked every kind on a local stack against seeded artifacts, including version switching, a component that throws, an HTML page probing storage and network (both blocked), and the draft-to-saved handoff. The first React or Mermaid open takes a few seconds while the CDN libraries load; a loading line shows meanwhile.

🤖 Generated with Claude Code

@vercel

vercel Bot commented Nov 3, 2026 •

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
web Ready Ready Preview Nov 3, 2026 9:17pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Nov 3, 2026

Copy link
Copy Markdown

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

CodeRabbit Verify

  • Run CodeRabbit Verify to test the changes in this pull request.

@sonarqubecloud

sonarqubecloud Bot commented Nov 3, 2026

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
D Security Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

if (data?.type !== ARTIFACT_ERROR_MESSAGE || typeof data.message !== 'string') return;
setError({ srcDoc, message: data.message });
};
window.addEventListener('message', onMessage);

This branch was successfully deployed

1 active deployment
Preview — 69039a2c Deployed Nov 3, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants