Show HN: Pure JavaScript library to connect LLMs with input/textarea elements
1 week ago
4
Simple, framework-agnostic, HTML first JavaScript library for adding AI-powered text generation to input fields.
InputAI seamlessly integrates AI capabilities into your inputs with an elegant user interface that works with any LLM. Built with vanilla JavaScript, it provides a simple solution for enhancing your forms with AI assistance.
<inputtype="text"
name="subject"
data-input-ai-modal-title="Subject generator"
data-input-ai-prompt-placeholder="Ask AI to generate a subject..."
data-input-ai-system-instructions="
You are a cat and an expert in drafting professional email subjects. Generate and return the subject wrapped in <pre> tag for given prompt."
/>
Works with any Large Language Model API—OpenAI, Anthropic, or your own endpoint:
<textareaname="feedback"
data-input-ai-body='{ "system": "{{systemInstructions}}", "messages": "{{messages}}", "model": "gpt-4", "stream": true, "max_tokens": 100 }'
data-input-ai-system-instructions="You are a customer support assistant. Help in generating feedback for given points."
data-input-ai-user-message='{ "role": "user", "content": "{{user}}" }'
data-input-ai-assistant-message='{ "role": "assistant", "content": "{{assistant}}" }'
data-input-ai-response-expression="{{$join(completion.choices[0].message.content)}}"
></textarea>
It leverages the powerful JSONata transformer to generate and parse JSON, allowing flexibility with any LLM APIs.
InputAI is built with an HTML-first design philosophy, allowing full configuration through data attributes: without writing any JavaScript, no build tools, or external libraries required.
<meta name="input-ai-url" content="https://api.example.com/ai">
<meta name="input-ai-headers" content='{"X-CSRFToken": "{{csrfmiddlewaretoken.value}}"}'>
<input type="text" name="subject">
<textarea
name="content"
data-input-ai-modal-title="Email Drafter"
data-input-ai-system-instructions="
You are an expert in email drafting.
Given <subject>{{subject.value}}</subject>, write a professional email content based on given prompt.
"
data-input-ai-user-message='{ "role": "user", "content": "{{user}}" }'
data-input-ai-assistant-message='{ "role": "assistant", "content": "{{assistant}}" }'
></textarea>"><!-- meta tags for global defaults --><metaname="input-ai-url" content="https://api.example.com/ai"><metaname="input-ai-headers" content='{"X-CSRFToken": "{{csrfmiddlewaretoken.value}}"}'><!-- see API reference for all available meta tags --><inputtype="text" name="subject"><textareaname="content"
data-input-ai-modal-title="Email Drafter"
data-input-ai-system-instructions="
You are an expert in email drafting. Given <subject>{{subject.value}}</subject>, write a professional email content based on given prompt."
data-input-ai-user-message='{ "role": "user", "content": "{{user}}" }'
data-input-ai-assistant-message='{ "role": "assistant", "content": "{{assistant}}" }'
></textarea>
InputAI allows defining different AI personas for different inputs within the same form. Each input can have its own specialized AI assistant:
<form>
<input
type="text"
name="email_subject"
data-input-ai-modal-title="Subject Line Expert"
data-input-ai-prompt-placeholder="Ask AI to generate a subject..."
data-input-ai-system-instructions="You are an expert at writing catchy email subject lines.
Generate a subject line based on the given prompt."
>
<textarea
name="email_body"
data-input-ai-modal-title="Email Content Expert"
data-input-ai-prompt-placeholder="Ask AI to draft an email body..."
data-input-ai-system-instructions="You are an expert copywriter who drafts professional emails.
Include the subject in your considerations: <subject>{{email_subject.value}}</subject>."
></textarea>
</form>'><!-- A form with two specialized AI assistants --><form><!-- Email Subject Expert --><inputtype="text"
name="email_subject"
data-input-ai-modal-title="Subject Line Expert"
data-input-ai-prompt-placeholder="Ask AI to generate a subject..."
data-input-ai-system-instructions="You are an expert at writing catchy email subject lines. Generate a subject line based on the given prompt."
><!-- Email Body Expert --><textareaname="email_body"
data-input-ai-modal-title="Email Content Expert"
data-input-ai-prompt-placeholder="Ask AI to draft an email body..."
data-input-ai-system-instructions="You are an expert copywriter who drafts professional emails. Include the subject in your considerations: <subject>{{email_subject.value}}</subject>."
></textarea></form>
InputAI can consume and render SSE streams from your LLM by default, instantly displaying HTML formatted response as it arrives.
💡 To enable copy/insert buttons for specific content (i.e., outputs relevant to users), instruct the LLM to wrap the desired sections in <pre> tags.
const input = document.querySelector('input[name="email_regex"]');
inputAI(input, {
systemInstructions: `
You are an expert in regular expressions.
For validating emails, generate and return a regex pattern wrapped in <pre> tag
considering these validation points: {{email_format.value}}
`,
userMessage: { role: 'user', content: '{{user}}' },
assistantMessage: { role: 'assistant', content: '{{assistant}}' }
});
InputAI comes with a clean, minimalist design that can be easily customized to match your application's style. Simply override CSS variables in your stylesheet to change colors, fonts, and other visual properties:
:root {
--input-ai--primary-button-bg:#4a4a4a;
--input-ai--modal-content-bg:#2d2d2d;
--input-ai--prompt-bg:#2563eb;
// and more...
}
This will add inputAI and other helper functions to the global window object. You can use them in your JavaScript code for programmatic configuration.
npm install input-ai
# or
bun add input-ai
yarn add input-ai
pnpm add input-ai
Then import the library in your JavaScript:
import{inputAI}from'input-ai';
InputAI provides 3 configuration methods to make your input/textarea elements AI-ready:
JavaScript API: Programmatically initialize InputAI on specific elements along with its configuration.
Data Attributes: Use HTML data attributes to configure InputAI directly in your HTML markup.
Meta Tags: Set global defaults for all input elements using meta tags in your HTML.
Precedence: JavaScript API > Data Attributes > Meta Tags where the JavaScript configuration takes the highest priority overriding others.
For the list of all available configuration options, see the API Reference below.
import{inputAI,configureInputAI,destroyInputAI}from'input-ai';// Set global defaults for all elementsconfigureInputAI({api: {url: 'https://api.example.com/ai'}});// Initialize on an elementconsttextarea=document.querySelector('textarea[name="content"]');constai=inputAI(textarea,{api: {url: 'https://api.example.com/ai',headers: {'X-CSRFToken': '{{csrfmiddlewaretoken.value}}'}},systemInstructions: 'You are a helpful assistant.',userMessage: {role: 'user',content: '{{user}}'},assistantMessage: {role: 'assistant',content: '{{assistant}}'}});// Remove InputAI from an elementdestroyInputAI(textarea);
2. Data Attributes (HTML-First)
<textareaname="content"
data-input-ai-modal-title="AI Assistant"
data-input-ai-system-instructions="You are a helpful assistant."
></textarea>
The library auto-initializes on page load and applies the configuration to all input/textarea elements having data-input-ai-* attributes.
Form element values can be referenced using the {{name.value}} syntax when defining headers or body parameters, allowing dynamic injection of form data into API requests. For example:
.png)
1 week ago
4
![True Wireless Power is FINALLY here [video]](https://www.youtube.com/img/desktop/supported_browsers/edgium.png)
