APIキー不要でAIに聞ける付箋メモアプリを作った|Puter.jsでGPT・Claudeを呼ぶ仕組み


「AIでちょっと調べながらメモ」は、付箋に質問を書いて「送信」するとAIが回答を返してくれる、登録不要・無料のメモアプリです。ホワイトボードに付箋を貼る感覚で使え、付箋ごとにAIチャットとふつうのメモを切り替えられます。Puter.jsを使っているのでAPIキーなしでGPTやClaudeに聞けて、自分の無料APIキーを入れれば回答の精度や速度を自分で調整することもできます。

調べ物をしているとき、ブラウザのタブとAIチャットとメモ帳を行き来して、せっかく聞いた答えがどこへ行ったか分からなくなる——そんな経験はないでしょうか。AIに質問するたびに別の画面へ移り、得た答えを手元のメモへ貼り直す手間は地味に積み重なります。調べることと、書き留めることが別々の場所にあるのが原因です。

この記事では、CodeQuestが公開しているAIでちょっと調べながらメモの使い方と、その裏側の仕組みを解説します。付箋の基本操作から、APIキーなしでAIが動くPuter.jsのしくみ、回答精度を上げるBYOK(自分のAPIキー)の考え方、データがブラウザだけに保存されるプライバシー設計まで、実際の操作と開発者目線の両方で紹介します。ブラウザだけで完結し、登録は不要です。


「AIでちょっと調べながらメモ」とは

AIでちょっと調べながらメモは、付箋に質問を書いて送信するとAIが答えを返し、その答えをそのまま付箋に残せる無料のメモアプリです。調べることとメモすることが1枚のボード上で完結するのが最大の特徴で、AIに聞いた内容がそのままメモとして手元に蓄積されていきます。

付箋ごとに「AI」と「メモ」を切り替えられるので、AIに質問する付箋と、ただ書き留めるだけのふつうの付箋を同じボードに混在させられます。たとえば左の付箋でAIに用語を聞きながら、右の付箋に自分の考えをまとめる、といった使い方ができます。内容はブラウザに自動保存され、運営のサーバーには送信されません。


このアプリでできること

機能はシンプルですが、「調べる」と「書く」を1か所にまとめるための要素がひととおり揃っています。

機能内容
付箋ボードホワイトボード上に付箋を自由に貼り、ドラッグで移動・サイズ変更・色分けして整理できる
AI⇄メモの切り替え付箋ごとに「AIに聞く付箋」と「ふつうのメモ」をトグルで切り替え(内容は両方とも保持)
マルチターン会話同じ付箋に続けて送信すれば、文脈を保ったままAIとの会話を続けられる
複数AIに対応キー不要のPuterと、自分のキーで使うGemini・Groq・Claudeを切り替え可能
画像・ファイルの添付送信欄の📎から画像やファイルを付箋に添付して表示(表示のみ・AIには送らない)
付箋を探す画面左端のタブから付箋一覧を開き、タイトルで検索して目的の付箋へジャンプ
自動保存変更はブラウザ(localStorage)に自動保存。サーバーへは送信しない

入力したメモ・会話・APIキーはすべてブラウザ内だけで扱われ、運営のサーバーには送られません。AIに質問する付箋だけがAIのAPIと通信し、ふつうのメモは完全にローカルで完結します。


基本の使い方

はじめての場合も、付箋を1枚出して質問を打つだけで使い始められます。手順は次のとおりです。

  1. 付箋を追加する: メニューの「+ 付箋を追加」を押すか、ボードの空いているところをダブルクリックすると新しい付箋が出ます。
  2. AIに聞く: 付箋にメッセージを入力して「送信」。回答が付箋に表示され、続けて送信すれば会話をそのまま続けられます。
  3. メモに切り替える: 付箋上部の「AI / メモ」トグルで、AIを使わないふつうのメモ帳としても使えます。AIの会話とメモの内容は別々に保持されます。
  4. 使うAIを選ぶ: 右上のメニューでAIを選びます。Puterはキー不要ですぐ使えます(初回だけ無料サインインが必要)。Gemini・Groq・Claudeは自分のAPIキーを入力して使います。
  5. 付箋を整える・探す: 左上の●で色変更、タイトルをダブルクリックで編集、ドラッグで移動、右下のつまみでサイズ変更、×で削除。左端の「›」タブから付箋を検索してジャンプできます。

APIキーなしでAIが使える仕組み|Puter.jsとは

Puter(プーター)は、ブラウザから無料でAI(GPT・Claude・Gemini系)を呼び出せるオープンソースのクラウドサービスです。通常、AIをWebアプリに組み込むには各社のAPIキーを取得し、サーバー側にキーを隠して中継する必要があります。Puterはこの仕組みを肩代わりしてくれるため、Puter.jsというスクリプトを1行読み込むだけで、APIキーの登録なしにAIを呼べます。

無料で動く理由は、Puterが採用している「User Pays(利用者が払う)」モデルにあります。AIの利用料を開発者側ではなく、アプリを使うエンドユーザーのPuterアカウント側が負担する設計のため、開発者はAPIコストを気にせずAIを組み込めます。だからこそ初回利用時に、無料のPuterサインインが求められます。Puterの詳細はPuter公式の開発者向けサイトで、ソースコードはGitHub(HeyPuter/puter)で公開されています。

実際の呼び出しは驚くほど短く書けます。HTMLでスクリプトを読み込み、puter.ai.chat()にメッセージを渡すだけです。

<!-- Puter.js を読み込む(これだけでAIが使える) -->
<script src="https://js.puter.com/v2/"></script>

<script>
  // APIキー不要。文字列を渡すだけで回答が返る
  const reply = await puter.ai.chat("日本の首都はどこ?");
  console.log(reply); // -> AIの回答テキスト
</script>

このアプリでは、回答を1文字ずつ表示するためにストリーミング({ stream: true })を使い、モデルを指定したいときは{ model: "claude-sonnet-4" }のようにオプションを足しています。会話履歴を配列で渡せばマルチターンの会話もそのまま扱えます。「APIキーなしでこんなに短くAIが動くのか」という体験そのものが、このアプリを作るきっかけになりました。


回答精度を上げたいときはBYOK(自分の無料APIキー)

Puterは手軽な反面、どのモデルがどのくらいの精度・速度で動くかをこちらで完全にはコントロールできません。もっと精度や速度を上げたいときは、BYOK(Bring Your Own Key=自分のAPIキーを持ち込む)に切り替えます。右上のメニューでGemini・Groq・Claudeを選び、自分で取得したAPIキーを入力すると、各社のAPIを直接呼び出すようになります。

BYOKにすると、使うモデルを自分で選べるため回答の質を狙って上げられ、Puterの共有枠に左右されずレスポンスも安定しやすくなります。Google Gemini(Google AI Studio)とGroqはどちらも無料枠から始められ、特にGroqは推論が非常に高速なのが特徴です。AIをWebアプリに組み込むときのAPIの選び方は ローカルLLM vs クラウドAPIの実装判断ガイド でも整理しているので、合わせて参考にしてください。

BYOKの呼び出しは、各社のAPIに直接fetchするだけです。たとえばOpenAI互換のGroqなら、メッセージ配列をそのまま投げられます。

// 自分で取得したAPIキーで、各社のAPIを直接呼ぶ(OpenAI互換のGroqの例)
const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${apiKey}`, // キーはブラウザ内にのみ保存
  },
  body: JSON.stringify({
    model: "llama-3.3-70b-versatile",
    messages, // [{ role: "user", content: "..." }] の会話履歴
  }),
});
const data = await res.json();
const text = data.choices[0].message.content;

入力したAPIキーはブラウザ内(localStorage)にのみ保存され、送信先は各AI提供元のAPIだけです。運営や第三者には送られませんが、共有パソコンで有料キーを入力するのは避けてください。


対応AIプロバイダと使い分け(Puter vs BYOK)

このアプリが対応しているAIプロバイダと、無料キーの入手先は次のとおりです。まずはキー不要のPuterで試し、物足りなければBYOKに移るのがおすすめです。

プロバイダAPIキー主なモデルキーの入手先
Puter不要GPT・Claude・Gemini系から自動/手動選択不要(初回に無料サインイン)
Google Gemini必要(無料枠あり)gemini-2.5-flash ほかGoogle AI Studio
Groq必要(無料枠あり)llama-3.3-70b ほか(高速)Groq Console
Claude(Anthropic)必要claude-sonnet-4 ほかAnthropic Console
観点Puter(キー不要)BYOK(自分のキー)
始めやすさサインインだけですぐ使えるキーの取得・入力がひと手間
モデルの選択用意された範囲で自動/手動自分で好きなモデルを指定できる
精度・速度の調整共有枠まかせモデル選択で自分で調整できる
向いている人とにかくすぐ試したい人回答の質や速度にこだわりたい人

データはすべてブラウザに保存される

メモ・AIとの会話・APIキーは、すべてお使いのブラウザ内(localStorage)にのみ保存され、運営のサーバーには送信されません。ログイン不要で使えるのは、データをサーバーに持たない設計だからです。AIに質問したときだけ、その本文が選んだAIのAPIへ送られます。

この設計には裏返しの注意点もあります。データは保存したブラウザの中だけにあるため、別の端末や別のブラウザには引き継がれず、ブラウザの履歴やサイトデータを消すとメモも消えます。大事な内容は別途コピーして残す、共有パソコンでは有料APIキーを入力しない、といった使い方を心がけてください。なお、付箋に添付した画像やファイルは表示のためだけのもので、AIには送られません。


こんな場面で便利

「調べる」と「書く」が地続きになるアプリなので、軽い調査をしながら手を動かす場面と相性がいいです。

  • 調べ物のメモ: 知らない用語やエラーメッセージをAIに聞き、要点を同じ付箋に残してそのまま自分のメモにする
  • アイデア整理: 思いついたことを付箋にどんどん貼り、行き詰まったらAIに壁打ち相手になってもらう
  • 文章の下書き: 構成や言い回しをAIに相談しながら、別の付箋で下書きを書き進める
  • コード片のメモ: AIに書いてもらったスニペットや、あとで使いそうなコマンドを付箋にストックする

AIが出力したコードをさらに改造・合成したいときは、動くコードをAIに渡してカスタムするやり方 の考え方が役立ちます。ゼロから言葉で生成させるより、土台のコードを渡して差分だけ指示するほうが、ねらいどおりの結果になりやすくなります。


うまく動かないとき(スマホでAIが止まるとき)

キー不要のPuterは初回に無料のサインインが必要で、スマホ(特にSafari)ではサインインのポップアップがブロックされ、AIの返事が生成中のまま止まることがあります。これはアプリの不具合ではなく、ブラウザがポップアップを抑制しているのが原因です。

止まってしまったときは、次のどちらかで解決できます。ひとつは、ブラウザのポップアップを許可してPuterにサインインする方法。もうひとつは、右上のメニューでGoogle Gemini(無料APIキー)など別のAIに切り替える方法です。Geminiは無料枠から始められ、ポップアップのサインインが不要なので、スマホでも安定して動きます。Puterはサインインさえ済めば、その後は無料で使い続けられます。


AI連携で回答精度をさらに上げる

このアプリは「AIに聞いてメモする」ところまでを担いますが、AIとAPIの連携を作り込めば、回答の精度はさらに上げられます。たとえば、付箋の内容を踏まえた専用のシステムプロンプトを持たせる、用途別にモデルを自動で切り替える、検索結果や社内ドキュメントを参照させてから答えさせる(RAG)といった拡張です。

AIをWebサイトやアプリに組み込む具体的な使いどころは WebサイトへのLLM導入事例 にまとめています。チャットボット・検索・要約・振り分け・翻訳など、目的に合わせてモデルとAPIを選べば、「ちょっと調べる」だけでなく、業務に踏み込んだ精度の高いAI活用へと広げていけます。


よくある質問

Q. 無料で使えますか?

はい、完全無料で登録も不要です。キー不要のPuterを選べば、初回のサインインだけでそのまますぐに使えます。

Q. メモやAIとの会話はどこに保存されますか?

お使いのブラウザ内(localStorage)にのみ保存され、運営のサーバーには送信されません。別の端末・別ブラウザには引き継がれず、ブラウザの履歴やデータを消すと内容も消えます。共有パソコンでの利用はご注意ください。

Q. Puterとは何ですか?

ブラウザから無料でAI(GPT・Claude・Gemini系)を使える、外部のオープンソースサービスです。利用料はPuter側が負担する仕組みのため、このアプリではAPIキーなしでAIを呼べます。初回だけ無料のサインインが必要です。

Q. APIキー(Gemini・Groq・Claude)は安全ですか?

入力したキーはあなたのブラウザ内にのみ保存され、送信先は各AI提供元のAPIだけです。運営や第三者には送られません。ただし共有パソコンでは、有料キーを入力しないようにしてください。

Q. スマホでAIの返事が途中で止まります。

キー不要のPuterは初回に無料サインインが必要で、スマホ(特にSafari)ではサインインのポップアップがブロックされて止まることがあります。ポップアップを許可してサインインするか、上のメニューでGoogle Gemini(無料APIキー)など別のAIに切り替えてください。

Q. 普通のメモアプリとしても使えますか?

はい。付箋ごとに「AI」と「メモ」を切り替えられます。AIに聞かず、ただのメモ帳としても使えますし、両方の内容は別々に保持されます。


まとめ

  • AIでちょっと調べながらメモは、付箋に質問を書いて送信するとAIが答え、その答えをそのままメモに残せる無料アプリ。調べる・書くが1枚のボードで完結する
  • Puter.jsを使うことでAPIキーなしでGPT・Claude・Gemini系を呼べる。無料で動くのは利用料を利用者側が負担する仕組みだから
  • 精度や速度にこだわるなら、Gemini・Groq・Claudeの自分のキーを使うBYOKに切り替えられる(GeminiとGroqは無料枠あり)
  • メモ・会話・APIキーはブラウザ内(localStorage)にのみ保存。サーバーには送らない代わりに、端末間では引き継がれない
  • スマホでAIが止まるときは、ポップアップを許可するか、別のAI(自分の無料キー)に切り替える

まずはキー不要のPuterで、気になることを付箋に書いて送信するところから試してみてください。「調べながら書く」が同じ場所でつながる感覚を、ぜひ体験してみてください。


関連記事

AI時代のWeb制作完全ガイド|AIを使う×AIに見つけてもらう【2026年版】

ローカルLLM vs クラウドAPI|5基準で選ぶ実装判断ガイド

Claude Codeでブログ見出しデザインツールを作ってみた|プロンプト公開