DEV Community: DevLycan

Deploy a Website with Cloudflare Workers and D1

DevLycan — Fri, 16 Oct 2026 14:02:30 +0000

Deploying a website is an important step in web development, but getting an application to work correctly in production often involves more than uploading files.

In this tutorial, I share a practical deployment workflow using GitHub, Cloudflare Workers, and Cloudflare D1, based on a Guestbook application that can store and retrieve messages through a Worker API.

The guide walks through the process from local development to production, including the configuration steps and issues encountered during testing.

What You'll Learn

Set up and test a website locally using Wrangler.
Connect a GitHub repository and deploy with Cloudflare Workers.
Create a Cloudflare D1 database and configure database bindings.
Build a Worker API to store and retrieve Guestbook messages.
Test database operations in local and production environments.
Troubleshoot common issues, including Worker errors and missing database tables.
Review essential deployment best practices.

What's Included

The article includes practical commands, source code examples, step-by-step screenshots, and a downloadable starter project for hands-on practice.

If you're exploring Cloudflare's developer platform or looking for a practical deployment example, I hope this guide provides a useful starting point.

Read the full step-by-step tutorial:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

From Localhost to Live: Deploy Your First Website on Netlify

DevLycan — Mon, 12 Oct 2026 14:40:05 +0000

Deploying a website is not only about getting it online. A clear deployment workflow can make the process easier to understand, verify, and maintain over time.

In this guide, I walk through a practical step-by-step deployment workflow using GitHub and Netlify, starting from a website running on localhost and ending with a publicly accessible live website.

The article is based on an actual deployment process and includes screenshots throughout the workflow.

Key topics covered:

Verifying the website on localhost.
Testing the production build.
Creating a GitHub repository and pushing the project.
Connecting GitHub with Netlify.
Reviewing build and publish settings.
Deploying the website.
Testing the live production version.
Common deployment issues and practical best practices.

The goal is not simply to complete a deployment, but to understand a workflow that can be repeated and applied to future projects.

Read the full article:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

Google Sheets + Codex CLI via MCP: Read, Analyze, and Update Data with AI

DevLycan — Fri, 02 Oct 2026 15:30:00 +0000

What happens when Codex moves beyond writing code and starts working directly with real business data?

In this article, I walk through a practical experiment connecting Google Sheets with Codex CLI via MCP. The workflow uses a Community Google Workspace MCP server together with the Google Sheets API and OAuth, allowing Codex to read, analyze, validate, and update spreadsheet data from the terminal.

The article uses a realistic Monthly Sales Report as the main case study. Instead of stopping at a simple read/write demo, the workflow continues into profit calculation, Data Quality Audit, human-in-the-loop validation, Executive Summary generation, and controlled record updates.

*Key takeaways: *

Google Sheets API and OAuth setup
MCP configuration with Codex CLI
Thai-language prompt examples
Read and write operations
Profit calculation
Data Quality Audit
Human-in-the-loop validation
Executive Summary generation
Real outputs from each case study

The article also includes the actual prompts used in each case study together with screenshots and results from every stage, making it easier to understand how the workflow behaves in practice.

If you are exploring MCP, AI agents, or practical ways to connect AI with the tools you already use, this may be a useful starting point.

Read the full article:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

Codex GPT-6 Astra + Blender MCP: 3 Practical 3D Case Studies

DevLycan — Mon, 28 Sep 2026 15:00:00 +0000

What happens when Codex can work directly with Blender through MCP?

In this hands-on experiment, I connected Codex GPT-6 Astra with Blender using MCP for Blender and tested the workflow across three different types of 3D projects.

The goal was not simply to generate 3D models, but to understand how AI could support a practical Blender workflow from setup to refinement and final presentation.

The article covers:

Setting up Codex CLI, uv, uvx, and MCP for Blender
Connecting Codex to Blender through MCP
Testing scene reading and editing before starting
Building an Industrial Utility Mini Robot
Creating a Modern Tiny House
Creating a Luxury Wristwatch 3D
Refining materials, lighting, cameras, and presentation
The prompts used throughout each case study
Practical observations and limitations from the experiment

One of the most useful lessons was that different 3D tasks require different prompting strategies. A hard-surface robot, an architectural model, and a product visualization each need different priorities in terms of structure, proportion, materials, depth, and presentation.

Every image, prompt, step, and result shown in the article comes from our own hands-on testing.

I hope this provides a useful reference for anyone exploring Codex, MCP, Blender, and AI-assisted 3D workflows.

Read the full article:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

Slack MCP + Claude Code: A Step-by-Step Guide with 6 Practical Case Studies

DevLycan — Wed, 23 Sep 2026 15:00:00 +0000

What happens when AI can work directly with the conversations your team already has in Slack?

In this case study, I connected Slack MCP with Claude Code to explore how AI can use existing Slack conversations as working context—not just for answering questions, but for supporting real workflows.

I tested the integration through 6 practical case studies, covering everything from retrieving information to taking reviewed actions inside Slack.

What this article covers

Connecting Slack MCP with Claude Code step by step
OAuth authentication and connection verification
Searching and summarizing information from Slack conversations
Connecting context across multiple messages
Creating project status summaries
Drafting and sending reviewed follow-up messages
Creating Slack Canvas reports
Example prompts used in each case study
Human review before allowing AI to take actions

One of the most important lessons from this experiment was that connecting AI to workplace tools changes the role of the AI.

Instead of only responding to prompts, it can begin working with the context and tools already used by the team.

For this reason, I followed a simple workflow throughout the experiment:

AI drafts → Human reviews → AI executes

Every step and screenshot in the article comes from my own testing, and the prompts used in the case studies are included so the workflow can be reproduced or adapted.

If you're exploring MCP, Claude Code, AI agents, or practical AI workflows, I hope this case study provides a useful reference.

Read the full article below.

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

Playwright MCP + Claude Code: Let AI Test Your Website Before Writing Tests

DevLycan — Thu, 17 Sep 2026 16:00:00 +0000

What if AI could interact with your website first — and only then write the automated tests?

In this experiment, I connected Playwright MCP with Claude Code and tested the workflow on a real e-commerce application.

I focused on three practical areas:

• Purchase and add-to-cart flow
• Form validation with invalid inputs
• Responsive behavior across Mobile, Tablet, and Desktop

The interesting part was that Claude Code did more than interact with the UI. During testing, it also surfaced issues related to validation, application behavior, and API responses that were not always obvious from the screen alone.

After the manual exploration, I asked Claude Code to turn the tested workflows into reusable Playwright tests.

The key takeaway for me was the workflow itself:

Test the real application → understand its behavior → convert verified flows into automated tests.

This does not remove the need for Developers or QA Engineers to review the results, but it can reduce repetitive testing work and provide a useful starting point for building repeatable test coverage.

In the full article, I cover the setup, prompts, real test cases, findings, generated Playwright tests, and important limitations step by step.

Read the full article:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

What Is Lovable AI? 5 Real-World Web App Case Studies

DevLycan — Sun, 13 Sep 2026 15:00:00 +0000

AI app builders are becoming increasingly capable of turning requirements and prompts into working interfaces and web applications.

For this experiment, I explored Lovable through five separate case studies, each designed to test a different type of work:

SaaS Landing Page Wireframe
AI Productivity Interactive Prototype
Digital Agency Website
Appointment Booking Web App
Mobile-first Food Ordering App

The goal was not only to evaluate the visual quality of the generated UI, but also to observe how Lovable handles structure, information hierarchy, responsive design, interactions, user flows, and basic application logic.

The article includes the actual prompts used in the experiments, screenshots of the results, observations from each case study, and demo links where the projects can be explored directly.

Key Takeaways

Lovable can be useful for quickly turning an idea into an initial version that can be reviewed and refined. It works particularly well for exploring layouts, prototyping user flows, and creating an early working version of a web application.

However, AI-generated applications should still be reviewed carefully before production, especially in areas such as business logic, validation, security, accessibility, database design, and testing.

I hope these case studies provide a practical reference for developers and anyone exploring AI-assisted application development.

👉 Read the full article and explore the demos:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

What Is GPT-6 Astra? Features, Pricing, and 3 Hands-On Tests

DevLycan — Tue, 08 Sep 2026 14:01:06 +0000

GPT-6 Astra is particularly interesting for one reason: it is increasingly designed for work that involves multiple connected steps, rather than isolated prompts and outputs.

To explore that in practice, I tested GPT-6 Astra through ChatGPT Work across three different scenarios:

Building a Project Management Web Application.
Analyzing sales data and producing a Spreadsheet + Executive Presentation.
Creating an interactive 3D Hat Customizer.

My goal was not simply to see whether the outputs looked good. I also wanted to evaluate how well the model could interpret requirements, structure the workflow, produce useful deliverables, and handle tasks that still require human review.

The article also covers:

Key GPT-6 Astra capabilities.
Differences from GPT-5.6 Sol.
API pricing.
Selected benchmark results.
Computer Use, Software Engineering, and Professional Work.
Prompts used in the hands-on tests.
Demo links for the web application examples.
Areas where human verification is still important.

Key Takeaways

GPT-6 Astra shows an increasingly clear shift from AI that mainly generates answers toward AI that can assist across a broader workflow:

Requirement → Analyze → Plan → Execute → Review → Deliver

That does not mean every result is production-ready without verification. However, the hands-on tests suggest that models like Astra are becoming more useful for workflows where the expected result is a finished artifact rather than a single response.

All screenshots shown in the article come from the actual tests, and the web application case studies include live demo links as well.

Read the full article:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

Figma MCP + Claude Code: Figma to Code, Tested from Design to Deploy

DevLycan — Mon, 07 Sep 2026 16:00:00 +0000

Turning a Figma design into a working website is still one of the slowest parts of web development. Measuring spacing one gap at a time, copying colour values line by line, and going through it all again the moment the design changes.

We ran an experiment to see whether connecting an AI agent directly to the Figma file would change that. This article documents the full path: creating a design in Figma Make, connecting Figma MCP to Claude Code, building a Next.js site, verifying it in GitHub Actions, and deploying to Vercel — then changing the design and measuring how much code had to change with it.

What you will be able to do after reading

Install and connect Figma MCP to Claude Code, and know which plan and seat type actually work.
Verify that the AI has read the design correctly before letting it write any code.
Build a Next.js site from a Figma file with automated checks and a production deployment.
Update the code when the design changes, touching only what actually moved.
Understand the limitations found in real use, which are not covered in the official documentation.

A few things the experiment turned up

The result looked identical to the design by eye, yet a closer review found seven spacing values that were wrong
After changing the design, only three source files needed editing, with no component rewritten
node-ids are not stable. Regenerating the design once meant correcting references across fourteen files
Quota depends on both plan and seat type. A View or Collab seat gets six calls per month even on a paid plan

Every step was carried out first-hand. All screenshots come from the machine used for the experiment, as do the measurements reported in the article.

The article is available in both Thai and English.

Read the full article:

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

Connecting a LINE Official Account to an AI Agent with MCP

DevLycan — Sat, 29 Aug 2026 00:30:00 +0000

LINE published an official MCP server for its Messaging API, which means an AI agent can now drive a LINE Official Account directly — sending messages, broadcasting promotions, and pushing Flex Message cards without writing any API code.

I set it up with Codex and worked through every capability the server exposes, from creating a fresh account to delivering a message to a real phone. This guide is the result: a complete walkthrough, and an honest account of the three places where the documentation and reality diverge.

Key takeaways

MCP is agent-agnostic. The same LINE server works with Codex, Claude Desktop, and Cline — only the config file format changes, from TOML to JSON.
Codex stores MCP config in TOML, at ~/.codex/config.toml. Most guides assume the JSON format used by Claude Desktop, which is the single most common setup mistake.
Verified account and API-capable account are different things. A free account can use the Messaging API, but get_follower_ids returns 403 Forbidden until the account is verified or on a premium plan.
Official security advice can conflict with official features. LINE's example config disables npm install scripts, which also prevents the headless browser that the rich menu tool depends on from being installed.
Agents have habits. Codex is a coding agent first: asked in natural language to build a rich menu, it wrote a Node script instead of calling the MCP tool. Naming the tool explicitly in the prompt fixes it.
Broadcasts cannot be recalled. Set default_tools_approval_mode = "writes" so the agent asks before any send.

Every screenshot comes from the actual working setup, including the errors.

The article is available in both English and Thai.

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

How to Use Facebook MCP with Claude Code to Publish and Schedule Page Posts

DevLycan — Wed, 26 Aug 2026 00:00:00 +0000

Publishing an article means repeating the same loop every time: write the
caption, open a browser, sign in to the Page, paste the link, set the schedule.

MCP closes that gap. This walkthrough connects the Facebook Page MCP server to Claude Code from scratch, through to a post that goes live on a real Page and a second post placed in the scheduling queue.

What this article covers

A working .mcp.json config you can copy, plus how to keep the token out of git.
Obtaining a Page Access Token from Meta, including the permission step most guides have yet to document.
Why "the token never expires" and "data access ends in 90 days" are two different things.
A table of 11 issues encountered during setup, each with its fix
Safety considerations before granting an AI the ability to publish to a public Page.

Every step was carried out end to end. All screenshots come from the actual test session, including the real error screens and how they were resolved.

The article is available in both English and Thai.

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com

AI Subscription vs Pay-as-You-Go: How Should You Actually Pay for AI?

DevLycan — Thu, 20 Aug 2026 23:00:00 +0000

Somewhere around your third automation script, you'll get hit with a bill you didn't expect. That's usually the moment it clicks: your $20/month subscription and your API key were never billed the same way.

I wrote up a full breakdown on this for Devlycan, but here's the short version for anyone building with AI:

A product subscription and API access are billed separately — paying for a plan doesn't grant you free API credit.
Subscriptions still carry usage limits. "Unlimited" rarely means unlimited.
API accounts have their own rate limits too — paying per token isn't paying for unlimited throughput.
Prompt caching and batch processing can meaningfully cut API costs, but only show up if you're calling the API directly.
A lot of coding agents today let you draw from your subscription's usage pool OR bill against the API for the same tool — it's not always two separate products.

My rule of thumb: subscriptions for direct, everyday work with AI. Pay-as-you-go for anything that needs to run inside a system you're building. If you do both, running them side by side is usually the most practical setup.

The article is available in both English and Thai.

Devlycan - Technology & Programming Insights

Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.

devlycan.com