DEV Community: DevLycan

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

Build Your Own AI Chatbot: A Step-by-Step Guide for Beginners

DevLycan — Sat, 15 Aug 2026 22:00:00 +0000

I recently put together a step-by-step guide to building your own AI chatbot from scratch.

The goal is not just to show the final code, but to explain how the pieces actually work together — from the frontend and backend to the AI API.

In the guide, you'll learn how to:

Understand the basic architecture of an AI chatbot.
Keep API keys securely on the server.
Choose and connect to an AI API.
Write a System Prompt.
Maintain conversation history.
Manage tokens and API costs.
Test chatbot responses and reduce hallucinations.
Prepare the application for deployment.

The entire walkthrough takes around one hour, includes screenshots from the actual implementation, and comes with a sample project you can download and explore.

If you're new to AI development and want to move from simply using AI tools to understanding how an AI-powered application is actually built, this might be a useful place to start.

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

Gemini vs GPT vs Claude vs Kimi: One Prompt, Four 3D Landing Pages

DevLycan — Sun, 09 Aug 2026 17:15:00 +0000

One Prompt, Four AI Coding Agents: What Changed in the Final Design?

I recently ran a practical experiment using Gemini 3.6 Flash, GPT-5.6 Sol, Claude Opus 5, and Kimi K3.

Each agent received the same main task: build a modern interactive 3D landing page for a fictional AI platform called NEXORA using HTML, CSS, Vanilla JavaScript, and Three.js. No design file, UI kit, or additional skill file was provided.

What made the experiment interesting was that the same prompt produced four noticeably different design directions.

Gemini focused on technical depth and product detail. GPT emphasized typography and brand personality. Claude produced a balanced and professional SaaS-style layout, while Kimi focused on clarity and straightforward structure.

This comparison is not intended to be a strict benchmark. The models, effort settings, and execution environments were not identical. Instead, the goal was to observe how different AI coding agents interpret the same requirements and make their own design decisions.

The article includes full-page results, strengths and limitations of each approach, and a Live Demo for every agent.

Read the full comparison:

Devlycan - Technology & Programming Insights

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

devlycan.com

Impeccable Skill: Building Web Pages Without AI Slop

DevLycan — Sun, 02 Aug 2026 18:00:00 +0000

AI coding agents can build polished interfaces surprisingly fast—but many of the results still look familiar: purple-blue gradients, equal-sized cards, rounded icons, and typography with little visual hierarchy.

This recurring style is often described as AI slop.

For this experiment, I used the same prompt to build the same web page twice:

First, with a standard AI coding agent.
Second, with the same agent using the Impeccable Skill.

The goal was not simply to compare which version looked better. I wanted to understand whether adding a dedicated design skill could change how the agent makes design decisions.

The difference was noticeable.

Without Impeccable, the page looked complete and functional, but it relied on common AI defaults. With Impeccable, the agent created a clearer hierarchy, used color with more restraint, introduced a more deliberate typography system, and avoided adding decorative content simply to fill the page.

I repeated the experiment across three interfaces:

An editorial magazine landing page.
A project-management dashboard.
A three-tier pricing page.

The article also includes:

A With vs. Without Impeccable comparison.
The prompts used in the experiments.
Installation with npx impeccable install.
How /impeccable init works.
The roles of PRODUCT.md and DESIGN.md.
Useful slash commands for typography, color, layout, motion, and responsive design.
Best practices and limitations worth knowing.

My main takeaway is that Impeccable does not magically turn an AI agent into a designer. Instead, it gives the agent stronger design context, vocabulary, and constraints.

That can be enough to move the result from generic decoration toward a more deliberate and reusable design system.

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 Claude Design? Building Visuals and Interactive Prototypes with AI

DevLycan — Sat, 25 Jul 2026 17:30:00 +0000

AI is moving beyond text and code into visual design and interactive prototyping.

In this article, I explore Claude Design, an AI-powered workspace that helps users turn ideas and natural-language prompts into visual drafts, landing pages, dashboards, presentations, and interactive prototypes.

Unlike traditional static mockup tools, Claude Design can generate runnable front-end experiences using HTML, CSS, and JavaScript, making the result closer to a real product than a simple image or wireframe.

The article covers:

• What Claude Design is and how it works.
• Key features and practical use cases.
• How it differs from a normal AI chat.
• Benefits and current limitations.
• How to write a clearer design prompt.
• Real prompt examples for dashboards and landing pages.
• How Claude Design can fit into a real product workflow.

Claude Design is not a replacement for designers or developers. However, it can make the early stages of ideation, communication, and prototyping faster and easier to refine.

Read the full article here:

Devlycan - Technology & Programming Insights

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

devlycan.com

What Is Claude Cowork? When AI Starts Working Like a Teammate.

DevLycan — Tue, 21 Jul 2026 18:00:00 +0000

If you've used Claude Code, you already know how much changes when AI stops suggesting and starts executing. In 2026, Anthropic brought that same agentic architecture to everyday knowledge work with Claude Cowork — no terminal required.

Instead of prompting one command at a time, you define a goal. Claude plans the steps, runs multi-step work, and returns finished results for review.

Here's a practical breakdown:

AI Assistant vs AI Cowork — why responding to commands is fundamentally different from collaborating on a workflow.
Core capabilities — analyzing files, organizing data, and producing documents end to end.
Connected workflows — how it works with tools you already use.
Who benefits most — from developers to content creators and freelancers.
Using it responsibly — where human judgment still matters.

If you're exploring how agentic AI fits into real work, this is a good place to start. Read the full article below.

📖 Available in both English and Thai — read whichever you prefer:

🇬🇧 English:

Devlycan - Technology & Programming Insights

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

devlycan.com

🇹🇭 Thai:

Devlycan - Technology & Programming Insights

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

devlycan.com

What Is Claude Code? When AI Becomes a Serious Coding Assistant

DevLycan — Sat, 18 Jul 2026 18:30:00 +0000

Most of us have used Claude in a chat window. But Anthropic also ships
Claude Code — an AI coding agent that works from your terminal, reads
your actual project, and edits real files. It's a different way of working,
and I wanted to write down what I learned.

The core difference

When you ask an AI in a chat window, it only sees the code you paste in.
Claude Code reads the whole project structure through the terminal, so it
can tell you which files need to change before you touch anything —
database, controllers, routes, UI, validation, permissions.

What this article covers

What Claude Code can do — explain code, debug across the stack, refactor, add features, and support your Git workflow.
A real example — I ran it against a multi-tenant quotation platform had it analyze the whole structure Real output screenshots included.
Installation and slash commands — /init, /plan, /diff, /context, and advanced ones like /goal.
Who it's for, plus a recommended workflow: analyze → plan → edit → review diff → test → commit.
What to watch out for — commit before letting AI edit, review every diff, never paste API keys.

One thing worth knowing upfront: Claude Code needs a paid plan (Pro, Max,
Team, Enterprise, or Console API). The free Claude plan doesn't include it.

Full article (available in English and Thai):

Devlycan - Technology & Programming Insights

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

devlycan.com

What Is Claude AI? Why It Matters for Modern Work

DevLycan — Wed, 15 Jul 2026 18:30:00 +0000

Everyone is asking which AI assistant is "the best." That may be the wrong question. The better one is whether a given tool actually fits the way you work.

This guide takes a clear, no-hype look at Claude AI by Anthropic — what it does, where it fits, and what it costs.

What's covered:

What Claude is — how it handles reading, writing, summarizing, analysis, and coding
The model lineup — Haiku for speed, Sonnet for balanced everyday work, Opus for complex reasoning, and Fable 5 for long-horizon autonomous tasks.
Who benefits most — writers, developers, business teams, and marketers.
Real pricing and usage limits — Free, Pro, and Max, with honest notes on what "limited" actually means.
What to watch out for — handling confidential data, API keys, and verifying output before it reaches production.

For developers, the most relevant section is Claude Code: reading project structures, editing files, debugging, and fitting into an actual development workflow rather than sitting in a separate chat window.

The article does not argue that Claude is the best AI available. It argues that the value of any AI tool depends on how well it matches your workflow — and how deliberately you use it.

Originally published on Devlycan. A Thai version is also available here:

Devlycan - Technology & Programming Insights

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

devlycan.com

Stop Letting AI Guess Your Requirements — Try grill-with-docs

DevLycan — Sun, 12 Jul 2026 17:30:00 +0000

Ask an AI coding agent to "build an online appointment booking system," and it will start writing code in seconds—guessing everything you left out along the way.

Can customers book without an account? Can two people book the same staff member at the same time? What even separates a Customer from a Staff member from an Admin? When your prompt doesn't answer these, the agent decides for you—and some of those guesses will be wrong.

In this article, I walk through grill-with-docs, a skill from Matt Pocock's skills repository that interviews you one question at a time before any code gets written. It sharpens vague requirements into precise terms, writes the agreed vocabulary into a CONTEXT.md glossary, and produces a spec you can actually build from.

The article covers:

What grill-with-docs does and how it fits into an agentic workflow.
Installation and when to reach for it (and when not to).
A full step-by-step walkthrough with real prompts and screenshots.
Common mistakes to avoid and its practical limitations.

Read the full walkthrough here 👇

Devlycan - Technology & Programming Insights

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

devlycan.com

Design Landing Pages with Google Stitch & Antigravity (MCP)

DevLycan — Thu, 09 Jul 2026 13:13:18 +0000

Designing a landing page with AI is becoming easier. However, turning that design into clean, structured, and usable frontend code is still an important challenge.

I recently updated an article that shares a practical workflow for using Google Stitch together with Antigravity through MCP to design landing pages and convert them into HTML/Tailwind CSS more accurately.

Key topics covered in the article:

• How to define a clear landing page concept before starting the design process
• How to generate UI designs with Google Stitch using prompts
• How to refine the design for real-world use, including CTA placement, layout flow, whitespace, and mobile UX
• How to create a DESIGN.md file to help AI understand the design system
• How to connect Google Stitch with Antigravity through MCP
• How to use the Stitch design as the single source of truth for code generation
• How to write a more structured prompt to reduce inconsistencies between design and code
• What to review before deployment, including responsiveness, semantic HTML, performance, and UX quality

The main idea of this workflow is not only to generate a visually appealing landing page, but also to preserve structure, spacing, visual hierarchy, responsiveness, and consistency with the original design.

The article also includes screenshots, step-by-step guidance, and prompt examples that can be adapted for real development workflows.

I hope this will be useful for developers, frontend engineers, and UX/UI designers who are exploring how AI can support the design-to-code process more effectively.

Read the full article here:

Devlycan - Technology & Programming Insights

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

devlycan.com