MarkdownAIで記事の紹介文生成アプリを作ってみた

概要

これはMarkdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAI Advent Calendar 2024の24日目の記事です。

URLを入れると記事の紹介文を生成してくれるアプリを作ってみました。

アプリはこちら

具体的なコード

<div style="
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
">
  <div style="display: inline-block;">
    <input 
      class="input" 
      type="text" 
      id="text-1735033881" 
      style="
        width: 300px;
        padding: 8px 12px;
        border: 2px solid #333;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.2s ease;
        outline: none;
        margin-right: 8px;
      "
      value="URL"
    >
    <button 
      class="button is-info" 
      type="button" 
      id="button-1735033881"
      style="
        background-color: #333;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
      "
      onmouseover="this.style.backgroundColor='#555'"
      onmouseout="this.style.backgroundColor='#333'"
    >紹介文を作る</button>
  </div>
  <div 
    id="answer-1735033881"
    style="
      margin-top: 16px;
      font-family: system-ui, -apple-system, sans-serif;
    "
  ></div>
</div>

<script>
(() => {
  const button = document.getElementById('button-1735033881');
  button.addEventListener('click', async event => {
    button.classList.add('is-loading');
    button.disabled = true;
    
    const serverAi = new ServerAI();
    const message = document.getElementById('text-1735033881').value;
    const answer = await serverAi.getAnswerText('hwxqUCQfhBPuy6J3jDneJ1', '', message);
    
    document.getElementById('answer-1735033881').innerText = answer;
    button.classList.remove('is-loading');
    button.disabled = false;
  });
})();
</script>

プロンプト

入力されたURLのなかを確認して内容を要約して、SNSでほかのユーザーへ紹介するために具体的で簡潔で読みたくなるような文章を100文字以内で書いてください。