Integrate Civic with the OpenAI Agents SDK using hostedMcpTool() — the simplest way to use Civic with OpenAI. No manual tool looping or schema conversion required.
For web apps where each user has their own Civic session.Install the additional auth package:
npm install @civic/auth
Why Civic Auth? Civic needs to identify which user is accessing tools and authorize their permissions. Civic Auth provides the secure access token. (Support for additional identity providers coming soon.)
1. next.config.ts
2. API Route
3. Middleware
4. Get Token
import { createCivicAuthPlugin } from "@civic/auth/nextjs"import type { NextConfig } from "next";const nextConfig: NextConfig = {};const withCivicAuth = createCivicAuthPlugin({ clientId: "YOUR_CLIENT_ID" });export default withCivicAuth(nextConfig)
File:src/app/api/auth/[...civicauth]/route.ts
import { handler } from "@civic/auth/nextjs"export const GET = handler()export const POST = handler()
import { Agent, hostedMcpTool, run } from '@openai/agents';const agent = new Agent({ name: 'Civic Assistant', model: 'gpt-4o-mini', instructions: 'You are a helpful assistant with access to external tools through Civic.', tools: [ hostedMcpTool({ serverLabel: 'civic', serverUrl: process.env.CIVIC_URL!, authorization: process.env.CIVIC_TOKEN!, // plain token string }), ],});async function main() { const result = await run(agent, 'List my GitHub repositories'); console.log(result.finalOutput); // the agent's final text response}main().catch(console.error);
// app/api/agent/route.tsimport { NextRequest, NextResponse } from 'next/server';import { Agent, hostedMcpTool, run } from '@openai/agents';import { getTokens } from '@civic/auth/nextjs';export async function POST(req: NextRequest) { const { message } = await req.json(); const { accessToken } = await getTokens(); // getTokens() exchanges the user's Civic Auth session for a hub access token if (!accessToken) { return NextResponse.json({ error: 'Not authenticated' }, { status: 401 }); } const agent = new Agent({ name: 'Civic Assistant', model: 'gpt-4o-mini', instructions: 'You are a helpful assistant with access to external tools through Civic.', tools: [ hostedMcpTool({ serverLabel: 'civic', serverUrl: 'https://app.civic.com/hub/mcp', authorization: accessToken, // plain token string }), ], }); const result = await run(agent, message); return NextResponse.json({ response: result.finalOutput });}
The Agent automatically discovers available Civic tools, selects the right one, calls it, and returns the result.
Not all Civic tool schemas are compatible with OpenAI’s strict: true structured outputs. Set strict to false on the Responses API when using Civic tools.