BotDojoDocs
Search BotDojo Docs
Search every guide

Try “stop a run,” “connect an app,” or “daily briefing.”

Browse Workspace
WorkspaceCreate, Share, and ExtendBuild MCP Apps
Workspace · Create, Share, and Extend

Build MCP Apps

Ask the workspace agent to create an HTML app, connect it to permitted tools, validate every state, and prepare it for sharing.

3 min readLast reviewed July 27, 2026

#Build the HTML file with the agent

Use HTML source mode to inspect or edit the app file that remains in the workspace.
Screenshot previewUse HTML source mode to inspect or edit the app file that remains in the workspace.
Workspace HTML file open in source mode for direct inspection and editing
  1. 01

    Describe the job

    Name the viewer, decisions the app should support, required data, and any actions it may take.

  2. 02

    Name the connections

    Tell the agent which available connection tools the app may call.

  3. 03

    Create the file

    Ask the agent to build a self-contained HTML file in Workspace Files.

  4. 04

    Inspect HTML source

    Open HTML source and review labels, actions, data limits, and error handling.

  5. 05

    Open Preview

    Interact with the app in the workspace and refine it with the agent.

#Static report or MCP App

Preview the workspace HTML file and interact with its visible controls before creating an artifact.
Screenshot previewPreview the workspace HTML file and interact with its visible controls before creating an artifact.
Northstar Logistics workspace HTML app rendered in Preview mode with sample sales data
TypeHow it gets data
Static interactive HTML reportUses data already gathered and saved into the HTML. It does not call tools after opening.
MCP AppCalls permitted connection tools at runtime to load current information or perform an action.

#Validate loading, success, empty, and error states

Validate success, loading, empty, and error behavior before sharing an app with other people.
Screenshot previewValidate success, loading, empty, and error behavior before sharing an app with other people.
Workspace HTML app showing its explicit Error demonstration state in Preview mode
  • Loading clearly shows that the app is waiting for a tool result.
  • Success shows useful data with source and freshness context.
  • Empty explains that the call succeeded but returned nothing relevant.
  • Error explains what failed and gives the viewer a safe next action.
  • Live, sample, and cached data are labeled accurately.
  • Queries and result sets are bounded so the interface stays responsive.

#Protect actions with permissions and confirmation

The app uses the current viewer’s connections and effective permissions. Require a clear confirmation before a control sends, creates, updates, deletes, or otherwise changes external data. Handle a denied or unavailable tool as a normal app state.

A workspace-level tool setting overrides the personal default only inside that workspace.
Screenshot previewA workspace-level tool setting overrides the personal default only inside that workspace.
Workspace connection Tool Settings dialog with Deny Ask and Allow permission controls

#Prepare the app for sharing

After the workspace preview is correct, ask the agent to create an artifact from the exact HTML file. Then use Artifacts in the main navigation to find the new artifact, open its preview, and follow the authenticated sharing walkthrough.

Open an app artifact to review the copied result without returning to the editable workspace file.
Screenshot previewOpen an app artifact to review the copied result without returning to the editable workspace file.
Northstar Logistics HTML app opened as a BotDojo artifact in light mode
  1. 01

    Ask the agent to create it

    Name the HTML workspace file and the artifact name, and ask the agent to keep it private until you review it.

  2. 02

    Find it in Artifacts

    Choose Artifacts in the main navigation and open the result from the library.

  3. 03

    Review the artifact preview

    Confirm the copied app is the version you approved in the workspace.

  4. 04

    Share and verify

    Choose an authenticated account share and test the link as the intended signed-in viewer.

Open Artifacts → Sharing MCP AppsFollow the illustrated artifact creation, discovery, preview, and authenticated sharing walkthrough.ArtifactsBuild, update, view, and share reviewed copies of workspace files, including authenticated Model Context Protocol (MCP) Apps.Agent PacksCreate Agent Packs that bring BotDojo connections, indexes, Skills, and Workspace context into Claude and other Model Context Protocol (MCP) clients, and add new capabilities to packs people already use.