DEV Community

Cover image for 🎉 Build Your Own Chat MCP Client with Next.js⚡

🎉 Build Your Own Chat MCP Client with Next.js⚡

Shrijal Acharya on May 12, 2025

Tired of building the same styled AI chatbot applications with Next.js? 😪 I bet you are, but how about building an MCP-powered chat app that conne...
Collapse
 
nevodavid profile image
Nevo David

been down this rabbit hole myself, honestly building from scratch always sounds cool till you're three layers deep in configs - you think starting with your own client really pays off over just tweaking what's out there already?

Collapse
 
shricodev profile image
Shrijal Acharya

Thanks for checking out Nevo. This one's basically very basic and something you can easily set up yourself without all the hassle when you have some MCP servers to test for yourself.

I wouldn't necessarily say using/building your own client is that beneficial if you plan to make it production-ready, but for learning purposes or just tinkering with how MCP works under the hood, it's somewhat beneficial.

Collapse
 
aayyusshh_69 profile image
Aayush Pokharel

Haha, are you using AI for the comments recently. Maybe Postiz?

Collapse
 
sawata_2_shayne profile image
Shayne Villarin

Going to give this a shot. Starred your repo. 👁‍🗚

Collapse
 
shricodev profile image
Shrijal Acharya

Thank you, @sawata_2_shayne. Give it a shot with your MCP workflow and let me know how it goes! :)

Collapse
 
sawata_2_shayne profile image
Shayne Villarin

Sure!

Collapse
 
mike_c22a5f928ddac6144ec5 profile image
Mike

This step-by-step tutorial for building a Next.js MCP chat client is refreshingly clear—much like how a site like characterheadcanongen.com quietly streamlines creating complete character profiles in seconds.

Collapse
 
shricodev profile image
Shrijal Acharya

Good to hear that, Mike! Thanks for checking it out ✌

Collapse
 
wenheng_cui_fdd7c788d794f profile image
wenheng cui

Nice article! I love using Pokémon Tools,Game Randomizers,Fan Resources sites to spice up my playthroughs. They make planning challenges like Nuzlocke runs so much easier. The random team generator is especially fun for trying new strategies. Keep up the great work!

Collapse
 
shricodev profile image
Shrijal Acharya

Thanks!

Collapse
 
bh4skar profile image
Bhaskar Prajapati

Good one. Is it limited to Composio when working with remotely hosted MCP servers?

Collapse
 
shricodev profile image
Shrijal Acharya

Thanks! Currently, this is built to support Composio MCP servers or any local MCP servers you have. But if there are any other APIs that let you communicate with their hosted MCP servers, it should be somewhat easy to transition from Composio if you wish.

There are tons of MCP servers available on Composio itself. You can check them all here: mcp.composio.dev

Do you have any specific provider in mind?

Collapse
 
bh4skar profile image
Bhaskar Prajapati

not for now. Maybe later. I just wanted to see if the application is dependent on the Composio package.

Collapse
 
shricodev profile image
Shrijal Acharya

Guys, share your feedback in the comments! ✌

Collapse
 
dotallio profile image
Dotallio

Super helpful, thanks!

Collapse
 
shricodev profile image
Shrijal Acharya

Thanks, Dotallio! :)

Collapse
 
necatiozmen profile image
Necati Özmen

We are preparing a guide for using Composio MCP's with Voltagent. github.com/VoltAgent/voltagent

Collapse
 
shricodev profile image
Shrijal Acharya

Great, would love to see Composio MCP servers integration with Voltagent. Share us the link to the project once you're done building it.

Collapse
 
da_rin_thei profile image
Da Rin Thei

I could be completely wrong, but aren't MCP servers risky? Why use AI to represent yourself, and can this have hazards, right? @shricodev

Collapse
 
shricodev profile image
Shrijal Acharya

@da_rin_thei Could be, I'm not sure. Just make sure that you are aware of all the actions it can take and all the tools available. If you want to limit the actions, instead of giving entire app access, you can limit the actions like so with Composio:

actions: ["GMAIL_SEND_EMAIL", "SLACK_SENDS_A_MESSAGE_TO_A_SLACK_CHANNEL"],
Enter fullscreen mode Exit fullscreen mode

Now, only send mail and send message action is available to be called. If you use some other providers, they should have a similar way to configure. Hope it helps!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Been that guy fighting through setups like this - love when it finally clicks and just runs, feels like winning.

Collapse
 
shricodev profile image
Shrijal Acharya

Exactly, feels amazing when you build stuff like these, and it just works. It's pure developer adrenaline. Thanks for checking out, Nathan! 🙌

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

insane amount of details in here, honestly i get hyped seeing fully custom setups spelled out like this - you ever feel like the hardest part is just keeping the momentum when stuff gets complex?

Collapse
 
shricodev profile image
Shrijal Acharya

Thanks, Nathan, glad you like this. The hard part depends for me. If I plan to make a project more iterative and production-ready, then as you said, keeping the momentum is probably the hardest part. For such personal projects, coming up with the idea is maybe the hard part, and building the project follows.

Collapse
 
larastewart_engdev profile image
Lara Stewart - DevOps Cloud Engineer

Love the idea with the demos. 👏🏻

Collapse
 
shricodev profile image
Shrijal Acharya

Thank you, @larastewart_engdev 🙌

Collapse
 
migueltan_work profile image
Miguel Tan

Thank you for sharing MCP detail. I am going to learn and give this a shot. It works with react?

Collapse
 
shricodev profile image
Shrijal Acharya

It's possible. If you plan on running it with React, I suggest running the server logic in a separate Express backend, and it should be all good. You just need to spin up another Express server.

If you build one, do share the link to the repo. Others might find it helpful.

Collapse
 
mukulwebdev profile image
Mukul Rana

The reason why i open dev.to for this gold knowledge.
Amazing explanation man, beginner to advance.

Collapse
 
shricodev profile image
Shrijal Acharya

Means a lot, Mukul 🙌. Thanks for checking this out. Let me know if you give this a shot and run into any issues.