` that contains `"Allocation by industry"` and loops over `alloc.items()` - [ ] Replace the `

...` inside that section with `

` - [ ] At the bottom of the file, just before ``, add a ` ``` **What `{{ alloc|tojson }}` does:** Jinja serializes your Python dict to a JSON literal inline in the HTML. The browser reads it as a real JS object — no parsing on your end. > **Optional — get help from your agent:** > > ```text > In templates/index.html, replace the "Allocation by industry"

` above or below the donut with `

` - [ ] Add another ` ``` **Red-for-losses polish (optional):** ApexCharts lets you pass a function as `colors`: ```js colors: [ ({ value }) => (value >= 0 ? "#10b981" : "#f43f5e"), ], ``` > **Optional — get help from your agent:** > > ```text > Add a second ApexCharts bar chart under my donut chart, using the gains > list passed to the template. Categories are tickers, values are percent. > Use emerald for positive bars and rose for negative. Match my existing > card styling. > ``` --- ## Feature 2 — Stretch: "Ask your portfolio" chatbot > **Only start this if Feature 1 is shipped.** This is a real stretch goal — skip it if you're tight on time for Demo Day. The idea: a chat box at the bottom of the dashboard where you can type "What's my biggest concentration risk?" or "Which holding is dragging me down?" and an LLM answers using _your actual portfolio_ as context. Same pattern Makayla is using for Victor Paladin — see [makayla-c's April 21 guide](../makayla-c/makayla-c-2026-04-21.guide.md) Phase 3 for a worked example of OpenAI + Pydantic structured output. --- ### Phase 1: Set up `ai.py` > **Handwrite this yourself.** Small file, but this is where the LLM wiring lives. #### Objective Create `ai.py` with an OpenAI client and one function that takes a portfolio summary + a question and returns a structured answer. #### Instructions - [ ] Run `uv add openai pydantic` - [ ] Get your OpenAI API key and put it in a `.env` file at the project root: `OPENAI_API_KEY=sk-...` - [ ] Run `uv add python-dotenv` (so the key loads automatically) - [ ] Create `ai.py` at the project root with the code below - [ ] Run `uv run python ai.py` — it should print a short answer to the hardcoded test question #### Hints **`ai.py`:** ```python from dotenv import load_dotenv from openai import OpenAI from pydantic import BaseModel load_dotenv() client = OpenAI() class PortfolioAnswer(BaseModel): message: str tickers_mentioned: list[str] SYSTEM_PROMPT = """ You are a concise financial assistant looking at a user's stock portfolio. Answer in 1-3 sentences. Reference specific tickers or industries from the portfolio when relevant. Do NOT give personalized financial advice or buy/sell recommendations — describe what is in the data only. """.strip() def get_portfolio_answer(portfolio_summary: str, question: str) -> PortfolioAnswer: response = client.responses.parse( model="gpt-4o-mini", input=[ {"role": "system", "content": SYSTEM_PROMPT}, {"role": "user", "content": f"Portfolio:\n{portfolio_summary}\n\nQuestion: {question}"}, ], text_format=PortfolioAnswer, ) return response.output_parsed if __name__ == "__main__": summary = "AAPL: 10 shares, tech, up 12%\nXOM: 5 shares, energy, down 3%" answer = get_portfolio_answer(summary, "What's my biggest winner?") print(answer.message) print("Mentioned:", answer.tickers_mentioned) ``` **Why Pydantic?** `responses.parse(..., text_format=PortfolioAnswer)` forces the API to return an object that matches your schema. No JSON string wrangling. --- ### Phase 2: Add the `/ask` route + chat UI > **Agent-assisted OK on the HTML/JS.** The portfolio summary builder is the interesting part — handwrite that. #### Objective Add a `/ask` POST route that takes a question, builds a short text summary of the portfolio, calls `get_portfolio_answer`, and returns JSON. Add a small chat box on the dashboard that hits it. #### Instructions - [ ] In `portfolio.py`, add `summarize(portfolio)` — returns a short plain-text summary the LLM can read (one line per holding plus totals). Keep this with the other business logic. - [ ] In `app.py`, add `from portfolio import summarize` and `from ai import get_portfolio_answer` - [ ] Add a `/ask` route (POST, JSON in, JSON out) — see hint below - [ ] At the bottom of `templates/index.html`, add a chat form + `

` + a small ` ``` **Why floating?** Keeps your dashboard (charts + tables) as the main view, and the chat is one click away without pushing content down. The `fixed bottom-6 right-6 z-50` on the outer wrapper pins it to the bottom-right corner above everything else. > **Optional — get help from your agent** (after the route works with curl/Postman): > > ```text > Here's my /ask route and the floating chat widget in index.html. Keep > the fetch behavior and the fixed bottom-right positioning the same, > but improve the chat log styling — user messages right-aligned, > assistant messages left-aligned in bubbles, add a loading "…" while > waiting for the response. Don't change app.py or ai.py. > ``` --- ### Phase 3: Tune the system prompt > **Handwrite this yourself.** The prompt IS the product for this feature. #### Objective Iterate `SYSTEM_PROMPT` in `ai.py` until answers are useful for _your_ portfolio. #### Instructions - [ ] With the app running, try these 3 questions and read the answers: - "What's my biggest concentration risk?" - "Which sector am I lightest in?" - "Which holding gained the most and which lost the most?" - [ ] If answers are too vague, tighten the system prompt (ask for ticker + number in every answer, cap at 2 sentences, etc.) - [ ] If answers start giving advice ("you should buy more X"), add an explicit "do not recommend trades" line --- ## Checkpoint 3 Readiness By Friday May 1 at 3:30pm: - [ ] Allocation donut chart renders from real data - [ ] Gain/loss column chart renders from real data - [ ] `README.md` updated with a screenshot of the dashboard - [ ] _If you built the chatbot:_ `OPENAI_API_KEY` is loaded from `.env`, not hardcoded, and `.env` is in `.gitignore` (add a `.env.example` for reference) - [ ] Checkpoint 3 entry in `project.journal.md` - [ ] Committed and pushed ## Helpful Resources - [Checkpoint 3 Instructions](../../projects/final-project-checkpoint-3.project.md) - [Flowbite Charts docs](https://flowbite.com/docs/plugins/charts/#data-series) - [ApexCharts options reference](https://apexcharts.com/docs/options/) - [Jinja `|tojson` filter](https://jinja.palletsprojects.com/en/stable/templates/#jinja-filters.tojson) - [OpenAI Structured Outputs (Responses API + Pydantic)](https://platform.openai.com/docs/guides/structured-outputs) --- ## Backlinks The following sources link to this document: - [April 23 — Charts + chatbot stretch](/unit-3/project-paths/projects.path.llm.md) - [April 23 -- Charts + chatbot stretch](/unit-3/project-paths/nate-m/nate-m.path.llm.md) - [April 23 - Charts + chatbot stretch](/unit-3/projects/showcase/nate-m.project.llm.md)