GPT (Cursor) による、設計（Mermaid, OpenAPI）からの多言語 自動コーディング デモ

GPT (Cursor) による、設計からの多言語（Javascript, Python）自動コーディング デモ です。

設計

下記による設計

• Mermaid - classDiagram

• OpenAPI

openapi: 3.0.0
# 基本情報
info:
  title: Userリスト API
  description: この API を使用すると、クライアントはUserのリストを取得できます。
  version: 1.0.0
servers:
  - url: https://api.userlist.com

paths:
  /users:
    get:
      summary: ユーザーリスト取得

      # レスポンスの定義
      responses:
        # code=200
        '200':
          description: ユーザーリスト
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: './components.yaml#/components/schemas/User'

              # 例
              examples:
                $ref: './examples.yaml#/examples'

components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: integer
        name:
          type: string
        birthday:
          type: string
          format: date

GitHub リポジトリ

コード生成

prompt には下記を書き込んでいる

• タスク
• mermaid から Javascript・Python への変換例

Javascript コードの生成

• Cursor で architecture_001.md を開く。
• Chat で prompt_js_001 をメンション @prompt_js_001.md。
• プロンプト実行で、GPT-4 で設計からコードが生成される。

Python コードの生成

• GitHub Copilot, Cursor で architecture_001.md を開く。
• Chat で prompt_js_001 をメンション @prompt_js_001.md。
• プロンプト実行で、GPT-4 で設計からコードが生成される。

デモ

OpenAPI の Mock Server (Prism) を起動して、生成したコードの動作デモを実行

OpenAPI の Mock Server (Prism) 起動

• Prism 起動

cd architecture/api; docker run --rm -it -p 4010:4010 -v $PWD:/tmp stoplight/prism:4 mock -h 0.0.0.0 /tmp/openapi.yaml

• Prism 動作確認

curl localhost:4010/users

• Prism output

[
  { "id": 1, "name": "いちろう", "birthday": "2021-07-16" },
  { "id": 2, "name": "じろう", "birthday": "2022-08-20" },
  { "id": 3, "name": "さぶろう", "birthday": "2023-01-01" }
]

Javascript デモ

• デモ 実行

node demo/js/demo_001.js

• デモ output

$ node demo/js/demo_001.js
--- test001 ---
url: http://localhost:4010/users
private var: undefined
user: {"id":1,"name":"いちろう","birthday":"2021-07-16T00:00:00.000Z"}
age: 2
user: {"id":2,"name":"じろう","birthday":"2022-08-20T00:00:00.000Z"}
age: 1
--- test002 ---
url: http://localhost:4010/
error Error: ERROR
    at UserService.fetch 

Python デモ

• デモ 実行

python demo/python/demo_001.py

• デモ output

$ python demo/python/demo_001.py
--- test001 ---
url: http://localhost:4010/users
user: User(id=1, name='いちろう', birthday=datetime.datetime(2021, 7, 16, 0, 0))
age: 2
user: User(id=2, name='じろう', birthday=datetime.datetime(2022, 8, 20, 0, 0))
age: 1
--- test002 ---
url: http://localhost:4010/
error ERROR: Client error '404 Not Found' for url 'http://localhost:4010/'
For more information check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404