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

eucyt · 2025-07-03T07:36:03Z

src/tools/createRichMenu.ts

+  register(server: McpServer) {
+    server.tool(
+      "create_rich_menu",
+      "Create a rich menu associated with your LINE Official Account.",


How about clearly specifying the description to avoid that agent confuse tools to use?

Suggested change

"Create a rich menu associated with your LINE Official Account.",

"Create a rich menu based on the given actions. Generate and upload a rich menu image based on the given action. This rich menu will be registered as the default.",

eucyt · 2025-07-03T07:48:38Z

src/tools/createRichMenu.ts

+          // 1. Validate the rich menu image
+          if (templeteNo < 1 || templeteNo > 6) {
+            return createErrorResponse("Invalid texts length");
+          }


Would it be possible to specify the number of elements using Zod like this? This way, the agent could know the element count constraints in advance when executing the tool.

z .array(actionSchema) .min(1) .max(6) .describe("hoge")

I don't know this setting. thanks for comment :)

eucyt · 2025-07-03T08:04:43Z

src/tools/createRichMenu.ts

+      "create_rich_menu",
+      "Create a rich menu associated with your LINE Official Account.",
+      {
+        chatBarText: z.string().describe("The ID of the rich menu to create."),


Is this more clear?
FYI: https://developers.line.biz/en/reference/messaging-api/#rich-menu-object

Suggested change

chatBarText: z.string().describe("The ID of the rich menu to create."),

chatBarText: z.string().describe("Text displayed in the chat bar and this is also used as name of the rich menu to create"),

Exactly, The ID makes us confuse :(

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;

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.

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

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

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

	"Create a rich menu associated with your LINE Official Account.",
	"Create a rich menu based on the given actions. Generate and upload a rich menu image based on the given action. This rich menu will be registered as the default.",

	chatBarText: z.string().describe("The ID of the rich menu to create."),
	chatBarText: z.string().describe("Text displayed in the chat bar and this is also used as name of the rich menu to create"),

	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!

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

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!

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

4geru commented Jun 8, 2025 •

edited

Loading

4geru commented Jun 11, 2025 •

edited

Loading