# How to Integrate Meetup with V0

- Tool: V0
- Difficulty: Intermediate
- Time required: 20 minutes
- Last updated: April 2026

## TL;DR

To integrate Meetup with V0 by Vercel, create a Next.js API route that queries the Meetup GraphQL API to fetch events and groups. V0 generates the event discovery UI; you add your Meetup API key or OAuth credentials to Vercel environment variables and deploy. The result is a local event discovery page or community group dashboard built on top of Meetup's 35 million member network.

## Build Local Event Discovery and Community Pages Using the Meetup API

Meetup's API grants access to community group profiles, upcoming event listings, member counts, RSVP data, and past event histories. Unlike Eventbrite which focuses on one-off ticketed events, Meetup specializes in recurring community gatherings — weekly tech meetups, monthly book clubs, and interest-based groups that meet regularly. This makes Meetup data valuable for community portals, local city guides, and tech scene directories.

V0 generates the event discovery UI — location-based event cards, group profile pages, RSVP buttons, and recurring event calendars. Your Next.js API routes handle the GraphQL queries to Meetup, transform the response data, and serve it to your components. Since Meetup uses GraphQL, your API route acts as a GraphQL client, sending POST requests to Meetup's endpoint with query and variables.

Meetup's API access requires creating a consumer key at meetup.com's developer portal. Public group and event data is accessible with basic API authentication. User-specific actions like RSVP management require OAuth2 with user consent. This tutorial covers the most common use case: displaying public Meetup event data in a V0-generated interface.

## Before you start

- A V0 account at v0.dev with a Next.js project created
- A Meetup account at meetup.com
- A Meetup API consumer key — create one at secure.meetup.com/meetup_api/key
- For OAuth2 user flows: a registered Meetup OAuth consumer application with client ID and secret
- A Vercel account connected to your V0 project for deployment

## Step-by-step guide

### 1. Generate the Events Discovery UI with V0

Open your V0 project and prompt V0 to generate the event discovery interface. Meetup events include rich data: event title, date and time, event URL, venue details (name, address, city, latitude/longitude), a description, RSVP count, photo URL, fee information, and the group that is hosting it. Design your UI around the fields you want to display prominently.

For a local events page, a grid of cards with event photo, title, date/time, venue, and RSVP count works well. For a group directory, a list layout with group avatar, name, member count, and next event is common. Ask V0 to include loading skeleton states and an empty state message for when no events match the search criteria.

Specify that event data should be fetched from /api/meetup/events (or /api/meetup/groups for group listings) — V0 will wire up the components to these routes with the appropriate fetch calls. Include a location search or category filter UI to give users control over the results they see. V0 can generate the filter state management with React hooks.

**Expected result:** V0 generates an events discovery page with a search bar, filters, and event card grid using mock data. Cards are wired to /api/meetup/events which does not exist yet.

### 2. Create the Meetup GraphQL API Route

Create a new file at app/api/meetup/route.ts. The Meetup API v3 uses GraphQL, so your route sends POST requests to https://api.meetup.com/gql with a JSON body containing a query string and variables object. The response is a standard GraphQL response with a data key.

For fetching upcoming events near a location, use Meetup's keywordSearch query or the upcomingEvents query on a specific group. The keywordSearch query accepts a filter object with lat, lon, radius, and source fields. The upcomingEvents query on a group object takes a groupUrlname and returns the next N events.

Set the Authorization header to Bearer {access_token} where the token is your Meetup OAuth access token. For a service account integration where you are displaying public Meetup data on your own site (not user-specific data), you can obtain a long-lived token using the OAuth2 client credentials flow. This token goes in your MEETUP_ACCESS_TOKEN environment variable.

The GraphQL response structure nests data under the query name. For keywordSearch, the events are in data.keywordSearch.edges[].node. Always check the Meetup GraphQL schema explorer at api.meetup.com/gql for the exact field names available in queries.

```
import { NextRequest, NextResponse } from 'next/server';

const MEETUP_GRAPHQL_URL = 'https://api.meetup.com/gql';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const lat = searchParams.get('lat') || '37.7749';
  const lon = searchParams.get('lon') || '-122.4194';
  const radius = searchParams.get('radius') || '10';
  const topic = searchParams.get('topic') || 'tech';

  const token = process.env.MEETUP_ACCESS_TOKEN;
  if (!token) {
    return NextResponse.json(
      { error: 'Meetup API token not configured' },
      { status: 500 }
    );
  }

  const query = `
    query GetUpcomingEvents($lat: Float!, $lon: Float!, $radius: Float!, $topic: String!) {
      keywordSearch(
        filter: {
          lat: $lat
          lon: $lon
          radius: $radius
          source: EVENTS
          query: $topic
        }
      ) {
        edges {
          node {
            result {
              ... on Event {
                id
                title
                dateTime
                eventUrl
                rsvpState
                going
                venue {
                  name
                  address
                  city
                }
                group {
                  name
                  urlname
                  groupPhoto {
                    source
                  }
                }
              }
            }
          }
        }
      }
    }
  `;

  try {
    const response = await fetch(MEETUP_GRAPHQL_URL, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query,
        variables: {
          lat: parseFloat(lat),
          lon: parseFloat(lon),
          radius: parseFloat(radius),
          topic,
        },
      }),
    });

    if (!response.ok) {
      return NextResponse.json(
        { error: 'Meetup API request failed' },
        { status: response.status }
      );
    }

    const data = await response.json();

    if (data.errors) {
      return NextResponse.json(
        { error: data.errors[0].message },
        { status: 400 }
      );
    }

    const events = data.data?.keywordSearch?.edges
      ?.map((edge: any) => edge.node.result)
      .filter(Boolean) || [];

    return NextResponse.json({ events });
  } catch (error) {
    console.error('Meetup API error:', error);
    return NextResponse.json(
      { error: 'Failed to fetch Meetup events' },
      { status: 500 }
    );
  }
}
```

**Expected result:** The API route returns an array of upcoming Meetup events for the specified coordinates and topic after the access token is configured.

### 3. Add Meetup API Credentials to Vercel Environment Variables

You need a Meetup OAuth access token to authenticate API requests. For a service integration displaying public Meetup data on your own site, the simplest approach is to create a Meetup OAuth consumer app and use the OAuth2 Authorization Code flow once to generate a long-lived token that you store in environment variables.

To set up: go to secure.meetup.com/meetup_api/key and create a new OAuth consumer. Note the Consumer Key (Client ID) and Consumer Secret. Then use the Meetup OAuth flow to obtain an access token for your own Meetup account. The access token authorizes your app to read public Meetup data. Meetup's access tokens have an expiry — check their developer documentation for the current token lifetime and refresh token process.

In Vercel Dashboard → Settings → Environment Variables, add MEETUP_ACCESS_TOKEN with your OAuth access token value. If you also need MEETUP_CLIENT_ID and MEETUP_CLIENT_SECRET for a user-facing OAuth flow, add those as well. After adding variables, trigger a redeployment.

Note: Meetup has been gradually updating its API access model. If you encounter access issues, check the current state of Meetup's API documentation at api.meetup.com — the available authentication methods and endpoints may have changed since this guide was written.

**Expected result:** MEETUP_ACCESS_TOKEN is set in Vercel. The events endpoint returns real Meetup events after redeployment.

### 4. Add a Group-Specific Events Route

Many use cases require fetching events for a specific Meetup group rather than searching by location — for example, embedding a tech community's events on their own website, or building a community hub for a specific organization's Meetup group.

Create app/api/meetup/group/route.ts that accepts a groupUrlname query parameter and fetches that group's upcoming events using the proGroup GraphQL query. The group URL name is the slug in the Meetup URL — for https://www.meetup.com/javascript-san-francisco/, the urlname is 'javascript-san-francisco'.

This route returns the group's details (name, member count, description, next event) and a list of upcoming events. The response can be used to build embedded event widgets, group profile pages, or recurring event calendars. You can also fetch past events by using the pastEvents field in the group query, useful for building event archives or showing a group's activity history.

```
import { NextRequest, NextResponse } from 'next/server';

const MEETUP_GRAPHQL_URL = 'https://api.meetup.com/gql';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const urlname = searchParams.get('urlname');

  if (!urlname) {
    return NextResponse.json(
      { error: 'groupUrlname is required' },
      { status: 400 }
    );
  }

  const token = process.env.MEETUP_ACCESS_TOKEN;
  if (!token) {
    return NextResponse.json(
      { error: 'Meetup API token not configured' },
      { status: 500 }
    );
  }

  const query = `
    query GetGroupEvents($urlname: String!) {
      proNetworkBySlug(slug: $urlname) {
        id
        name
        urlname
        description
        memberships {
          count
        }
        upcomingEvents(input: { first: 5 }) {
          edges {
            node {
              id
              title
              dateTime
              eventUrl
              going
              venue {
                name
                city
              }
            }
          }
        }
      }
    }
  `;

  try {
    const response = await fetch(MEETUP_GRAPHQL_URL, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query, variables: { urlname } }),
    });

    const data = await response.json();
    return NextResponse.json(data.data || {});
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch group events' },
      { status: 500 }
    );
  }
}
```

**Expected result:** The group endpoint returns a specific Meetup group's details and upcoming events, enabling group-specific event widgets.

## Best practices

- Cache Meetup API responses for at least 15-30 minutes since event data changes infrequently — this improves performance and avoids unnecessary API calls.
- Sanitize Meetup event descriptions before rendering since they may contain HTML — either strip tags for plain text excerpts or use a safe HTML renderer to prevent XSS.
- Always check for the errors array in GraphQL responses before accessing data — GraphQL can return partial results with errors alongside them.
- Include fallback content for when Meetup API is unavailable — event data sites should degrade gracefully with cached data or placeholder messages rather than showing broken UI.
- Link users to the Meetup event page for RSVP actions rather than implementing your own RSVP system — managing RSVPs requires more complex OAuth user delegation and Meetup's terms of service.
- Filter events by upcoming dates on the server side before returning to the frontend — Meetup's API may include past events in some query results depending on how filters are applied.
- Test with real coordinates and valid topic keywords before deploying — Meetup's search returns empty results for invalid coordinates rather than an error, which can look like a bug.

## Use cases

### Local Tech Events Discovery Page

Build a page listing upcoming tech meetups in a specific city. Fetch events from Meetup's API filtered by location and topic categories like 'tech', 'javascript', or 'machine-learning'. Display event cards with date, location, RSVP count, and a link to the Meetup event page.

Prompt example:

```
Create a local events page with a city search input and a grid of event cards. Each card shows the event photo (or a placeholder), event title, group name, date and time, venue name, current RSVP count, and a 'View on Meetup' link button. Fetch upcoming events from /api/meetup/events?lat=37.7749&lon=-122.4194&radius=10&topic=tech. Use Tailwind CSS card styling.
```

### Community Group Profile Directory

Create a directory page listing Meetup groups in a category, showing each group's name, description, member count, and most recent event. Useful for tech community websites, co-working spaces, and city startup ecosystems that want to showcase local groups.

Prompt example:

```
Build a meetup group directory page with a filter sidebar (category, location radius) and a list of group cards. Each card shows group name, category badge, member count, next event date, and a description excerpt. Fetch from /api/meetup/groups?city=San+Francisco&category=technology. Add pagination with a 'Load more' button. Sort by member count by default.
```

### Embedded Events Widget for a Tech Blog

Add a sidebar widget on a developer blog or community site that shows the next 3 upcoming events for a specific Meetup group. Readers can see what events are coming up from their local community without leaving the site.

Prompt example:

```
Create a compact events sidebar widget that displays the next 3 upcoming events for a specific Meetup group. Show event title, date formatted as 'Tuesday, March 31', time, and RSVP count. Fetch from /api/meetup/upcoming?groupUrlname=javascript-san-francisco. Add a 'See all events on Meetup' footer link. Keep the widget under 300px wide.
```

## Troubleshooting

### 401 Unauthorized — 'Not authorized to make this request' from Meetup API

Cause: The MEETUP_ACCESS_TOKEN is missing, expired, or was not generated with the correct OAuth scopes for the data being requested.

Solution: Go through the Meetup OAuth2 flow again to obtain a fresh access token. Ensure you request the necessary scopes — for reading public event data, the 'basic' scope is typically sufficient. Check the Meetup API documentation for current scope requirements and token expiry periods.

### GraphQL errors in the response — 'errors' array present with message about unknown fields

Cause: Meetup has updated their GraphQL schema since the query was written, and some fields or query names no longer exist or have been renamed.

Solution: Use Meetup's GraphQL introspection or their developer playground to check the current schema. Run the introspection query to get the full current schema, then update your query to use the correct field names. The Meetup API is actively developed and field names do change.

```
// Test your query in the Meetup GraphQL playground first:
// Visit: https://api.meetup.com/gql (with a valid Authorization header)
// Send an introspection query to see all available types and fields
```

### Events array is empty even though the city has active Meetup groups

Cause: The latitude/longitude coordinates are incorrect, the search radius is too small, or the topic keyword has no matching events in the area. Meetup's search is keyword-based — broad terms like 'tech' return more results than specific ones like 'kubernetes'.

Solution: Verify the lat/lon coordinates for your city using a geocoding service. Increase the radius parameter (try 25 or 50 miles). Try a broader topic keyword. Check the Meetup website directly to confirm there are active groups in the area — some cities have limited Meetup activity.

## Frequently asked questions

### Does Meetup's API use REST or GraphQL?

Meetup's current API v3 uses GraphQL. All queries are sent as POST requests to https://api.meetup.com/gql with a query string and variables in the request body. Earlier Meetup API versions used REST, but the v3 GraphQL API is the current standard. When searching online for Meetup API examples, check that they use the GraphQL endpoint.

### Can I create events or RSVPs through the Meetup API?

Yes, the Meetup API supports creating events and managing RSVPs, but these actions require OAuth2 authorization from the specific Meetup user account taking the action. Your app must implement the user-facing OAuth2 flow where the user logs in to Meetup and grants permission. The API key alone is only sufficient for reading public data.

### What is the difference between Meetup and Eventbrite?

Meetup focuses on recurring community groups and free or low-cost social gatherings — tech meetups, hobby clubs, language exchanges. Eventbrite focuses on one-off ticketed events like concerts, conferences, and fundraisers. For a developer community or local tech scene directory, Meetup's data is more relevant. For event ticketing or paid event management, Eventbrite is more appropriate.

### Are Meetup API access tokens free?

Meetup provides API access for Meetup account holders. You need to create an OAuth consumer application at secure.meetup.com/meetup_api/key. There is no separate API subscription fee for basic usage, but Meetup's terms require you not to resell their data or use it to compete with Meetup directly. Pro network API access may have different requirements.

### How do I get the latitude and longitude for a city search?

You can either hardcode coordinates for known cities, use a free geocoding API to convert city names to coordinates, or use the browser's Geolocation API (navigator.geolocation.getCurrentPosition) to get the user's current coordinates. For a location search input, Google Maps Geocoding API or the free Nominatim API from OpenStreetMap can convert city names to lat/lon.

---

Source: https://www.rapidevelopers.com/v0-integrations/meetup
© RapidDev — https://www.rapidevelopers.com/v0-integrations/meetup