# Visibility

Programmatically show, hide, open, close, or remove your Foldspace agent for full UI control.

Control your agent's UI from code: open or close the prompt, show or hide the widget, or tear it down entirely. Use it to wire the agent into your app's own controls and lifecycle.

Every call references your Agent API Name, found in **Agent Studio → Setup**.

:::note[Prerequisites]
The [SDK is installed and initialized](/start/install/). Call these methods inside the `foldspace('when', 'ready', ...)` callback.
:::

## Initialize the agent

```javascript
foldspace("when", "ready", () => {
  const agent = foldspace.agent({ /* …common setup… */ });
  // Now you can call any of the methods below:
  // agent.message(...).open().setViewType("WIDGET").hide()...
});
```

## Open and close

Open the agent prompt:

```javascript
foldspace.agent("myproduct-agentic-agent").open();
```

Close the agent prompt:

```javascript
foldspace.agent("myproduct-agentic-agent").close();
```

## Show and hide

Show the agent widget:

```javascript
foldspace.agent("myproduct-agentic-agent").show();
```

Hide the agent widget:

```javascript
foldspace.agent("myproduct-agentic-agent").hide();
```

## Remove

Tear down the agent completely: unmounts the UI, clears its state, and frees
resources.

```javascript
agent("myproduct-agentic-agent").remove();
```