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-06-15T01:13:08Z

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

4geru · 2025-06-19T14:27:45Z

@eucyt Sorry, I committed a file...
0b6bd3d

eucyt · 2025-06-30T06:14:38Z

@4geru san
Sorry to late...
I'll review this in this week 🙇

eucyt · 2025-07-03T08:44:13Z

@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...? 🙇 🙇

Is this issue still occurring? If it is still happening, could you please provide the steps to reproduce it, specifically what is happening, and what the expected behavior should be? 🙏

eucyt

This is awesome! Thank you for implementing this wonderful tool. This greatly expands the possibilities of line-bot-mcp-server.

src/tools/createRichMenu.ts

eucyt · 2025-07-03T08:20:55Z

src/tools/createRichMenu.ts

+        let setImageResponse: any = null;
+        let setDefaultResponse: any = null;
+        const lineActions = actions as messagingApi.Action[];
+        const templeteNo = lineActions.length;


[nits] typo

Suggested change

const templeteNo = lineActions.length;

const templateNo = lineActions.length;

I grepped the typo message for it.

~/line-bot-mcp-server 4geru/generate-rich-menu → git ls-files | grep templ | grep -v template NONE ~/line-bot-mcp-server 4geru/generate-rich-menu → git grep templ | grep -v template NONE

eucyt · 2025-07-03T08:52:24Z

src/tools/createRichMenu.ts

+  for (let index = 0; index < actions.length; index++) {
+    const pattern = new RegExp(`<h3>item0${index + 1}</h3>`, "g");
+    content = content.replace(pattern, `<h3>${actions[index].label}</h3>`);
+  }


[Just Question] Do you have plans to be enable to fill specified original images in richmenu?

No, I haven't planned yet. Just now, we can fill in the message.
I imagine generating the mock app from LLM, and it will update the image later.

eucyt · 2025-07-03T08:53:59Z

richmenu-templetes/templete-01.md

[nits] templete -> template 🙏

eucyt · 2025-07-03T08:54:33Z

richmenu-examples/templete-01.png

Actually, if these example images are not used, I think we should remove them to avoid more maintenance.

eucyt · 2025-07-03T08:59:46Z

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: 100px;
+  white-space: normal;
+  word-break: break-all;
+}


Using @import url('hoge'), can we extract common styles into a separate CSS file for reuse?

eucyt · 2025-07-03T09:21:22Z

src/tools/createRichMenu.ts

I was unable to run this tool with Docker on my local. I encountered the following error. Is it possible to make it compatible with Docker? (I'm also concerned about whether screenshots will work. However, if this tool could be used with Docker, it would be quite convenient 😄 )

{"error":{"errno":-2,"code":"ENOENT","syscall":"open","path":"/app/richmenu-templetes/templete-02.md"},"createRichMenuResponse":{"richMenuId":"richmenu-828cebe92610f4649aab4b0a8ea05d17"},"setImageResponse":null,"setDefaultResponse":null}

I'm going to try with Docker. I tried from dist/index.js.

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

eucyt · 2025-07-03T09:36:22Z

src/tools/createRichMenu.ts

Please add description to README.md and README.ja.md 🙏

4geru · 2025-07-03T22:43:33Z

This issue was not solved :). Some accounts are dead. 😃 However, this tool is updated.

#121 (comment)

eucyt · 2025-07-04T01:58:02Z

This issue was not solved :). Some accounts are dead. 😃 However, this tool is updated.

#121 (comment)

@4geru san
I don't fully understand the issue you're consulting about, so could you first tell me about the problem that's occurring?

Are you saying that the LINE client application in smartphone keeps crashing? In other words, is this directly unrelated to the line-bot-mcp-server or LINE Official Account? I would appreciate if you could explain the steps that lead to this malfunction.

4geru · 2025-09-06T01:15:10Z

Are you saying that the LINE client application in smartphone keeps crashing?

Yes, LINE client application in smartphone was clashed. However, the currently version is not crashed.

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?

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

4geru added 2 commits June 19, 2025 23:25

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

019ec7c

use puppeteer

0b6bd3d

4geru force-pushed the 4geru/generate-rich-menu branch from b77e1cd to 0b6bd3d Compare June 19, 2025 14:26

reply successful message

e266dec

eucyt reviewed Jul 3, 2025

View reviewed changes

4geru added 3 commits September 6, 2025 11:31

change the file name

7d869ae

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

	const templeteNo = lineActions.length;
	const templateNo = lineActions.length;

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

Uh oh!

4geru commented Jun 19, 2025

Uh oh!

eucyt commented Jun 30, 2025

Uh oh!

eucyt commented Jul 3, 2025

Uh oh!

eucyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

4geru commented Jul 3, 2025

Uh oh!

eucyt commented Jul 4, 2025

Uh oh!

4geru commented Sep 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

4geru commented Jun 8, 2025 •

edited

Loading

4geru commented Jun 11, 2025 •

edited

Loading