Skip to content

feat: Add vibe-plotter FastHTML app for showcasing plot-agent#7

Draft
andrewm4894 wants to merge 11 commits intomainfrom
feature/vibe-plotter
Draft

feat: Add vibe-plotter FastHTML app for showcasing plot-agent#7
andrewm4894 wants to merge 11 commits intomainfrom
feature/vibe-plotter

Conversation

@andrewm4894
Copy link
Copy Markdown
Owner

Summary

Adds a new FastHTML web app called vibe-plotter that showcases plot-agent as an agentic data visualization tool. Users can select datasets, describe visualizations in natural language, and download generated plots.

Plot-Agent Enhancements

  • Add load_from_url() method and from_url() classmethod for loading CSV data from URLs
  • Add export methods: export_html(), export_png(), export_json(), export_code()
  • Add httpx and kaleido dependencies

Vibe-Plotter App Features

  • UCI ML Dataset Picker: 10 popular datasets via ucimlrepo API
  • Custom URL Loading: Paste any CSV URL
  • Chat Interface: Natural language visualization requests with HTMX
  • Interactive Plotly Display: Real-time chart updates
  • Export Options: Download as HTML, PNG, JSON, or Python code
  • PostHog LLM Analytics: Full frontend + backend session linking
  • Render Deployment: Ready-to-deploy configuration

Tech Stack

  • FastHTML + Pico CSS (clean minimal UI)
  • Plotly for interactive visualizations
  • PostHog for analytics and LLM observability
  • Render for deployment

Test Plan

  • App starts successfully (python -m vibe_plotter.app)
  • UCI dataset loading works (tested with Iris)
  • Chat generates visualizations
  • Plot displays with title, summary, and interactive chart
  • All export formats work (HTML, PNG, JSON, code)
  • Health check endpoint responds

- Add URL loading methods to PlotAgent (load_from_url, from_url classmethod)
- Add export methods (export_html, export_png, export_json, export_code)
- Add httpx and kaleido dependencies for URL loading and PNG export

New vibe_plotter app features:
- UCI ML dataset picker with 10 popular datasets via ucimlrepo API
- Custom CSV URL loading support
- Natural language chat interface for visualization requests
- Interactive Plotly chart display with HTMX updates
- Export buttons for HTML, PNG, JSON, and code downloads
- Full PostHog LLM analytics with frontend/backend session linking
- Render deployment configuration

Tech stack: FastHTML, Pico CSS, Plotly, PostHog
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jan 25, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Render requires major.minor.patch format (e.g., 3.12.0) not just major.minor (3.11).
@andrewm4894 andrewm4894 temporarily deployed to feature/vibe-plotter - vibe-plotter January 25, 2026 21:04 — with Render Inactive
@andrewm4894 andrewm4894 temporarily deployed to feature/vibe-plotter - vibe-plotter January 25, 2026 21:04 — with Render Inactive
@andrewm4894 andrewm4894 temporarily deployed to feature/vibe-plotter - vibe-plotter January 25, 2026 21:30 — with Render Inactive
@andrewm4894 andrewm4894 temporarily deployed to feature/vibe-plotter - vibe-plotter January 25, 2026 21:32 — with Render Inactive
- Refactor app.py to use MonsterUI components (Card, NavBar, Grid, etc.)
- Use FastHTML's built-in session support for proper header injection
- Add Theme.blue styling with proper CSS
- Update requirements to use latest FastHTML and MonsterUI
- Update pyproject.toml to require Python 3.12+
- Add Makefile commands: app, app-dev, app-install
- Replace 2-column layout with single-column stacked panels
- Add collapsible Settings & Data Source panel with cog icon
- Add collapsible Data Preview panel (collapsed by default)
- Convert Chat to compact collapsible panel with single-row input
- Keep Visualization card at bottom
- Use MonsterUI Details/Summary for collapsible sections
- Add .playwright-mcp to gitignore
- Check for OPENROUTER_API_KEY and OPENROUTER_BASE_URL env vars
- Use OpenRouter when configured, fall back to OpenAI
- Update vibe_plotter config to support both providers
- Log which LLM provider is being used in debug mode

To use OpenRouter, set:
  OPENROUTER_API_KEY=your_key
  OPENROUTER_BASE_URL=https://openrouter.ai/api/v1 (optional, this is default)
  LLM_MODEL=anthropic/claude-3.5-sonnet (or any OpenRouter model)
- Pre-fill chat input with "plot this" when dataset is loaded
- Use HX-Redirect header to refresh page after loading dataset
- Enables quick visualization with just a button click

Sources:
- OpenRouter LangChain integration: https://openrouter.ai/docs/guides/community/langchain
- Always render #chat-messages div (hidden when empty)
- Remove 'hidden' class on first message via hx_on__after_request
- Fixes htmx:targetError when submitting chat with no history
- Add comprehensive README for vibe_plotter web app
- Update main README with Vibe Plotter section
- Document OpenRouter LLM provider support
- Update Python requirement to 3.12+
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant