create rich menu operation #121

4geru · 2025-06-08T14:25:33Z

Hello Maintainers! 👋

Thank you for maintaining this excellent LINE Bot MCP Server project. I'm excited to contribute a new feature that adds dynamic rich menu creation capabilities. I hope this enhancement will be valuable for the community.

Background

The LINE Bot MCP Server needed functionality to create rich menus dynamically. Previously, users had to manually create rich menu images and configure them individually. There was a need for a flexible, text-based approach to generate rich menus programmatically.

Todo

1. Implemented Rich Menu Creation Feature

Added new create_rich_menu tool
Implemented automatic rich menu generation that accepts chat bar text and action arrays

2. Built Template System

Created 6 rich menu templates (Markdown format) supporting 1-6 items
Placed templates in richmenu-templates/ directory
Added example images in richmenu-examples/ for reference

3. Implemented Image Generation Pipeline

Used Marp to convert Markdown templates to HTML
Used Puppeteer to convert HTML to PNG images with specified dimensions (1600x910px)
Uploaded generated images to LINE Messaging API

4. Defined LINE Bot Action Schema

Created src/common/schema/actionSchema.ts with schemas for 9 action types (postback, message, uri, datetimepicker, camera, cameraRoll, location, richmenuswitch, clipboard)
Implemented type-safe validation using Zod

5. Added Dependencies

@marp-team/marp-core: For Markdown to slide generation
@marp-team/marp-cli: Marp command-line tools

Verified

Functionality

All templates (1-6 items) work correctly
Placeholders (item01 ' ~ ' item06) in Markdown templates are properly replaced with action labels
Generated images comply with LINE specifications (1600x910px)
Complete workflow from rich menu creation, image upload, to default setting works

Error Handling

Proper error responses for invalid action counts (< 1 or > 6)
Error catching at each stage: Marp conversion, Puppeteer execution, LINE API calls
Proper cleanup of temporary files

Technical Aspects

Proper management and deletion of temporary files (HTML, PNG)
Proper cleanup of Puppeteer browser instances
Correct usage of both LINE Messaging API Client and Blob Client

Result

This implementation enables automatic generation of visually appealing rich menus using only text-based configuration, significantly improving the developer experience for LINE Bot creators.

Usage

https://x.com/_4geru/status/1933793286285898071
https://x.com/_4geru/status/1933890824808632560

eucyt · 2025-06-09T10:18:40Z

@4geru
(just in case)
We refactored dir struction to avoid conflict. So check this development flow for detail please 🙇
https://github.com/line/line-bot-mcp-server/blob/ee1196bc33c1d9ca40c75e67fa044734a8d8602b/CONTRIBUTING.md#add-a-new-tool

4geru · 2025-06-10T23:01:04Z

@eucyt Hello Euchi-san. I updated to separate the tools file.
Also, I can generate and upload the rich menu.

However, it cannot open in my app. LINE app stands up many times, and restarts...
Could you support me...? 🙇 🙇

4geru · 2025-06-10T23:13:45Z

Memo

prompt

LINE MCP を使って リッチメニューをなので作成してください
[1] カメラのアクションを設定してください
[2] テンプレートは7です
[3] ボタンは「ポッチっとな」です

result

{
  "richMenuId": "richmenu-6ba77c74ccaf8a1153045f627cc972c3",
  "setImageResponse": {},
  "richMenuImagePath": "/tmp/slide-07-1749597029244.png",
  "params": {
    "name": "ポッチっとな",
    "chatBarText": "ポッチっとな",
    "selected": false,
    "size": {
      "width": 1600,
      "height": 910
    },
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 1600,
          "height": 900
        },
        "action": {
          "type": "camera",
          "label": "ポッチっとな"
        }
      }
    ]
  }
}

4geru · 2025-06-11T04:47:06Z

I checked image requirements. 👌
https://developers.line.biz/ja/reference/messaging-api/#upload-rich-menu-image-requirements

4geru · 2025-09-07T04:17:47Z

richmenu-template/template-01.md

+size: 16:9
+---
+<style>
+section {


I'd like to separate the common css part. However, it was a difficult. therefore, I'll work the next issue.

Prioritize release over perfection. 🙇 🙇

4geru · 2025-09-07T04:18:44Z

src/index.ts

+const lineBlobClient = new line.messagingApi.MessagingApiBlobClient({
+  channelAccessToken: channelAccessToken,
+  defaultHeaders: {
+    "User-Agent": USER_AGENT,
+  },
+});


the code is the same with BolbClient.

4geru · 2025-09-07T04:20:17Z

src/tools/createRichMenu.ts

I tested to work well with the Docker.
font issue was too difficult, so I'd taken the time.

4geru · 2025-09-07T04:21:20Z

src/tools/createRichMenu.ts

+import { actionSchema } from "../common/schema/actionSchema.js";
+import { promises as fsp } from "fs";
+
+const RICHMENU_HEIGHT = 910;


10px is for the margin.

4geru · 2025-09-07T04:52:32Z

@eucyt Could you review this PR again?

eucyt

@4geru
Sorry for the delay.

It’s mostly LGTM!
I was able to confirm it works with Docker and Node 🎉
I’ve left a few comments on some minor points, so please address those and resolve the conflicts.

src/tools/createRichMenu.ts

src/common/schema/actionSchema.ts

src/tools/createRichMenu.ts

4geru · 2025-10-24T09:13:04Z

@eucyt Thanks for reviewing my PR 🙇 I updated. So, please check it again.

eucyt

@4geru
LGTM!! Thank you!
(The CI is failing, but it’s just due to a formatting issue, so I’ll fix it and then merge.)

4geru added 9 commits June 8, 2025 08:39

create six-splited richmenu

aae7ae3

add templates

14f2118

create rich-menu folder

0f25ba1

separate the generateRichMenuImage function

6744607

add example images

4f27622

Merge remote-tracking branch 'origin/main' into 4geru/test-rich-menu

b281485

refactor some

d0229a4

add h3 tag on templete 04

6eb6d10

change return messave

417e9d7

4geru added 4 commits June 10, 2025 23:20

add create richmenu

34e8566

add create rich menu command

cb128ab

Merge remote-tracking branch 'origin/main' into 4geru/generate-rich-menu

3f81982

update the create rich menu

15bfb77

change the image size

3e3ae9e

4geru added 12 commits June 14, 2025 16:32

create the rich menu

1f2f63e

refactor the code

9a97695

change the templetes

a1749ce

change TempleteNo and height

0a39c3c

change templete actions area

b4f256b

refactor the codes

fac005c

use const variable

d709b29

rename the filename

760c059

add the areas and some

280a98c

debug

73416bf

update the templetes

6237d7e

Merge branch 'main' into 4geru/generate-rich-menu

28ba035

4geru added 2 commits September 6, 2025 11:37

change the templete to template

76e266d

add fonts on docker

fd89189

4geru force-pushed the 4geru/generate-rich-menu branch from 9ad75b5 to fd89189 Compare September 6, 2025 07:59

4geru added 7 commits September 6, 2025 17:11

update the tools argument

3dc9472

add max and min argument

2de1d99

update chatBarText message

9f1765a

remove rich menu examples

4a61be6

change the chatBatText description

a3ee632

change the font

1c7ce01

add the READMEs

7fb6628

4geru commented Sep 7, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into 4geru/generate-rich-menu

39214dd

4geru requested a review from eucyt September 7, 2025 07:51

eucyt reviewed Oct 3, 2025

View reviewed changes

src/tools/createRichMenu.ts Outdated Show resolved Hide resolved

src/common/schema/actionSchema.ts Outdated Show resolved Hide resolved

src/common/schema/actionSchema.ts Show resolved Hide resolved

src/tools/createRichMenu.ts Outdated Show resolved Hide resolved

habara-k assigned eucyt Oct 7, 2025

4geru added 6 commits October 22, 2025 09:26

Merge remote-tracking branch 'origin/main' into 4geru/generate-rich-menu

9ad941a

change the z option

6cc9589

include finally

9439749

remove end of space

1d333ef

remove templateNumber

f8d77fd

remove console.log

1d2bee9

Merge branch 'main' into 4geru/generate-rich-menu

85083f6

eucyt enabled auto-merge October 31, 2025 06:59

eucyt approved these changes Oct 31, 2025

View reviewed changes

npm run format

3cc47d7

eucyt added this pull request to the merge queue Oct 31, 2025

Merged via the queue into line:main with commit 326d8bf Oct 31, 2025
6 checks passed

create rich menu operation #121

create rich menu operation #121

Uh oh!

Conversation

4geru commented Jun 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Todo

1. Implemented Rich Menu Creation Feature

2. Built Template System

3. Implemented Image Generation Pipeline

4. Defined LINE Bot Action Schema

5. Added Dependencies

Verified

Functionality

Error Handling

Technical Aspects

Result

Usage

Uh oh!

eucyt commented Jun 9, 2025

Uh oh!

4geru commented Jun 10, 2025

Uh oh!

4geru commented Jun 10, 2025

prompt

result

Uh oh!

4geru commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

4geru Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

4geru Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

4geru Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

4geru Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

4geru commented Sep 7, 2025

Uh oh!

eucyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

4geru commented Oct 24, 2025

Uh oh!

eucyt left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

4geru commented Jun 8, 2025 •

edited

Loading

4geru commented Jun 11, 2025 •

edited

Loading

eucyt left a comment •

edited

Loading