Skip to main content
@nuwa-ai/ui-kit provides a NuwaClient class and a set of React hooks to help you build interactive UI for your Cap.

​
Example

import { NuwaProvider, useNuwa } from '@nuwa-ai/ui-kit';

function MyCapUI() {
  const { nuwa, connected } = useNuwa();
  return <button onClick={() => nuwa.sendPrompt('Analyze selections')} disabled={!connected}>Run</button>;
}

export default () => (
  <NuwaProvider autoHeight debug>
    <MyCapUI />
  </NuwaProvider>
);

​
Install

pnpm add @nuwa-ai/ui-kit

​
NuwaClient

NuwaClient is the main class that you can use to interact with the Nuwa Client. It provides a set of methods that you can use to interact with the Nuwa Client. You can initialize a NuwaClient instance directly, or use the useNuwa hook to get a NuwaClient instance.

​
constructor

Create a NuwaClient for parent iframe communication. 
const nuwaClient = new NuwaClient(options); // initialize a NuwaClient instance

nuwaClient.connect(); // connect to the Nuwa Client
Inputs Construct-time options
​
options
object?
Returns
​
client
NuwaClient
Configured client instance

​
sendPrompt

Send a message to the parent client chat. Inputs
​
prompt
string
required
Text message to send
Returns
​
result
Promise<void>
Resolves when sent

​
setHeight

Set the UI iframe height in the Nuwa Client. Inputs
​
height
string | number
required
CSS size or number
Returns
​
result
Promise<void>
Resolves when applied

​
addSelection

Add a selection (label + message) to parent UI. Inputs
​
label
string
required
Selection title. This will be displayed as a badge in the user’s input.
​
message
string | object
required
Payload message. This will be provided to the AI as part of the system prompt.
Returns
​
result
Promise<void>
Resolves when added

​
saveState

Save state to the Nuwa Client. Inputs
​
state
any
State to save
Returns
​
result
Promise<void>
Resolves when applied

​
getState

Retrieve the state from the Nuwa Client. Inputs
​
state
any?
Retrieve the state
Returns
​
result
Promise<any>
Resolves when applied

​
createAIStream

Start a LLM stream controlled by nuwa client. Inputs Streaming request
​
request
object
required
Returns
​
handle
StreamHandle
Control/observe the stream

​
StreamHandle.execute / abort

Run the stream and observe live chunks/errors. Inputs Optional callbacks
​
options
object?
Returns
​
execute
Promise
Final stream result and error (object with result and error)
​
abort
void
Cancel the stream

​
React Helpers

​
NuwaProvider

Wrap your app and auto-manage connection and resizing. Inputs Provider properties
​
props
object
Returns
​
element
ReactElement
Rendered provider element

​
useNuwa

Access the client, theme, and connection status. Inputs
​
(none)
void
Hook takes no parameters
Returns
​
nuwa
NuwaClient
Client instance
​
theme
"light"|"dark"
Current theme
​
connected
boolean
Connection state

​
MCP Transport

​
PostMessageMCPTransport (constructor)

A Transport for official MCP SDK over postMessage. Inputs Constructor options
​
options
object?
Returns
​
transport
PostMessageMCPTransport
Configured transport

​
start / send / connect / disconnect

Transport lifecycle and messaging. Inputs
​
(varies)
-
See individual methods
Returns
​
start
Promise<void>
Begin listening
​
send
Promise<void>
Send JSON-RPC message
​
connect
Promise<void>
Connect to window
​
disconnect
void
Tear down transport
​
connected/ready
boolean
Current status flags

​
UI Helpers

Return UI resources from MCP tools. Inputs
​
path
string
required
Path relative to artifact origin
​
name/description/uiType
string?
Optional metadata
Returns
​
resource
UIResource
Result for createUIResource
​
toolResult
UIToolResult
Result for createUIToolResult