[{"data":1,"prerenderedAt":329},["ShallowReactive",2],{"navigation":3,"page:\u002Fv0":45},{"title":4,"links":5},"API reference",[6,9,12,15,18,21,24,27,30,33,36,39,42],{"title":7,"href":8},"Accounts","\u002Freference\u002Faccounts",{"title":10,"href":11},"Connect","\u002Freference\u002Fconnect",{"title":13,"href":14},"Calendars","\u002Freference\u002Fcalendars",{"title":16,"href":17},"Events","\u002Freference\u002Fevents",{"title":19,"href":20},"Availability","\u002Freference\u002Favailability",{"title":22,"href":23},"Meetings","\u002Freference\u002Fmeetings",{"title":25,"href":26},"Invitations","\u002Freference\u002Finvitations",{"title":28,"href":29},"Webhooks","\u002Freference\u002Fwebhooks",{"title":31,"href":32},"Metadata","\u002Freference\u002Fmetadata",{"title":34,"href":35},"Keys","\u002Freference\u002Fkeys",{"title":37,"href":38},"Sandbox","\u002Freference\u002Fsandbox",{"title":40,"href":41},"Usage","\u002Freference\u002Fusage",{"title":43,"href":44},"Logs","\u002Freference\u002Flogs",{"kind":46,"title":47,"description":48,"sections":49,"doc":68},"guide","Build with v0","Add Google Calendar and Microsoft Outlook to a v0 app. Connect the Pyas MCP server to v0, and it adds the route handlers, the environment variable and the connect button.",[50,53,56,59,62,65],{"id":51,"title":52},"add-pyas-to-v0","Add Pyas to v0",{"id":54,"title":55},"ask-for-what-you-want","Ask for what you want",{"id":57,"title":58},"store-the-key","Store the key",{"id":60,"title":61},"what-v0-adds","What v0 adds",{"id":63,"title":64},"receive-webhooks","Receive webhooks",{"id":66,"title":67},"go-live","Go live",{"id":69,"title":47,"body":70,"description":48,"extension":319,"hero":320,"meta":321,"navigation":322,"path":323,"rawbody":324,"sections":49,"seo":325,"stem":326,"v1":327,"__hash__":328},"docs\u002Fv0.md",{"type":71,"value":72,"toc":309},"minimark",[73,77,84,87,128,131,133,136,142,161,163,170,196,207,209,212,222,232,235,237,244,251,257,270,272],[74,75,47],"h1",{"id":76},"build-with-v0",[78,79,80],"lead",{},[81,82,83],"p",{},"v0 can add Google Calendar and Microsoft Outlook to your app with Pyas. You connect the Pyas MCP server to v0, and v0 gets the code for each task from Pyas while it builds your app. You store a key as an environment variable. The key stays on the server, and the code works with the sandbox's sample people before anyone connects a real calendar.",[85,86,52],"h2",{"id":51},[88,89,90,103,115],"ol",{},[91,92,93,94,98,99,102],"li",{},"In v0, open the ",[95,96,97],"strong",{},"+"," menu in the prompt box and select ",[95,100,101],{},"MCPs",".",[91,104,105,106,110,111,114],{},"Add a custom server with the address ",[107,108,109],"code",{},"https:\u002F\u002Fmcp.pyas.io\u002Fsandbox",", and choose ",[95,112,113],{},"OAuth"," for authentication.",[91,116,117,118,121,122,127],{},"Sign in to Pyas, choose your app, and select ",[95,119,120],{},"Allow",". See ",[123,124,126],"a",{"href":125},"\u002Fai-tools#sign-in","Sign in"," for what each permission allows.",[81,129,130],{},"v0 uses the Pyas tools while it builds your app. The app it builds calls the Pyas API directly, with your key, and doesn't use the MCP server.",[85,132,55],{"id":54},[81,134,135],{},"Ask in plain words, for example:",[137,138,139],"blockquote",{},[81,140,141],{},"Add a button that lets people connect their Google or Outlook calendar, and show their events for the next week.",[81,143,144,145,148,149,152,153,156,157,160],{},"v0 checks your setup with ",[107,146,147],{},"setup_status"," and gets the code for each task with ",[107,150,151],{},"get_recipe",". It adds your app's preview address to the allowed origins with ",[107,154,155],{},"update_app",", and creates a test key with ",[107,158,159],{},"get_test_key",". You confirm the address in Pyas, from the link it gives you. Every response from Pyas ends with the next step.",[85,162,58],{"id":57},[81,164,165,166,169],{},"Store the test key as an environment variable named ",[107,167,168],{},"PYAS_API_KEY",":",[88,171,172,182],{},[91,173,174,175,178,179,102],{},"Open the project menu, then ",[95,176,177],{},"Settings",", then ",[95,180,181],{},"Environment Variables",[91,183,184,185,187,188,191,192,195],{},"Add ",[107,186,168],{},". The preview reads the ",[95,189,190],{},"Development"," variables, and the published app reads the ",[95,193,194],{},"Production"," ones, so add it to each environment where you use it.",[81,197,198,199,202,203,102],{},"Route handlers read the variable on the server, and it never reaches the browser. Don't name it with a ",[107,200,201],{},"NEXT_PUBLIC_"," prefix, which would send it to the browser. A test key works only in your app's ",[123,204,206],{"href":205},"\u002Fsandbox","sandbox",[85,208,61],{"id":60},[81,210,211],{},"The code runs as Next.js route handlers:",[213,214,220],"pre",{"className":215,"code":217,"language":218,"meta":219},[216],"language-text","lib\u002Fpyas.ts                            the Pyas client, and who is signed in\napp\u002Fapi\u002Fpyas\u002Fconnect-session\u002Froute.ts  creates a connect session for the button\napp\u002Fapi\u002Fpyas\u002Fevents\u002Froute.ts           the person's events for the next 7 days\napp\u002Fapi\u002Fpyas\u002Fbook\u002Froute.ts             books the first free 30 minutes tomorrow\ncomponents\u002Fconnect-calendar.tsx        the \"Connect an account\" button\n","text","",[107,221,217],{"__ignoreMap":219},[81,223,224,225,228,229,102],{},"Your pages call the routes with ",[107,226,227],{},"fetch",", for example ",[107,230,231],{},"fetch('\u002Fapi\u002Fpyas\u002Fevents')",[81,233,234],{},"With a test key, the routes use the sandbox's sample person, so the events and booking work right away. The connect button shows a message from Pyas that connecting a real calendar requires a live key. This is expected.",[85,236,64],{"id":63},[81,238,239,240,243],{},"Ask v0 to receive Pyas webhooks. It adds ",[107,241,242],{},"app\u002Fapi\u002Fpyas\u002Fwebhooks\u002Froute.ts",", which verifies the signature of each delivery against the raw body before it reads the event.",[81,245,246,247,250],{},"v0 adds the endpoint to your sandbox with ",[107,248,249],{},"create_webhook",", at your published address:",[213,252,255],{"className":253,"code":254,"language":218,"meta":219},[216],"https:\u002F\u002F\u003Cyour-app>.vercel.app\u002Fapi\u002Fpyas\u002Fwebhooks\n",[107,256,254],{"__ignoreMap":219},[81,258,259,260,262,263,121,266,269],{},"Store the signing secret that ",[107,261,249],{}," returns as an environment variable named ",[107,264,265],{},"PYAS_WEBHOOK_SECRET",[123,267,28],{"href":268},"\u002Fwebhooks"," for the events Pyas sends.",[85,271,67],{"id":66},[88,273,274,293,296,306],{},[91,275,276,277,280,281,284,285,288,289,292],{},"Make ",[107,278,279],{},"currentUserId()"," in ",[107,282,283],{},"lib\u002Fpyas.ts"," return the signed-in person's ID from your app's sign-in. Until then, the routes respond with ",[107,286,287],{},"401"," and the code ",[107,290,291],{},"SIGN_IN_REQUIRED"," to every request made with a live key, so people's calendars never mix.",[91,294,295],{},"In the Pyas dashboard, choose a plan and create a live key. Plans, payment and live keys are always done by you, in the dashboard.",[91,297,298,299,301,302,305],{},"Replace the ",[107,300,168],{}," Production variable with the live key, and publish again with ",[95,303,304],{},"Publish Changes",". A changed variable applies only to a new deployment.",[91,307,308],{},"Add your published address to the app's allowed origins, and add a live webhook endpoint in the dashboard.",{"title":219,"searchDepth":310,"depth":310,"links":311},3,[312,314,315,316,317,318],{"id":51,"depth":313,"text":52},2,{"id":54,"depth":313,"text":55},{"id":57,"depth":313,"text":58},{"id":60,"depth":313,"text":61},{"id":63,"depth":313,"text":64},{"id":66,"depth":313,"text":67},"md",false,{},true,"\u002Fv0","---\ntitle: Build with v0\ndescription: Add Google Calendar and Microsoft Outlook to a v0 app. Connect the Pyas MCP server to v0, and it adds the route handlers, the environment variable and the connect button.\nsections:\n  - { id: add-pyas-to-v0, title: Add Pyas to v0 }\n  - { id: ask-for-what-you-want, title: Ask for what you want }\n  - { id: store-the-key, title: Store the key }\n  - { id: what-v0-adds, title: What v0 adds }\n  - { id: receive-webhooks, title: Receive webhooks }\n  - { id: go-live, title: Go live }\n---\n\n# Build with v0\n\n::lead\nv0 can add Google Calendar and Microsoft Outlook to your app with Pyas. You connect the Pyas MCP server to v0, and v0 gets the code for each task from Pyas while it builds your app. You store a key as an environment variable. The key stays on the server, and the code works with the sandbox's sample people before anyone connects a real calendar.\n::\n\n## Add Pyas to v0\n\n1. In v0, open the **+** menu in the prompt box and select **MCPs**.\n2. Add a custom server with the address `https:\u002F\u002Fmcp.pyas.io\u002Fsandbox`, and choose **OAuth** for authentication.\n3. Sign in to Pyas, choose your app, and select **Allow**. See [Sign in](\u002Fai-tools#sign-in) for what each permission allows.\n\nv0 uses the Pyas tools while it builds your app. The app it builds calls the Pyas API directly, with your key, and doesn't use the MCP server.\n\n## Ask for what you want\n\nAsk in plain words, for example:\n\n> Add a button that lets people connect their Google or Outlook calendar, and show their events for the next week.\n\nv0 checks your setup with `setup_status` and gets the code for each task with `get_recipe`. It adds your app's preview address to the allowed origins with `update_app`, and creates a test key with `get_test_key`. You confirm the address in Pyas, from the link it gives you. Every response from Pyas ends with the next step.\n\n## Store the key\n\nStore the test key as an environment variable named `PYAS_API_KEY`:\n\n1. Open the project menu, then **Settings**, then **Environment Variables**.\n2. Add `PYAS_API_KEY`. The preview reads the **Development** variables, and the published app reads the **Production** ones, so add it to each environment where you use it.\n\nRoute handlers read the variable on the server, and it never reaches the browser. Don't name it with a `NEXT_PUBLIC_` prefix, which would send it to the browser. A test key works only in your app's [sandbox](\u002Fsandbox).\n\n## What v0 adds\n\nThe code runs as Next.js route handlers:\n\n```text\nlib\u002Fpyas.ts                            the Pyas client, and who is signed in\napp\u002Fapi\u002Fpyas\u002Fconnect-session\u002Froute.ts  creates a connect session for the button\napp\u002Fapi\u002Fpyas\u002Fevents\u002Froute.ts           the person's events for the next 7 days\napp\u002Fapi\u002Fpyas\u002Fbook\u002Froute.ts             books the first free 30 minutes tomorrow\ncomponents\u002Fconnect-calendar.tsx        the \"Connect an account\" button\n```\n\nYour pages call the routes with `fetch`, for example `fetch('\u002Fapi\u002Fpyas\u002Fevents')`.\n\nWith a test key, the routes use the sandbox's sample person, so the events and booking work right away. The connect button shows a message from Pyas that connecting a real calendar requires a live key. This is expected.\n\n## Receive webhooks\n\nAsk v0 to receive Pyas webhooks. It adds `app\u002Fapi\u002Fpyas\u002Fwebhooks\u002Froute.ts`, which verifies the signature of each delivery against the raw body before it reads the event.\n\nv0 adds the endpoint to your sandbox with `create_webhook`, at your published address:\n\n```text\nhttps:\u002F\u002F\u003Cyour-app>.vercel.app\u002Fapi\u002Fpyas\u002Fwebhooks\n```\n\nStore the signing secret that `create_webhook` returns as an environment variable named `PYAS_WEBHOOK_SECRET`. See [Webhooks](\u002Fwebhooks) for the events Pyas sends.\n\n## Go live\n\n1. Make `currentUserId()` in `lib\u002Fpyas.ts` return the signed-in person's ID from your app's sign-in. Until then, the routes respond with `401` and the code `SIGN_IN_REQUIRED` to every request made with a live key, so people's calendars never mix.\n2. In the Pyas dashboard, choose a plan and create a live key. Plans, payment and live keys are always done by you, in the dashboard.\n3. Replace the `PYAS_API_KEY` Production variable with the live key, and publish again with **Publish Changes**. A changed variable applies only to a new deployment.\n4. Add your published address to the app's allowed origins, and add a live webhook endpoint in the dashboard.\n",{"title":47,"description":48},"v0",null,"d_NHlu1TYduwviGA-qyG1FTBaG6T55nUeP1wTfDmftk",1794697270439]