> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# AIアプリの構築

> 3分ではじめてのAIアプリを完成させましょう。

## はじめてのMorphアプリを構築する

Morphを使った初めてのAIアプリとして、Langchainを使ったチャットアプリを作成します。

<Warning>
  Morph CLIのセットアップが完了していない場合は、[インストールのドキュメント](/docs/ja/getting-started/installation)を参照して、CLIをインストールしてください。
</Warning>

<Note>
  このチュートリアルでは、OpenAIのAPIキーが必要です。APIキーを取得するには、[OpenAIのサイト](https://platform.openai.com/)にアクセスしてください。
</Note>

<Steps>
  <Step title="プロジェクトの初期化">
    ターミナルで以下のコマンドを実行して、新しいプロジェクトを作成します。

    ```bash theme={"dark"}
    morph new chat-app
    ```
  </Step>

  <Step title="パッケージをインストールする">
    Langchainを使うために、以下のコマンドを実行してパッケージをインストールします。

    <CodeGroup>
      ```bash pip theme={"dark"}
      pip install langchain langchain-openai
      ```

      ```bash poetry theme={"dark"}
      poetry add langchain langchain-openai
      ```

      ```bash uv theme={"dark"}
      uv add langchain langchain-openai
      ```
    </CodeGroup>
  </Step>

  <Step title="chat.pyを作成する">
    `src/python` ディレクトリに `chat.py` ファイルを作成します。

    ```python src/python/chat.py theme={"dark"}
    import morph
    from morph import MorphGlobalContext
    from langchain_openai import ChatOpenAI
    from langchain_core.messages import HumanMessage

    @morph.func
    def langchain_chat(context: MorphGlobalContext):
        llm = ChatOpenAI(model="gpt-4o")
        messages = [HumanMessage(context.vars["prompt"])]
        for token in llm.stream(messages):
            yield token.content
    ```
  </Step>

  <Step title="index.mdxを編集する">
    先ほど作成したPython関数を使用するために、index.mdxを編集します。

    ```md src/pages/index.mdx theme={"dark"}
    # 🦜🔗 Langchain Chat

    <Chat postData="langchain_chat" height={300} />
    ```
  </Step>

  <Step title=".envにAPIキーを追加する">
    `.env` ファイルにOpenAIのAPIキーを追加します。

    ```env .env theme={"dark"}
    OPENAI_API_KEY=your_api_key
    ```
  </Step>

  <Step title="ローカルサーバーを起動する">
    ターミナルで以下のコマンドを実行して、開発サーバーを起動します。

    ```bash theme={"dark"}
    morph serve
    ```

    `localhost:8080` にアクセスして、アプリを開きます。
  </Step>
</Steps>

<Frame>
  <video controls className="w-full aspect-video" src="https://videos.ctfassets.net/9ncizv60xc5y/2iLVmcZEi4k42qycBRtKKi/1b8ec7ab402f0aaaaf6c07ab2cd37967/Tutorial_AI_App.mp4" />
</Frame>

シンプルなチャットアプリを構築するために必要なコードの全ては、以下の通りです。たったこれだけです！

<CodeGroup>
  ```python src/python/chat.py theme={"dark"}
  import morph
  from morph import MorphGlobalContext
  from langchain_openai import ChatOpenAI
  from langchain_core.messages import HumanMessage

  @morph.func
  def langchain_chat(context: MorphGlobalContext):
      llm = ChatOpenAI(model="gpt-4o")
      messages = [HumanMessage(context.vars["prompt"])]
      for token in llm.stream(messages):
          yield token.content
  ```

  ```md src/pages/index.mdx theme={"dark"}
  # 🦜🔗 Langchain Chat

  <Chat postData="langchain_chat" height={300} />
  ```

  ```env .env theme={"dark"}
  OPENAI_API_KEY=your_api_key
  ```
</CodeGroup>