DEV Community: DevLycan

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

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