Practical MCPs
for Nuxt Developers
Daniel Kelly
Husband and Father
Full Stack developer (10 years)
Lead Instructor @ Bitter Brains
MCPs are pretty hyped
But there are very practical use cases
I've used some of them in my own workflows
5 MCPs
- Nuxt and Nuxt UI MCP
- A browser automation MCP
(like Playwright) - Github MCP
- An image generation MCP
(like gemini)
I've found useful:
For each MCP let's:
- Do a high level overview
- And then do some hands on coding to put it through it's paces
For our live coding demos,
we'll be working to rebuild this dummy comments platform
Live coding === unpredictable
Coding with Agents === non-deterministic
Live coding === unpredictable
Coding with Agents === non-deterministic
Nuxt MCP
Nuxt MCP
Tools and Resources for Reading Documentation
Nuxt MCP
Tools for Reading
Documentation
Keeps me from jumping back and forth to docs and makes how-to instructions immediately available to agent for task
Nuxt MCP
🔥 Tools are auto-discoverable by the AI Agents
(often it will need nudges though)
Nuxt MCP
Has prompts for slash command autocomplete for explicitly adding context
Nuxt MCP
Has prompts for slash command autocomplete for explicitly adding context
Prompts Screenshot
Nuxt MCP
Works in claude code and others too!
Prompts Screenshot
(and many more since it's an MCP)
Nuxt MCP
Also has tools for blog posts
and and deployments
(I haven't found these quite as helpful)
Nuxt MCP is useful but for the most part the latest models are pretty caught up
The real game changer to me is...
Nuxt UI MCP
Nuxt UI MCP
Component Tools
- list_components
- list_composables
- get_component
- get_component_metadata
- search_components_by_category
Template Tools
- list_templates
- get_template
Example Tools
- list_examples
- get_example
Nuxt UI MCP
Documentation Tools
- list_documentation_pages
- get_documentation_page
Migration Tools
- get_migration_guide
Nuxt UI MCP
Nuxt UI MCP
(theming help, setup, etc)
Nuxt UI MCP
Prompts
Let's start our project from a
Nuxt UI Template
(use setup project with template prompt)
🧑💻
We'll use the Nuxt UI MCP more as we develop our app
Browser Automation
MCP(s)
Browser Automation MCP(s)
Why? So agents can:
- interact with application
- inspect JS console
- Take screenshots
Browser Automation MCP(s)
Why? So agents can:
- interact with web applications/sites
- inspect JS console
- Take screenshots
- Perform performance audits
- Research other websites
Browser Automation MCP(s)
You've got options:
- Google chrome devtools MCP
- Playwright MCP
(Debbie will go deep into this later today) - Puppeteer
@modelcontextprotocol/server-puppeteer is deprecated - Cursor's Built-in Browser Tool
Let's do competitor research with Cursor's built-in browser tool
and start building out our app and homepage with Nuxt UI
🧑💻
Github MCP
Github MCP
Why?
- Repository Management: Browse and query code, search files, analyze commits, and understand project structure across any repository you have access to.
- Issue & PR Automation: Create, update, and manage issues and pull requests. Let AI help triage bugs, review code changes, and maintain project boards.
- CI/CD & Workflow Intelligence: Monitor GitHub Actions workflow runs, analyze build failures, manage releases, and get insights into your development pipeline.
Github MCP
Why?
- Repository Management
- Issue & PR Automation
- CI/CD & Workflow Intelligence
- Code Analysis: Examine security findings, review Dependabot alerts, understand code patterns, and get comprehensive insights into your codebase.
- Team Collaboration: Access discussions, manage notifications, analyze team activity, and streamline processes for your team.
Let's work an issue from Github in Cursor
🧑💻
Image Generation MCPs
Image Generation MCPs
Why?
- Generate supporting site images quickly
- Generate images from references in project
Image Generation MCPs
- Gemini 2.5 Flash Image (Nano Banana)
- Open AI - GPT Image 1
- Midjourney
- Etc
You've got options:
Pretty much any of the major image models have MCP connectors
👈
Let's create a blog for our app to help with organic traffic and use a gemini image mcp
for quick consistent blog post images
🧑💻
I promised MCP servers auto generated from Nuxt API Endpoints
Finally
// nuxt.config.ts
defineNuxtConfig({
nitro:{
openAPI: {
meta: {
title: '',
description: '...',
version: '1.0'
}
}
}
})harsha-iiiv/openapi-mcp-generator
Nitro +
// server/api/myEndpiont
defineRouteMeta({
openAPI: {
tags: ["myEndpiont"],
description: "Test route description",
parameters: [
{ in: "query", name: "test", required: true }
],
},
});# Generate an MCP server (stdio)
openapi-mcp-generator --input http://localhost:3000/_openapi.json --output ./my-project-mcp
danielkelly_io
I'll tweet out the slides and the codebase
Thank you 🙏
Go code awesome things!
(with Nuxt and AI 😉)
Practical MCPs for Nuxt Developers
By Daniel Kelly
