While large language models are increasing in their breadth of utility — with new models emerging, support for plugins, and agent-based behaviour through chaining — their responses are still limited largely to text. How sad!
LangView is an open-source GUI layer for large language models, that uses a set of conventions allowing models to respond in YAML which can then be interpreted as live GUI components.
LangView ships with a default set of simple & flexible components, which can be extended upon to suit any specific domain.
- Platform & language agnostic: LangView is designed to work with any GUI implementation of its components. The model only needs to know a YAML schema of the components it has to work with, and the rest can be implemented by the component library.
- Model agnostic: As long as a model can follow the structured format of LangView's spec, it can output GUIs.
- Extendable: Components can easily be extended and passed to LangView, to broaden & customise a model's graphical vocabulary.
- Controllable: While it's possible for language models to write code describing an arbitrary interface, LangView aims to offer a set of constraints so designers can control the space of allowed interfaces.
Components are defined in an implementation-agnostic YAML specification files in /components, and then can be implemented for any architecture.
Specification format is as follows:
name: ... # Component name
description: ... # Natural language description of the component, for the model to determine its behaviour
properties:
my-property: ... # Natural langauge description of each property you'd like the model to be able to set for this component (type & behaviour)Currently, the only implemnentation is for the web, with a minimal set of components:
- HStack / VStack
- Card
- Map
- Select
This is an experimental, demo-stage project to explore how generative UI might be standardized. You'll likely find the model requires experimentation with prompting & component descriptions to get desired results. Please file an issue or pull request if you'd like to work on making this more robust, or exploring a production use case.
View the demo video on Twitter.
To run the demo, add a .env file in /demo with your Google Maps API key:
VITE_GOOGLE_MAPS_API_KEY="your_google_maps_api_key_here"
Then run npm run build in the /demo folder, enter your OpenAI API key in the webpage that opens, and test out a request.