This project uses a Large Language Model to create JSON objects that can then be used to build web pages.
- Allow none technical users to create web content using natural language
- Web pages dynamically built from JSON objects that describe page components and content
- Supports a set of well known components e.g. Cards, Carousel or Accordions
- Allow editing or modification of JSON objects
The JSON model generated by the LLM is designed to be stored in a data repository and later used for dynamic web page rendering. It includes all the necessary information to render a page, with a primary section array element containing arrays of component objects.
The following is an example of user interactions that will display a web page with main content and two sections. The first will display a Carousel of images the second accordions with frequently asked questions
As expert on Colorado state parks, create an article of no more that 500 words with a paragraph for each of the parks
'Mesa Verde', 'Great Sand Dunes' and the 'Rocky Mountain National Park' with the title 'Colorful Colorado State parks'.
Style your response using Markdown
Create a section with a Carousel, the title of the Carousel is "Image gallery of Colorado State Parks". Add a Card with
the image url "/images/mesa-verde.jpg". Add an Card with the image url "/images/great-sand-dunes.jpg". Add an Card with
the image url "/images/garden.jpg"
Create a new section with the heading "Frequently asked questions". As an expert on Colorado state parks generate three common
questions and answers for visitors to the Mesa Verde state park. Use these to create Accordions with the question in the
accordion 'heading' and the answer in accordion content' Add a CTA with the label "click me!" and the href "http://123.com"
The following screenshot show's a sidebar for user inputs display of recent input messages send to the LLM together with the generated web page.
Install
npm install
Obtain on OpenAi API key and export its value
export OPENAI_API_KEY=my=key
Start the applicaltion
npm run start