ChartnautDocs

Build your first app

By the end of this tutorial you have a pre-market briefing of your own in Tools → Apps: one page with the overnight moves on the markets you trade and the positions you still hold, ready to open before the session.

An app is a page of its own. If you want something that appears on every trade or journal day instead, that is a view: see Add your first view.

Start the app

  1. Open Tools → Apps.

  2. Click New app. The page asks What should this app show?, with Suggested apps underneath.

  3. Type: Build me a pre-market briefing: how far BTC, ETH and EURUSD have moved overnight, yesterday's high and low for each, and any positions I still hold.

  4. Press Enter.

Screenshot to capture · 16:10 · build-your-first-app-new
The new app page with the briefing description typed
Route/morpheus/apps/new
FocusThe What should this app show? title, the composer with text, and the Suggested apps list
StateSigned in with credits available
Sourceclient/src/routes/authenticated/morpheus/canvases/NewCanvas.tsx:137 NewCanvas
The new app page with the pre-market briefing description typed in.

The app builder opens with your description sent to the agent. The chat is on the left. The preview on the right has four tabs: App, Code, Details and Logs.

You can start the same app from Agent too. Pre-market briefing is one of its suggestions.

Watch it build

  1. Follow the chat while the agent writes the app. Working shows above the preview until it finishes.

  2. Open the Code tab if you want to see the files it writes. You never have to touch them.

  3. When the agent stops, open the App tab. The briefing draws on real market data.

Screenshot to capture · 16:9 · build-your-first-app-builder
The app builder with the pre-market briefing in the App tab
Route/morpheus/apps/<canvasId>/edit
FocusThe whole builder: chat on the left, App tab with the briefing, App/Code/Details/Logs tabs, Run and Publish
StateThe briefing app built by the agent, first turn finished
Sourceclient/src/routes/authenticated/morpheus/canvases/builder/CanvasBuilderPage.tsx:203 CanvasBuilderShell
The app builder with the chat on the left and the briefing in the App tab.

Test it

  1. Pick one number and check it. Open Trading → Charts on BTC and compare the move from yesterday's close to the current price with what the app shows.

  2. Ask for what is missing or wrong in the chat, for example: Sort the moves by size and show each as a share of yesterday's range.

  3. Check the preview again once the agent finishes.

  4. If you change the code yourself in Code, press Run. Run draws the app from the code as it stands, unsaved edits included.

Repeat until the page shows what you want to read at 8am. The builder saves as you go, so there is no save button.

Publish it

  1. Press Publish. A dialog ticks off Compiling the app, Checking what it references and Storing the version.

  2. When it shows Published version 1, the dialog closes on its own.

Publishing stores a version of the app for you. It stays private: only you can see it until you change its visibility, covered in Community library.

Open it

  1. Open Tools → Apps.

  2. Click the briefing's row.

The briefing opens as its own page, with current data. Use Refresh in its header to redraw it, and Edit to go back to the builder when you want to change it. Each change reaches the page when you press Publish again.

Screenshot to capture · 16:10 · build-your-first-app-open
The published briefing open as its own page
Route/morpheus/apps/<slug>
FocusThe app page with its header (Refresh, Edit) and the briefing content
StateThe briefing published at least once
Sourceclient/src/routes/authenticated/morpheus/canvases/CanvasViewerPage.tsx:161 CanvasViewerPage
The published pre-market briefing open as its own page.

Build an app covers apps in more depth, and What views and apps can see and change explains what an app can read.