# Apps Build custom dashboard pages powered by MCP UI artifacts with DarcyIQ's Apps feature. **Create interactive, widget-based app pages that surface real-time data, tools, and visualizations** directly in your DarcyIQ navigation — perfect for operational dashboards, monitoring panels, and custom tooling. {% hint style="success" %} **From MCP to Dashboard in Minutes**: Turn any MCP UI artifact into a live dashboard widget, arrange multiple widgets on a single page, and share the app with your team. {% endhint %} ## Overview Apps let you compose one or more MCP UI artifacts into dedicated pages that appear in your DarcyIQ sidebar, giving your team instant access to the tools and data they need. | Feature | Capability | Business Impact | | --------------------- | ----------------------------------------------- | --------------------------------------------- | | **Custom Pages** | Create dedicated app pages in your navigation | One-click access to key tools and data | | **Widget Dashboards** | Arrange multiple artifacts in a responsive grid | Unified view of related information | | **Flexible Layouts** | Full, Half, and Third-width widget sizing | Tailor the layout to your content | | **Drag-and-Drop** | Reorder widgets visually | Prioritize what matters most | | **Team Sharing** | Share apps with configurable permissions | Consistent dashboards across the organization | | **Enable / Disable** | Toggle app visibility without deleting | Control what appears in the navigation | ## Creating an App {% stepper %} {% step %} **Open Apps** Navigate to the **Apps** section from the sidebar, then click **Create App**. {% endstep %} {% step %} **Provide Details** Enter a name for your app, an optional description, and choose an icon from the built-in icon library. {% endstep %} {% step %} **Select Your First Widget** Choose an MCP UI artifact from your artifact library. This becomes the initial widget displayed on the app page. {% endstep %} {% step %} **Enable the App** Toggle the **Enable App** switch to make the app visible in the navigation menu. You can also leave it disabled while you build it out. {% endstep %} {% step %} **Save and Customize** After creating the app, expand it in the list to add more widgets, adjust layouts, and reorder content. {% endstep %} {% endstepper %} ## Dashboard Widgets Each app page is composed of one or more **widgets**, where each widget displays an MCP UI artifact. Widgets are arranged in a responsive 12-column grid. ### Adding Widgets 1. Find your app in the Apps list and click to expand it 2. Click **Add Widget** 3. Select an MCP UI artifact from the artifact library 4. The widget is added to the dashboard ### Widget Layout Options Each widget can be sized to fit your content needs: | Layout | Width | Best For | | --------- | ---------------- | -------------------------------------------------------- | | **Full** | 100% of the page | Primary dashboards, detailed views, large visualizations | | **Half** | 50% of the page | Side-by-side comparisons, medium-sized panels | | **Third** | 33% of the page | KPI cards, compact metrics, summary widgets | Hover over any widget to reveal layout controls and change its size. ### Reordering Widgets Drag and drop widgets to reorder them. Grab the drag handle that appears when you hover over a widget and move it to the desired position. ### Editing Widget Content Click the edit button on any widget to open it in a full-screen editor where you can modify the underlying artifact content. ### Removing Widgets Click the remove button on a widget to detach it from the app. The underlying artifact is not deleted and can be re-added later. ## Viewing an App When you open an app from the navigation: * **Single widget**: The artifact fills the full page height for an immersive experience * **Multiple widgets**: Widgets are displayed in a responsive grid layout, adapting to the sizes you configured ## Sharing & Permissions Share apps with team members to provide consistent dashboards across your organization. | Permission | Capabilities | | ---------- | -------------------------------------------------- | | **Owner** | Full control — edit, share, delete, manage widgets | | **Editor** | Modify the app and its widgets | | **Viewer** | View the app (read-only) | To share an app, click the **Share** button on any app you own and invite team members with the appropriate permission level. ## Managing Apps From the Apps list, you can manage all your apps: | Action | Description | | ------------------------ | -------------------------------------------------------- | | **Create** | Build a new app with a name, icon, and initial widget | | **Edit** | Update the app name, description, or icon | | **Enable / Disable** | Toggle whether the app appears in the sidebar navigation | | **Add / Remove Widgets** | Manage dashboard widgets from the expanded view | | **Share** | Invite team members and set permission levels | | **Open** | View the live app page in a new tab | | **Delete** | Permanently remove the app (cannot be undone) | ## Integration with Projects Apps can be linked to projects, allowing you to associate a dashboard directly with a customer engagement or initiative. Select an app when configuring a project to give team members quick access to the relevant dashboard. ## Building MCP UI Artifacts Apps are powered by MCP UI artifacts created in **MCP Studio**. To build new artifacts for your dashboards: 1. Navigate to **MCP Studio** from the Apps page or sidebar 2. Build or select an MCP that produces interactive UI artifacts 3. The artifacts become available in the artifact library when creating app widgets For more on building MCPs, see the [MCP Studio documentation](/integrations-and-configuration/mcp-studio.md). ## Best Practices ### App Design 1. **Clear Purpose**: Each app should serve a specific function — a sales dashboard, an ops panel, a monitoring view 2. **Widget Balance**: Mix full-width detail views with half and third-width summary cards 3. **Naming Conventions**: Use descriptive names so team members can find apps quickly 4. **Gradual Build-Out**: Start with one or two widgets and expand as you identify what the team needs ### Dashboard Organization | Practice | Implementation | Impact | | -------------------------- | ----------------------------------------------- | ------------------------------- | | **Group Related Widgets** | Place related metrics and tools on the same app | Faster decision-making | | **Use Layout Wisely** | Full-width for primary content, thirds for KPIs | Scannable at a glance | | **Enable Only When Ready** | Keep apps disabled while configuring | Clean navigation for the team | | **Review Permissions** | Periodically check who has access | Maintain security and relevance | {% hint style="info" %} **Pro Tip**: Start by creating MCP UI artifacts in MCP Studio, then compose them into an App for a polished dashboard experience your whole team can use. {% 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/workspace/apps.md?ask= ``` 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.