___ _ _ _ _ ___
|_ _|_ __ | |_ ___ __ _ _ __ __ _| |_(_) ___ _ __ / \ |_ _|
| || '_ \| __/ _ \/ _` | '__/ _` | __| |/ _ \| '_ \ / _ \ | |
| || | | | || __/ (_| | | | (_| | |_| | (_) | | | | / ___ \ | |
|___|_| |_|\__\___|\__, |_| \__,_|\__|_|\___/|_| |_|/_/ \_\___|
|___/
Tell us your stack. Pick your API. Get a complete, file-by-file guide — powered by Claude AI.
- Overview
- Architecture
- Tech Stack
- Features
- Getting Started
- Environment Variables
- Project Structure
- Edge Function
- Deployment
- Roadmap
- License
IntegrationAI is a developer-first tool that eliminates the friction of integrating third-party APIs into existing codebases. Instead of hours of reading docs, copy-pasting snippets, and guessing file structures — just describe your stack, pick an API, and receive a complete, production-ready blueprint in seconds.
Built as a portfolio-grade full-stack project demonstrating AI integration, serverless edge computing, and modern React patterns.
┌─────────────────────────────────────────────────────────────────────┐
│ CLIENT (Browser) │
│ │
│ ┌─────────────┐ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Landing │───▶│ Wizard (/new) │───▶│ Result (/result)│ │
│ │ Page (/) │ │ Steps 1–2–3 │ │ Blueprint View │ │
│ └─────────────┘ └──────────────────┘ └──────────────────┘ │
│ │ │ │
│ WizardContext (React) fetch() POST │
└──────────────────────────────┼────────────────────────┼────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────────────────────────┐
│ SUPABASE EDGE NETWORK (Deno) │
│ │
│ ┌────────────────────────────────────┐ │
│ │ generate-blueprint Edge Function │ │
│ │ │ │
│ │ • CORS handling │ │
│ │ • Prompt engineering │ │
│ │ • Claude API client │ │
│ └────────────────┬───────────────────┘ │
└───────────────────────────────┼─────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────┐
│ ANTHROPIC CLAUDE API │
│ │
│ Model: claude-sonnet-4-5 │ Max tokens: 8192 │
│ System: Expert API Architect prompt │
│ Output: Structured Markdown blueprint │
└─────────────────────────────────────────────────────────────────────┘
User fills wizard
│
▼
┌─────────────┐ POST /functions/v1/generate-blueprint
│ /result │ ─────────────────────────────────────────────────────▶
│ page.tsx │ │
└─────────────┘ ┌─────────────────┐
│ │ Edge Function │
│ ◀──────────────────────────────────────────────── │ (Deno runtime) │
│ { blueprint: "## Summary\n..." } └────────┬────────┘
│ │
▼ Anthropic Claude API
ReactMarkdown │
renderer renders System + User prompt
custom components │
│ Returns Markdown
▼
Sticky TOC sidebar
+ Syntax-highlighted
code blocks
+ Interactive checklist
src/
├── app/ (Next.js App Router)
│ ├── layout.tsx ← Root layout, Providers, Navbar
│ ├── page.tsx ← Landing page
│ ├── not-found.tsx ← Custom 404
│ ├── new/
│ │ ├── layout.tsx ← /new metadata
│ │ └── page.tsx ← Wizard router (steps 1–3)
│ └── result/
│ ├── layout.tsx ← /result metadata
│ └── page.tsx ← Blueprint display + Markdown renderer
│
├── components/
│ ├── navbar.tsx ← Top navigation bar
│ ├── providers.tsx ← QueryClient + ThemeProvider + WizardProvider
│ ├── theme-provider.tsx ← next-themes wrapper
│ └── wizard/
│ ├── step1.tsx ← Stack selector (5 fields, pill UX)
│ ├── step2.tsx ← API card grid selector
│ └── step3.tsx ← Use-case list + Generate CTA
│
├── context/
│ └── wizard-context.tsx ← Global wizard state (React Context)
│
├── hooks/
│ └── use-scroll-animation.tsx ← IntersectionObserver scroll reveal hook
│
└── lib/
└── utils.ts ← cn() utility (clsx + tailwind-merge)
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 15 (App Router) | SSR, routing, layouts |
| Language | TypeScript 5 | End-to-end type safety |
| Styling | Tailwind CSS 3 + shadcn/ui | Design system & components |
| State | React Context API | Wizard state across routes |
| Server State | TanStack React Query 5 | Async data fetching patterns |
| Theming | next-themes | Dark/light mode persistence |
| Icons | lucide-react | Consistent icon library |
| Markdown | react-markdown + remark-gfm | Blueprint rendering |
| Syntax Highlighting | react-syntax-highlighter | Terminal-style code blocks |
| Backend | Supabase Edge Functions (Deno) | Serverless AI proxy |
| AI Model | Anthropic Claude (Sonnet) | Blueprint generation |
| Deployment | Vercel + Supabase Cloud | Production infrastructure |
- 3-Step Wizard — Select your stack (framework, language, DB, package manager), choose an API, and define your use case
- AI Blueprint Generation — Claude generates a full, structured, file-by-file integration guide
- Markdown Blueprint Renderer — Custom React components for beautiful output rendering
- Dark mode by default with smooth light/dark toggle
- Animated pill selectors — no boring dropdowns
- Scroll-spy sticky TOC — sidebar that highlights current section
- Mobile-responsive — 2-column pickers, dropdown TOC on mobile
- Page transition loader — top progress bar on navigation
- Skeleton loaders during blueprint generation
- Syntax-highlighted code blocks with language labels + one-click copy
- Interactive checklist items for the testing section
- Color-coded inline code — orange for file paths, green for env vars
- Security callout blocks — yellow-highlighted
> ⚠️sections - Thumbs up/down feedback widget
- "Copy All" button for the entire blueprint
- Start Over confirmation dialog to prevent accidental data loss
- Custom 404 page
| API | Category |
|---|---|
| Stripe | Payment |
| Razorpay | Payment |
| Google OAuth | Auth |
| Clerk | Auth |
| Firebase Auth | Auth |
| Twilio SMS | Messaging |
# 1. Clone the repository
git clone https://github.com/S37F/API-Integration.git
cd API-Integration
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env.local
# → Fill in your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
# 4. Start the development server
npm run devOpen http://localhost:3000 in your browser.
API-Integration/
├── .gitignore
├── .eslintrc.json
├── README.md
├── next.config.ts
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
│
├── src/
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.tsx ← Root layout
│ │ ├── not-found.tsx ← 404 page
│ │ ├── page.tsx ← Landing page
│ │ ├── new/
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx ← Multi-step wizard
│ │ └── result/
│ │ ├── layout.tsx
│ │ └── page.tsx ← Blueprint output
│ │
│ ├── components/
│ │ ├── navbar.tsx
│ │ ├── providers.tsx
│ │ ├── theme-provider.tsx
│ │ └── wizard/
│ │ ├── step1.tsx
│ │ ├── step2.tsx
│ │ └── step3.tsx
│ │
│ ├── context/
│ │ └── wizard-context.tsx
│ │
│ ├── hooks/
│ │ └── use-scroll-animation.tsx
│ │
│ └── lib/
│ └── utils.ts
│
└── supabase/
└── functions/
└── generate-blueprint/
└── index.ts ← Claude AI edge function (Deno)
The AI backend lives in supabase/functions/generate-blueprint/index.ts and runs on Deno in Supabase's global edge network.
POST /functions/v1/generate-blueprint
Body: {
frontend: "Next.js",
backend: "Next.js API Routes",
language: "TypeScript",
database: "PostgreSQL",
packageManager: "npm",
api: "Stripe",
feature: "Subscription billing with webhooks"
}
↓ Constructs system + user prompt
↓ Calls Anthropic Messages API
↓ Streams response
Response: {
blueprint: "## Summary\n..." ← Full Markdown string
}
# Install Supabase CLI
npm install -g supabase
# Login and link project
supabase login
supabase link --project-ref your-project-ref
# Deploy the function
supabase functions deploy generate-blueprint
# Set the API key secret
supabase secrets set ANTHROPIC_API_KEY=sk-ant-...# Install Vercel CLI
npm install -g vercel
# Deploy
vercel --prodAdd environment variables in the Vercel dashboard:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
See Edge Function section above.
- Streaming responses — show blueprint token by token as Claude writes it
- Save blueprints — persist to Supabase DB with user auth (Clerk)
- More APIs — Twilio, SendGrid, AWS S3, OpenAI, Slack
- Export to PDF / Markdown file
- Copy individual sections from the TOC sidebar
- Blueprint versioning — regenerate with tweaks
- Public gallery — share and browse community blueprints
MIT © S37F
Built with ❤️ using Next.js, Claude AI, and Supabase
⭐ Star this repo if you found it useful!