> ## 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.

# Building AI App

> Complete your first AI app in 3 minutes.

## Building Your First Morph App

As your first AI app using Morph, we will create a chat app using Langchain.

<Warning>
  If the Morph CLI setup is not complete, please refer to the [Installation Documentation](/docs/ja/getting-started/installation) to install the CLI.
</Warning>

<Note>
  This tutorial requires an OpenAI API key. To obtain an API key, please visit the [OpenAI website](https://platform.openai.com/).
</Note>

<Steps>
  <Step title="Initialize the Project">
    Run the following command in the terminal to create a new project.

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

  <Step title="Install Packages">
    To use Langchain, run the following command to install the package.

    <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="Create chat.py">
    Create a `chat.py` file in the `src/python` directory.

    ```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="Edit index.mdx">
    Edit `index.mdx` to use the Python function created earlier.

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

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

  <Step title="Add API key to .env">
    Add your OpenAI API key to the `.env` file.

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

  <Step title="Start the Local Server">
    Run the following command in the terminal to start the development server.

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

    Access `localhost:8080` to open the app.
  </Step>
</Steps>

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

Here is all the code needed to build a simple chat app. That's it!

<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>