DEV Community: Hidetaka Okamoto

Implementing Subscription Management with Next.js and Clerk Billing

Hidetaka Okamoto — Wed, 07 May 2025 05:21:18 +0000

Clerk has recently released Clerk Billing, a new feature that simplifies subscription management for web applications. This article will guide you through implementing Clerk Billing in a Next.js application and explain its basic usage.

Setting Up the Environment

Let's start by creating a new Next.js application:

npx create-next-app@latest nextjs-clerk-billing-app

For this tutorial, we'll use the default settings. Just keep pressing Enter when prompted:

✓ Would you like to use TypeScript? … No / Yes
✓ Would you like to use ESLint? … No / Yes
✓ Would you like to use Tailwind CSS? … No / Yes
✓ Would you like your code inside a src/ directory? … No / Yes
✓ Would you like to use App Router? (recommended) … No / Yes
✓ Would you like to use Turbopack for next dev? … No / Yes
✓ Would you like to customize the import alias (@/* by default)? … No / Yes

Setting Up the Clerk SDK

After creating your application, install the Clerk SDK. You can follow the instructions in the Clerk dashboard for guidance:

npm install @clerk/nextjs

Setting Environment Variables

Create a .env file in your project root and set up your Clerk API keys. You can copy and paste this data from the tutorial in the dashboard:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

Configuring Middleware

Next, create a src/middleware.ts file to set up Clerk's middleware, which will provide the foundation for user authentication:

import { clerkMiddleware } from '@clerk/nextjs/server';
export default clerkMiddleware();
export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',  
    '/(api|trpc)(.*)',
  ],
};

Setting Up Clerk Billing

Clerk Billing needs to be enabled from the dashboard. You'll notice a new [Subscription (beta)] tab has been added. Click the [Get Started] button to proceed.

To use Clerk Billing, you'll need to register for a plan and migrate to Session JWT v2. For JWT v2, you can follow the instructions in the Changelog.

Setting Up Pricing Data

Clerk Billing allows you to configure subscription plan information through the Clerk dashboard.

There's a Free plan already available. Click [Add plan] to create a new plan, which you can delete later if needed.

Set up the plan name, slug, and description. When you enter the plan name, Clerk will automatically generate a slug using lowercase letters and underscores (_).

Next, configure the pricing. Currently, it appears that only USD subscriptions are supported. For the [Annual Discount], enter the monthly equivalent price after discount rather than the discount amount itself. For example, if you want to set a $4.98/month plan with an annual price of $48, enter 4 (because $48 ÷ 12 = $4). Additionally, if you turn off "Publicly available," the plan won't appear in Clerk-provided components.

While creating the pricing, you should also create a feature list.

Set the feature name and slug. The slug will be used in Clerk components.

After saving the features, save the entire plan to complete the addition.

Enabling Clerk Billing

Once all the preliminary setup is complete, the [Enable Billing] button will appear on your dashboard. Click it to activate Clerk Billing.

Activation is now complete. It looks like you can also bring your own Stripe account if desired.

Basic Usage of Clerk Billing

Displaying the Pricing Table

Displaying a pricing table on your homepage is surprisingly simple. Just use the PricingTable component:

import { PricingTable } from "@clerk/nextjs";
import Image from "next/image";

export default async function Home() {
  return (
    <main>
      <PricingTable />
    </main>
  );
}

If you've registered two plans, they will be displayed like this. The features you registered will appear as a feature list in the pricing table.

Note that Clerk login is required to process payments. Therefore, it's advisable to place the PricingTable component on a page that is displayed when the user is logged in.

The payment form appears as a floating panel.

Once payment is complete, Clerk components like PricingTable will immediately reflect the changes.

Access Control

To control access to specific features based on subscriptions, the Protect component is useful:

import { PricingTable, Protect } from "@clerk/nextjs";
import Image from "next/image";

export default async function Home() {
  return (
    <main>
      <Protect
        feature="dashboard_access"
        fallback={<p>Sorry, you don't have dashboard Access.</p>}
      >
        <div>
          <h1>Protected</h1>
        </div>
      </Protect>
    </main>
  );
}

With this configuration, only people who have subscribed to a plan with the specified feature slug will see the child elements.

Server-Side Control

You can implement feature restrictions not only on the client side but also in server-side processing such as APIs and SSR. This can also be used for API control, so the distinction between this and Protect may be a subject for further research.

import { PricingTable, Protect } from "@clerk/nextjs";
import { auth } from "@clerk/nextjs/server";
import Image from "next/image";

export default async function Home() {
  const { has } = await auth()
  const canAccessDashboard = has({ feature: "dashboard_access" })

  if (!canAccessDashboard) {
    return (
      <main>
        <p>Sorry, you don't have dashboard Access.</p>
      </main>
    )
  }

  return (
    <main>
      <PricingTable />
      <Protect
        feature="dashboard_access"
        fallback={<p>Sorry, you don't have dashboard Access.</p>}
      >
        <div>
          <h1>Protected</h1>
        </div>
      </Protect>
    </main>
  );
}

Pricing

When using Clerk Billing, an additional fee of 0.7% is charged on top of the Stripe processing fee.

This additional fee applies only in production environments, but the benefit of significantly reduced implementation and maintenance effort makes it cost-effective in many cases.

Conclusion

By implementing Clerk Billing, you can easily display pricing tables and control access based on subscriptions. Since feature restrictions can be applied on both the client and server sides, flexible implementation is possible. Considering the effort required for implementation and operational costs, it's well worth the additional fee. This should bring significant benefits, especially for small teams and individual developers, by saving development time.

Building a Paid MCP Server with Cloudflare Workers and Stripe

Hidetaka Okamoto — Tue, 06 May 2025 20:33:46 +0000

Model Context Protocol (MCP) is gaining attention as a protocol that standardizes interactions with AI models. In this article, we'll explain a practical method for building a paid MCP server by combining Cloudflare Workers and Stripe.

What is an MCP Server?

MCP is a protocol that provides tools to AI models and enables the models to use them. By building a server that implements this protocol, you can provide APIs that can be used by various AI models.

Architecture Overview

This project combines the following components:

Cloudflare Workers runs the MCP server in a serverless environment. Stripe handles billing for paid features, and we've also implemented user authentication via GitHub OAuth. Additionally, we utilize the WordPress.org API as a data source.

Core Component Implementation

1. Basic Structure of the MCP Server

The MCP server instantiates the McpServer class and defines tools in the init() method.

export class MyMCP extends PaidMcpAgent<Env, State, Props> {
    server = new McpServer({
        name: "WordPress.org Search API",
        version: "0.1.0",
    });
    async init() {
        // Tool definitions...
    }
}

2. Implementing Paid Tools

Paid tools are defined using the paidTool method:

this.paidTool(
    "wporg_query_themes",
    {
        search: z.string().optional().describe("Search keyword"),
        // Other parameters...
    },
    async ({ search, tag, author, page, per_page, browse, fields }) => {
        // Implementation logic...
        return await fetchThemesApi("query_themes", params, fields);
    },
    generatePaidToolConfig("search WordPress.org themes")
)

Here, we specify the tool name, parameter schema definition, execution function, and billing configuration.

3. Core Implementation of Stripe Integration

The PaidMcpAgent class is central to Stripe integration:

export abstract class experimental_PaidMcpAgent<...> extends McpAgent<...> {
    stripe(): Stripe {
        return new Stripe(this.env.STRIPE_SECRET_KEY, {...});
    }

    async getCurrentCustomerID() {
        // Get/create the user's Stripe customer ID
    }

    paidTool<Args extends ZodRawShape>(/*...*/) {
        // Implementation of paid tool definition
    }
}

This class provides key functions such as initializing the Stripe instance, managing customer IDs, checking billing status, and creating checkout sessions.

4. Billing Flow

When a paid tool is invoked, the following flow is executed:

First, the user's customer ID is verified (existing or newly created). Next, it checks if payment has already been made (subscription or one-time payment).

If unpaid, a Stripe checkout session is created and a payment link is presented to the user. Once payment is completed, tool execution is permitted.

5. GitHub Authentication Integration

The authentication flow is implemented using OAuthProvider:

export default new OAuthProvider({
    apiRoute: "/sse",
    apiHandler: MyMCP.mount("/sse"),
    defaultHandler: GitHubHandler,
    authorizeEndpoint: "/authorize",
    tokenEndpoint: "/token",
    clientRegistrationEndpoint: "/register",
});

This configuration enables authentication using GitHub, allowing for user identification and personalized billing.

Implementation Points

State Management

We use Cloudflare Workers' Durable Objects to maintain billing states for each user:

export type PaymentState = {
  stripe?: StripeState;
};
type StripeState = {
  paidToolCalls: string[];
  subscriptions: string[];
  customerId: string;
  paidToolsToCheckoutSession: Record<string, string | null>;
};

This state allows tracking of tools that users have already paid for.

Generating Billing Configurations

export function generatePaidToolConfig(featureName: string) {
    return {
        priceId: process.env.STRIPE_PRICE_ID,
        successUrl: "https://example.com/success",
        meterEvent: "api_usage",
        paymentReason: `Payment required to use ${featureName} feature`,
    }
}

This function makes it easy to generate billing configurations for each tool.

Application Patterns for Implementation

Mix of Free and Paid Tools

You can mix free and paid tools within the same MCP server:

// Free tool
this.server.tool("free_tool", /*...*/);
// Paid tool
this.paidTool("paid_tool", /*...*/);

Usage-Based Billing Model

You can also implement usage-based billing using the meterEvent parameter:

this.paidTool(
    "metered_tool",
    /*...*/,
    {
        priceId: "price_xxx",
        meterEvent: "api_usage_count"
    }
)

Conclusion

By combining Cloudflare Workers and Stripe, you can build a scalable and easily manageable paid MCP server. This implementation pattern serves as a practical template for developers who want to provide API services to AI models.

As the standardization of the MCP protocol progresses, these server implementations will likely become increasingly important. We encourage you to apply these concepts to your own services.

References

Paid MCP tool SDK: https://github.com/stripe/agent-toolkit/tree/main/typescript/src/cloudflare
Example of simple paid MCP server: https://github.com/stripe/agent-toolkit/tree/main/typescript/examples/cloudflare
Example of the remote MCP server with GitHub OAuth: https://github.com/cloudflare/ai/tree/main/demos/remote-mcp-github-oauth

Exploring Paid MCP Servers with Stripe and Cloudflare: My Hands-on Experience

Hidetaka Okamoto — Fri, 02 May 2025 11:00:00 +0000

Earlier this month, Stripe and Cloudflare released a new SDK for creating paid Model Context Protocol (MCP) servers.

// Detect dark theme var iframe = document.getElementById('tweet-1918029261430255626-872'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1918029261430255626&theme=dark" }

Understanding MCP

The Model Context Protocol (MCP) is an open standard that enables AI assistants and LLMs to connect with external services and tools. Anthropic describes it as "a USB-C port for AI applications," providing a standardized way to connect AI models with various data sources and tools.

Until recently, MCP support was limited to Claude Desktop with local servers. This update changes the game by enabling seamless integration between remote MCP servers and web platforms, significantly expanding the ecosystem's potential.

Why Stripe and Cloudflare's Paid MCP Matters

This collaboration brings together Stripe's payment processing expertise and Cloudflare's edge computing infrastructure to create a toolkit that makes it easy to implement paid tools and services that AI assistants can access.

What makes this particularly interesting is the ability to monetize your APIs and services through AI assistants. Developers can now expose their services to AI assistants and charge for their use, opening up new revenue streams in the AI space.

Implementation Walkthrough

Let's dive into how to build a paid MCP server step by step.

1. Setting Up the Project

First, create a basic MCP server using Cloudflare's template:

npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-authless

This command creates a template for a basic MCP server without authentication.

2. Adding Stripe Integration

Next, install Stripe's agent toolkit:

npm i @stripe/agent-toolkit

3. Modifying the Code

Edit the src/index.ts file to incorporate Stripe integration:

import { McpAgent } from "agents/mcp";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";
import {
  PaymentState,
  experimental_PaidMcpAgent as PaidMcpAgent,
} from '@stripe/agent-toolkit/cloudflare';

type Bindings = {
  // Add environment variables here
}

type Props = {
  userEmail: string;
};

type State = PaymentState & {};

// Change from standard McpAgent to PaidMcpAgent
export class MyMCP extends PaidMcpAgent<Bindings, State, Props> {
  server = new McpServer({
    name: "Authless Calculator",
    version: "1.0.0",
  });

  async init() {
    // Existing free tool
    this.server.tool(
      "add",
      { a: z.number(), b: z.number() },
      async ({ a, b }) => ({
        content: [{ type: "text", text: String(a + b) }],
      })
    );

    // Calculator functionality (free)
    this.server.tool(
      "calculate",
      {
        operation: z.enum(["add", "subtract", "multiply", "divide"]),
        a: z.number(),
        b: z.number(),
      },
      async ({ operation, a, b }) => {
        let result: number;
        switch (operation) {
          case "add":
            result = a + b;
            break;
          case "subtract":
            result = a - b;
            break;
          case "multiply":
            result = a * b;
            break;
          case "divide":
            if (b === 0)
              return {
                content: [
                  {
                    type: "text",
                    text: "Error: Cannot divide by zero",
                  },
                ],
              };
            result = a / b;
            break;
        }
        return { content: [{ type: "text", text: String(result) }] };
      }
    );

    // Paid tool using Stripe
    this.paidTool(
      'add_numbers',
      {
        a: z.number(),
        b: z.number(),
      },
      ({a, b}) => {
        return {
          content: [{type: 'text', text: `Result: ${a + b}`}],
        };
      },
      {
        priceId: '{{PRICE_ID}}', // Replace with your actual price ID from Stripe
        successUrl: 'https://mcp.mysite.com/success',
        paymentReason:
          'You must pay a subscription to add two big numbers together.',
      }
    );
  }
}

export default {
  fetch(request: Request, env: Env, ctx: ExecutionContext) {
    const url = new URL(request.url);
    if (url.pathname === "/sse" || url.pathname === "/sse/message") {
      // @ts-ignore
      return MyMCP.serveSSE("/sse").fetch(request, env, ctx);
    }
    if (url.pathname === "/mcp") {
      // @ts-ignore
      return MyMCP.serve("/mcp").fetch(request, env, ctx);
    }
    return new Response("Not found", { status: 404 });
  },
};

4. Configuring Stripe API Keys

For Stripe integration, you'll need an API key with the following permissions:

customer: write
checkout: write
subscription: read
meterEvents: write

After generating a new restricted API key, place this API key in your .dev.vars file as shown below:

STRIPE_SECRET_KEY=rk_test_xxx

Make sure to replace rk_test_xxx with your actual restricted API key.

5. User Authentication

The PaidMcpAgent uses props.userEmail to identify or create a Stripe customer. You have two options:

Directly populate the email address
Integrate with OAuthProvider from @cloudflare/workers-oauth-provider to set the prop on successful authentication

For testing purposes, you can simply ask users to enter their email address directly.

6. Local Development and Testing

Start the local development server:

npm run dev

Then, add your local server to Claude Desktop's MCP configuration:

{
  "mcpServers": {
    "calculator": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse" // Change to your remote URL in production
      ]
    }
  }
}

You can use the add_numbers tool for calculating number.

However, when you first try to use it, the server will return an error message because you haven't subscribed to their paid plan yet.

To resolve this, you need to copy and paste the checkout session link provided in the error message and complete the payment process. Once the subscription is activated, you'll be able to use this calculation tool without any issues.

Hands-on Experience

The basic calculation tools that came with the template worked flawlessly, confirming that the MCP setup and functionality were correctly implemented.

The key to paid tools is the integration with Stripe's payment flow. When a user attempts to use a paid tool, they're redirected to Stripe's payment page, and once payment is complete, the tool becomes available for use.

Technical Considerations

When implementing a paid MCP server, a few technical considerations stand out:

Authentication Flow: Deciding between direct email input and OAuth integration depends on your application's security requirements and user experience goals.
State Management: The PaidMcpAgent handles payment state, but you may need to extend it for your specific use case.
Error Handling: Robust error handling for payment failures and API issues is essential for a smooth user experience.
Testing Environment: Stripe provides a testing environment that allows you to simulate payments without processing actual charges.

Future Possibilities

The integration of paid MCP servers by Stripe and Cloudflare significantly expands the possibilities for services that can be offered through AI assistants. Developers who own open-source projects can monetize their documentation by turning it into MCP servers. Those who write technical blogs focused on specific languages or frameworks can offer paid knowledge bases that make it easy to incorporate their expertise into development processes. It's also possible to provide tools that handle complex workflows.

What we're seeing is the emergence of new business opportunities for MCP servers, which were previously often viewed primarily as internal productivity tools. This technology is transforming how specialized knowledge and capabilities can be packaged, distributed, and monetized through AI assistants.

Conclusion

The Stripe and Cloudflare SDK for paid MCP servers represents a significant milestone in the evolution of AI capabilities monetization. This collaboration between payment infrastructure and edge computing creates new opportunities for developers to build sustainable business models around their expertise and tools.

What makes this particularly exciting is how it democratizes AI monetization. Individual developers with specialized knowledge, technical bloggers with deep domain expertise, and companies with proprietary workflows can all now package their value as MCP servers that integrate directly with AI assistants. This shifts MCP from being primarily an internal productivity enhancement to a potential revenue stream.

The barrier to entry is relatively low, with implementation leveraging Stripe's familiar infrastructure and Cloudflare's developer-friendly platform. As the AI ecosystem matures, we're likely to see a rich marketplace of specialized MCP servers emerge, each offering unique capabilities that extend what AI assistants can do for users.

For those looking to position themselves in the growing AI economy, building a paid MCP server could be a strategic way to package existing expertise and capabilities for a new audience of AI-powered applications.

This article is based on information available as of May 2, 2025. MCP and Stripe's API may change in the future, so please refer to the official documentation for the most up-to-date information.

When you suffer from the "API: s3:PutBucketPolicy Access Denied" error while creating a new S3 bucket, how can we resolve it?

Hidetaka Okamoto — Tue, 05 Sep 2023 14:29:07 +0000

Due to changing the default configuration of Amazon S3, we need to add the blockPublicAccess attribute to the CDK project.

What error did I see?

When I tried to create a new Amazon S3 bucket for hosting a new website:

    const websiteBucket = new Bucket(this, 'SonikStaticAssets', {
      websiteIndexDocument: 'index.html',
      publicReadAccess: true,
    });

I met the following CloudFormation error.

CdkSonikAppStack: deploying... [1/1]
CdkSonikAppStack: creating CloudFormation changeset...
10:08:29 PM | CREATE_FAILED        | AWS::S3::BucketPolicy       | SonikStaticAssetsPolicy8AA45F84
API: s3:PutBucketPolicy Access Denied


 ❌  CdkSonikAppStack failed: Error: The stack named CdkSonikAppStack failed to deploy: UPDATE_ROLLBACK_COMPLETE: API: s3:PutBucketPolicy Access Denied

Add the `blockPublicAccess` attributes to resolve this issue.

To avoid this error, we need to add the blockPublicAccess: BlockPublicAccess.BLOCK_ACLS attributes.

    const websiteBucket = new Bucket(this, 'SonikStaticAssets', {
      websiteIndexDocument: 'index.html',
      publicReadAccess: true,
      blockPublicAccess: BlockPublicAccess.BLOCK_ACLS,
    });

Referenced

Launch Utility package for Alexa Skills Kit SDK for Node.js

Hidetaka Okamoto — Thu, 20 Sep 2018 06:24:24 +0000

Alexa Skills Kit SDK for Node.js version 2 (ask-sdk) is very useful to create own Alexa Skill.
But some time we have to write long source code to handle Alexa's request.

const HelpIntentHandler = {
  canHandle (handlerInput) {
    return handlerInput.requestEnvelope.request.type === 'IntentRequest' &&
      handlerInput.requestEnvelope.request.intent.name === 'AMAZON.HelpIntent'
  },
...

I think the code handlerInput.requestEnvelope.request.type === 'IntentRequest' && handlerInput.requestEnvelope.request.intent.name === 'AMAZON.HelpIntent' can be more shorty.
So I've launched utility packages for ask-sdk.

What is `ask-utils` ?

ask-utils is utility packages for ask-sdk.

Install

$ npm i -S ask-utils

Easy to handle request

Before ask-utils

const HelpIntentHandler = {
  canHandle (handlerInput) {
    return handlerInput.requestEnvelope.request.type === 'IntentRequest' &&
      handlerInput.requestEnvelope.request.intent.name === 'AMAZON.HelpIntent'
  },
...

After ask-utils

const { canHandle } = require('ask-utils')
const HelpIntentHandler = {
  canHandle (handlerInput) {
    return canHandle(handlerInput, 'IntentRequest', 'AMAZON.HelpIntent')
  },
...

Easy to create random message

Alexa blog says Let's randomize your response!.
Alexa Skill Recipe: Randomize Your Responses to Add Variety to Your Skill
https://developer.amazon.com/ja/blogs/alexa/post/37e732b7-48fa-4940-9f12-9ffde7eeeaf8/alexa-skill-recipe-randomize-your-responses-to-add-variety-to-your-skill

So ask-utils provides helper function to make randomize response.

Before ask-utils

You have to make function to create random paharse.

function randomPhrase(myData) {

  // the argument is an array [] of words or phrases

  var i = 0;

  i = Math.floor(Math.random() * myData.length);

  return(myData[i]);

}
const welcomeGreetings = ['hello','howdy','hi', 'good day'];
const speachText = randomPhrase(welcomeGreetings);

After ask-utils

ask-utils provides helper function.

const { getRandomMessage } = require('ask-utils')
const welcomeGreetings = ['hello','howdy','hi', 'good day'];
const speachText = getRandomMessage(welcomeGreetings);

And More features !

Get slot value

const { canHandle, getSlotValueByName } = require('ask-utils')
const ExampleIntentHandler = {
  canHandle (handlerInput) {
    return canHandle(handlerInput, 'IntentRequest', 'ExampleIntent')
  },
  handle (handlerInput) {
    const yourName = getSlotValueByName(handlerInput, 'nameSlot')
    const speechText = `Hello ${yourName} ! Welcome to our skill !`

Progressive response

const { enqueueProgressiveResponseDirective } = require('ask-utils') 
const GetFirstEventHandler = {
  canHandle (handlerInput) {
    const request = handlerInput.requestEnvelope.request
    return request.type === 'IntentRequest' && request.intent.name === 'GetFirstEventIntent'
  },
  async handle (handlerInput) {
    try {
      await enqueueProgressiveResponseDirective(handlerInput, 'Please wait for a while')
    } catch (err) {
      // if it failed we can continue, just the user will wait longer for first response
      console.log(err)
    }
    // call some api
    const content = await get()
    return responseBuilder
        .speak(content)
        .getResponse()
  }
}

Need your feedback !

The package is developing in GitHub.
https://github.com/ask-utils/ask-utils

And I provides example project too.
https://github.com/ask-utils/example

If you have interest to the packages, please try it and give me feedback, feature request, pul request !

Thanks !

Testing Alexa Skill by alexa-conversation

Hidetaka Okamoto — Mon, 19 Mar 2018 15:01:31 +0000

via: https://wp-kyoto.net/en/test-by-alexa-conversation

alexa-conversation is a npm packages to testing Alexa Skill.

We can test own skill like following codes.

conversation(opts)
  .userSays('LaunchRequest')
  .plainResponse
  .shouldContain('Welcome to example skills')
  .userSays('AMAZON.StopIntent')
  .plainResponse
  .shouldContain('See you again!')
  .end()

Getting started

If we want to use the package, we have to add mocha at first.

$ npm init -y
$ npm install --save alexa-sdk
$ npm install --save-dev alexa-conversation mocha#

Make Lambda function code

After install these packages, we can make Lambda funciton.
And I made a example code for the test.

index.js

const Alexa = require('alexa-sdk')
const handlers = {
  'LaunchRequest': function () {
    this.emit(':tell', 'Welcome to my skill !')
  },
  'AMAZON.StopIntent': function () {
    this.response.speak('See you again!')
    this.emit(':responseReady')
  }
}

module.exports.hello = (event, context, callback) => {
  alexa = Alexa.handler(event, context, callback)
  alexa.registerHandlers(handlers)
  alexa.execute()
}

Make first test

And let's create first test.

index.test.js

const conversation = require('alexa-conversation')
// Load tested target
const app = require('../index.js')

// init
const opts = {
  name: 'Alexa Sample App', // test name
  appId: 'your-app-id',     // Alexa Skill ID
  app: app,                 // test target
  handler: app.handler      // Lambda handler
}

// write test like conversation
conversation(opts)
  .userSays('LaunchRequest')
  .plainResponse
  .shouldContain('Welcome to my skill')
  .userSays('AMAZON.StopIntent')
  .plainResponse
  .shouldContain('good by!')
  .end()

Running the test

After create these code, we can run own test by mocha cli

$ ./node_modules/mocha/bin/_mocha index.test.js
  Conversation: Alexa Sample App
    User triggers: LaunchRequest 
      ✓ Alexa's plain text response should contain: Welcome to my skill
    User triggers: AMAZON.StopIntent
      1) Alexa's plain text response should contain: good by!
  21 passing (33ms)
  1 failing

  1) Conversation: Alexa Sample App
       User triggers: LaunchRequest 
         Alexa's plain text response should contain: good by!:
     AssertionError: expected ' See you again! ' to include 'good by!'
      at Context.it (node_modules/alexa-conversation/response.js:100:32)

The example test has been failed. Because the AMAZON.StopIntent expects good by! but actual source code returns See you again!.So we have to fix the response to pass the test.

DEV Community: Hidetaka Okamoto

Implementing Subscription Management with Next.js and Clerk Billing

Setting Up the Environment

Setting Up the Clerk SDK

Setting Environment Variables

Configuring Middleware

Setting Up Clerk Billing

Setting Up Pricing Data

Enabling Clerk Billing

Basic Usage of Clerk Billing

Displaying the Pricing Table

Access Control

Server-Side Control

Pricing

Conclusion

Building a Paid MCP Server with Cloudflare Workers and Stripe

What is an MCP Server?

Architecture Overview

Core Component Implementation

1. Basic Structure of the MCP Server

2. Implementing Paid Tools

3. Core Implementation of Stripe Integration

4. Billing Flow

5. GitHub Authentication Integration

Implementation Points

State Management

Generating Billing Configurations

Application Patterns for Implementation

Mix of Free and Paid Tools

Usage-Based Billing Model

Conclusion

References

Exploring Paid MCP Servers with Stripe and Cloudflare: My Hands-on Experience

Understanding MCP

Why Stripe and Cloudflare's Paid MCP Matters

Implementation Walkthrough

1. Setting Up the Project

2. Adding Stripe Integration

3. Modifying the Code

4. Configuring Stripe API Keys

5. User Authentication

6. Local Development and Testing

Hands-on Experience

Technical Considerations

Future Possibilities

Conclusion

When you suffer from the "API: s3:PutBucketPolicy Access Denied" error while creating a new S3 bucket, how can we resolve it?

What error did I see?

Add the blockPublicAccess attributes to resolve this issue.

Referenced

Launch Utility package for Alexa Skills Kit SDK for Node.js

What is ask-utils ?

Install

Easy to handle request

Before ask-utils

After ask-utils

Easy to create random message

Before ask-utils

After ask-utils

And More features !

Get slot value

Progressive response

Need your feedback !

Testing Alexa Skill by alexa-conversation

Getting started

Make Lambda function code

index.js

Make first test

index.test.js

Running the test

Add the `blockPublicAccess` attributes to resolve this issue.

What is `ask-utils` ?