Single-page UI for library discovery API

Daniel
Daniel Vigovszky • @vigoo
 9mo ago
golem-example-lib-db
main
Unlisted
There is an OpenAPI spec in @libdb-backend-api.yaml describing an API for discovering libraries for various topics for multiple programming languages. The idea is that you select a topic, and then initiate a discovery. The discovery will find libraries, and add them to the topic, and also create new topics related to these libraries. For each library, some detailed information is going to be available. The newly created topics can be also discovered to find more libraries, and so on, building a large graph of topics and libraries. I want to have a simple user interface on top of this API, single HTML file with embedded JS, with no dependencies or build steps. Expose all information and actions the API provides on this UI. Assume that the API is deployed to localhost:9006

Created a single-file HTML UI with embedded JavaScript that exposes all API functionality:

Features:

  • Libraries tab: Browse all libraries, search by name/language, view detailed information (description, repository, related topics)
  • Topics tab: Browse all topics, search, view libraries for each topic, trigger discovery
  • Discover tab: Search for a topic and initiate library discovery
  • Clean, modern interface with gradient styling and responsive design
  • No external dependencies or build steps
  • Auto-loads libraries on startup and reloads topics after discovery

Open /Users/vigoo/projects/golem/agent-examples-root/lib-db/index.html in your browser with the API running on localhost:9006.

Add a refresh button to both the Libraries and Topics page, so if new discoveries added new entities, we can easily refresh the list.

Done. Added refresh buttons (🔄) to both Libraries and Topics tabs that reload the lists from the API and clear any active searches.

When I open a topic in the topic list, and click on one particular library, I want it to jump to the Libraries page (refresh the list if needed), focus on that library and open its details
Edited index.html
+56
-1

Done. Now when you click on a library from the topics view, it will:

  1. Switch to the Libraries tab
  2. Reload the library list if needed
  3. Open the clicked library's details
  4. Smooth scroll to focus on that library