Skip to content

Replace custom widgetRenderer with CopilotKit Open Generative UI #82

@jerelvelarde

Description

@jerelvelarde

Background

We currently ship a hand-rolled open generative UI implementation:

  • WidgetRenderer — ~730-line component that renders agent-authored HTML/CSS/JS inside a sandboxed iframe, with our own theme CSS, idiomorph streaming, and export overlay.
  • Registered as a useComponent({ name: "widgetRenderer", ... }) in use-generative-ui-examples.tsx.

CopilotKit now ships this as a first-class feature: Open Generative UI. It covers the same use case (live-streamed sandboxed HTML/CSS/JS, CDN libraries, two-way host bridges) without per-app widget code.

Goal

Delete the custom widget pipeline and use CopilotKit's built-in Open Generative UI instead.

Scope

  • Enable openGenerativeUI: true in the runtime (route.ts).
  • Remove the widgetRenderer useComponent registration and its supporting files (widget-renderer.tsx, idiomorph-inline.ts, export-overlay.tsx, export-utils.ts) once parity is confirmed.
  • Port any host-side hooks we relied on (e.g. theme toggling) to sandboxFunctions on the CopilotKit provider.
  • Keep the other declarative components (pieChart, barChart, plan_visualization, HITL scheduleTime) as-is.
  • Update CLAUDE.md and any demo prompts/suggestions referencing "widgetRenderer".

Open question

The current runtime is v1 CopilotRuntime + LangGraphHttpAgent pointing at the Python LangGraph agent. The docs example for openGenerativeUI: true uses the v2 runtime with BuiltInAgent + InMemoryAgentRunner. We need to verify whether the flag is supported alongside LangGraphHttpAgent, or whether this upgrade also requires migrating the runtime wiring (and what that means for the Python agent in apps/agent/).

Acceptance criteria

  • "Build me a calculator" / "Visualize binary search" prompts produce a streamed, sandboxed UI in chat with no custom widget code in this repo.
  • Theme toggle still works from generated UI (via sandboxFunctions).
  • Custom widget-renderer.tsx and helpers are deleted.
  • README/CLAUDE.md reflect the new approach.

Docs: https://docs.copilotkit.ai/generative-ui/open-generative-ui

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions