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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions