Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

widget -> prompt #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+14 −14
Open

widget -> prompt #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
# Webdraw Library Widgets
# Webdraw Library prompts

The **Webdraw Library** allows developers to create and manage custom widgets by defining them in standalone HTML files. This guide provides instructions and best practices for adding widgets to the library.
The **Webdraw Library** allows developers to create and manage custom prompts by defining them in standalone HTML files. This guide provides instructions and best practices for adding prompts to the library.

## Adding a Widget
## Adding a prompt

### 1. Create an HTML File
Each widget is defined as a single HTML file. Name the file descriptively based on the widget's purpose (e.g., `my_custom_widget.html`).
Each prompt is defined as a single HTML file. Name the file descriptively based on the prompt's purpose (e.g., `my_custom_prompt.html`).

### 2. Define the Metadata
Add metadata tags to the `<head>` section of your HTML file. These tags define the widget's properties and functionality.
Add metadata tags to the `<head>` section of your HTML file. These tags define the prompt's properties and functionality.

#### Example Widget File
#### Example prompt File
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Custom Widget</title>
<title>My Custom prompt</title>

<!-- Short description of the widget -->
<meta name="description" content="This custom widget adds * capabilities to your application.">
<!-- Short description of the prompt -->
<meta name="description" content="This custom prompt adds * capabilities to your application.">

<!-- SVG icon for the widget -->
<!-- SVG icon for the prompt -->
<meta name="icon" content="<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 28 28' fill='none'><path fill='#ED225D' stroke-miterlimit='10' d='M16.909,10.259l8.533-2.576l1.676,5.156l-8.498,2.899l5.275,7.48 l-4.447,3.225l-5.553-7.348L8.487,26.25l-4.318-3.289l5.275-7.223L0.88,12.647l1.678-5.16l8.598,2.771V1.364h5.754V10.259z'></path></svg>">

<!-- URL for examples or documentation -->
<meta name="examples" content="https://example.com/documentation/widget-usage">
<meta name="examples" content="https://example.com/documentation/prompt-usage">

<!-- Custom instructions for the AI -->
<meta name="metadata" content="Set of custom instructions that will be added to the prompt to influence the result of the generated output.">
Expand All @@ -40,9 +40,9 @@ Add metadata tags to the `<head>` section of your HTML file. These tags define t

| **Tag Name** | **Description** |
|---------------------|--------------------------------------------------------------------------------------------|
| `description` | Short description of the widget's functionality. |
| `icon` | SVG icon that represents the widget. When embedded in the `content` attribute, all attributes inside the SVG must use single quotes (`'`). |
| `examples` | URL pointing to usage examples, documentation, or a demo of the widget. |
| `description` | Short description of the prompt's functionality. |
| `icon` | SVG icon that represents the prompt. When embedded in the `content` attribute, all attributes inside the SVG must use single quotes (`'`). |
| `examples` | URL pointing to usage examples, documentation, or a demo of the prompt. |
| `metadata` | Set of custom instructions that will be added to the prompt to influence the result of the generated output. |


Expand Down