Integrate
FrameworksFrontend

TanStack Start

Use Integrate with TanStack Start

Installation

Install the Integrate SDK in your TanStack Start project:

bun add integrate-sdk

Setup

1. Server Configuration

Create a server configuration file with your OAuth credentials:

// lib/integrate.ts
import { createMCPServer, githubIntegration } from "integrate-sdk/server";

export const { client: serverClient } = createMCPServer({
  apiKey: process.env.INTEGRATE_API_KEY,
  integrations: [
    githubIntegration({
      scopes: ["repo", "user"],
    }),
  ],
});

TanStack Start supports automatically importing the environment variables from the .env file.

You can get an API key from the Integrate Dashboard.

2. Mount the Handler

Create a catch-all route at routes/api/integrate/$.ts:

import { createFileRoute } from "@tanstack/react-router";
import { serverClient } from "@/lib/integrate";

export const Route = createFileRoute("/api/integrate/$")({
  server: {
    handlers: {
      GET: ({ request }) => {
        return serverClient.handler(request);
      },
      POST: ({ request }) => {
        return serverClient.handler(request);
      },
    },
  },
});

Configuration

Add your OAuth credentials to your .env file:

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

Usage Examples

Client-Side Authorization

The client is automatically configured when making requests to the server.

import { client } from "integrate-sdk";

await client.authorize("github");