Add code snippet package documentation (coming soon feature)

fern/products/docs/docs.yml

@@ -295,6 +295,8 @@ navigation:
   - section: Developer tools
     collapsed: true
     contents:
+      - page: Code snippet package
+        path: ./pages/developer-tools/code-snippet-package.mdx
       - page: Orchestrate GitHub releases
         path: ./pages/developer-tools/orchestrate-docs-releases.mdx
       - page: Cursor

fern/products/docs/pages/developer-tools/code-snippet-package.mdx

@@ -0,0 +1,201 @@
+---
+title: Code snippet package
+description: Embed Fern API routes into your existing documentation with a standalone package
+---
+
+<Callout intent="info">
+This feature is coming soon. Check back for updates on availability.
+</Callout>
+
+The code snippet package is a standalone npm package that allows you to embed Fern-generated API route documentation directly into your existing documentation site, regardless of whether you use Fern for your full documentation.
+
+## How it works
+
+The code snippet package provides a lightweight React component that fetches and renders API route information from your Fern API definition. This enables you to maintain your API definitions in Fern while embedding interactive API documentation into documentation sites built with other platforms like Docusaurus, GitBook, or custom solutions.
+
+When you use the code snippet package, it displays:
+
+- HTTP method and endpoint path
+- Request parameters and body schema
+- Response schema and examples
+- Authentication requirements
+- Code examples in multiple languages
+
+The package automatically stays in sync with your API definition, ensuring your embedded documentation remains up-to-date whenever you update your API specification.
+
+## Use cases
+
+The code snippet package is useful when you:
+
+- Have existing documentation infrastructure you want to keep
+- Need to embed API documentation in multiple places (docs site, blog posts, internal wikis)
+- Want Fern's API definition management without migrating your entire documentation
+- Need to show specific API routes in context within longer guides or tutorials
+
+## Installation
+
+Install the package from npm:
+
+```bash
+npm install @fern-api/code-snippet
+```
+
+Or with other package managers:
+
+<CodeBlocks>
+```bash title="pnpm"
+pnpm add @fern-api/code-snippet
+```
+
+```bash title="yarn"
+yarn add @fern-api/code-snippet
+```
+</CodeBlocks>
+
+## Usage
+
+Import the component and provide your API endpoint details:
+
+```tsx
+import { FernApiRoute } from '@fern-api/code-snippet';
+
+function MyDocPage() {
+  return (
+    <div>
+      <h1>Create a plant</h1>
+      <p>Use this endpoint to add a new plant to your collection.</p>
+
+      <FernApiRoute
+        apiName="plantstore"
+        endpoint="POST /plants/{plantId}"
+        fernToken="your-fern-token"
+      />
+    </div>
+  );
+}
+```
+
+## Configuration
+
+The `FernApiRoute` component accepts the following props:
+
+<ParamField path="apiName" type="string" required>
+  The name of your API as defined in your Fern configuration
+</ParamField>
+
+<ParamField path="endpoint" type="string" required>
+  The HTTP method and path of the endpoint to display (e.g., `"POST /plants/{plantId}"`)
+</ParamField>
+
+<ParamField path="fernToken" type="string" required>
+  Your Fern API token for authentication
+</ParamField>
+
+<ParamField path="theme" type="'light' | 'dark' | 'auto'" default="auto">
+  Color theme for the embedded component
+</ParamField>
+
+<ParamField path="showExamples" type="boolean" default={true}>
+  Whether to display code examples
+</ParamField>
+
+<ParamField path="defaultLanguage" type="string">
+  Default programming language for code examples (e.g., `"typescript"`, `"python"`)
+</ParamField>
+
+## Styling
+
+The code snippet package uses CSS variables for theming, allowing you to customize the appearance to match your documentation site:
+
+```css
+.fern-api-route {
+  --fern-primary-color: #008700;
+  --fern-background-color: #ffffff;
+  --fern-text-color: #111113;
+  --fern-border-color: #e0e1e6;
+  --fern-code-background: #f5f5f5;
+}
+```
+
+## Authentication
+
+To use the code snippet package, you need a Fern API token. Generate one from your [Fern Dashboard](https://dashboard.buildwithfern.com/) under API Settings.
+
+The token allows the package to fetch your API definition and generate the embedded documentation. Keep your token secure and avoid committing it directly in your code. Use environment variables instead:
+
+```tsx
+<FernApiRoute
+  apiName="plantstore"
+  endpoint="POST /plants/{plantId}"
+  fernToken={process.env.FERN_TOKEN}
+/>
+```
+
+## Framework integration
+
+The code snippet package works with popular documentation frameworks:
+
+<Tabs>
+<Tab title="Docusaurus">
+```tsx title="src/components/PlantEndpoint.tsx"
+import { FernApiRoute } from '@fern-api/code-snippet';
+
+export default function PlantEndpoint() {
+  return (
+    <FernApiRoute
+      apiName="plantstore"
+      endpoint="POST /plants/{plantId}"
+      fernToken={process.env.FERN_TOKEN}
+    />
+  );
+}
+```
+
+Import and use in your MDX files:
+
+```mdx title="docs/api/plants.mdx"
+import PlantEndpoint from '@site/src/components/PlantEndpoint';
+
+# Plant API
+
+<PlantEndpoint />
+```
+</Tab>
+
+<Tab title="Next.js">
+```tsx title="components/PlantEndpoint.tsx"
+'use client';
+
+import { FernApiRoute } from '@fern-api/code-snippet';
+
+export function PlantEndpoint() {
+  return (
+    <FernApiRoute
+      apiName="plantstore"
+      endpoint="POST /plants/{plantId}"
+      fernToken={process.env.NEXT_PUBLIC_FERN_TOKEN}
+    />
+  );
+}
+```
+</Tab>
+
+<Tab title="GitBook">
+GitBook integration requires using an iframe embed. Create a standalone page that renders the component and embed it:
+
+```html
+<iframe 
+  src="https://your-site.com/embed/plant-endpoint"
+  width="100%"
+  height="600"
+  frameborder="0"
+></iframe>
+```
+</Tab>
+</Tabs>
+
+## Related resources
+
+- [Generate API reference](/docs/api-references/generate-api-ref) - Learn about Fern's full API documentation solution
+- [SDK snippets](/docs/api-references/sdk-snippets) - Configure code examples in your API reference
+- [Fern API definitions](/learn/api-definitions/overview) - Define your API with OpenAPI, AsyncAPI, or Fern Definition