Hi, it's Reza! 👋
Back to all articles

Building a Full-Stack app with Nuxt and the Supabase MCP

Vue
Nuxt

Your AI agent could create database tables, write server routes and build the UI all from a single conversation.

It’s not a hypothetical scenario. With agentic AI and the Supabase MCP, your AI agent gets direct access to your database. It creates schemas, sets up row-level security, generates API routes that match the schema it just built, and constructs a frontend that fits it all together. So you can build full stack with one conversation.


Here's how to build a task manager with Nuxt and Supabase, guided entirely by an AI agent.


Your Agent's Database Superpower with Supabase MCP


MCP (Model Context Protocol) is a standard that gives AI agents access to external tools and services. The Supabase MCP gives your agent the ability to interact with your Supabase project directly and create tables, manage schemas, run queries, and configure policies.


Configure it in your Claude Code settings:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--access-token",
        "YOUR_SUPABASE_ACCESS_TOKEN"
      ]
    }
  }
}


Once connected, the agent can "see" your database the same way you see it in the Supabase dashboard. It can list tables, inspect columns, create new schemas, and apply RLS policies. The agent doesn't just generate SQL for you to copy-paste, it has the power to execute it too.


This is the key difference between agentic AI and a simple code generator. The agent acts on your behalf across multiple systems and maintains context the entire time.


Schema Design Through Conversation

Start with the data model. Instead of opening the Supabase dashboard and clicking through the table editor, describe what you need:

"Create a tasks table with columns: id (uuid, primary key, default gen_random_uuid()),
title (text, not null), description (text), status (text, default 'todo',
check constraint for 'todo', 'in_progress', 'done'), priority (text, default 'medium',
check constraint for 'low', 'medium', 'high'), due_date (timestamptz),
created_at (timestamptz, default now()), user_id (uuid, references auth.users)."


The agent calls the Supabase MCP, creates the table, and confirms the schema. You can verify it immediately: "Show me the current schema for the tasks table.”


Now add security:

"Enable row-level security on the tasks table. Add policies so authenticated
users can only select, insert, update, and delete their own tasks where
user_id matches auth.uid()."


The agent applies four RLS policies through the MCP. You don’t have to maintain SQL files or run migrations manually. The database is ready.


Adding Server Routes and API Layer

With the schema in place, the agent already knows your data structure. This means the API layer it generates will match the database exactly (so no documentation drift and no type mismatches).

"Create Nuxt server routes for CRUD operations on the tasks table.
Put them in server/api/tasks/. Use the Supabase client from
@supabase/supabase-js."


The agent generates a complete set of routes. Here's what the list endpoint looks like:

// server/api/tasks/index.get.ts
import { serverSupabaseClient, serverSupabaseUser } from '#supabase/server'

export default defineEventHandler(async (event) => {
  const client = await serverSupabaseClient(event)
  const user = await serverSupabaseUser(event)

  const { data, error } = await client
    .from('tasks')
    .select('*')
    .eq('user_id', user.id)
    .order('created_at', { ascending: false })

  if (error) {
    throw createError({ statusCode: 500, message: error.message })
  }

  return data
})


Notice: the column names match the schema. The user_id filter matches the RLS policy logic. The ordering uses created_at, which the agent knows exists because it created the column.


Building the UI

For the frontend, the agent has full context: it knows the schema, the API routes, and the data shapes.

"Create a TaskBoard component with three columns: Todo, In Progress,
and Done. Fetch tasks from /api/tasks and group them by status.
Use Tailwind CSS for styling."

<script setup lang="ts">
interface Task {
  id: string
  title: string
  description: string | null
  status: 'todo' | 'in_progress' | 'done'
  priority: 'low' | 'medium' | 'high'
  due_date: string | null
  created_at: string
}

const { data: tasks, refresh } = await useFetch<Task[]>('/api/tasks')

const columns = computed(() => ({
  todo: tasks.value?.filter(t => t.status === 'todo') ?? [],
  in_progress: tasks.value?.filter(t => t.status === 'in_progress') ?? [],
  done: tasks.value?.filter(t => t.status === 'done') ?? [],
}))

async function updateStatus(taskId: string, status: Task['status']) {
  await $fetch(`/api/tasks/${taskId}`, {
    method: 'PATCH',
    body: { status },
  })
  await refresh()
}
</script>

<template>
  <div class="grid grid-cols-3 gap-6">
    <div v-for="(col, key) in columns" :key="key" class="space-y-4">
      <h2 class="text-lg font-semibold capitalize">
        {{ key.replace('_', ' ') }}
      </h2>
      <div
        v-for="task in col"
        :key="task.id"
        class="rounded-lg border p-4 shadow-sm"
      >
        <h3 class="font-medium">{{ task.title }}</h3>
        <p v-if="task.description" class="mt-1 text-sm text-gray-600">
          {{ task.description }}
        </p>
        <span
          class="mt-2 inline-block rounded-full px-2 py-1 text-xs"
          :class="{
            'bg-red-100 text-red-700': task.priority === 'high',
            'bg-yellow-100 text-yellow-700': task.priority === 'medium',
            'bg-green-100 text-green-700': task.priority === 'low',
          }"
        >
          {{ task.priority }}
        </span>
      </div>
    </div>
  </div>
</template>


The Task interface matches the database schema exactly and the status values correspond to the check constraint. The priority badge colors are a design decision the agent made but it’s something you can refine with a follow-up prompt.


Want drag-and-drop? "Add drag-and-drop with vuedraggable so users can move tasks between columns. Call updateStatus when a task is dropped." The agent extends what's already there.


The Agentic Workflow

Look at what just happened across one conversation:

  1. Database schema created through the Supabase MCP — no SQL files, no dashboard clicking

  2. Security policies applied directly to the database

  3. API routes generated with full schema awareness

  4. Frontend components built with types matching the database


Each step informed the next and the agent didn't forget the schema when writing routes. It didn't forget the API shape when building components. MCPs are what make this continuity possible because the agent interacts with real services and carries that context forward.


What This Means for You

The Supabase MCP is one example. The pattern is what matters. Stripe MCP for payment flows. GitHub MCP for repository management. Any service with an MCP server becomes something your AI agent can operate directly.


Full-stack development doesn't get simpler but the mechanical parts get faster. You still need to know what RLS policies your app needs, what data model supports your features, how Nuxt server routes work. The agent handles the translation from your decisions to working code and configured services.