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

…ru/generate-rich-menu

4geru · 2025-06-15T00:11:13Z

package.json

+    "@marp-team/marp-cli": "^4.1.2",
+    "@marp-team/marp-core": "^4.1.0",


packages for generating slides/images

4geru · 2025-06-15T00:14:19Z

richmenu-templetes/templete-01.md

+section {
+  padding: 0 !important;
+  background-color: orange;
+  height: 100% !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.columns-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+}
+.column-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.column-item h3 {
+  font-weight: bold;
+  width: 100%;
+  text-align: center;
+  font-size: clamp(16px, 6vw, 50px);
+  white-space: normal;
+  word-break: break-all;
+}


I want to put them all in a common file, but it isn't easy, so I write them by hand in each file.

4geru · 2025-06-15T00:22:15Z

src/common/schema/actionSchema.ts

+});
+
+// actions
+export const actionSchema = z.union([


it cannot automatically compare from line-bot-sdk-nodejs

4geru · 2025-06-15T01:13:08Z

@eucyt Sorry for the wait. We have improved and verified the functionality, so please leave a review.

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 June 15, 2025 09:10

Merge remote-tracking branch 'fork/4geru/generate-rich-menu' into 4ge…

63ffcc6

…ru/generate-rich-menu

self review

36f68fd

4geru marked this pull request as ready for review June 15, 2025 01:01

4geru commented Jun 15, 2025

View reviewed changes

fix the ci

9c6171c

4geru force-pushed the 4geru/generate-rich-menu branch from fffcb1d to 9c6171c Compare June 15, 2025 01:05

4geru changed the title ~~4geru/generate rich menu~~ create rich menu operation Jun 15, 2025

mokuzon requested a review from eucyt June 17, 2025 05:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

create rich menu operation #121

create rich menu operation #121

Uh oh!

4geru commented Jun 8, 2025 •

edited

Loading

Uh oh!

eucyt commented Jun 9, 2025

Uh oh!

4geru commented Jun 10, 2025

Uh oh!

4geru commented Jun 10, 2025

Uh oh!

4geru commented Jun 11, 2025 •

edited

Loading

Uh oh!

4geru Jun 15, 2025

Uh oh!

4geru Jun 15, 2025

Uh oh!

4geru Jun 15, 2025

Uh oh!

4geru commented Jun 15, 2025

Uh oh!

Uh oh!

		"@marp-team/marp-cli": "^4.1.2",
		"@marp-team/marp-core": "^4.1.0",

create rich menu operation #121

Are you sure you want to change the base?

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 Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

4geru Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

4geru Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

4geru commented Jun 15, 2025

Uh oh!

Uh oh!

4geru commented Jun 8, 2025 •

edited

Loading

4geru commented Jun 11, 2025 •

edited

Loading