Practical MCPs

for Nuxt Developers

@danielkelly_io

@danielkellyio

Alabama, USA

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:

  1. Do a high level overview
  2. 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 😉)