AI Prompt Input
介绍
自动增高的指令输入框，带模型切换、附件按钮和发送态。占位文字循环示意可做的事。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 AI Prompt Input 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add ai-prompt-input
mcp › 使用 8pt MCP 调用 get_component("ai-prompt-input")
代码
AI Prompt Input 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<form class="x-ai">
<textarea rows="1" aria-label="指令"></textarea>
<div class="x-ai__bar">
<button type="button" class="x-ai__icon" aria-label="添加附件">＋</button>
<div class="x-ai__model">
<button type="button" class="x-ai__pill">Claude <b>▾</b></button>
<ul class="x-ai__menu" role="listbox">
<li>Claude</li><li>GPT</li><li>DeepSeek</li><li>Kimi</li><li>Qwen</li><li>豆包</li>
</ul>
</div>
<button type="submit" class="x-ai__send" aria-label="发送" disabled>↑</button>
</div>
….x-ai{width:min(440px,100%);padding:14px 14px 10px;border-radius:18px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.1));box-shadow:0 20px 50px -30px rgba(0,0,0,.6);transition:border-color .25s}
.x-ai:focus-within{border-color:color-mix(in srgb,var(--d-accent,#4D74FF) 60%,transparent)}
.x-ai textarea{width:100%;min-height:44px;max-height:140px;resize:none;border:0;outline:0;background:transparent;color:var(--d-fg,#fff);font:15px/1.5 var(--d-font,system-ui,sans-serif)}
.x-ai textarea::placeholder{color:var(--d-muted,#8a8a95)}
.x-ai__bar{display:flex;align-items:center;gap:8px;margin-top:6px}
.x-ai__icon,.x-ai__pill{height:30px;border-radius:999px;border:1px solid var(--d-line,rgba(255,255,255,.1));background:transparent;color:var(--d-muted,#a0a0ab);font:500 13px/1 var(--d-font,system-ui,sans-serif);cursor:pointer}
.x-ai__icon{width:30px}
.x-ai__pill{padding:0 12px}
.x-ai__pill b{font-size:10px;margin-left:4px}
.x-ai__model{position:relative}
.x-ai__menu{position:absolute;left:0;bottom:38px;z-index:5;min-width:140px;margin:0;padding:6px;list-style:none;border-radius:12px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.12));box-shadow:0 18px 40px -16px rgba(0,0,0,.6);opacity:0;transform:translateY(6px) scale(.98);transform-origin:bottom left;pointer-events:none;transition:opacity .18s,transform .18s}
.x-ai__model.open .x-ai__menu{opacity:1;transform:none;pointer-events:auto}
…const init = (root) => {
const f = root.querySelector('.x-ai'), ta = f.querySelector('textarea'), send = f.querySelector('.x-ai__send');
const model = f.querySelector('.x-ai__model'), pill = f.querySelector('.x-ai__pill');
const hints = ['做一个带年付切换的定价区', '把这个表单改成 8pt 间距', '生成一张数据看板卡片'];
let hi = 0, ci = 0, timer;
const type = () => {
const s = hints[hi]; ta.placeholder = s.slice(0, ++ci);
timer = setTimeout(ci < s.length ? type : () => { ci = 0; hi = (hi + 1) % hints.length; type(); }, ci < s.length ? 70 : 1800);
};
type();
ta.addEventListener('input', () => { ta.style.height = 'auto'; ta.style.height = ta.scrollHeight + 'px'; send.disabled = !ta.value.trim(); });
pill.addEventListener('click', () => model.classList.toggle('open'));
…订阅 Builder 查看完整源码。查看价格