### Environment Variable Setup Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Configure your project's environment variables by copying the example file and setting necessary keys for Schematic and Clerk integration, including publishable and secret keys. ```bash cp .env.example .env NEXT_PUBLIC_SCHEMATIC_COMPONENT_ID="your-component-id" NEXT_PUBLIC_SCHEMATIC_PUBLISHABLE_KEY="api_" SCHEMATIC_SECRET_KEY="sch_dev_" CLERK_SECRET_KEY="sk_test_" NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_" ``` -------------------------------- ### Install Dependencies Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Install project dependencies using your preferred package manager: npm, yarn, or pnpm. This step is crucial before running the development server. ```bash npm install # or yarn # or pnpm install ``` -------------------------------- ### Run Development Server Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Start the local development server to view your application. This command is compatible with npm, yarn, pnpm, and bun. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Install Schematic React SDK Source: https://docs.schematichq.com/quickstart/setup-sdk Install the Schematic React SDK using npm, yarn, or pnpm. This command adds the necessary package to your project's dependencies. ```bash npm install @schematichq/schematic-react # or yarn add @schematichq/schematic-react # or pnpm add @schematichq/schematic-react ``` -------------------------------- ### Python SDK: Installation and Setup Source: https://docs.schematichq.com/developer_resources/sdks/python Instructions for installing the Schematic Python SDK using pip and setting up the client for basic usage. This involves importing the SDK and initializing the client with your API key. ```bash pip install schematic-python ``` ```python from schematic import Schematic client = Schematic(api_key="") ``` -------------------------------- ### Initialize SchematicProvider Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Wrap your client-side application with the SchematicProvider component, passing your publishable key to initialize the Schematic SDK. ```jsx ``` -------------------------------- ### Install Schematic Go Library Source: https://docs.schematichq.com/developer_resources/sdks/go Installs the Schematic Go library using the go get command. This is the first step to integrate Schematic into your Go application. ```bash go get github.com/schematichq/schematic-go ``` -------------------------------- ### Go SDK: Core Functionality Source: https://docs.schematichq.com/developer_resources/sdks/go This section covers the essential functionalities of the Schematic Go SDK, including installation, setup, identifying users and companies, tracking events, and checking feature flags. It serves as a guide for integrating Schematic's core features into your Go projects. ```go // Installation and Setup // Usage examples // Sending identify events // Creating and updating companies // Creating and updating users // Checking flags // Other API operations // Testing // Offline Mode // Webhook Verification // Verifying Webhook Signatures // DataStream // Key Features: // How to Enable DataStream // Example: // Configuring Redis Cache // 1. Single Redis Instance // Example: // 2. Redis Cluster // Example: // Errors ``` -------------------------------- ### Install Project Dependencies Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_python Installs all required Python packages using requirements.txt and Node.js packages using npm. npm is used for task running and TailwindCSS support. ```bash pip install -r requirements.txt npm install ``` -------------------------------- ### Install Schematic and Stripe Libraries Source: https://docs.schematichq.com/components/set-up Installs the necessary Schematic components library and the Stripe React library for checkout components. Supports npm, yarn, and pnp package managers. ```npm npm install @schematichq/schematic-components @stripe/react-stripe-js ``` ```yarn yarn add @schematichq/schematic-components @stripe/react-stripe-js ``` ```pnp pnp add @schematichq/schematic-components @stripe/react-stripe-js ``` -------------------------------- ### Install schematic-react Source: https://docs.schematichq.com/developer_resources/sdks/react Installs the schematic-react library using npm, yarn, or pnpm. This is the first step to integrate Schematic into your React application. ```bash npm install @schematichq/schematic-react ``` ```bash yarn add @schematichq/schematic-react ``` ```bash pnpm add @schematichq/schematic-react ``` -------------------------------- ### Install Schematic Python Library Source: https://docs.schematichq.com/developer_resources/sdks/python Instructions for installing the Schematic Python Library using pip or poetry. ```shell pip install schematichq ``` ```shell poetry add schematichq ``` -------------------------------- ### Install Schematic C# SDK Source: https://docs.schematichq.com/developer_resources/sdks/csharp Installs the Schematic C# client library using .NET CLI or NuGet. This is the first step to integrate Schematic into your .NET application. ```csharp dotnet add package SchematicHQ.Client ``` ```csharp nuget install SchematicHQ.Client ``` -------------------------------- ### Enforce Feature Entitlements with useSchematicFlag Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Conditionally render UI elements based on feature entitlements using the `useSchematicFlag` hook. This example checks if the 'humidity' feature is enabled. ```jsx const humidityFlag = useSchematicFlag("humidity"); { humidityFlag &&

Humidity: {weatherData?.humidity}%

} ``` -------------------------------- ### Initialize Schematic Go Client Source: https://docs.schematichq.com/developer_resources/sdks/go Shows how to create a new Schematic Go client instance with an API key and optional datastream configurations. It includes setting up cache TTL for the datastream. ```go import ( schematicclient "github.com/schematichq/schematic-go/client" schematicoption "github.com/schematichq/schematic-go/option" "time" ) func main() { apiKey := "your-api-key" options := &schematicoption.DatastreamOptions{ CacheTTL: 5 * time.Minute, // Set the cache TTL (time-to-live) } client := schematicclient.NewSchematicClient( schematicoption.WithAPIKey(apiKey), schematicoption.WithDatastream(options), ) defer client.Close() } ``` -------------------------------- ### Track Events Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Log specific user actions or events within your application using the `track` function from the `useSchematicEvents` hook. This example shows tracking a 'weather-search' event. ```javascript track({ event: "weather-search" }); ``` -------------------------------- ### Display Customer Portal with SchematicEmbed Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Embed the customer portal directly into your application using the `SchematicEmbed` component. It requires an `accessToken` and the `componentId`. ```jsx ``` -------------------------------- ### Initialize Environment File Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_python Copies the example environment configuration file to create a new .env file for your project settings. ```bash cp .env.example .env ``` -------------------------------- ### Identify User and Company Context Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Use the `identify` function from the `useSchematicEvents` hook within a `useEffect` hook to set the user and company context for event tracking and feature flagging. This requires access to authentication context. ```jsx const { identify } = useSchematicEvents(); const authContext = useAuthContext(); useEffect(() => { const { company, user } = authContext ?? {}; if (company && user) { void identify({ company: { keys: company.keys, name: company.name, }, keys: user.keys, name: user.name, traits: user.traits, }); } }, [authContext, identify]); ``` -------------------------------- ### Issue Temporary Access Token (Backend) Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_nextjs Implement a backend route to generate a temporary, company-scoped access token for embedded components. This uses the `SchematicClient` to exchange a secret token for a temporary one, requiring resource type and lookup details. ```typescript import { SchematicClient } from "@schematic-ai/schematic-js"; import { NextResponse } from "next/server"; // Assuming apiKey, orgId are available in the backend context const schematicClient = new SchematicClient({ apiKey }); const resp = await schematicClient.accesstokens.issueTemporaryAccessToken({ resourceType: "company", lookup: { clerkId: orgId, }, }); const accessToken = resp.data?.token; return NextResponse.json({ accessToken }); ``` -------------------------------- ### Initialize Synchronous Client Source: https://docs.schematichq.com/developer_resources/sdks/python Demonstrates how to initialize the synchronous Schematic client by providing your API key. ```python from schematic.client import Schematic client = Schematic("YOUR_API_KEY") ``` -------------------------------- ### Get or Create Company Membership (TypeScript) Source: https://docs.schematichq.com/api-reference/companies/get-or-create-company-membership Example of how to use the Schematic client in TypeScript to get or create a company membership. It requires an API key and the company and user IDs. ```typescript import { SchematicClient } from "@schematichq/schematic-typescript-node"; const client = new SchematicClient({ apiKey: "YOUR_API_KEY" }); await client.companies.getOrCreateCompanyMembership({ companyId: "company_id", userId: "user_id" }); ``` -------------------------------- ### Run the Billy App Locally Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_python Starts the Billy application locally. Access the running app at http://127.0.0.1:5000/ after execution. ```npm npm start run ``` -------------------------------- ### Get Plan Entitlement (TypeScript) Source: https://docs.schematichq.com/api-reference/entitlements/get-plan-entitlement Example of how to retrieve a specific plan entitlement using the SchematicClient in TypeScript. This requires an API key and the plan entitlement ID. ```TypeScript import { SchematicClient } from "@schematichq/schematic-typescript-node"; const client = new SchematicClient({ apiKey: "YOUR_API_KEY" }); await client.entitlements.getPlanEntitlement("plan_entitlement_id"); ``` -------------------------------- ### Set Up Python Virtual Environment Source: https://docs.schematichq.com/developer_resources/sample_apps/sample_python Creates and activates a Python virtual environment for managing project dependencies. This isolates project packages from the global Python installation. ```bash python3 -m venv venv . venv/bin/activate ``` -------------------------------- ### Get Company Override (TypeScript) Source: https://docs.schematichq.com/api-reference/entitlements/get-company-override Example of how to retrieve a company override using the SchematicClient in TypeScript. It requires an API key for authentication and the company override ID as a parameter. ```TypeScript import { SchematicClient } from "@schematichq/schematic-typescript-node"; const client = new SchematicClient({ apiKey: "YOUR_API_KEY" }); await client.entitlements.getCompanyOverride("company_override_id"); ``` -------------------------------- ### Initialize Schematic Client Source: https://docs.schematichq.com/developer_resources/sdks/go Initializes the Schematic Go client using an API key obtained from the Schematic app. The API key is typically loaded from an environment variable. ```go import ( "os" option "github.com/schematichq/schematic-go/option" schematicclient "github.com/schematichq/schematic-go/client" ) func main() { apiKey := os.Getenv("SCHEMATIC_API_KEY") client := schematicclient.NewSchematicClient(option.WithAPIKey(apiKey)) defer client.Close() } ``` -------------------------------- ### Get Feature Usage by Company (TypeScript) Source: https://docs.schematichq.com/api-reference/entitlements/get-feature-usage-by-company Example of how to use the Schematic client in TypeScript to retrieve feature usage data for a company. Requires an API key and specifies company keys. ```TypeScript import { SchematicClient } from "@schematichq/schematic-typescript-node"; const client = new SchematicClient({ apiKey: "YOUR_API_KEY" }); await client.entitlements.getFeatureUsageByCompany({ keys: { "keys": "keys" } }); ``` -------------------------------- ### Initialize and Use Async Client Source: https://docs.schematichq.com/developer_resources/sdks/python Shows how to initialize and use the asynchronous Schematic client for non-blocking API calls, including an example of fetching company data. ```python import asyncio from schematic.client import AsyncSchematic client = AsyncSchematic("YOUR_API_KEY") async def main() -> None: await client.companies.get_company( company_id="company_id", ) asyncio.run(main()) ``` -------------------------------- ### Use SchematicProvider in React App Source: https://docs.schematichq.com/quickstart/setup-sdk Wrap your React application with `SchematicProvider` to make the Schematic instance available to all components. Ensure you use a client-side rendering context. ```javascript `use client` import { SchematicProvider } from "@schematichq/schematic-react"; ReactDOM.render( , document.getElementById("root"), ); ``` -------------------------------- ### Create Plan using Schematic TypeScript SDK Source: https://docs.schematichq.com/api-reference/plans/create-plan Demonstrates how to instantiate the SchematicClient and call the createPlan method to create a new plan. Requires an API key for authentication. ```typescript import { SchematicClient } from "@schematichq/schematic-typescript-node"; const client = new SchematicClient({ apiKey: "YOUR_API_KEY" }); await client.plans.createPlan({ description: "description", name: "name", planType: "plan" }); ```