# Interactive Apps

Interactive app artifacts are live, functional mini-applications that run directly inside the artifact panel. There are two kinds: **React Apps** that Darcy generates from scratch, and **MCP UI** apps powered by your connected MCP integrations.

## React Apps

React app artifacts are self-contained components that Darcy writes and renders live. They're useful when static content isn't enough and you need interactivity — calculators, interactive forms, data explorers, mini tools, and visual simulations.

### Creating React Apps

Ask Darcy naturally:

* "Build an interactive ROI calculator"
* "Create a sortable comparison table for these products"
* "Make a visual timeline I can click through"
* "Build a kanban board with drag-and-drop"

Darcy writes a React component using Tailwind CSS for styling and renders it immediately in the artifact panel. The apps have access to a set of pre-loaded libraries including charting (Recharts), icons (Lucide), and UI components (shadcn/ui).

### Editing

Click **Edit** to open a split-pane view — React source code on the left, live preview on the right. Changes update the preview in real time. If the code has an error, Darcy can fix it automatically.

### Export

React apps can be exported as a **screenshot image** from the toolbar.

***

## MCP UI Apps

When you interact with [MCP integrations](/integrations-and-configuration/mcp-studio.md), some tools return rich interactive UIs instead of plain text. These are rendered as MCP UI artifacts — live interfaces that can display data, forms, and controls powered by your connected services.

MCP UI artifacts are interactive and context-aware. They can trigger tool callbacks, update in response to user actions, and pass context back into the conversation.

### Examples

* An AWS cost dashboard returned by an AWS MCP integration
* A Salesforce record viewer from a Salesforce MCP tool
* A custom form or data view built with the MCP Builder

{% hint style="info" %}
MCP UI artifacts are generated by MCP tools, not by direct user request. They appear automatically when an MCP tool returns a UI response.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.darcyiq.com/core-features/artifacts/interactive-apps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.