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/react @llm-ui/buttons

Quick start

Copy and paste this file into your project to get started.

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..."

Code 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']