日本語
From WordPress to Next.js and Supabase: Rebuilding a B2B Ordering Platform with an AI Agent
In my previous article, I described how I worked with an AI agent to restore an e-commerce site that had been taken offline by abnormal bot traffic.
This article covers another project I took on during the same week: the complete rebuild of a B2B ordering site that had been running on WordPress for four to five years. The new system was built with Next.js and Supabase.
The most important factor in the rebuild was not how quickly the AI could write code. It was the work that came before implementation: discussing who would use the system, which parts of the existing operation needed to remain, and what we actually wanted to improve.
A B2B Ordering Site Supporting Local Restaurants
In addition to Magnote Gifts, an import and retail business for household and gift products, I operate Bento Box & More, a wholesale business supplying takeout containers to restaurants.
The business grew out of my involvement in bringing the Japanese okonomiyaki chain Tsuruhashi Fugetsu to the United States. When we opened a second location during the pandemic, we needed to purchase takeout containers in large quantities. That led me to consider applying the sourcing and distribution model I had developed through the gift business to restaurant supplies.
Through the Bento Box & More ordering site, restaurant owners can log in and order bento containers, rice bowls, soup cups, napkins, bags, and other supplies. Because the service is limited to restaurants in the local area, the site does not receive the kind of traffic associated with a large consumer e-commerce operation.
However, many customers reorder the same products every week. Even without high traffic volume, a site that becomes difficult to use—or unavailable—can immediately affect daily order operations. That dependency was an important reason for rebuilding the system.
How Changes in the Business Increased the Operational Burden
The original site had been built with WordPress four to five years earlier. At the time of its launch, it served its main purpose well: allowing restaurants to place orders online.
As the business grew, however, the number of products and customers increased, and the underlying management process gradually became more complex. Tasks that had not been anticipated when the site was first created also became part of the regular workflow.
For example, each incoming order had to be entered manually into the accounting system. Weekly restock orders to suppliers also required reviewing past sales and current inventory before drafting an email by hand.
Each task was relatively small, but repeating them every week created a meaningful operational burden. Once these routines became part of everyday work, there was rarely an opportunity to step back and ask whether they could be improved.
The rebuild therefore became more than a website modernization project. It also provided an opportunity to reconsider the business processes surrounding the site.
Aligning with AI Before Starting the Implementation
Recently, I have begun treating AI not simply as a standalone tool, but as a collaborator in the work itself. From that perspective, the first stage of a project should not be implementation. It should be a conversation about what needs to be built.
For this rebuild, I worked through a series of questions with AI. Who uses the site? When and how do customers place their orders? Which parts of the current workflow need to remain? What information does the administrator review each week?
I did not begin implementation until I felt that my intent and the AI’s understanding were sufficiently aligned.
The main requirements that emerged from those conversations were:
- Migrate the existing customer and product data
- Remove obsolete or unnecessary data during the migration
- Preserve the existing ordering workflow during the transition
- Create an interface that allows customers to order without confusion
- Improve usability on smartphones
- Add an administrator dashboard for revenue, customer counts, and product-level sales
- Make it easier to evaluate supplier restock orders using inventory and sales data
I documented these requirements and provided them to Claude Code. Only then did the implementation begin.
A New Architecture Built with Next.js, Vercel, and Supabase
Once the requirements were clear, I discussed the appropriate technical architecture with Claude.
We decided to use Next.js for the frontend, Vercel for hosting, and Supabase to manage customer, product, and order data.
In recent years, combining managed services for different functions has become a realistic alternative to building everything within a CMS such as WordPress. This project also provided an opportunity to test whether that approach would work well for a relatively small B2B ordering operation.
I did not have substantial production experience with these services. Claude guided me through the steps required to set up the accounts, while I delegated the implementation work to Claude Code.
My role was to determine the overall direction, review the design and implementation, and request changes when necessary. Even when working with technologies outside my primary area of expertise, this division of responsibilities made it possible to move the project forward.
As part of the rebuild, we also added new integrations with Slack and QuickBooks Online. When an order is placed, a notification is sent to Slack and the order information is automatically entered into QuickBooks Online.
This reduced the manual accounting work required after each order and extended the efficiency improvements beyond the ordering site itself.
Integrating the Dashboard and Restock Workflow
The rebuild also included a new administrator dashboard.
The dashboard makes it possible to review revenue trends over the previous three months or a selected period, as well as customer counts and product-level sales performance.
I also integrated a restock workflow that had previously existed as a separate project. Claude Code reviewed the existing project and identified the data and business rules used to support restock decisions. Those elements were then incorporated into the new administrator interface.
As a result, the dashboard does more than display revenue and inventory information. It can also generate a draft restock email to suppliers.
However, the system does not send those emails automatically. AI and the system prepare the relevant information and draft the message, but a person reviews the content and makes the final decision before sending it.
The goal was not to automate every step. Instead, the system handles the repetitive and time-consuming work while leaving decisions that may affect supplier relationships with a person.
Defining that boundary is an important part of applying AI in real business operations.
Faster AI Implementation Makes Requirements More Important
The completed system came very close to what I had originally envisioned.
That outcome cannot be explained solely by the speed of Claude Code. The more important factor was the discussion that took place before implementation: defining what we were building, who would use it, and which parts of the existing operation needed to remain.
Because that groundwork had been completed, the project did not drift significantly during development, and the result was a system that could support actual business operations.
When implementation is delegated to AI, attention naturally turns to the question of what to ask it to build. In practice, however, the outcome is often determined by the work that comes before implementation. The clearer the business problems and requirements can be expressed, the more effectively AI can support the project.
The faster AI can write code, the more important it becomes for people to define what should be built.
As the implementation capabilities of AI agents improve, writing code itself will become less of a bottleneck. At the same time, the ability to determine who a system is for, what it should accomplish, and which business processes it should improve will become even more important.
Companies considering AI-assisted system development should therefore look beyond the tools themselves. They should also invest in understanding their operational workflows and expressing their requirements clearly.
Shinya Fujimoto | Founder / Chief Strategist, Silicon Valley Japan Lab
With more than 25 years in the United States, he draws on his experience as both an engineer and business leader to examine Silicon Valley technology trends and how they can be applied to strategy and business development within Japanese companies.