diff --git a/app/api/frames/createStamp/route.tsx b/app/api/frames/createStamp/route.tsx
new file mode 100644
index 0000000..29f3a78
--- /dev/null
+++ b/app/api/frames/createStamp/route.tsx
@@ -0,0 +1,27 @@
+import { Button, createFrames } from 'frames.js/next';
+
+const frames = createFrames({
+  basePath: '/api/frames/createStamp',
+});
+
+const handleRequest = frames(async (ctx) => {
+  console.log(ctx);
+
+  return {
+    image: (
+      <div tw="w-full h-full bg-slate-700 text-white justify-center items-center flex flex-col">
+        <div tw="flex flex-row">hogehoge</div>
+      </div>
+    ),
+    imageOptions: {
+      aspectRatio: '1:1',
+    },
+    buttons: [
+      <Button action="link" target="https://google.com">
+        {ctx.message?.inputText}
+      </Button>,
+    ],
+  };
+});
+
+export const POST = handleRequest;
diff --git a/app/page.tsx b/app/page.tsx
index 5acd83f..74b0f08 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -80,7 +80,11 @@ export default async function Home({ searchParams }: NextServerPageProps) {
           </div>
         </FrameImage>
         <FrameInput text="Please enter a prompt" />
-        {!state.generated ? <FrameButton>generate</FrameButton> : null}
+        {!state.generated ? (
+          <FrameButton action="post" target="/api/frames/createStamp">
+            generate
+          </FrameButton>
+        ) : null}
         {state.generated ? <FrameButton>initialize</FrameButton> : null}
         {state.generated ? <FrameButton>Mint</FrameButton> : null}
         {state.generated ? <FrameButton>Share</FrameButton> : null}