<generate-html> Demo

Usage Example

<!-- Include the web component -->
    <script type="module"> import '@paulkinlan/generate-html';</script>

<!-- Use the component -->
<generate-html
  prompt="Create a simple calculator"
  api-key="your-api-key-here"
  model="gemini-2.5-flash"
  provider="gemini"
  type="html"
  sizing="content"
  debug>
</generate-html>

API Key (Gemini):

Provider: Model:

Type: Sizing:

Debug Mode

Prompt:

💡 Using Template Context

The <template> element inside the <generate-html> component provides structural context to the LLM.

Try these prompts to see how the template influences the output:

"Create a card layout with an image"
"Make a product card with pricing"
"Build a user profile card"

The LLM will use the template structure as a reference while following your prompt.

<generate-html> Demo

Usage Example

Card Title

💡 Using Template Context