Features

The buttons block allows LLMs to display buttons in the LLM output.

Buttons example
<buttons>
  <button>Button 1</button>
  <button>Button 2</button>
</buttons>

Buttons example
<buttons>
  <button>Button 1</button>
  <button>Button 2</button>
</buttons>

Installation

pnpm add @llm-ui/buttons

Quick start

Prompt

To let your language model know that it can reply with buttons, you can use the following prompt:

The UI your response is displayed in supports buttons. 
If you would like your response to include buttons please provide them in the following format:

<buttons>
  <button>Button 1</button>
  <button>Button 2</button>
</buttons>

You can import this prompt in code:

import { buttonPrompt } from "@llm-ui/buttons";

console.log(buttonPrompt);
// => "The UI your response is displayed in supports buttons..."

Buttons block functions

const buttonsBlock = {
  findPartialMatch: findPartialButtons(),
  findCompleteMatch: findCompleteButtons(),
  lookBack: buttonsLookBack(),
  component: () => <div>Buttons</div>,
};

findCompleteButtons

Finds a complete buttons block in a string.

findPartialButtons

Find a partial buttons block in a string.

buttonsLookBack

Look back function for the buttons block.

parseCompleteButtons

You can use the parseCompleteButtons to parse a buttons block. This is helpful for building a custom component for buttons.

parseCompleteButtons(
  "<buttons><button>Button 1</button><button>Button 2</button></buttons>",
);

// => ['Button 1', 'Button 2']