はじめに

今回は特定の会社の企業概要を元に、一問一答で回答を表示してくれるサイトを個人的に作ってみました 🤖
(企業ページの右下とかにありそうなやつ)

できたもの

↑画像をクリックでお試しできます(リンク)

[1/2] できたもの紹介

[2/2] できたもの紹介

回答の挙動を予めある程度指定することができます ✨️

参考にしたサイト

そもそもどういうことができるのか・運営会社についてざっくりわかる↓

文字数上限など技術的な詳細がわかる↓

[1/2] 事前に準備しておくべきもの

Google アカウント

アカウント登録に必要
※SSOやメールアドレス・パスワードによる登録は今のところできなさそうなのでどの Google アカウントを使うかは要注意

まとまった文章(企業概要とか)

今回は勝手に概要の文章をコピーしても怒られなさそうな会社の企業概要を拝借

[2/2] 事前に準備しておくべきもの

Prompt

Prompt と言うと画像生成AIとかの呪文のようなものを（個人的には）イメージしがちですが、今回は AI が不特定多数のユーザに何か回答する前に予め吹き込んでおける文章だと思って使ってみると良いかもしれません。

Prompt 例

【前提知識】
{まとまった文章}

【貴方の役割】
貴方はこの会社の案内人です。前提知識を元に質問に回答してください。
前提知識上にない情報については「恐れ入りますが存じ上げないので "{会社のメールアドレス}" へお問い合わせをお願いいたします。」と回答してください。
例: 質問「法人番号は？」　回答「1234567890123 です。」
例: 質問「猫を飼育してますか？」　回答「恐れ入りますが存じ上げないので "{会社のメールアドレス}" へお問い合わせをお願いいたします。」

役割/やるべきこと
ルール（例: 敬語、〇〇は禁止）
質問と回答の例
このあたりを Prompt として示しておくと良いらしい (少なくとも一問一答の形式なら)

[補足] 事前に準備しておくべきもの

これまで紹介した「まとまった文章」や「Prompt」についてはメモ帳などに控えておくことを推奨します
- ※まだβ版だからかサービス上で↑を保存できたと思ったら消えてたりするので
[逆に準備しなくても良いもの] アカウント登録して設定画面を開くと OpenAI API Key の入力欄があるが何も入れなくても（今のところ）動く

[1/8] サインアップ

サインアップ URL: https://mdown.ai/signup

真ん中のボタンを押し Google アカウントを用いてアカウントを作成

[2/8] 編集ページを開き Create Model 🤖

編集ページ URL: https://mdown.ai/file

Create Model を押すことで今回新規に作成する AI の設定画面(名前・3大LLMサービスのどのモデルを使うか・どう受け答えしてもらうか等)が開きます。

[3/8] AI について設定する

以下の3ステップで AI について設定します。

[4/8] 作成した AI を呼び出すためのページを Markdown で作成

再び編集ページへ戻りましょう↓
編集ページ URL: https://mdown.ai/file

表示された入力欄に何かしら入力してください (例↓)
⚠️ 後で内容を一般公開するステップがあります。

# 一問一答で受け答えするAIだよ

[5/8] `Insert` を押し `Script` を選ぶ

モーダルが表示されるので今回は Script を選んでください。

[6/8] 3で作成したAIを選び `Insert` を押す

以下の2ステップで操作してください。
Insert を押したあとはモーダルが消え 4 で入力したテキストの末尾に自動で input button script タグなどの AI と会話するために必要なコードが入力されます(凄い！) 🥳🥳🥳

[7/8] `Save` してプレビュー

①〜②の順に押すと…

プレビューが表示されます 🎉
※ Save しなくてもプレビューそのものは可

[8/8] 公開 🎉

以下の①〜②の順に押すことで完了です 👏👏👏
最後に作成いただいた一般公開された AI の専用ページの URL が表示されるのでそれをコピーしブラウザで確認してみてください！

※ あとはお好みでスタイルを整えたりしてみてください 🎨

おまけ (既存サイトに埋め込んでみる)

<template>
  <!-- 中略 -->
        <v-btn @click="showMarkdownAI = true" class="ma-2">
          <template #prepend>
            <fa-icon icon="robot" />
          </template>
          AI に質問
        </v-btn>
  <!-- 中略 -->
      <v-dialog v-model="showMarkdownAI" max-width="400" transition="slide-x-reverse-transition">
        <v-card>
          <v-toolbar dense flat>
            <v-btn icon :href="MARKDOWN_AI_PAGE_URL">
              <fa-icon icon="fa-external-link" />
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn icon @click="showMarkdownAI = false">
              <fa-icon icon="close" />
            </v-btn>
          </v-toolbar>

          <p class="text-caption py-2"><a href="https://mdown.ai/">Markdown AI β</a> を使っています。</p>
          <hr />

          <iframe :src="MARKDOWN_AI_PAGE_URL" width="100%" height="300" frameborder="0" allowfullscreen></iframe>
        </v-card>
      </v-dialog>
  <!-- 中略 -->
</template>

<script setup lang="ts">
const showMarkdownAI = ref(false);
const MARKDOWN_AI_PAGE_URL = 'https://mdown.ai/content/{uuid}';
</script>

<style module lang="scss">
iframe {
  height: 600px;
}
</style>

おまけ (既存サイトに埋め込んでみた)

iframe で埋め込むことができました🎉
(※いまいち法人向けの利用規約やプランがあるかわからなかったので今回は手元で個人的なお試しのみ)

余談

サービスへログインする際に一瞬表示される firebase のサブドメイン名のネーミングが良い (旧運営会社の社名とMark"down"を掛け合わせ?) (↔ markup language)

さいごに

今回はじめて Markdown AI を使ってみて多少手間取ったとはいえ（Knowledge に何か記入するとエラーになることなど）少ない手順でこのようなものを作れて楽しかったです🙌
まだβ版ですが今回のカレンダーやその他イベントの実施など力を入れているようで今後の発展にとても期待ができそうです✨️
子どもや大人向けの教材（研修）としてもちょうど良いのではないかと感じました👍️
ここまで、ご高覧ありがとうございました！