カスタムフロントエンドで AI エージェントを作成する

Squid を使うと、Squid AI を利用してユニークなユーザー体験を作成できます。手順に沿って、イカについての質問に答える AI エージェントを作成しましょう！

作成するもの

React フロントエンドアプリケーション上で動作し、独自の knowledge base（ナレッジベース）を持つカスタム AI エージェント

環境セットアップ

In the Squid Console, switch to the dev environment.

switch environment

Download the ai-tutorial-squid-facts code sample using the following command. Replace the placeholders with the values from your Squid application as shown in the console.

npx @squidcloud/cli init-sample ai-tutorial-squid-facts --template ai-tutorial-squid-facts --appId YOUR_SQUID_APP_ID --apiKey YOUR_SQUID_API_KEY --environmentId dev --squidDeveloperId YOUR_SQUID_DEVELOPER_ID --region YOUR_REGION

TIP

You can find your environment variables under: 'Application' -> 'Show env vars' as seen below:

switch environment

Open the project in the IDE of your choice.
Start the app locally by running the following command in the project folder:

npm run start

To view the app, navigate to localhost:PORT, where PORT is logged in the terminal. The address will likely be http://localhost:5173.

Squid AI Agent を追加する

Squid Console で、Agent Studio タブを選択します。
Create New Agent をクリックしてエージェントを追加します。次の詳細を入力して Create をクリックします。

Agent ID: squid-facts
Description: This is an agent for Squid AI's fact sharing tutorial

AI エージェントの Overview ページには、LLM Model、Instructions、Abilities の 3 つのセクションがあります。

LLM Model: エージェントを動かす基盤となる AI モデルです。デフォルトの GPT-4o モデルを使用するか、別のものを選択できます。
Instructions: AI エージェントがどのように応答し、質問に答えるかのルールセットです。トーンや目的に関するものにできます。squid-facts エージェントの instructions を次の内容に編集します。
```
You're a friendly AI who shares random facts about squids and answers user questions about squids.
Important: Only answer based on the provided context.
```
Abilities: 質問に答えるときにエージェントが利用する情報やツールです。Abilities について詳しくは documentation を参照してください。

エージェントのナレッジベースにイカの事実を追加するには、Wikipedia のイカの記事に移動し、ページを HTML または PDF ファイルとして保存します。次に、コンソールで Add Abilities をクリックします。Knowledge Base の下にある File ability を選択し、そのファイルをアップロードします。この ability により、エージェントは質問に答える際に context（コンテキスト）を利用できます。

Note

LLM models はおそらくすでにこのイカ情報を知っています。実際のアプリケーションでは、あなたのユースケースに関連するコンテキストを提供します。

AI エージェントの Agent Settings タブに移動し、Set Agent to Public までスクロールします。この設定をオンにして、フロントエンドから誰でもエージェントにアクセスできるようにします。詳細は AI agent の保護に関する documentation を参照してください。
Context の横にある + をクリックして context を追加します。context 名を Squid Wikipedia にします。Context type を URL に変更し、次の URL を入力します。

これで AI エージェントを備えた Squid プロジェクトが用意できたので、アプリに機能を追加する準備ができました！

フロントエンドを設定する

The following steps add configuration parameters to connect the application to Squid.

Open a new terminal window and navigate to the project's frontend. You should now have two open terminal windows: one for the app's backend and one for the frontend.

cd frontend

Install the required dependencies:

npm install

Run the following command to create a .env.local file with the Squid environment configuration needed to initialize Squid:

npm run setup-env

フロントエンドをカスタマイズする

フロントエンドで components フォルダ内にある squid-facts-ai.tsx コンポーネントを開きます。このフォルダには、現時点ではかなり空のコンポーネントが入っています。

components/squid-facts-ai.tsx
function SquidFactsAI() {
  return <></>;
}

export default SquidFactsAI;

フロントエンドで AI エージェントを使用するために、次の import 文をファイルの先頭に追加します。

components/squid-facts-ai.tsx
import { useAiChat } from '@squidcloud/react';

SquidFactsAI() 関数内に、次の定数を追加します。これらは AI エージェントとの会話の state（状態）を管理するために使用します。

components/squid-facts-ai.tsx
const [question, setQuestion] = useState('');
const { history, chat, complete } = useAiChat('squid-facts');

変数 question と setQuestion は、ユーザーが質問する内容の state を管理する標準的な useState hook を使用しています。

useAiChat hook は AI エージェントをラップします。第 2 パラメータとして Agent ID を受け取り、chat、data、complete などの複数の結果を返します。
useAiChat について詳しくは、React SDK documentation を参照してください。

定数の後に次の関数を追加します。

components/squid-facts-ai.tsx
function askQuestion() {
  chat(question);
  setQuestion('');
}

function questionChanged(e: ChangeEvent) {
  setQuestion((e.target as HTMLInputElement).value);
}

function checkKey(ele: React.KeyboardEvent<HTMLDivElement>) {
  if (ele.key === 'Enter') {
    askQuestion();
  }
}

askQuestion 関数は Squid Client SDK の chat 関数を呼び出します。これは AI エージェントへの prompt を文字列として受け取ります。

questionChanged と checkKey 関数は、ユーザーが質問する際の UI 変化を処理します。

既存の return を次のコードに置き換えます。

components/squid-facts-ai.tsx
return (
  <>
    <div className="scrolling">
      <Messages messages={history} />
    </div>
    <div className="question">
      <TextField
        fullWidth
        id="outlined-basic"
        label="Enter your question"
        variant="outlined"
        onChange={questionChanged}
        onKeyDown={(event) => checkKey(event)}
        value={question}
      />
      <Button variant="contained" disabled={!complete} onClick={askQuestion}>
        Ask question
      </Button>
    </div>
  </>
);

このコードは chat history を Messages コンポーネントに渡し、ユーザーと AI エージェントの会話を表示します。また、ユーザーが質問を入力する input コンポーネントと、askQuestion 関数を呼び出すボタンも含まれています。

追加したものに関する import を追加します。import は次のようになります。

components/squid-facts-ai.tsx
import { useAiChat } from '@squidcloud/react';
import Messages from './messages.tsx';
import { Button, TextField } from '@mui/material';
import React, { ChangeEvent, useState } from 'react';

messages.tsx ファイルを開きます。ファイルの内容をすべて次のコードに置き換えます。このコードは chat messages の配列を反復処理して表示します。

components/messages.tsx
import { useEffect, useRef } from 'react';
import { ChatMessage } from '@squidcloud/react';

interface ChatHistoryProps {
  messages: ChatMessage[];
}

const Messages: React.FC<ChatHistoryProps> = ({ messages }) => {
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  return (
    <div>
      {messages.map(({ id, message, type }) => (
        <div key={id}>
          <span key={id}>
            {type}: {message}
          </span>
        </div>
      ))}
      <div ref={messagesEndRef} />
    </div>
  );
};

export default Messages;

コードを実行する

ルートのプロジェクトフォルダで、次のコマンドを実行してアプリを表示します。

npm run start

アプリを表示するには、ターミナルに表示される PORT を使って localhost:PORT に移動します。アドレスはおそらく http://localhost:5173 になります。

ページにイカの写真があるのはなぜかって？もちろん聞きませんよね。イカのアプリですから。

AI エージェントにイカについていくつか質問してみましょう。思いつかない場合は、次の例を参考にしてください。

イカには腕（arms）と触腕（tentacles）のどちらがありますか？
イカに遭遇したらどうすればいいですか？
イカについてあなたのお気に入りの豆知識は何ですか？
Onykia ingens について教えて。

お気に入りのイカの質問と回答を、Discord または X で Squid Squad に共有してください。

まとめ

おめでとうございます！ Squid AI アプリケーションを作成しました。ぜひ質問を続けて、この AI エージェントがイカについてどれだけ知っているか確かめてみてください！

次のステップ

公開（public）の Squid AI agents を作成する方法がわかったので、次にできることを紹介します。

ユースケースに合わせて新しいエージェントを追加する。例えば Squid AI は、ユーザーエンゲージメントの各パート（営業、サポート、プロダクトエキスパートなど）ごとに異なる persona をサポートできます。
Squid AI へのアクセスを制限する Squid security rule を実装する。
Squid Client SDK を通じてデータアクセス機能を有効にするために、Squid middle tier を使ってデータベースをフロントエンドに接続する。

Squid を使うと、Squid AI を利用してユニークなユーザー体験を作成できます。手順に沿って、イカについての質問に答える AI エージェントを作成しましょう！​

作成するもの​

環境セットアップ​

Squid AI Agent を追加する​

フロントエンドを設定する​

フロントエンドをカスタマイズする​

コードを実行する​

まとめ​

次のステップ​