Zenn
👨‍✈️

CopilotKitとLlama3を使用して、自動補完機能付きブログ作成ツールを作る

2024/04/22に公開
Next.js
LangChain
Ollama
Llama 3
copilotkit
tech

概要

この記事では、タイトルと文章を入力すると、AIがタイトルの内容に基づいて自動的に文章を補完してくれるツールの作り方を紹介します。

例えば、「アメリカと日本の違い」というタイトルを入力すると、AIがその内容に沿った文章を提案してくれます。

全てのコードは以下のgithubにあります。
https://github.com/atwill1028/trycopilotkit

使い方

1.タイトルと文章を入力欄に入力します。

2.文章を入力すると、AIが補完候補を表示します。

3.Tabボタンを押すと、選択した補完候補が文章に挿入されます。

使用する技術

このツールを作るために使用する主な技術は以下の通りです。

CopilotKit

AIを自分のプロダクトに簡単に組み込むことができるツールキット。
今回使用するのは、<CopilotTextarea />。
普通のtextareaを**<CopilotTextarea />**に変更することで、テキスト入力時にAIによる自動保管ができる。
https://www.copilotkit.ai/
https://github.com/CopilotKit/CopilotKit

Llama3

Metaが開発したLlamaファミリーの次世代大規模言語モデルの最新版。
https://llama.meta.com/llama3/

Ollama

今回、Llama3はOllama経由で使用する。
Ollamaを使用することで大規模言語モデルをローカルで動かすことができる。
https://ollama.com/

LangChainとは

LangChain は、大規模言語モデル (LLM) に基づいてアプリケーションを構築するためのオープンソースフレームワーク。

CopilotKitのAI部分は現在OpenAIまたはLangChainのみサポートしているので、今回はLangChainを用いる。LangChain経由でOllamaを呼び出すことになる。
https://www.langchain.com/

必要な準備

Ollamaをインストールし、Llama3をセットアップします。

  • 以下のURLからOllamaをインストール
    https://ollama.com/download

  • ターミナルで以下を実行して、Llama3をインストール、しばし待つ。

ollama run llama3

Next

  • Nextの新しいプロジェクトを作成します。
pnpm create next-app
  • 必要なパッケージ（CopilotKit、LangChain、Ollamaなど）をインストールします。
pnpm add @copilotkit/react-core @copilotkit/react-textarea  @copilotkit/backend @langchain/community

実装

フロントエンド

  • page.tsxでCopilotKitを使ってツールの全体的な構造を作ります。
  • Article.tsxでタイトルと文章の入力欄を作成し、CopilotTextareaを使って自動補完機能を実装します。
src/app/page.tsx
"use client";

import { CopilotKit } from "@copilotkit/react-core";
import { Article } from "./components/Article";

export default function Home() {
  return (
    <>
      // 自分が設定したファイル構成
      <CopilotKit url="/api/copilotkit">
        <Article />
      </CopilotKit>
    </>
  );
}
src/app/components/Article.tsx
import { Input } from "@/components/ui/input";
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { useState } from "react";

export function Article() {
  const [title, setTitle] = useState("");
  const [text, setText] = useState("");

  return (
    <div className="px-8 py-8">
      <Input
        className="mb-8"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Please write title"
      />
      <CopilotTextarea
        className="px-4 py-4 text-lg border-2 h-48 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 transition-colors"
        value={text}
        onValueChange={(value: string) => setText(value)}
        placeholder="Please write content"
        autosuggestionsConfig={{
          // タイトルの内容に基づいて文章が補完されるように設定
          textareaPurpose: `research a blog article topic on ${title}`,
          chatApiConfigs: {
            suggestionsApiConfig: {
              forwardedParams: {
                max_tokens: 20,
                stop: ["\n", ".", ",", "?", "!"],
              },
            },
          },
          debounceTime: 250,
        }}
      />
    </div>
  );
}

バックエンド

  • route.tsでローカルで起動しているOllamaのLlama3を使用するように設定します。
  • LangChainを使ってOllama経由でLlama3を呼び出します。
src/app/api/copilotkit/route.ts
import {
  CopilotBackend,
  LangChainAdapter,
} from "@copilotkit/backend";
import { ChatOllama } from "@langchain/community/chat_models/ollama";
export const runtime = "edge";

export async function POST(req: Request): Promise<Response> {
  const copilotKit = new CopilotBackend();

  return copilotKit.response(
    req,
    new LangChainAdapter(async (forwardedProps) => {
      // Ollama経由でLlama3を使用
      const model = new ChatOllama({
        baseUrl: "http://localhost:11434",
        model: "llama3",
      });
      return model.stream(forwardedProps.messages, {
        tools: forwardedProps.tools,
      });
    })
  );
}

検証
ターミナルでpnpm run devを実行し、http://localhost:3000/にアクセスすることで、ツールが正常に動作するかを確認できます。

以上が、自動補完機能付きブログ作成ツールの作り方の概要です。このツールを使えば、AIの力を借りて効率的にブログを書くことができるでしょう。

Discussion