Skip to content

dqhieuu/pg-explore

Repository files navigation

pg-explore logo

pgExplore

Web-based PostgreSQL data explorer with AI, workflow builder, integration, ... and more are being added! (Under active development)

Demo screenshot

I just built a local-first toolbox for my data analysis needs, and made it runnable locally on the browser with a PGlite backend! Some cool features:

  • Create your Postgres database in seconds and perform your query directly in your browser (thanks to PGLite)
  • Drag and Drop your CSV, JSON files into the app and instantly have them as database tables.
  • Pasting Excel data into the app's table editor also works, too!
  • With the tables you created, chat with the AI to create a query for your needs, for example, "Get PnL of each location, grouped by month.", then execute that query with one click!
  • You can also provide your own AI by setting the custom endpoint!
  • Your SQL queries and imported table data are managed as app files, and you can create an execution workflow with those files.
  • Some DDL languages such as DBML are also supported.
  • Postgres extensions are supported.
  • You can manage multiple databases at once!

This web app is still unfinished (usable but expect bugs) and under active development. In the future, I will make it able to:

  • Visualize current database tables.
  • Create embed URLs like Codepen, Codesandbox to be able to preview SQL snippets.
  • Export database dumps and files.
  • Visualize query result as charts?

Just ask for a feature, and you will have me implement it if it's useful enough and in high demand.


Try it out at pg-explore.vercel.app. It will cache the data in your browser (PWA), and then you can use it offline the next time you visit the site. Or host it locally in the section below!

You can keep me motivated just by using this site or starring this repo. Motivation powers open-source development, as always! Feature requests & bug reports are also highly appreciated!


Development

(Optional) You can set up the env for the default AI integration (OpenAI compatible API). Or just configure it later in the app settings (per browser config).

VITE_AI_API_KEY=<YOUR_API_KEY>
VITE_AI_BASE_URL=https://generativelanguage.googleapis.com/v1beta/openai
VITE_AI_MODEL=gemini-2.0-flash

To start the site

pnpm i
pnpm dev

Build distribution

npx tsc -b && pnpm build

TODO backlog :D

Suggest any ideas, report bugs - it helps!

Currently doing

  • Create Postgres databases
    • Non-persistent (for embeddable iframes in the future)
    • Persistent (IndexedDB)
  • Reorderable layout (implement with Dockview)
  • File browser sidebar
    • File interaction
      • Create/Rename/Delete file
  • SQL query (tab #1)
    • Run
      • Run selected
      • Run hotkey
    • Parse
      • Inject pg_dump schema
    • Lint (kinda ass rn)
  • Query result as table (tab #2 / subtab #1)
    • Infinite scroll with virtualization
    • Filter
  • Workflow builder and step runner (implement with React Flow) (tab #3)
    • Base nodes and groups
    • Begin-to-end evaluation
    • Replay n-1 steps before error
  • AI chat (tab #4)
    • Inject pg_dump schema
    • Chat feature
  • Settings popup
    • Dark mode
    • Enable SQL linter
    • Use custom AI endpoint
    • Debug mode & reset everything
  • More databases popup
    • Rename/Delete database
    • See disk usage
  • Postgres extensions
    • Enable/disable extensions per database
  • DBML schema (tab #5)
    • Parse + autocompletion (with Lezer grammar)
    • Lint
  • Table data editor (tab #6) (with Handsontable (it's so good for Excel-like capability but not free) / open-source alt in the future?)
    • Import CSV
    • Import JSON
    • Data type config
      • Data type
      • Unique/null/Autoincrement
    • Auto detect column type
    • Dark mode

Will do next

  • AI node in workflow builder
  • Tables & relationship visualization
    • Table
      • Name
      • Datatype
      • Modifiers
    • Relationship
    • Auto-layout

In consideration

  • Export embeddable iframes
  • View query result as charts
  • Import/Export workflow and files
  • Import/Export database dump
  • REPL console (supporting \d commands, pg_dump,...)
  • Populate random data workflow step (implement with Faker.js?)
  • More AI (actually, I'm not too hyped for this)
    • Copilot/Cursor-like suggestion
    • Inline suggestion
  • Proper unit, E2E, performance tests (pardon my overconfidence in code -_-)

About

In-browser PostgreSQL with data explore capabilities and a modern UI. Runs completely offline.

Topics

Resources

License

Stars

Watchers

Forks

Languages