Skip to main content

​
How does Cap UI work in Nuwa?

You can build the UI with all the frontend framework and tech stacks you are fimiliar with. You UI will eventually be embeded via iframe in the Nuwa Client to the user. To enable more functions, you can use @nuwa-ai/ui-kit to interact with the Nuwa Client, such as making an AI streaming request, sending a prompt, or saving UI state. The communication between the UI and the Nuwa Client is done via postMessage function, ensuring security. Currently, there are two types of UI you can build for your Cap: Artifact UI and MCP UI.

​
MCP UI

MCP UI Example You can return a UI resource that gets rendered in the Nuwa Client upon the result of a MCP tool call. The UI can be used for rendering the tool execution result. Or you could build a dedicated tool just for the AI to render a specific UI and control the UI via the tool input arguments.

​
Artifact UI

Artifact UI Example Artifact UI is a dedicated, persistent panel for your Cap. It is great for editors, dashboards, notebooks, or long‑lived tasks. It shows when the user runs your Cap. An Artifact UI can not only interact with the Nuwa Client via @nuwa-ai/ui-kit but also can expose customized functions to the AI via MCP tools defined directly in the frontend.

​
Go Deeper

Artifact UI

Dedicated UI panel with your Cap

MCP UI

Return UI from MCP tools