| name | precision-bio-ui |
| description | Expert guide for developing the Precision Medicine Streamlit dashboard and LLM providers. Covers provider abstraction, trace visualization, and UI components.
|
Precision Bio-UI Development
This skill guides the development of the frontend and LLM orchestration layer of the platform.
🖼️ Dashboard Architecture
The UI is built with Streamlit and follows a modular provider-based architecture:
ui/streamlit-app/app.py: Main entry point.ui/streamlit-app/providers/: Abstracted LLM orchestration (Claude, Gemini).ui/streamlit-app/utils/: Visualization, GCS handling, and trace logic.
🤖 Provider Development
When adding or modifying LLM providers:
- Base Class: Extend
providers/base.py.
- Streaming: Implement
generate_response_stream for a better user experience.
- Trace Extraction: Use
trace_utils.py to ensure tool calls are correctly recorded for the orchestration trace.
📊 Visualization & Traces
- Orchestration Trace: Supports Log, Card, Timeline, and Sequence Diagram (Mermaid) views.
- Bio-Data Rendering: Use Streamlit's
st.dataframe for large genomic tables and st.image for GCS-hosted UMAPs/PCA plots.
- Complexity: Keep the sidebar clean—use
st.expander for advanced settings.
⚙️ Configuration
- Ensure all new features are togglable via
.env or the sidebar (e.g., USE_MOCK_MCP).
- Example prompts are maintained in
utils/mcp_config.py.
Use this skill when:
- Adding a new LLM provider (e.g., DeepSeek, Llama).
- Modifying the orchestration trace visualization.
- Adding new file upload handlers or GCS widgets.
