Build your IDX app

6.1 One feature, one loop

Three tips for every feature:

• Start a New Chat for each feature. A long chat gets crowded and Copilot starts to forget early details.
• Attach the file with #app.py in every plan prompt, so Copilot sees the latest version.
• The implement prompt is always the same: “Build exactly the plan above. Change only app.py.” Then click Keep, Rerun, and test.

6.2 Core: a price chart

Plan.Do it in a New Chat in Ask mode, send:

#app.py #sectors.py I want to add a price chart under the company info.

Frontend: a line chart of the daily closing price for the last 30 days, with dates along the bottom and price in rupiah up the side, and a small heading, “Closing price, last 30 days”.

Data: use get_daily_prices from sectors.py for the ticker in the text box.

Keep the calculator as it is. Tell me the plan in three to five steps. Don’t write code yet.

Implement. Switch to Agent: Build exactly the plan above. Change only app.py. Click Keep.

Test.

• A line chart with about 20 points: there is no trading at weekends
• The last point equals the last close shown above it
• TLKM redraws the chart; the calculator still works

Repeat. If something is off, describe what you see and what you expected, in a new plan prompt. For example: “The chart’s dates overlap and are hard to read. Show fewer dates along the bottom.”

6.3 Level Up: metric cards, date range and friendly errors

Run the full loop for each feature: plan in Ask with the prompt below, implement in Agent, then test.

Metric cards. Plan prompt:

#app.py I want to replace the plain company numbers with three metric cards in a row: Last close (Rp with dots), Daily change (as a percent with two decimals, from daily_close_change, which is a fraction), and Market cap (in trillions of rupiah, one decimal). Tell me the plan. Don’t write code yet.

Test: three cards side by side; check the maths: −0.0169 shows as −1.69%, and 602888959530000 as Rp 602.9 T.

Date range. Plan prompt:

#app.py I want to choose the chart’s date range. Add a start date and an end date in the sidebar, defaulting to the last 30 days, and use them for the daily prices. If the start is after the end, show a short warning instead. Sectors allows at most 90 days per request, so if I pick more, tell me and use the last 90 days. Tell me the plan. Don’t write code yet.

Test: two date pickers in the sidebar that change the chart; a warning for a reversed range and for more than 90 days. (Without the warning, Sectors would quietly send only the most recent 90 days.)

Friendly errors. Plan prompt:

#app.py I want every error to be friendly. If the ticker box is empty, ask me to type one. If the ticker doesn’t exist, say “We couldn’t find that ticker on IDX. Try BBCA or TLKM.” For any other problem, sectors.py raises a SectorsError with a plain message: show that message with st.warning. Never show red error text on the page. Tell me the plan. Don’t write code yet.

Test: try an empty box, the made-up ticker XXXX, and BBCA again. Each problem gives one plain sentence; BBCA still works.