# Build an event ticketing site with Windsurf

> To build an event ticketing site with Windsurf, let Windsurf write the front end and use the Vihaya Events API as the backend. Vihaya handles payment, QR tickets, ticket emails and payouts. Connect the Vihaya MCP server too, and Windsurf can create and publish your events for you.

Last updated: 2026-10-04

## Key facts

- Windsurf can build a complete ticketing site on the Vihaya Events API.
- Vihaya Events has an MCP server that Windsurf can connect to with one config entry.
- Buyers pay through Razorpay Checkout; you need no gateway account of your own.
- Every confirmed booking gets a QR ticket by email automatically.
- The OpenAPI spec at https://events.vihaya.app/api/v1/openapi.json gives Windsurf the full API shape.

## Step by step

### 1. Create an API key and store it as a secret

Sign up at Vihaya Events, open Developer → API keys and create a test key. Put it in your project’s .env file as VIHAYA_API_KEY and keep .env out of git. Never put a full key in browser code.

### 2. Connect the Vihaya MCP server to Windsurf

Add this to ~/.codeium/windsurf/mcp_config.json. Windsurf uses "serverUrl" for remote servers, not "url".

```ts
{
  "mcpServers": {
    "vihaya": {
      "serverUrl": "https://events.vihaya.app/api/mcp",
      "headers": {
        "x-api-key": "vihaya_test_sk_YOUR_KEY"
      }
    }
  }
}
```

### 3. Ask Windsurf to build the site

Paste this prompt into Windsurf. It works with Next.js, React, SvelteKit, Astro or any stack Windsurf prefers.

```text
Add real event ticket sales to this project using the Vihaya Events API.
Do not add Stripe, Razorpay keys, a tickets database table, or buyer accounts.

API docs: https://events.vihaya.app/docs
OpenAPI: https://events.vihaya.app/api/v1/openapi.json
Key: read VIHAYA_API_KEY from the environment. Never send it to the browser.
Make the API calls from a server route (for example /api/book) that forwards to Vihaya with the key attached.

1. Events page: GET https://events.vihaya.app/api/v1/events with header x-api-key. Show each item
   in data[] as a card: title, date, venue, price.
2. Event page: GET https://events.vihaya.app/api/v1/events/{id} plus a form for name, email, phone.
3. Booking: POST https://events.vihaya.app/api/v1/events/{id}/register with { name, email, phone }.
   - No orderId in the response means it is confirmed (free event).
   - Otherwise load https://checkout.razorpay.com/v1/checkout.js and open
     Razorpay Checkout with key = response.key, order_id = response.orderId.
4. In the Razorpay handler, POST register again with { registrationId,
   orderId, paymentId, signature } taken from the Razorpay response.
5. On success show "You're booked. Your ticket is in your email."
```

### 4. Test, then switch to a live key

With a test key nothing is charged and no email is sent. When the flow works, swap in a live key and publish the event.

## Questions

### What can Windsurf do through the Vihaya MCP server?

Through the Vihaya Events MCP server, Windsurf can list, create, edit and publish your events, add festival tracks, read registrations and sales, and preview or send attendee emails. New events are always created as drafts, so nothing goes public by accident.

### Which framework should I ask Windsurf to use?

Any framework works with the Vihaya Events API because it is plain HTTPS and JSON. Next.js is the simplest choice, since a route handler keeps the key on the server. Tell Windsurf’s Cascade agent which one you want in the prompt.

### Why does Windsurf not see the Vihaya MCP server?

Check that the entry uses "serverUrl" rather than "url", that the x-api-key header holds a real key, and refresh the MCP list. On Teams plans an admin may need to allow remote MCP servers.

### Can I try it without taking real money?

Yes. Create a Vihaya test key. Test keys only work on test events: no payment gateway is called, no email is sent, no fee is charged and nothing is public. Swap in a live key when you launch.

### What does it cost?

Free events cost nothing. Paid tickets carry a 1.75–4.5% Vihaya platform fee plus Razorpay's 3% gateway charge. The rate is fixed when the event is created and larger events get a lower rate. There is no monthly fee and API access is free.

## Related

- [Add event ticketing to a Next.js site](https://events.vihaya.app/developers/nextjs)
- [Build an event ticketing site with Claude Code](https://events.vihaya.app/developers/claude-code)
- [Build an event ticketing site with Cursor](https://events.vihaya.app/developers/cursor)
- [Vihaya Events for developers](https://events.vihaya.app/developers)


---

Canonical URL: https://events.vihaya.app/developers/windsurf
Last updated: 2026-10-04
API reference: https://events.vihaya.app/docs
OpenAPI spec: https://events.vihaya.app/api/v1/openapi.json
Brief AI index: https://events.vihaya.app/llms.txt
Full AI index: https://events.vihaya.app/llms-full.txt