Open AIの新しいResponses APIを使って、ウェブ検索を備えたカスタムチャットアプリを3分で作る

Open AIは先日、新しいResponses APIを発表しました。

Reponses APIは、従来のChat Completion APIとAssistant APIを統合し、さらに新しいツールユースとの統合を含んだAPIです。

最新の開発者向けドキュメントでは、新しいResponses APIに対応したコードサンプルをたくさん見ることができます。

本記事では、MorphフレームワークとResponses APIを使って、ウェブ検索を備えたカスタムチャットアプリを3分で作ってみます。全体のコード量も30行以下で実装することができました。

このサンプルでは、Python12とuvを使っています。

プロジェクトのセットアップ

まずはmorphコマンドをインストールします。

pip install morph-data

続いて、プロジェクトの初期化と依存パッケージのインストールを行います。

morph new responses-api
cd responses-api

uv add openai

バックエンドの構築

srcディレクトリ内に、 chat.py というファイルを作ります。コードはシンプルです。最新のOpenAI SDKでは、Responses APIに対応したクライアントが提供されます。

# src/chat.py

import morph
from morph import MorphGlobalContext
from openai import OpenAI

@morph.func
def chat(context: MorphGlobalContext):
  client = OpenAI()
  # Add custom prompt if needed
  stream = client.responses.create(
    model="gpt-4o",
    tools=[{"type": "web_search_preview"}], # Enable web search.
    input=context.vars["prompt"],
    stream=True
  )
  for event in stream:
    if (event.type == 'response.output_text.delta'):
      yield event.delta

フロントエンドの構築

Morphフレームワークでは、フロントエンドはマークダウンで構築します。マークダウン内でReactコンポーネントを使用することもできます。

// src/pages/index.mdx
# Open AI Responses API

A simple demo app using Open AI Responses API.

<Chat height={700} postData='chat' />

成果物

おわりに

OpenAIのResponses APIによって、コードベースは非常にシンプルになりました。統合されたインターフェースと柔軟なツールユースによって、複雑な処理やエージェント的な振る舞いもAPIコール一つで実現でき、LLMフレームワークを導入せずに多様なワークフローが実現できます。

また、Morphを使って、Responses APIを使用したアプリを簡単に作ることができました。みなさんも試してみてください！新しいAPIやPython向けのLLMフレームワークをサクッと試すのにおすすめです！