機能追加

機能追加 - 引用

AI Chat 機能追加

AI Chat 機能を追加します。以下プロンプトを参考に実装して見てください。

プロンプト サンプル

AI Chat 機能を追加します。以下の要件を満たすように実装してください。

- Azure OpenAI API を使用して、AI Chat 機能を実装します。
- ユーザーが質問を入力すると、AI Chat が回答を返します。
- 履歴を保存し、過去の質問に対する回答を再利用します。

Function Calling 機能追加

Function Calling 機能を追加します。以下プロンプトを参考に実装して見てください。

プロンプト サンプル

Step 1: Azure OpenAIのFunction Callingの理解

- Azure OpenAIサービスのFunction Callingの実装方法に関するドキュメントを調べる。
- Azure OpenAIサービスとVue.js v3を使用したFunction Callingの例やチュートリアルを調べる。

Step 2: サンプル実装の作成

- OpenAIに現在の時刻をリクエストするFunction Callingを実装する。
- Function Callingをアプリケーションに統合するためのVue.js v3フレームワークを使ったサンプルコードを作成する。
- Function Callingのレスポンスをアプリケーションで適切に処理し、ユーザーに現在の時刻を表示する。
- 作成したコードがOpenAIから現在の時刻をリクエストして返すことを確認するためにテストする。

ヒント & テクニック

copilot-instructions.md に以下サンプルコードを追加することで、Function Calling 機能を実装する際に Copilot の提案がより的確になります。

サンプルコード 
3. **以下は Azure Open AI の実装サンプルコード**
  ~~~javascript
  import axios from 'axios';
    export default {
    data() {
      return {
        userInput: '',
        chatHistory: [],
        functionCall: {
          name: "get_current_time",
          description: "現在の時刻を取得します",
          parameters: {
            type: "object",
            properties: {}
          }
        }
      };
    },
    methods: {
      async sendMessage() {
        if (this.userInput.trim() === '') return;

        const userMessage = {
          sender: 'user',
          text: this.userInput
        };
        this.chatHistory.push(userMessage);

        try {
          const response = await this.callAzureOpenAIFunction(this.userInput);

          console.log('AI response:', response); // レスポンスをログ出力

          for (const choice of response.choices) {
            console.log('choice.finish_reason:', choice.finish_reason); // レスポンスをログ出力
            if (choice.finish_reason === "function_call") {
              const functionName = choice.message.function_call.name;
              console.log('functionName:', functionName); // レスポンスをログ出力
              if (functionName === "get_current_time") {
                const result = this.get_current_time();
                const aiMessage = {
                  sender: "ai",
                  text: result.current_time
                };
                this.chatHistory.push(aiMessage);
              }
            } else {
              const aiMessage = {
                sender: 'ai',
                text: response.choices[0].message.content
              };
              this.chatHistory.push(aiMessage);
            }
          }
          this.saveChatHistory();
        } catch (error) {
          console.error('Error fetching AI response:', error);
          const errorMessage = {
            sender: 'system',
            text: 'Error fetching AI response'
          };
          this.chatHistory.push(errorMessage);
        } finally {
          this.userInput = '';
        }
      },
      async callAzureOpenAIFunction(userInput) {
        const apiKey = 'your-api-key';
        const endpoint = 'https://your-ai-url.openai.azure.com';
        const deploymentId = 'your-deploymend-name';
        const api-version = '';

        try {
          const response = await axios.post(
            `${endpoint}/openai/deployments/${deploymentId}/chat/completions?api-version=${api-version}`,
            {
              messages: [
                { role: 'user', content: userInput }
              ],
              max_tokens: 150,
              functions: [
                {
                  name: "get_current_time",
                  description: "現在の時刻を取得します",
                  parameters: {}
                }
              ]
            },
            {
              headers: {
                'Content-Type': 'application/json',
                'api-key': apiKey
              }
            }
          );

          return response.data;
        } catch (error) {
          console.error('Error in callAzureOpenAIFunction:', error);
          const errorMessage = {
            sender: 'system',
            text: 'Error fetching AI response'
          };
          this.chatHistory.push(errorMessage);
        }
      },
      get_current_time() {
        const current = new Date();
        return { current_time: current.toLocaleTimeString() };
      },
      saveChatHistory() {
        localStorage.setItem('chatHistory', JSON.stringify(this.chatHistory));
      },
      loadChatHistory() {
        const savedHistory = localStorage.getItem('chatHistory');
        if (savedHistory) {
          this.chatHistory = JSON.parse(savedHistory);
        }
      },
      clearChatHistory() {
        localStorage.removeItem('chatHistory');
        this.chatHistory = [];
      }
    },
    created() {
      this.loadChatHistory();
    }
  ~~~

作業手順

GitHub Copilot Coding Agent 基本操作 を参照に、以下の手順で GitHub Copilot Coding Agent を使用して、作業を進めます。

AI Chat 機能追加

  1. Issue の作成
    • タスク毎に Issue を作成しても良いですし、1 つの Issue に複数のタスクをまとめて作成することも可能です。
    • 以下は、タスクを纏めて 1 つの Issue に作成する場合のサンプルです。
      • Title: AI Chat 機能追加
      • Description: プロンプト サンプルの内容を全て転記
  2. GitHub Copilot Coding Agent にアサインする
  3. Pull request をレビューする
  4. Pull request をマージする
  5. Delete branch(Option)

Function Calling 機能追加

  1. Issue の作成
    • タスク毎に Issue を作成しても良いですし、1 つの Issue に複数のタスクをまとめて作成することも可能です。
    • 以下は、タスクを纏めて 1 つの Issue に作成する場合のサンプルです。
      • Title: Function Calling 機能追加
      • Description: プロンプト サンプルの内容を全て転記
  2. GitHub Copilot Coding Agent にアサインする
  3. Pull request をレビューする
  4. Pull request をマージする
  5. Delete branch(Option)