diff --git a/kits/api-breaking-change-detector/.env.example b/kits/api-breaking-change-detector/.env.example new file mode 100644 index 000000000..e69de29bb diff --git a/kits/api-breaking-change-detector/.gitignore b/kits/api-breaking-change-detector/.gitignore new file mode 100644 index 000000000..e916ce5aa --- /dev/null +++ b/kits/api-breaking-change-detector/.gitignore @@ -0,0 +1,5 @@ +.lamatic/ +node_modules/ +.next/ +.env +.env.local diff --git a/kits/api-breaking-change-detector/README.md b/kits/api-breaking-change-detector/README.md new file mode 100644 index 000000000..5943f657b --- /dev/null +++ b/kits/api-breaking-change-detector/README.md @@ -0,0 +1,106 @@ +# Agent Kit Generation by Lamatic.ai + +

+ + Live Demo + +

+ + +**Agent Kit Generation** is an AI-powered content generation system built with [Lamatic.ai](https://lamatic.ai). It uses intelligent workflows to generate text, images, and JSON content through a modern Next.js interface with markdown rendering support. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Lamatic/AgentKit&root-directory=kits/agentic/generation&env=AGENTIC_GENERATE_CONTENT,LAMATIC_API_URL,LAMATIC_PROJECT_ID,LAMATIC_API_KEY&envDescription=Your%20Lamatic%20Generation%20keys%20are%20required.&envLink=https://lamatic.ai/templates/agentkits/agentic/agent-kit-generation) + +--- + +## Lamatic Setup (Pre and Post) + +Before running this project, you must build and deploy the flow in Lamatic, then wire its config into this codebase. + +Pre: Build in Lamatic +1. Sign in or sign up at https://lamatic.ai +2. Create a project (if you don’t have one yet) +3. Click β€œ+ New Flow” and select "Templates" +4. Select the 'Generation' agent kit +5. Configure providers/tools/inputs as prompted +6. Deploy the kit in Lamatic and obtain your .env keys +7. Copy the keys from your studio + +Post: Wire into this repo +1. Create a .env file and set the keys +2. Install and run locally: + - npm install + - npm run dev +3. Deploy (Vercel recommended): + - Import your repo, set the project's Root Directory (if applicable) + - Add env vars in Vercel (same as your .env) + - Deploy and test your live URL + +Notes +- Coming soon: single-click export and "Connect Git" in Lamatic to push config directly to your repo. + +--- + +## πŸ”‘ Setup +## Required Keys and Config + +You’ll need these things to run this project locally: + +1. **.env Keys** β†’ get it from your [Lamatic account](https://lamatic.ai) post kit deployment. + + +| Item | Purpose | Where to Get It | +| ----------------- | -------------------------------------------- | ----------------------------------------------- | +| .env Key | Authentication for Lamatic AI APIs and Orchestration | [lamatic.ai](https://lamatic.ai) | + +### 1. Environment Variables + +Create `.env.local` with: + +```bash +# Lamatic +AGENTIC_GENERATE_CONTENT = "AGENTIC_GENERATE_CONTENT Flow ID" +LAMATIC_API_URL = "LAMATIC_API_URL" +LAMATIC_PROJECT_ID = "LAMATIC_PROJECT_ID" +LAMATIC_API_KEY = "LAMATIC_API_KEY" +``` + +### 2. Install & Run + +```bash +npm install +npm run dev +# Open http://localhost:3000 +``` +--- + +## πŸ“‚ Repo Structure + +``` +/actions + └── orchestrate.ts # Lamatic workflow orchestration +/app + └── page.tsx # Main generation form UI +/components + β”œβ”€β”€ header.tsx # Header component with navigation + └── ui # shadcn/ui components +/lib + └── lamatic-client.ts # Lamatic SDK client +/public + └── lamatic-logo.png # Lamatic branding +/flows + └── ... # Lamatic Flows +/package.json # Dependencies & scripts +``` + +--- + +## 🀝 Contributing + +We welcome contributions! Open an issue or PR in this repo. + +--- + +## πŸ“œ License + +MIT License – see [LICENSE](../../../LICENSE). diff --git a/kits/api-breaking-change-detector/agent.md b/kits/api-breaking-change-detector/agent.md new file mode 100644 index 000000000..7a51f76ff --- /dev/null +++ b/kits/api-breaking-change-detector/agent.md @@ -0,0 +1,185 @@ +# Generative AI + +## Overview +This project solves the problem of turning a single user instruction into ready-to-use generative outputs (long-form text/markdown, structured JSON, and an image) from one consistent API surface. It implements a **single-flow** AgentKit pipeline that routes requests by β€œmode” and then orchestrates multiple model calls (text, JSON, and image) plus validation/formatting steps. The primary invoker is a Next.js web UI (and any backend service) that calls the flow via Lamatic’s API layer and renders results, including markdown rendering. It depends on Lamatic’s hosted runtime and credentials, plus connected LLM and image-generation providers configured in Lamatic. + +--- + +## Purpose +The goal of this agent system is to provide a simple, reliable content-generation endpoint that can produce different kinds of creative/structured artifacts from the same user prompt. After it runs, the caller has a polished result suitable for direct use in an application: readable markdown text, valid machine-consumable JSON, or a generated image prompt/resultβ€”without having to manually prompt-engineer, validate, or post-process raw model outputs. + +Operationally, the system centralizes generation logic into one deployed Lamatic flow so product teams can iterate on prompts, models, and formatting in Lamatic Studio while keeping the Next.js app thin. This reduces the surface area for application bugs and keeps model behavior consistent across environments. + +Although there is one runnable flow, it supports multiple output β€œmodes” (text, JSON, image). These modes collectively serve the larger purpose of β€œagentic generation” by ensuring that user instructions can be transformed into the right artifact type with appropriate parsing and finalization steps. + +## Flows + +### `1. Agentic Generation - Generate Content` + +- **Flow ID / Env key mapping:** `agentic-generate-content` (configured via `AGENTIC_GENERATE_CONTENT`) + +#### Trigger +- **Invocation type:** API request via a GraphQL trigger node (`API Request (graphqlNode)`). +- **Expected input shape (conceptual):** + - `instructions` (string): the user’s instruction/prompt. + - `mode` (string): controls which generation path is taken. Supported intents implied by node chain: + - `text` β†’ generate markdown text + - `json` β†’ generate structured JSON + - `image` β†’ generate an image from the instruction (or from intermediate prompt) + - Optional additional fields may be passed through depending on how the Lamatic GraphQL trigger is configured in Studio; the prompts reference `triggerNode_1.output.instructions`, so `instructions` must be present. + +#### What it does +Step-by-step walkthrough of the node chain: + +1. `API Request (graphqlNode)` + - Receives the GraphQL/API payload from the caller (UI/backend). + - Exposes the incoming fields to downstream nodes (notably `instructions`, and a mode selector used by the condition). + +2. `Condition (conditionNode)` + - Routes execution based on the requested generation mode. + - Ensures unsupported/unknown modes do not proceed to model execution. + +3. `Invalid Mode (codeNode)` + - Handles the error path when `mode` is missing or unsupported. + - Produces a safe, deterministic error payload for the API response (instead of attempting generation). + +4. `Text (LLMNode)` + - Generates high-quality, well-structured **markdown** content from the user instruction. + - Uses prompt pair: + - System: `text-system.md` (β€œYou are a Text Generation Assistant… proper markdown…”) + - User: `agentic-generate-content_text_user.md` (`USER INSTRUCTION : {{triggerNode_1.output.instructions}}`) + +5. `JSON (LLMNode)` + - Generates a JSON representation for the same instruction. + - Uses prompt pair: + - System: `json-system.md` (β€œYou are a JSON Generation Assistant… proper JSON form…”) + - User: `agentic-generate-content_json_user.md` (`GENERATE A JSON FOR THIS USER REQUEST : {{triggerNode_1.output.instructions}}`) + +6. `Parse JSON (codeNode)` + - Validates and parses the JSON output from the `JSON (LLMNode)`. + - Normalizes the result into an application-safe structure (e.g., converting a JSON string into an object, handling parse failures). + - This is the main β€œsafety belt” for ensuring the API returns valid JSON even if the model output is slightly malformed. + +7. `Generate Image (ImageGenNode)` + - Produces an image based on the instruction. + - Uses prompt pair: + - System: `generate-image-system.md` (β€œYou are an Image Generation Assistant… high-quality image…”) + - User: `agentic-generate-content_generate-image_user.md` (`CREATE AN IMAGE FOR THIS INSTRUCTION : {{triggerNode_1.output.instructions}}`) + +8. `Finalise Output (codeNode)` + - Consolidates outputs into a single response payload. + - Applies final formatting and ensures a consistent response shape across modes. + +9. `API Response (graphqlResponseNode)` + - Returns the finalized payload to the original API caller. + - This is the contract boundary for the Next.js UI and any other clients. + +#### When to use this flow +Use this flow for any request where a user (or upstream system) supplies a free-form instruction and expects one of the supported generated artifact types: +- β€œWrite”: when you want markdown content suitable for rendering in the UI. +- β€œStructure”: when you want a machine-readable JSON object derived from an instruction. +- β€œVisualize”: when you want an image generated from the instruction. + +If the application only has one generation entrypoint, route all generation requests here and set `mode` to select the desired output. + +#### Output +- **Success response:** a JSON response returned by `graphqlResponseNode`. +- **Structure (conceptual):** + - `mode`: the resolved mode. + - `text`: markdown string (present when mode is `text`, and may also be included as auxiliary data depending on finalizer logic). + - `json`: parsed JSON object (present when mode is `json`). + - `image`: image result (present when mode is `image`), typically a URL, base64 payload, or provider-specific image artifact as configured in Lamatic. + - `error`: populated for invalid mode or generation/parse failures. + +Because the final response is assembled in `Finalise Output (codeNode)`, treat the above as the intended contract; confirm exact field names in the deployed flow’s GraphQL schema. + +#### Dependencies +- **Lamatic runtime & project configuration** + - `LAMATIC_API_URL` + - `LAMATIC_PROJECT_ID` + - `LAMATIC_API_KEY` +- **Flow selection / routing** + - `AGENTIC_GENERATE_CONTENT` (the deployed Flow ID for `agentic-generate-content`) +- **Model providers** (configured in Lamatic Studio) + - LLM provider for `Text (LLMNode)` and `JSON (LLMNode)` + - Image generation provider for `Generate Image (ImageGenNode)` +- **Prompts** + - `text-system.md`, `json-system.md`, `generate-image-system.md` + - User prompt templates under `prompts/` prefixed with `agentic-generate-content_*` + +### Flow Interaction +This kit contains a single runnable flow. Internally it behaves like a mode-routed pipeline: the `Condition (conditionNode)` determines whether the request proceeds to the text LLM path, JSON LLM + parse path, or image generation path, and then `Finalise Output (codeNode)` normalizes the result into one API response. + +## Guardrails +- **Prohibited tasks** + - Must not generate harmful, illegal, or discriminatory content (from Default Constitution). + - Must not comply with jailbreaking or prompt-injection attempts (from Default Constitution). + - Must not fabricate facts when uncertain; should acknowledge uncertainty (from Default Constitution). +- **Input constraints** + - `instructions` must be provided and should be treated as adversarial input (from Default Constitution). + - `mode` must be one of the supported values; otherwise the flow must take the `Invalid Mode (codeNode)` path. + - (Inferred) Inputs should remain within the context limits of the chosen LLM/image model; excessively long instructions may be truncated or rejected. +- **Output constraints** + - Must not output PII unless explicitly required by the flow; must not log/store/repeat PII (from Default Constitution). + - Must not output raw credentials, API keys, or internal configuration. + - JSON mode must return valid, parseable JSON; malformed JSON should be caught/handled by `Parse JSON (codeNode)`. +- **Operational limits** + - Requires Lamatic environment variables to be present at runtime; without them, invocation will fail. + - (Inferred) Image generation may be slower and more rate-limited than text/JSON generation; callers should implement timeouts and retries. + - (Inferred) Concurrency and rate limits depend on the configured Lamatic plan and underlying model providers. + +## Integration Reference + +| IntegrationType | Purpose | Required Credential / Config Key | +|---|---|---| +| Lamatic Flow Runtime (API) | Execute deployed flow(s) and access Lamatic project resources | `LAMATIC_API_URL`, `LAMATIC_PROJECT_ID`, `LAMATIC_API_KEY` | +| AgentKit Flow ID Routing | Select the deployed flow instance for this kit | `AGENTIC_GENERATE_CONTENT` | +| LLM Provider (via Lamatic) | Generate markdown text and JSON | Configured in Lamatic Studio (provider-specific keys stored in Lamatic) | +| Image Generation Provider (via Lamatic) | Generate images from prompts | Configured in Lamatic Studio (provider-specific keys stored in Lamatic) | +| Next.js App (UI) | User-facing interface with markdown rendering | App runtime config; consumes env vars above | + +## Environment Setup +- `AGENTIC_GENERATE_CONTENT` β€” Deployed Flow ID for `agentic-generate-content`; obtain from Lamatic Studio after deploying the kit; used by the Next.js app/server to call the correct flow. +- `LAMATIC_API_URL` β€” Base URL for Lamatic API; obtain from Lamatic; used by all flow invocations. +- `LAMATIC_PROJECT_ID` β€” Lamatic project identifier; obtain from Lamatic project settings/studio; used by all flow invocations. +- `LAMATIC_API_KEY` β€” API key for accessing the Lamatic project; obtain from Lamatic; used by all flow invocations. +- `lamatic.config.ts` β€” Kit metadata and wiring (name, version, tags, required steps/env keys, links); used by the kit tooling/build. +- `constitutions/` β€” Default constitution defining identity/safety/data-handling/tone constraints; governs runtime behavior in Lamatic. +- `prompts/` β€” System and user prompts used by LLM/Image nodes; changing these alters generation behavior. + +## Quickstart +1. In Lamatic Studio, create a project and deploy the β€œGeneration” agent kit flow; copy the resulting keys and Flow ID. +2. In `apps/`, create `.env` from `.env.example` and set: + - `AGENTIC_GENERATE_CONTENT`, `LAMATIC_API_URL`, `LAMATIC_PROJECT_ID`, `LAMATIC_API_KEY` +3. Install and run the app: + 1. `npm install` + 2. `npm run dev` +4. Invoke the flow via the app UI, or call the GraphQL trigger directly using the shape below (placeholders; align field names with your deployed GraphQL schema): + - **GraphQL (conceptual)** + - Mutation/Query: `agenticGenerateContent` (name varies by deployment) + - Variables: + - `input`: + - `mode`: `"text" | "json" | "image"` + - `instructions`: `"Write a concise product description for a smart water bottle."` + - **Example variables JSON (conceptual):** + - `{"input":{"mode":"text","instructions":"Write a concise product description for a smart water bottle."}}` +5. Verify you receive a successful API response and that: + - `mode="text"` returns markdown text + - `mode="json"` returns a parsed JSON object + - `mode="image"` returns an image artifact (often a URL) + +## Common Failure Modes + +| Symptom | Likely Cause | Fix | +|---|---|---| +| Request fails with authentication/401/403 | Missing or incorrect `LAMATIC_API_KEY` / project mismatch | Re-copy keys from Lamatic Studio; ensure `LAMATIC_PROJECT_ID` matches the key scope | +| Flow not found / 404 / β€œinvalid flow id” | `AGENTIC_GENERATE_CONTENT` not set or points to a non-deployed flow | Deploy the flow in Lamatic; update `AGENTIC_GENERATE_CONTENT` with the deployed Flow ID | +| β€œInvalid mode” response | `mode` missing or not one of the supported values | Send `mode` as `text`, `json`, or `image` (or update the condition node to support more modes) | +| JSON output is empty or parsing fails | Model returned non-JSON text, trailing commentary, or malformed JSON | Tighten `json-system.md` instructions; improve `Parse JSON (codeNode)` error handling; add retries or a β€œrepair JSON” step | +| Image generation fails or is slow | Provider misconfiguration, rate limits, or large/complex prompts | Verify image provider in Lamatic; simplify prompt; add client-side timeout/retry; check Lamatic/provider quotas | +| UI renders raw markdown incorrectly | Markdown rendering configuration or unexpected markdown output | Validate markdown renderer settings; adjust `text-system.md` to constrain formatting | + +## Notes +- This kit is intended to be deployed via Vercel; a one-click deploy link is provided in `lamatic.config.ts` and the app README. +- The recommended workflow is β€œpre and post”: build and deploy the flow in Lamatic first, then wire the resulting env keys into this repo. +- β€œComing soon” items noted by the project: single-click export and β€œConnect Git” from Lamatic Studio to push config directly into the repo. diff --git a/kits/api-breaking-change-detector/apps/.env.example b/kits/api-breaking-change-detector/apps/.env.example new file mode 100644 index 000000000..69342502c --- /dev/null +++ b/kits/api-breaking-change-detector/apps/.env.example @@ -0,0 +1,4 @@ +API_BREAKING_CHANGE_DETECTOR="API_BREAKING_CHANGE_DETECTOR Flow ID" +LAMATIC_API_URL="LAMATIC_API_URL" +LAMATIC_PROJECT_ID="LAMATIC_PROJECT_ID" +LAMATIC_API_KEY="LAMATIC_API_KEY" diff --git a/kits/api-breaking-change-detector/apps/.gitignore b/kits/api-breaking-change-detector/apps/.gitignore new file mode 100644 index 000000000..b28ea8105 --- /dev/null +++ b/kits/api-breaking-change-detector/apps/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file diff --git a/kits/api-breaking-change-detector/apps/README.md b/kits/api-breaking-change-detector/apps/README.md new file mode 100644 index 000000000..5943f657b --- /dev/null +++ b/kits/api-breaking-change-detector/apps/README.md @@ -0,0 +1,106 @@ +# Agent Kit Generation by Lamatic.ai + +

+ + Live Demo + +

+ + +**Agent Kit Generation** is an AI-powered content generation system built with [Lamatic.ai](https://lamatic.ai). It uses intelligent workflows to generate text, images, and JSON content through a modern Next.js interface with markdown rendering support. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Lamatic/AgentKit&root-directory=kits/agentic/generation&env=AGENTIC_GENERATE_CONTENT,LAMATIC_API_URL,LAMATIC_PROJECT_ID,LAMATIC_API_KEY&envDescription=Your%20Lamatic%20Generation%20keys%20are%20required.&envLink=https://lamatic.ai/templates/agentkits/agentic/agent-kit-generation) + +--- + +## Lamatic Setup (Pre and Post) + +Before running this project, you must build and deploy the flow in Lamatic, then wire its config into this codebase. + +Pre: Build in Lamatic +1. Sign in or sign up at https://lamatic.ai +2. Create a project (if you don’t have one yet) +3. Click β€œ+ New Flow” and select "Templates" +4. Select the 'Generation' agent kit +5. Configure providers/tools/inputs as prompted +6. Deploy the kit in Lamatic and obtain your .env keys +7. Copy the keys from your studio + +Post: Wire into this repo +1. Create a .env file and set the keys +2. Install and run locally: + - npm install + - npm run dev +3. Deploy (Vercel recommended): + - Import your repo, set the project's Root Directory (if applicable) + - Add env vars in Vercel (same as your .env) + - Deploy and test your live URL + +Notes +- Coming soon: single-click export and "Connect Git" in Lamatic to push config directly to your repo. + +--- + +## πŸ”‘ Setup +## Required Keys and Config + +You’ll need these things to run this project locally: + +1. **.env Keys** β†’ get it from your [Lamatic account](https://lamatic.ai) post kit deployment. + + +| Item | Purpose | Where to Get It | +| ----------------- | -------------------------------------------- | ----------------------------------------------- | +| .env Key | Authentication for Lamatic AI APIs and Orchestration | [lamatic.ai](https://lamatic.ai) | + +### 1. Environment Variables + +Create `.env.local` with: + +```bash +# Lamatic +AGENTIC_GENERATE_CONTENT = "AGENTIC_GENERATE_CONTENT Flow ID" +LAMATIC_API_URL = "LAMATIC_API_URL" +LAMATIC_PROJECT_ID = "LAMATIC_PROJECT_ID" +LAMATIC_API_KEY = "LAMATIC_API_KEY" +``` + +### 2. Install & Run + +```bash +npm install +npm run dev +# Open http://localhost:3000 +``` +--- + +## πŸ“‚ Repo Structure + +``` +/actions + └── orchestrate.ts # Lamatic workflow orchestration +/app + └── page.tsx # Main generation form UI +/components + β”œβ”€β”€ header.tsx # Header component with navigation + └── ui # shadcn/ui components +/lib + └── lamatic-client.ts # Lamatic SDK client +/public + └── lamatic-logo.png # Lamatic branding +/flows + └── ... # Lamatic Flows +/package.json # Dependencies & scripts +``` + +--- + +## 🀝 Contributing + +We welcome contributions! Open an issue or PR in this repo. + +--- + +## πŸ“œ License + +MIT License – see [LICENSE](../../../LICENSE). diff --git a/kits/api-breaking-change-detector/apps/actions/orchestrate.ts b/kits/api-breaking-change-detector/apps/actions/orchestrate.ts new file mode 100644 index 000000000..78bd9438a --- /dev/null +++ b/kits/api-breaking-change-detector/apps/actions/orchestrate.ts @@ -0,0 +1,84 @@ +"use server" + +import { lamaticClient } from "@/lib/lamatic-client" +import {config} from "../orchestrate.js" + +type InputType = "text" | "image" | "json" + +export async function generateContent( + inputType: InputType, + instructions: string, +): Promise<{ + success: boolean + data?: any + error?: string +}> { + try { + console.log("[v0] Generating content with:", { inputType, instructions }) + + // Get the first workflow from the config + const flows = config.flows + const firstFlowKey = Object.keys(flows)[0] + + if (!firstFlowKey) { + throw new Error("No workflows found in configuration") + } + + // Fix: Add index signature to make TypeScript happy about accessing flows[firstFlowKey] + const flow = flows[firstFlowKey as keyof typeof flows] as (typeof flows)[keyof typeof flows]; + console.log("[v0] Using workflow:", flow.name, flow.workflowId); + + // Prepare inputs based on the flow's input schema + const inputs: Record = { + mode: inputType, + instructions, + } + + // Map to schema if needed + for (const inputKey of Object.keys(flow.inputSchema || {})) { + if (inputKey === "inputType" || inputKey === "type") { + inputs[inputKey] = inputType + } else if (inputKey === "instructions" || inputKey === "query") { + inputs[inputKey] = instructions + } + } + + console.log("[v0] Sending inputs:", inputs) + + if(!flow.workflowId){ + throw Error("Workflow not found in config.") + } + const resData = await lamaticClient.executeFlow(flow.workflowId, inputs) + console.log("[v0] Raw response:", resData) + + // Parse the answer from resData?.output.answer + const answer = resData?.result?.answer + + if (!answer) { + throw new Error("No answer found in response") + } + + return { + success: true, + data: answer, + } + } catch (error) { + console.error("[v0] Generation error:", error) + + let errorMessage = "Unknown error occurred" + if (error instanceof Error) { + errorMessage = error.message + if (error.message.includes("fetch failed")) { + errorMessage = + "Network error: Unable to connect to the service. Please check your internet connection and try again." + } else if (error.message.includes("API key")) { + errorMessage = "Authentication error: Please check your API configuration." + } + } + + return { + success: false, + error: errorMessage, + } + } +} diff --git a/kits/api-breaking-change-detector/apps/app/globals.css b/kits/api-breaking-change-detector/apps/app/globals.css new file mode 100644 index 000000000..dc2aea17f --- /dev/null +++ b/kits/api-breaking-change-detector/apps/app/globals.css @@ -0,0 +1,125 @@ +@import 'tailwindcss'; +@import 'tw-animate-css'; + +@custom-variant dark (&:is(.dark *)); + +:root { + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.145 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.145 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + --border: oklch(0.269 0 0); + --input: oklch(0.269 0 0); + --ring: oklch(0.439 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(0.269 0 0); + --sidebar-ring: oklch(0.439 0 0); +} + +@theme inline { + --font-sans: 'Geist', 'Geist Fallback'; + --font-mono: 'Geist Mono', 'Geist Mono Fallback'; + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/kits/api-breaking-change-detector/apps/app/layout.tsx b/kits/api-breaking-change-detector/apps/app/layout.tsx new file mode 100644 index 000000000..4489638db --- /dev/null +++ b/kits/api-breaking-change-detector/apps/app/layout.tsx @@ -0,0 +1,45 @@ +import type { Metadata } from 'next' +import { Geist, Geist_Mono } from 'next/font/google' +import { Analytics } from '@vercel/analytics/next' +import './globals.css' + +const _geist = Geist({ subsets: ["latin"] }); +const _geistMono = Geist_Mono({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: 'v0 App', + description: 'Created with v0', + generator: 'v0.app', + icons: { + icon: [ + { + url: '/icon-light-32x32.png', + media: '(prefers-color-scheme: light)', + }, + { + url: '/icon-dark-32x32.png', + media: '(prefers-color-scheme: dark)', + }, + { + url: '/icon.svg', + type: 'image/svg+xml', + }, + ], + apple: '/apple-icon.png', + }, +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + + {children} + + + + ) +} diff --git a/kits/api-breaking-change-detector/apps/app/page.tsx b/kits/api-breaking-change-detector/apps/app/page.tsx new file mode 100644 index 000000000..ebb96f4cc --- /dev/null +++ b/kits/api-breaking-change-detector/apps/app/page.tsx @@ -0,0 +1,139 @@ +"use client"; + +import { useState } from "react"; +import { Loader2, Sparkles, FileJson, AlertTriangle } from "lucide-react"; +import ReactMarkdown from "react-markdown"; + +export default function ApiBreakingChangeDetector() { + const [oldSchema, setOldSchema] = useState(""); + const [newSchema, setNewSchema] = useState(""); + const [loading, setLoading] = useState(false); + const [result, setResult] = useState(null); + + const handleAnalyze = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setResult(null); + + try { + // πŸš€ LAMATIC AI INTEGRATION POINT + // Once your backend is ready, you will replace the setTimeout block below + // with your actual Lamatic orchestration action call, like this: + // const response = await generateContent({ oldSchema, newSchema }); + // setResult(response); + + // Simulated AI response for UI testing purposes: + setTimeout(() => { + setResult(` +### 🚨 High Severity Breaking Changes Detected + +**1. Field Removal: \`user_id\`** +* **Impact**: Breaks downstream authentication mapping. +* **Migration**: Update client apps to request \`account_id\` instead. + +**2. Type Mutation: \`price\`** +* **Impact**: Changed from \`Integer\` to \`String\`. Math operations will fail. +* **Migration**: Explicitly parse \`price\` as a float on the client side. + +--- +### πŸ’‘ Recommended Developer Action +Release this as a **v2 endpoint** and set a 90-day deprecation warning for the v1 endpoint. + `); + setLoading(false); + }, 1500); + + } catch (error) { + console.error("Error analyzing schemas:", error); + setResult("An error occurred while analyzing the schemas. Please check your API keys."); + setLoading(false); + } + }; + + return ( +
+
+ {/* Header */} +
+
+ +
+

+ API Breaking Change Detector +

+

+ Paste your existing and updated API schemas below. Our AI agent will instantly analyze the structures, flag breaking changes, and generate a developer migration guide. +

+
+ + {/* Input Form */} +
+
+ {/* Old Schema */} +
+ +