PluginBench
Rule

graphical apps development

via PatrickJS/awesome-cursorrules

Build graphical LLM applications by chaining reusable Elements with typed Ports and Payloads.

What is graphical apps development?

Pyllments is a Python framework for constructing graphical and API-based LLM applications through composable Elements connected via Ports. Use this rule when building modular, interactive UI components for LLM workflows where extensibility and clean interfaces are priorities.

  • Structure applications as Elements (Components with Model and Views) connected through typed input/output Ports
  • Use Payload objects to pass typed data between Elements following an observer pattern
  • Build UI layers with Panel for visualization and Param for parameterized, reactive classes
  • Organize elements with clear file structure separating logic (Model), UI (Views), and styling (CSS)
  • Leverage Langchain integration for LLM-specific workflows and operations
  • Write NumPy/SciPy-style docstrings for consistency and clarity

Applies to

File patterns this rule matches.

**/*
Rule definition (reference)

Source of truth, from the repository.

Project Synopsis

Pyllments is a Python library for building graphical and API-based LLM applications through chaining together Elements in a potentially cyclic graph. Elements and Payloads are a type of Components. A Component is composed of a Model and Views. The Model handles the underlying data and logic, while the Views are the UI components that are used to display display the interactive UI used to interact with the Model.

An Element is a type of Component that is responsible for a specific function. For instance, an Element can handle the LLM selection and generation by making calls to LLM providers. Another Element may handle the chat interface, whose Model would store the chat message history, and the Views would be the text boxes and buttons used to interact with the chat interface. Elements are meant to connect to other Elements through Ports. All that is necessary to link Elements together is to link the output port of one Element to the input port of Another. Each output port may have unlimited input ports it connects to, and each input port may have unlimited output ports it connects to. The ports follow an observer pattern where the output port is the subject and the input port is the observer. The subject notifies the observers when a certain event that we set within the Element is triggered.

In order to connect an input and and output port, they need to be setup in a manner that sends and receives the same type of Payload. A Payload is also a Component with a Model as well as views responsible for the display logic. Elements may receive payloads and use methods of the Payload to generate the views for the UI. The sending Element is responsible for packing data into the Payload.

I am currently working on making this a fully-fledged framework.

Project Organization

Here is an example of the file structure of an individual element:

chat_interface:

  • init.py
  • chat_interface_element.py
  • chat_interface_model.py
  • css:
    • buttons.css
    • column.css
    • input.css

Primary Libraries Used

  • Panel is used to create the visualization layer and run the GUI. Views tend to consist of Panel objects which can be styled with Python and CSS.
  • Param is used to create parameterized classes which help create parameters that handle type validation, default values, constraints, and most importantly, reactivity(setting event handlers to catch changes).
  • Langchain is responsible for the specific functions pertaining to incorporating LLM workflows.

Development Priorities

Pyllments code is prioritized on being developer-friendly, where extensibility and modularity are first-class citizens. Elements should be customizeable with clean and intuitive interfaces. It should also be easy to create new elements depending on the needs of the developer.

Documentation

Docstrings should use a NumPy/SciPy style.

Related rules

HarmonyOS ArkTS component structure, state management, layout, and accessibility patterns.

["**/*.ets" +4
41k
via PatrickJS/awesome-cursorrules

Access real-time news, bias analysis, market data, and options pricing via Helium MCP in Cursor.

**/*
41k
via PatrickJS/awesome-cursorrules

TypeScript development rules for Hashgraph Online AI agents on Hedera using RegistryBrokerClient.

**/*
41k
via PatrickJS/awesome-cursorrules

Create clear, step-by-step how-to documentation for non-technical users.

**/*
41k
via PatrickJS/awesome-cursorrules

Expert HTML, Tailwind CSS, and vanilla JavaScript code generation with modern best practices.

**/*
41k
via PatrickJS/awesome-cursorrules

HTMX development setup with best practices and folder structure guidance.

**/*
41k
via PatrickJS/awesome-cursorrules