How to Integrate Meetup 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.

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.

1import { NextRequest, NextResponse } from 'next/server';
2
3const MEETUP_GRAPHQL_URL = 'https://api.meetup.com/gql';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const lat = searchParams.get('lat') || '37.7749';
8  const lon = searchParams.get('lon') || '-122.4194';
9  const radius = searchParams.get('radius') || '10';
10  const topic = searchParams.get('topic') || 'tech';
11
12  const token = process.env.MEETUP_ACCESS_TOKEN;
13  if (!token) {
14    return NextResponse.json(
15      { error: 'Meetup API token not configured' },
16      { status: 500 }
17    );
18  }
19
20  const query = `
21    query GetUpcomingEvents($lat: Float!, $lon: Float!, $radius: Float!, $topic: String!) {
22      keywordSearch(
23        filter: {
24          lat: $lat
25          lon: $lon
26          radius: $radius
27          source: EVENTS
28          query: $topic
29        }
30      ) {
31        edges {
32          node {
33            result {
34              ... on Event {
35                id
36                title
37                dateTime
38                eventUrl
39                rsvpState
40                going
41                venue {
42                  name
43                  address
44                  city
45                }
46                group {
47                  name
48                  urlname
49                  groupPhoto {
50                    source
51                  }
52                }
53              }
54            }
55          }
56        }
57      }
58    }
59  `;
60
61  try {
62    const response = await fetch(MEETUP_GRAPHQL_URL, {
63      method: 'POST',
64      headers: {
65        Authorization: `Bearer ${token}`,
66        'Content-Type': 'application/json',
67      },
68      body: JSON.stringify({
69        query,
70        variables: {
71          lat: parseFloat(lat),
72          lon: parseFloat(lon),
73          radius: parseFloat(radius),
74          topic,
75        },
76      }),
77    });
78
79    if (!response.ok) {
80      return NextResponse.json(
81        { error: 'Meetup API request failed' },
82        { status: response.status }
83      );
84    }
85
86    const data = await response.json();
87
88    if (data.errors) {
89      return NextResponse.json(
90        { error: data.errors[0].message },
91        { status: 400 }
92      );
93    }
94
95    const events = data.data?.keywordSearch?.edges
96      ?.map((edge: any) => edge.node.result)
97      .filter(Boolean) || [];
98
99    return NextResponse.json({ events });
100  } catch (error) {
101    console.error('Meetup API error:', error);
102    return NextResponse.json(
103      { error: 'Failed to fetch Meetup events' },
104      { status: 500 }
105    );
106  }
107}

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.

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.

1import { NextRequest, NextResponse } from 'next/server';
2
3const MEETUP_GRAPHQL_URL = 'https://api.meetup.com/gql';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const urlname = searchParams.get('urlname');
8
9  if (!urlname) {
10    return NextResponse.json(
11      { error: 'groupUrlname is required' },
12      { status: 400 }
13    );
14  }
15
16  const token = process.env.MEETUP_ACCESS_TOKEN;
17  if (!token) {
18    return NextResponse.json(
19      { error: 'Meetup API token not configured' },
20      { status: 500 }
21    );
22  }
23
24  const query = `
25    query GetGroupEvents($urlname: String!) {
26      proNetworkBySlug(slug: $urlname) {
27        id
28        name
29        urlname
30        description
31        memberships {
32          count
33        }
34        upcomingEvents(input: { first: 5 }) {
35          edges {
36            node {
37              id
38              title
39              dateTime
40              eventUrl
41              going
42              venue {
43                name
44                city
45              }
46            }
47          }
48        }
49      }
50    }
51  `;
52
53  try {
54    const response = await fetch(MEETUP_GRAPHQL_URL, {
55      method: 'POST',
56      headers: {
57        Authorization: `Bearer ${token}`,
58        'Content-Type': 'application/json',
59      },
60      body: JSON.stringify({ query, variables: { urlname } }),
61    });
62
63    const data = await response.json();
64    return NextResponse.json(data.data || {});
65  } catch (error) {
66    return NextResponse.json(
67      { error: 'Failed to fetch group events' },
68      { status: 500 }
69    );
70  }
71}