LLM Foundational Model Provider Demo

.github/workflows/preview.yml

@@ -1,83 +1,83 @@
-name: Vercel Preview Deployment
-env:
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-  ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-  ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
-  ALGOLIA_SEARCH_INDEX: ${{ secrets.ALGOLIA_SEARCH_INDEX }}
-  FONTAWESOME_CDN_HOST: https://fontawesome-cdn.vercel.app
-  WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
-  WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
-  JWT_SECRET_KEY: ${{ secrets.PROD_JWT_SECRET_KEY }}
-on: pull_request
+# name: Vercel Preview Deployment
+# env:
+#   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+#   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+#   ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+#   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+#   ALGOLIA_SEARCH_INDEX: ${{ secrets.ALGOLIA_SEARCH_INDEX }}
+#   FONTAWESOME_CDN_HOST: https://fontawesome-cdn.vercel.app
+#   WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
+#   WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
+#   JWT_SECRET_KEY: ${{ secrets.PROD_JWT_SECRET_KEY }}
+# on: pull_request
 
-# Cancel previous workflows on previous push so we don't have deploys overwriting eachother here
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+# # Cancel previous workflows on previous push so we don't have deploys overwriting eachother here
+# concurrency:
+#   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+#   cancel-in-progress: true
 
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions: write-all
-    steps:
-      - uses: actions/checkout@v4
+# jobs:
+#   deploy:
+#     runs-on: ubuntu-latest
+#     permissions: write-all
+#     steps:
+#       - uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+#       - name: Setup pnpm
+#         uses: pnpm/action-setup@v2
+#         with:
+#           version: 8
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-          cache: pnpm
+#       - name: Setup Node.js
+#         uses: actions/setup-node@v4
+#         with:
+#           node-version: 18
+#           cache: pnpm
 
-      - name: Comment in PR
-        uses: thollander/[email protected]
-        with:
-          message: |
-            ## PR Preview
-            Building...
-          comment_tag: pr_preview
+#       - name: Comment in PR
+#         uses: thollander/[email protected]
+#         with:
+#           message: |
+#             ## PR Preview
+#             Building...
+#           comment_tag: pr_preview
 
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
+#       - name: Install Vercel CLI
+#         run: npm install --global vercel@latest
 
-      - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+#       - name: Pull Vercel Environment Information
+#         run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Build Project Artifacts
-        run: VERSION="$(scripts/git-version.sh)" ENABLE_SOURCE_MAPS=true vercel build --debug --token=${{ secrets.VERCEL_TOKEN }}
+#       - name: Build Project Artifacts
+#         run: VERSION="$(scripts/git-version.sh)" ENABLE_SOURCE_MAPS=true vercel build --debug --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Comment in PR
-        uses: thollander/[email protected]
-        with:
-          message: |
-            ## PR Preview
-            Deploying...
-          comment_tag: pr_preview
+#       - name: Comment in PR
+#         uses: thollander/[email protected]
+#         with:
+#           message: |
+#             ## PR Preview
+#             Deploying...
+#           comment_tag: pr_preview
 
-      - name: Deploy Project Artifacts to Vercel
-        run: |
-          DEPLOYMENT_URL="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
-          echo "Deployment URL: $DEPLOYMENT_URL"
+#       - name: Deploy Project Artifacts to Vercel
+#         run: |
+#           DEPLOYMENT_URL="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
+#           echo "Deployment URL: $DEPLOYMENT_URL"
 
-          DEPLOYMENT_INFO=$(curl -s -X GET "https://api.vercel.com/v9/projects/fern-prod/domains?limit=50&teamId=team_6FKOM5nw037hv8g2mTk3gaH7&withGitRepoInfo=false" -H  "Authorization: Bearer ${{ secrets.VERCEL_TOKEN }}")
-          ALIAS_DOMAINS=$(jq -r '.domains[].name' <<< $DEPLOYMENT_INFO)
+#           DEPLOYMENT_INFO=$(curl -s -X GET "https://api.vercel.com/v9/projects/fern-prod/domains?limit=50&teamId=team_6FKOM5nw037hv8g2mTk3gaH7&withGitRepoInfo=false" -H  "Authorization: Bearer ${{ secrets.VERCEL_TOKEN }}")
+#           ALIAS_DOMAINS=$(jq -r '.domains[].name' <<< $DEPLOYMENT_INFO)
 
-          echo "## PR Preview" > preview.txt
+#           echo "## PR Preview" > preview.txt
 
-          for DOMAIN in ${ALIAS_DOMAINS[@]}; do
-            echo "Handling domain: $DOMAIN"
-            if [[ "$DOMAIN" != *"buildwithfern.com"* ]] && [[ "$DOMAIN" != *"vercel.app"* ]]; then
-              echo "- [ ] [$DOMAIN]($DEPLOYMENT_URL/api/fern-docs/preview?host=$DOMAIN)" >> preview.txt
-            fi
-          done
+#           for DOMAIN in ${ALIAS_DOMAINS[@]}; do
+#             echo "Handling domain: $DOMAIN"
+#             if [[ "$DOMAIN" != *"buildwithfern.com"* ]] && [[ "$DOMAIN" != *"vercel.app"* ]]; then
+#               echo "- [ ] [$DOMAIN]($DEPLOYMENT_URL/api/fern-docs/preview?host=$DOMAIN)" >> preview.txt
+#             fi
+#           done
 
-      - name: Comment URL in PR
-        uses: thollander/[email protected]
-        with:
-          filePath: preview.txt
-          comment_tag: pr_preview
+#       - name: Comment URL in PR
+#         uses: thollander/[email protected]
+#         with:
+#           filePath: preview.txt
+#           comment_tag: pr_preview

package.json

@@ -101,6 +101,7 @@
     }
   },
   "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
     "fern-api": "^0.21.0"
   }
 }

packages/ui/app/package.json

@@ -37,23 +37,27 @@
   "dependencies": {
     "@datadog/browser-logs": "^5.14.0",
     "@emotion/is-prop-valid": "^1.2.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-api/template-resolver": "workspace:*",
+    "@fern-ui/components": "workspace:*",
     "@fern-ui/core-utils": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
     "@fern-ui/loadable": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
-    "@fern-ui/components": "workspace:*",
     "@headlessui/react": "^1.7.18",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
     "@next/third-parties": "^14.2.3",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@segment/snippet": "^5.2.1",
     "@sentry/nextjs": "^7.105.0",
     "@shikijs/transformers": "^1.2.2",

packages/ui/app/src/api-page/ApiPackageContents.tsx

@@ -2,6 +2,7 @@ import { FdrAPI } from "@fern-api/fdr-sdk";
 import { EMPTY_ARRAY } from "@fern-ui/core-utils";
 import { memo, useMemo } from "react";
 import { FernErrorBoundary } from "../components/FernErrorBoundary";
+import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 import {
     ResolvedPackageItem,
     ResolvedTypeDefinition,
@@ -35,6 +36,7 @@ const UnmemoizedApiPackageContents: React.FC<ApiPackageContents.Props> = ({
     anchorIdParts,
     breadcrumbs = EMPTY_ARRAY,
 }) => {
+    const { isApiScrollingDisabled } = useFeatureFlags();
     const { items } = apiDefinition;
     const subpackageTitle = isResolvedSubpackage(apiDefinition) ? apiDefinition.title : undefined;
     const currentBreadcrumbs = useMemo(
@@ -53,7 +55,9 @@ const UnmemoizedApiPackageContents: React.FC<ApiPackageContents.Props> = ({
                                 showErrors={showErrors}
                                 endpoint={endpoint}
                                 breadcrumbs={currentBreadcrumbs}
-                                isLastInApi={isLastInParentPackage && idx === items.length - 1}
+                                isLastInApi={
+                                    isApiScrollingDisabled || (isLastInParentPackage && idx === items.length - 1)
+                                }
                                 types={types}
                             />
                         ),
@@ -62,15 +66,19 @@ const UnmemoizedApiPackageContents: React.FC<ApiPackageContents.Props> = ({
                                 key={webhook.id}
                                 webhook={webhook}
                                 breadcrumbs={breadcrumbs}
-                                isLastInApi={isLastInParentPackage && idx === items.length - 1}
+                                isLastInApi={
+                                    isApiScrollingDisabled || (isLastInParentPackage && idx === items.length - 1)
+                                }
                                 types={types}
                             />
                         ),
                         websocket: (websocket) => (
                             <WebSocket
                                 api={api}
                                 websocket={websocket}
-                                isLastInApi={isLastInParentPackage && idx === items.length - 1}
+                                isLastInApi={
+                                    isApiScrollingDisabled || (isLastInParentPackage && idx === items.length - 1)
+                                }
                                 types={types}
                             />
                         ),
@@ -80,15 +88,19 @@ const UnmemoizedApiPackageContents: React.FC<ApiPackageContents.Props> = ({
                                 types={types}
                                 showErrors={showErrors}
                                 apiDefinition={subpackage}
-                                isLastInParentPackage={isLastInParentPackage && idx === items.length - 1}
+                                isLastInParentPackage={
+                                    isApiScrollingDisabled || (isLastInParentPackage && idx === items.length - 1)
+                                }
                                 anchorIdParts={anchorIdParts}
                                 breadcrumbs={currentBreadcrumbs}
                             />
                         ),
                         page: (page) => (
                             <ApiSectionMarkdownPage
                                 page={page}
-                                hideBottomSeparator={isLastInParentPackage && idx === items.length - 1}
+                                hideBottomSeparator={
+                                    isApiScrollingDisabled || (isLastInParentPackage && idx === items.length - 1)
+                                }
                             />
                         ),
                     })}

packages/ui/app/src/api-page/ApiPage.tsx

@@ -1,7 +1,6 @@
 import { EMPTY_ARRAY } from "@fern-ui/core-utils";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
-import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 import { useIsReady } from "../contexts/useIsReady";
 import { ResolvedRootPackage } from "../resolver/types";
 import { APIS } from "../sidebar/atom";
@@ -16,15 +15,15 @@ export declare namespace ApiPage {
 
 export const ApiPage: React.FC<ApiPage.Props> = ({ initialApi, showErrors }) => {
     const hydrated = useIsReady();
-    const { isApiScrollingDisabled } = useFeatureFlags();
+    // const { isApiScrollingDisabled } = useFeatureFlags();
     const setDefinitions = useSetAtom(APIS);
 
     useEffect(() => {
         setDefinitions((prev) => ({ ...prev, [initialApi.api]: initialApi }));
     }, [initialApi, setDefinitions]);
 
     return (
-        <div className="min-h-0 pb-36">
+        <div className="min-h-0 lg:m-6 lg:mb-20 bg-white shadow-google">
             <ApiPackageContents
                 api={initialApi.api}
                 types={initialApi.types}
@@ -34,12 +33,6 @@ export const ApiPage: React.FC<ApiPage.Props> = ({ initialApi, showErrors }) =>
                 anchorIdParts={EMPTY_ARRAY}
             />
 
-            {isApiScrollingDisabled && (
-                <div className="mx-4 max-w-content-width md:mx-6 md:max-w-endpoint-width lg:mx-8">
-                    {/* <BottomNavigationButtons showPrev={true} /> */}
-                </div>
-            )}
-
             {/* anchor links should get additional padding to scroll to on initial load */}
             {!hydrated && <div className="h-full" />}
         </div>

packages/ui/app/src/api-page/Breadcrumbs.tsx

@@ -6,12 +6,12 @@ export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: readonly string[] })
         return null;
     }
     return (
-        <div>
-            <span className="inline-flex items-center font-semibold">
+        <div className="mb-4">
+            <span className="inline-flex items-center">
                 {breadcrumbs.map((breadcrumb, idx) => (
                     <Fragment key={idx}>
-                        {idx > 0 && <ChevronRightIcon className="mx-0.5 text-faded" />}
-                        <span className="t-accent shrink truncate whitespace-nowrap text-sm">{breadcrumb}</span>
+                        {idx > 0 && <ChevronRightIcon className="mx-1 text-faded" />}
+                        <span className="t-muted shrink truncate whitespace-nowrap text-sm">{breadcrumb}</span>
                     </Fragment>
                 ))}
             </span>

packages/ui/app/src/api-page/endpoints/CodeExampleClientDropdown.tsx

@@ -47,7 +47,7 @@ export const CodeExampleClientDropdown: React.FC<CodeExampleClientDropdown.Props
                     rightIcon={<ChevronDownIcon />}
                     text={selectedClientGroup?.languageDisplayName ?? selectedClient.language}
                     size="small"
-                    variant="outlined"
+                    variant="minimal"
                     mono={true}
                 />
             </FernDropdown>

packages/ui/app/src/api-page/endpoints/EndpointContent.tsx

@@ -1,5 +1,5 @@
 import { visitDiscriminatedUnion } from "@fern-ui/core-utils";
-import cn from "clsx";
+import cn, { clsx } from "clsx";
 import { useAtom } from "jotai";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
@@ -140,7 +140,12 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
         return clients.find((c) => c.language === selectedLanguage)?.examples[0] ?? curlExample!;
     });
     useEffect(() => {
-        setSelectedClient((prev) => clients.find((c) => c.language === selectedLanguage)?.examples[0] ?? prev);
+        setSelectedClient((prev) => {
+            if (prev.language !== selectedLanguage) {
+                return clients.find((c) => c.language === selectedLanguage)?.examples[0] ?? prev;
+            }
+            return prev;
+        });
     }, [clients, selectedLanguage]);
 
     const setSelectedExampleClientAndScrollToTop = useCallback(
@@ -228,14 +233,14 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
 
     return (
         <div
-            className={"mx-4 scroll-mt-header-height-padded md:mx-6 lg:mx-8"}
+            className={clsx("px-4 scroll-mt-header-height-padded md:px-6 lg:px-10", {
+                "border-default border-b mb-px pb-12": !hideBottomSeparator,
+            })}
             onClick={() => setSelectedError(undefined)}
             ref={viewportRef}
         >
             <div
-                className={cn("scroll-mt-header-height max-w-content-width md:max-w-endpoint-width mx-auto", {
-                    "border-default border-b mb-px pb-12": !hideBottomSeparator,
-                })}
+                className={cn("scroll-mt-header-height max-w-content-width md:max-w-endpoint-width mx-auto")}
                 ref={ref}
                 data-route={`/${endpoint.slug}`}
             >