Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
- 
-
-
-
- 
-
-
Quickstart
-
-
Start building beautiful documentation in under 5 minutes.
+
+ {/* Dashed Pattern - Left Side */}
+
+
+ {/* Dashed Pattern - Right Side */}
+
+
+
+
-
-
-
-
+
+
+
-
+
+
+
+ Quickstart
+ 
+ 
+
+
+
+
+
Start building beautiful documentation in under 5 minutes.
+
- 
-
-
-
- 
-
-
Configure with ease
-
-
-
-
-
- One simple file that can be used to generate documentation that fits your brand.
+ + + +
+
+
+
-
+
+
+
+ Configure with ease
+
+
+
+
+
+
+
One simple file that can be used to generate documentation that fits your brand.
+
- 
-
-
-
- 
-
-
Flexible component library
-
-
-
-
-
- Use pre-built or custom React components for a polished look.
+ + + +
+
+
+
-
+
+
+
+ Flexible component library
+
+
+
+
+
+
+
Use pre-built or custom React components for a polished look.
+
- 
-
-
- The title displayed in the tab header
-
-
-
- The language associated with the code block. Any arbitrary string may be used.
-
- When a user selects a tab with a specific language, all other tabs assigned to the same language will automatically sync and switch to match.
-
-
-
- The content to be displayed when the tab is selected. Can include text, markdown, and components.
-
-
-
- -
-
- ☝️ Welcome to the content that you can only see inside the first Tab.
-
-
- ✌️ Here's content that's only inside the second Tab.
-
-
- 💪 Here's content that's only inside the third Tab.
-
-
-
-
diff --git a/fern/products/home/pages/welcome.mdx b/fern/products/home/pages/welcome.mdx
index d5e4cc0bb..5f1e7e80e 100644
--- a/fern/products/home/pages/welcome.mdx
+++ b/fern/products/home/pages/welcome.mdx
@@ -8,21 +8,13 @@ layout: custom
import { FernFooter } from "../../../components/FernFooter";
-
-
diff --git a/footer/src/images/github-dark.tsx b/footer/src/images/github-dark.tsx
new file mode 100644
index 000000000..05f97d302
--- /dev/null
+++ b/footer/src/images/github-dark.tsx
@@ -0,0 +1,39 @@
+interface GitHubDarkProps {
+ width?: number;
+ height?: number;
+ className?: string;
+}
+
+export const GitHubDark = ({
+ width = 24,
+ height = 24,
+ className = ""
+}: GitHubDarkProps) => {
+ return (
+
+ );
+};
+
+export default GitHubDark;
diff --git a/footer/src/images/github-light.tsx b/footer/src/images/github-light.tsx
new file mode 100644
index 000000000..3d0be42c7
--- /dev/null
+++ b/footer/src/images/github-light.tsx
@@ -0,0 +1,39 @@
+interface GitHubLightProps {
+ width?: number;
+ height?: number;
+ className?: string;
+}
+
+export const GitHubLight = ({
+ width = 25,
+ height = 24,
+ className = ""
+}: GitHubLightProps) => {
+ return (
+
+ );
+};
+
+export default GitHubLight;
diff --git a/footer/src/images/linkedin-dark.tsx b/footer/src/images/linkedin-dark.tsx
new file mode 100644
index 000000000..83bc2fe91
--- /dev/null
+++ b/footer/src/images/linkedin-dark.tsx
@@ -0,0 +1,29 @@
+interface LinkedInDarkProps {
+ width?: number;
+ height?: number;
+ className?: string;
+}
+
+export const LinkedInDark = ({
+ width = 24,
+ height = 24,
+ className = ""
+}: LinkedInDarkProps) => {
+ return (
+
+ );
+};
+
+export default LinkedInDark;
diff --git a/footer/src/images/linkedin-light.tsx b/footer/src/images/linkedin-light.tsx
new file mode 100644
index 000000000..0a02d8277
--- /dev/null
+++ b/footer/src/images/linkedin-light.tsx
@@ -0,0 +1,29 @@
+interface LinkedInLightProps {
+ width?: number;
+ height?: number;
+ className?: string;
+}
+
+export const LinkedInLight = ({
+ width = 25,
+ height = 24,
+ className = ""
+}: LinkedInLightProps) => {
+ return (
+
+ );
+};
+
+export default LinkedInLight;
diff --git a/footer/src/images/x-dark.tsx b/footer/src/images/x-dark.tsx
new file mode 100644
index 000000000..8bb64121b
--- /dev/null
+++ b/footer/src/images/x-dark.tsx
@@ -0,0 +1,29 @@
+interface XDarkProps {
+ width?: number;
+ height?: number;
+ className?: string;
+}
+
+export const XDark = ({
+ width = 24,
+ height = 24,
+ className = ""
+}: XDarkProps) => {
+ return (
+
+ );
+};
+
+export default XDark;
diff --git a/footer/src/images/x-light.tsx b/footer/src/images/x-light.tsx
new file mode 100644
index 000000000..358aa1949
--- /dev/null
+++ b/footer/src/images/x-light.tsx
@@ -0,0 +1,29 @@
+interface XLightProps {
+ width?: number;
+ height?: number;
+ className?: string;
+}
+
+export const XLight = ({
+ width = 25,
+ height = 24,
+ className = ""
+}: XLightProps) => {
+ return (
+
+ );
+};
+
+export default XLight;
-
- 
-
-
diff --git a/fern/products/docs/pages/navigation/overview.mdx b/fern/products/docs/pages/navigation/overview.mdx
index a6e940af7..b01fedc44 100644
--- a/fern/products/docs/pages/navigation/overview.mdx
+++ b/fern/products/docs/pages/navigation/overview.mdx
@@ -144,6 +144,26 @@ navigation:
+## Collapsed sections
+
+You can set sections to be collapsed by default when the page loads by adding `collapsed: true` to a section.
+This helps keep the navigation tidy when you have many sections or want to highlight the most important sections by keeping others collapsed.
+
+```yaml {7} Example config with collapsed section
+navigation:
+ - section: Getting Started
+ contents:
+ - page: Introduction
+ path: ./pages/intro.mdx
+ - section: Advanced Topics
+ collapsed: true
+ contents:
+ - page: Custom CSS
+ path: ./pages/advanced/css.mdx
+ - page: Analytics
+ path: ./pages/advanced/analytics.mdx
+```
+
## Sidebar icons
For icons to appear next to sections and pages, add the `icon` key. The value should be a valid [Font Awesome icon](https://fontawesome.com/icons) name. Pro and Brand Icons from Font Awesome are supported.
diff --git a/fern/products/docs/pages/navigation/tabs.mdx b/fern/products/docs/pages/navigation/tabs.mdx
deleted file mode 100644
index 9c79372fc..000000000
--- a/fern/products/docs/pages/navigation/tabs.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'Tabs'
-description: 'The Tabs component allows you to display related content in a tabbed view.'
----
-
-The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples or code snippets.
-
-## Properties
-Visual Editor
-
-
-
-
\ No newline at end of file
+
+
+ Modify your documentation without touching code and publish to your GitHub.
+ + + +
+
+
+
-
+
+
+
+ Visual Editor
+
+
+
+
+
+
+
Modify your documentation without touching code and publish to your GitHub.
+- -
@@ -35,14 +27,10 @@ import { FernFooter } from "../../../components/FernFooter";
{/* Main Content */}
{/* Dashed Pattern - Left Side */}
-
+
+
+ When pagination for an endpoint is configured, the TypeScript SDK method
+ will return a `Page` where `T` is the underlying data type. The `Page`
+ will implement the `AsyncIterable` interface, allowing you to use it in a
+ `for await` loop.
+
+ Below is an example method signature for a list endpoint:
+ ```typescript UsersClient.ts {10-13}
+ import core from "../core";
+
+ export interface UsersClient {
+
+ /**
+ * List all users
+ * @param props
+ * @returns A page of users
+ */
+ list(
+ request: ListUsersRequest = {},
+ requestOptions: core.RequestOptions = {}
+ ): core.Page;
+ }
+ ```
+
+ And here is an example of how a user would use the `list` method:
+ ```typescript
+ const response = await client.users.list();
+ for await (const user of response) {
+ console.log(user);
+ }
+ ```
+
+
+
+
+ When pagination for an endpoint is configured, the Python SDK method
+ will return a `Pager[T]` (specifically a `SyncPager[T]` or an `AsyncPager[T]`) where `T` is the underlying data type. The `Pager[T]`
+ will implement the `Generator` interface, allowing you to use it in a
+ `for ... in` loop.
+
+ Below is an example method signature for a list endpoint:
+ ```python client.py {3-9}
+ class UsersClient:
+
+ def list_with_cursor_pagination(
+ self,
+ *,
+ page: typing.Optional[int] = None,
+ page_size: typing.Optional[int] = None,
+ request_options: typing.Optional[RequestOptions] = None,
+ ) -> SyncPager[User]:
+ ...
+ ```
+
+ And here is an example of how a user would use the `list` method:
+ ```python
+ for user in client.users.list(page=1, page_size=10):
+ print(user)
+ ```
+
+ or if the user is leveraging the asynchronous client:
+ ```python
+ async for user in await client.users.list(page=1, page_size=10):
+ print(user)
+ ```
+
+
+
+### Supported pagination types
+
+Fern supports the following pagination schemes:
+
+| Pagination Scheme | Supported |
+|-------------------|--------------------------------------------------|
+| Offset-based |
+
+
+```yaml Offset
+...
+paths:
+ /path/to/my/endpoint:
+ x-fern-pagination:
+ offset: $request.page_number
+ results: $response.results
+...
+```
+
+```yaml Cursor
+...
+paths:
+ /path/to/my/endpoint:
+ get:
+ x-fern-pagination:
+ cursor: $request.cursor
+ next_cursor: $response.next
+ results: $response.results
+...
+```
+
+
+
+
+
+
+```yaml Offset
+service:
+ endpoints:
+ listWithOffsetPagination:
+ pagination:
+ offset: $request.page
+ results: $response.data
+```
+
+```yaml Cursor
+service:
+ endpoints:
+ listWithCursorPagination:
+ pagination:
+ cursor: $request.starting_after
+ next_cursor: $response.page.next.starting_after
+ results: $response.data
+```
+
+
+
+
+
+
-This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/reference/configuration).
\ No newline at end of file
diff --git a/fern/products/sdks/guides/configure-global-headers.mdx b/fern/products/sdks/guides/configure-global-headers.mdx
index fce786a4a..05621c25c 100644
--- a/fern/products/sdks/guides/configure-global-headers.mdx
+++ b/fern/products/sdks/guides/configure-global-headers.mdx
@@ -5,4 +5,4 @@ description: Guide to configuring global headers in your SDKs.
Learn how to configure global headers for all requests made by your SDKs.
-This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/reference/configuration).
\ No newline at end of file
+Docs are coming soon for this page.
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
diff --git a/fern/products/sdks/guides/configure-idempotency.mdx b/fern/products/sdks/guides/configure-idempotency.mdx
index 202862b4f..ba2690e19 100644
--- a/fern/products/sdks/guides/configure-idempotency.mdx
+++ b/fern/products/sdks/guides/configure-idempotency.mdx
@@ -1,8 +1,111 @@
---
-title: Configure Idempotency
-description: Guide to configuring idempotency in your SDKs.
+title: Configure Idempotency Headers
+description: SDKs that safely support retrying requests
---
-Learn how to configure idempotency for your SDK endpoints to ensure safe retries.
+This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/reference/configuration).
\ No newline at end of file
+For any idempotent endpoints, Fern's SDKs will allow you to specify idempotency headers.
+Typically the headers include `Idempotency-Key`, but you can also specify additional headers.
+
+
+
+ ```ts {5}
+ const response = await client.transactions.send({
+ amount: 100,
+ currency: "usd",
+ }, {
+ idempotencyKey: "64099353-b48b-4dcd-98b7-74df1cc57933"
+ });
+ ```
+
+
+ ```python {4}
+ response = client.transactions.send(
+ amount=100,
+ currency="USD", {
+ idempotency_key="64099353-b48b-4dcd-98b7-74df1cc57933"
+ })
+ ```
+
+
+ ```java {7}
+ var response = client.transactions().send(
+ SendTransactionsRequest.builder()
+ .amount(100)
+ .currency(Currency.USD)
+ .build(),
+ IdempotentRequestOptions.builder()
+ .idempotencyKey("64099353-b48b-4dcd-98b7-74df1cc57933")
+ .build()
+ );
+ ```
+
+
+ ```go {7}
+ response, err := client.Transactions.Send(
+ ctx,
+ &SendTransactionsRequest{
+ Amount: 100,
+ Currency: Currency.USD,
+ },
+ option.WithIdempotencyKey("64099353-b48b-4dcd-98b7-74df1cc57933"),
+ )
+ ```
+
+
+
+Note that the generated SDKs will not allow you to specify idempotency headers
+for non-idempotent endpoints. This is to ensure that the user knows exactly
+which invocations are idempotent and which are not.
+
+### Configuration
+
+To enable idempotency headers in your API, you need to do the following in your overrides file:
+1. Configure the idempotency headers
+2. Mark individual endpoints as idempotent
+
+
+
+
+
+ ```yaml
+ # Configure the idempotency headers
+ x-fern-idempotency-headers:
+ - header: IDEMPOTENCY-KEY
+ name: idempotency_key
+
+ # Mark an individual endpoint as idempotent
+ paths:
+ /foo:
+ post:
+ x-fern-idempotent: true
+ ```
+
+
+
+
+
+
+
+ ```yaml
+ # Configure the idempotency headers
+ name: idempotency-headers
+ auth: bearer
+ idempotency-headers:
+ Idempotency-Key: string
+ Idempotency-Expiration: integer
+ ```
+
+
+ ```yaml
+ # Mark an individual endpoint as idempotent
+ endpoints:
+ foo:
+ idempotent: true
+ ```
+
+
+
+
+```
diff --git a/fern/products/sdks/guides/customize-method-names.mdx b/fern/products/sdks/guides/customize-method-names.mdx
index dfdb5c094..2faae4b6c 100644
--- a/fern/products/sdks/guides/customize-method-names.mdx
+++ b/fern/products/sdks/guides/customize-method-names.mdx
@@ -1,8 +1,73 @@
---
title: Customize Method Names
-description: Guide to customizing method names in your SDKs.
+description: Fine-tune SDK resources and method names
---
-Learn how to customize method names in your generated SDKs to match your preferred naming conventions.
+Fern allows you to fine-tune your SDK method and group names so that
+your SDK reads exactly how you want it to. For example, instead of
+`client.postUsers` you can configure the SDK to read `client.users.create()`.
-This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/reference/configuration).
\ No newline at end of file
+
+
+ ```ts
+ const response = await client.users.create();
+ ```
+
+
+ ```python
+ response = client.users.create()
+ # or async
+ response = await async_client.users.create()
+ ```
+
+
+ ```java
+ const response = client.users().create();
+ ```
+
+
+ ```go
+ const response = client.Users.Create();
+ ```
+
+
+
+Groups can also be arbitrarily nested. For example, if you want to nest the `users`
+endpoints under an `admin` group, the SDK would then read:
+
+
+
+ ```ts
+ const response = await client.admin.users.create();
+ ```
+
+
+ ```python
+ response = client.admin.users.create()
+ # or async
+ response = await async_client.admin.users.create()
+ ```
+
+
+ ```java
+ const response = client.admin().users().create();
+ ```
+
+
+ ```go
+ const response = client.Admin.Users.Create();
+ ```
+
+
+
+
+See how merge.dev uses nested groups [here](https://github.com/merge-api/merge-node-client?tab=readme-ov-file#create-link-token).
+
+
+If you're using an OpenAPI Specification, you'll need to leverage the [`x-fern-sdk-method-name`](/learn/api-definition/openapi/extensions#sdk-method-names)
+extension. If you're using the fern definition, then the method name comes from the endpoint directly.
+
+## Casing
+
+Additionally, Fern handles choosing the appropriate casing for each SDK
+language: `snake_case` in python, `camelCase` in TypeScript and `PascalCase` in Go, etc.
diff --git a/fern/products/sdks/guides/filter-your-endpoints-audiences.mdx b/fern/products/sdks/guides/filter-your-endpoints-audiences.mdx
index 71b4166f7..62612ee7b 100644
--- a/fern/products/sdks/guides/filter-your-endpoints-audiences.mdx
+++ b/fern/products/sdks/guides/filter-your-endpoints-audiences.mdx
@@ -5,4 +5,4 @@ description: Guide to filtering your API endpoints using audiences.
Learn how to use audiences to filter which endpoints are included in your SDKs and documentation.
-
+Docs are coming soon for this page.
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
diff --git a/fern/products/sdks/guides/self-host-fern-generators.mdx b/fern/products/sdks/guides/self-host-fern-generators.mdx
index c4bfd722a..1cf638893 100644
--- a/fern/products/sdks/guides/self-host-fern-generators.mdx
+++ b/fern/products/sdks/guides/self-host-fern-generators.mdx
@@ -2,6 +2,6 @@
title: Self host Fern's SDK generators
---
-Learn how to preview your SDKs locally before publishing them.
+Fern supports self-hosting so that you can run Fern's SDK generators on your own infrastructure.
-This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/reference/configuration).
\ No newline at end of file
+Docs are coming soon for this page.
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
diff --git a/fern/products/sdks/guides/setup-local-sdk-previews.mdx b/fern/products/sdks/guides/setup-local-sdk-previews.mdx
index 8ab1a4671..bb4a41dc1 100644
--- a/fern/products/sdks/guides/setup-local-sdk-previews.mdx
+++ b/fern/products/sdks/guides/setup-local-sdk-previews.mdx
@@ -1,8 +1,74 @@
---
title: Setup local SDK previews
-description: Guide to setting up local SDK previews.
+subtitle: Use Fern's CLI tool to preview your SDK locally.
---
-Learn how to preview your SDKs locally before publishing them.
+[Once you configure your SDK](/learn/sdks/getting-started/generate-your-first-sdk), you can preview the generated SDK code using Fern's CLI.
-This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/reference/configuration).
+Simply append the `--preview` flag to the command used to generate the SDK and you will see the generated code populated in a `.preview` folder within your `fern` folder.
+
+
+ [If you have added custom code to your SDK](/learn/sdks/capabilities/augment-with-custom-code), `--preview` will
+ preserve those changes.
+
+
+Here's an example of how you can preview your SDK:
+
+
+### Generator configuration
+```yaml generators.yml
+api:
+ path: ./path/to/openapi.yml
+groups:
+ python-sdk:
+ generators:
+ - name: fernapi/fern-python-sdk
+ version: 3.0.0
+ output:
+ location: pypi
+ package-name: imdb
+ token: ${PYPI_TOKEN}
+ github:
+ repository: imdb/imdb-python
+ config:
+ client_class_name: imdb
+```
+
+### Invoke the Fern CLI
+
+```shell
+fern generate --group python-sdk --preview
+```
+
+### Preview your SDK
+
+The resulting folder structure will look like this:
+
+
+
+```shell {3-5}
+fern/
+ ├─ fern.config.json
+ ├─ .preview/
+ └─ fern-python-sdk/
+ └─ ...
+ ├─ generators.yml
+ └─ openapi/
+ └─ openapi.yml
+```
+
+
+```shell {3-5}
+fern/
+ ├─ fern.config.json
+ ├─ .preview/
+ └─ fern-python-sdk/
+ └─ ...
+ ├─ generators.yml
+ └─ definition/
+ ├─ api.yml
+ └─ imdb.yml
+```
+
+
+
diff --git a/fern/products/sdks/images/arrow-right-black.svg b/fern/products/sdks/images/arrow-right-black.svg
new file mode 100644
index 000000000..12d51abcf
--- /dev/null
+++ b/fern/products/sdks/images/arrow-right-black.svg
@@ -0,0 +1,3 @@
+
diff --git a/fern/products/sdks/images/arrow-right-white.svg b/fern/products/sdks/images/arrow-right-white.svg
new file mode 100644
index 000000000..857b42e6d
--- /dev/null
+++ b/fern/products/sdks/images/arrow-right-white.svg
@@ -0,0 +1,3 @@
+
diff --git a/fern/products/sdks/images/c-card-dark.png b/fern/products/sdks/images/c-card-dark.png
new file mode 100644
index 000000000..87526cb99
Binary files /dev/null and b/fern/products/sdks/images/c-card-dark.png differ
diff --git a/fern/products/sdks/images/c-card.png b/fern/products/sdks/images/c-card.png
new file mode 100644
index 000000000..8681b3ecb
Binary files /dev/null and b/fern/products/sdks/images/c-card.png differ
diff --git a/fern/products/sdks/images/csharp-card-dark.png b/fern/products/sdks/images/csharp-card-dark.png
new file mode 100644
index 000000000..7ab229664
Binary files /dev/null and b/fern/products/sdks/images/csharp-card-dark.png differ
diff --git a/fern/products/sdks/images/csharp-card.png b/fern/products/sdks/images/csharp-card.png
new file mode 100644
index 000000000..971853730
Binary files /dev/null and b/fern/products/sdks/images/csharp-card.png differ
diff --git a/fern/products/sdks/images/go-card-dark.png b/fern/products/sdks/images/go-card-dark.png
new file mode 100644
index 000000000..97e723d39
Binary files /dev/null and b/fern/products/sdks/images/go-card-dark.png differ
diff --git a/fern/products/sdks/images/go-card.png b/fern/products/sdks/images/go-card.png
new file mode 100644
index 000000000..878a6e2d5
Binary files /dev/null and b/fern/products/sdks/images/go-card.png differ
diff --git a/fern/products/sdks/images/java-card-dark.png b/fern/products/sdks/images/java-card-dark.png
new file mode 100644
index 000000000..be2c6c9c8
Binary files /dev/null and b/fern/products/sdks/images/java-card-dark.png differ
diff --git a/fern/products/sdks/images/java-card.png b/fern/products/sdks/images/java-card.png
new file mode 100644
index 000000000..b492c2095
Binary files /dev/null and b/fern/products/sdks/images/java-card.png differ
diff --git a/fern/products/sdks/images/kotlin-card-dark.png b/fern/products/sdks/images/kotlin-card-dark.png
new file mode 100644
index 000000000..740cc8689
Binary files /dev/null and b/fern/products/sdks/images/kotlin-card-dark.png differ
diff --git a/fern/products/sdks/images/kotlin-card.png b/fern/products/sdks/images/kotlin-card.png
new file mode 100644
index 000000000..1b2e5db58
Binary files /dev/null and b/fern/products/sdks/images/kotlin-card.png differ
diff --git a/fern/products/sdks/images/mcp-card-dark.png b/fern/products/sdks/images/mcp-card-dark.png
new file mode 100644
index 000000000..57f18e84b
Binary files /dev/null and b/fern/products/sdks/images/mcp-card-dark.png differ
diff --git a/fern/products/sdks/images/mcp-card.png b/fern/products/sdks/images/mcp-card.png
new file mode 100644
index 000000000..1a85cd1a9
Binary files /dev/null and b/fern/products/sdks/images/mcp-card.png differ
diff --git a/fern/products/sdks/images/php-card-dark.png b/fern/products/sdks/images/php-card-dark.png
new file mode 100644
index 000000000..e38353490
Binary files /dev/null and b/fern/products/sdks/images/php-card-dark.png differ
diff --git a/fern/products/sdks/images/php-card.png b/fern/products/sdks/images/php-card.png
new file mode 100644
index 000000000..a1f56c40f
Binary files /dev/null and b/fern/products/sdks/images/php-card.png differ
diff --git a/fern/products/sdks/images/python-card-dark.png b/fern/products/sdks/images/python-card-dark.png
new file mode 100644
index 000000000..d81bc9f72
Binary files /dev/null and b/fern/products/sdks/images/python-card-dark.png differ
diff --git a/fern/products/sdks/images/python-card.png b/fern/products/sdks/images/python-card.png
new file mode 100644
index 000000000..07010eaf6
Binary files /dev/null and b/fern/products/sdks/images/python-card.png differ
diff --git a/fern/products/sdks/images/ruby-card-dark.png b/fern/products/sdks/images/ruby-card-dark.png
new file mode 100644
index 000000000..d7ff56f5a
Binary files /dev/null and b/fern/products/sdks/images/ruby-card-dark.png differ
diff --git a/fern/products/sdks/images/ruby-card.png b/fern/products/sdks/images/ruby-card.png
new file mode 100644
index 000000000..45e28a9c0
Binary files /dev/null and b/fern/products/sdks/images/ruby-card.png differ
diff --git a/fern/products/sdks/images/rust-card-dark.png b/fern/products/sdks/images/rust-card-dark.png
new file mode 100644
index 000000000..02e42dd31
Binary files /dev/null and b/fern/products/sdks/images/rust-card-dark.png differ
diff --git a/fern/products/sdks/images/rust-card.png b/fern/products/sdks/images/rust-card.png
new file mode 100644
index 000000000..0411656bd
Binary files /dev/null and b/fern/products/sdks/images/rust-card.png differ
diff --git a/fern/products/sdks/images/swift-card-dark.png b/fern/products/sdks/images/swift-card-dark.png
new file mode 100644
index 000000000..3844ba368
Binary files /dev/null and b/fern/products/sdks/images/swift-card-dark.png differ
diff --git a/fern/products/sdks/images/swift-card.png b/fern/products/sdks/images/swift-card.png
new file mode 100644
index 000000000..3243cb0e9
Binary files /dev/null and b/fern/products/sdks/images/swift-card.png differ
diff --git a/fern/products/sdks/images/typescript-card-dark.png b/fern/products/sdks/images/typescript-card-dark.png
new file mode 100644
index 000000000..b5c31388a
Binary files /dev/null and b/fern/products/sdks/images/typescript-card-dark.png differ
diff --git a/fern/products/sdks/images/typescript-card-dark.svg b/fern/products/sdks/images/typescript-card-dark.svg
new file mode 100644
index 000000000..09b07f46f
--- /dev/null
+++ b/fern/products/sdks/images/typescript-card-dark.svg
@@ -0,0 +1,60 @@
+
diff --git a/fern/products/sdks/images/typescript-card.png b/fern/products/sdks/images/typescript-card.png
new file mode 100644
index 000000000..422929f92
Binary files /dev/null and b/fern/products/sdks/images/typescript-card.png differ
diff --git a/fern/products/sdks/introduction.mdx b/fern/products/sdks/introduction.mdx
index 72e7f8bdb..53fe85dfd 100644
--- a/fern/products/sdks/introduction.mdx
+++ b/fern/products/sdks/introduction.mdx
@@ -1,8 +1,258 @@
---
-title: Overview
-description: Overview of Fern SDKs.
+title: SDKs Overview
+description: Generate idiomatic SDKs in multiple programming languages
---
-Welcome to the Fern SDKs documentation! Here you'll find information about all supported SDKs, their features, and how to get started.
+
+
+
+The MCP generator is in development. Interested in offering an MCP server for your API? Reach out via Slack or support@buildwithfern.com.
+
+
+[Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open standard by Anthropic that streamlines how AI applications connect with external data sources and tools, enabling AI agents to directly use your product’s APIs.
+
+A “Built with Fern” MCP server augments your existing TypeScript SDK with MCP capabilities and integrates seamlessly with popular AI-powered tools including Cursor, Claude Desktop, and Windsurf. You can find a full list of MCP clients [here](https://modelcontextprotocol.io/clients).
+
+## How it works
+
+**Fern can build a production-ready MCP server on top of your existing TypeScript SDK.** We maintain the package in its own `git` repository, making it easy for your existing developer community to discover and contribute to the project. We can also automatically publish new versions of the package to `npm` for you.
+
+End users of a “Built with Fern” MCP server can typically get started with a **single config**:
+
+```json
+{
+ "mcpServers": {
+ "": {
+ "command": "npx",
+ "args": [ "-y", "-mcp-server@latest" ]
+ }
+ }
+}
+
+```
+
+To learn more about Model Context Protocol (MCP) servers, check out the [MCP server docs](https://modelcontextprotocol.io/quickstart/server).
+
+## Case study: Webflow
+
+**We worked with Webflow to launch their [official MCP server](https://www.npmjs.com/package/webflow-mcp-server)** using the existing [Fern-generated TypeScript SDK](https://github.com/webflow/js-webflow-api).
+
+Check out the [source code on GitHub](https://github.com/webflow/mcp-server) and read the announcement from Webflow’s CTO on X:
+
+This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/sdks/capabilities/custom-code).
+## Adding custom logic
+
+If you want your SDK to do more than just make basic API calls (like combining
+multiple calls, processing data, adding utilities), you can use `.fernignore` to
+protect your custom code from being overwritten during regeneration.
+
+Simply add your custom files to the SDK repository and list them out in `.fernignore`. Fern
+won't override any files that you add in `.fernignore`.
+
+To get started adding custom code:
+
+
+
+ ### Create a new file and add your custom logic
+
+
+ ```python title="src//helper.py"
+ def my_helper() -> None:
+ print "Hello World!"
+ ```
+
+ ### Add your file to `.fernignore`
+
+ A `.fernignore` file is automatically created in your SDK repository when you use GitHub publishing.
+
+
+ ```yaml {3} title=".fernignore"
+ # Specify files that shouldn't be modified by Fern
+
+ src//helper.py
+ ```
+
+ ### Consume the helper
+
+ Now your users can consume the helper function by importing it from the SDK:
+
+ ```python
+ from package.helper import my_helper
+
+ my_helper()
+ ```
+
+
+ ## Adding custom SDK methods
+
+ Fern also allows you to add custom methods to the SDK itself (e.g.
+ `client.my_method()` ) by inheriting the Fern generated client and then
+ extending it.
+
+
+ See an example from ElevenLabs using this process in their [Python SDK](https://github.com/elevenlabs/elevenlabs-python/blob/main/src/elevenlabs/client.py).
+
+
+
+ ### Update `generators.yml` configuration
+
+ To add a custom method to the Python SDK, you will need to configure the
+ generator to output the client in a file called `base_client.py`. Then, you can
+ extend the base client and add whatever methods you want.
+
+ ```yaml {4-8} title="generators.yml"
+ - name: fernapi/fern-python-sdk
+ version: "..."
+ config:
+ client:
+ class_name: BaseClient # The name of the generated client you will extend
+ filename: base_client.py # The name of the file the generated client will live in
+ exported_class_name: YourClient # The name of the class you will be creating that extends the generated client
+ exported_filename: client.py
+ ```
+ ### Generate the SDK
+
+ Trigger SDK generation by running `fern generate`:
+
+ ```bash
+ fern generate --group sdk
+ ```
+
+ ### Import and extend the generated client
+
+ First, import the Fern generated base clients from `.base_client.py` and extend them to create your custom clients. Then, add whatever methods you want.
+
+ ```python title="src//client.py"
+ from .base_client import \
+ BaseClient
+
+ class YourClient(BaseClient):
+
+ def my_helper(self) -> None
+ print("Hello World")
+
+ ```
+
+
+ See an example [client.py](https://github.com/elevenlabs/elevenlabs-python/blob/main/src/elevenlabs/client.py) from ElevenLabs.
+
+
+
+ ### Update `.fernignore`
+
+ Add the `client.py` to `.fernignore`.
+
+ ```diff title=".fernignore"
+ + src//client.py
+ ```
+
+
+ See an example [.fernignore](https://github.com/elevenlabs/elevenlabs-python/blob/main/.fernignore) from ElevenLabs.
+
+
+
+ ### Consume the method
+
+ Now your users can consume the helper function by importing it from the SDK:
+
+ ```python
+ client.my_helper()
+ ```
+
+
+
+## Adding custom dependencies
+
+To add packages that your custom code requires, update your `generators.yml`.
+
+ ```yaml {4-7} title="generators.yml"
+ - name: fernapi/fern-python-sdk
+ version: "..."
+ config:
+ extra_dependencies:
+ numpy: '1.2.0'
+ extra_dev_dependencies:
+ requests_mock: '1.12.1'
+ ```
\ No newline at end of file
diff --git a/fern/products/sdks/sdks.yml b/fern/products/sdks/sdks.yml
index c1fd3e998..94c954406 100644
--- a/fern/products/sdks/sdks.yml
+++ b/fern/products/sdks/sdks.yml
@@ -110,6 +110,8 @@ navigation:
path: ./overview/ruby/custom-code.mdx
- link: Customer Showcase
href: https://buildwithfern.com/showcase
+ - page: MCP Server
+ path: ./overview/mcp-server/introduction.mdx
- section: Guides
contents:
- page: Customize Method Names
@@ -125,7 +127,7 @@ navigation:
- page: Filter Your Endpoints (Audiences)
path: ./guides/filter-your-endpoints-audiences.mdx
- page: Self-host Fern's SDK Generators
- path: ./guides/filter-your-endpoints-audiences.mdx
+ path: ./guides/self-host-fern-generators.mdx
- section: Reference
contents:
- page: generators.yml
diff --git a/footer/src/FernFooter.tsx b/footer/src/FernFooter.tsx
index 64dc1560f..a75bc3a67 100644
--- a/footer/src/FernFooter.tsx
+++ b/footer/src/FernFooter.tsx
@@ -5,6 +5,12 @@ import { BuiltWithFernLight } from './images/builtwithfern-light';
import { BuiltWithFernDark } from './images/builtwithfern-dark';
import { BuiltWithFernFrameLight } from './images/builtwithfern-frame-light';
import { BuiltWithFernFrameDark } from './images/builtwithfern-frame-dark';
+import { GitHubLight } from './images/github-light';
+import { GitHubDark } from './images/github-dark';
+import { XLight } from './images/x-light';
+import { XDark } from './images/x-dark';
+import { LinkedInLight } from './images/linkedin-light';
+import { LinkedInDark } from './images/linkedin-dark';
import { Soc2Logo } from './images/soc2';
export const FernFooter: React.FC = () => {
@@ -129,6 +135,26 @@ export const FernFooter: React.FC = () => {
gap: 1rem;
}
+ .footer-column-socials {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .footer-social-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 0.25rem;
+
+ &:hover {
+ background-color: var(--grayscale-a4);
+
+ img {
+ fill: var(--grayscale-a12);
+ }
+ }
+ }
+
.footer-link {
font-weight: 400;
font-size: 0.875rem;
@@ -137,10 +163,6 @@ export const FernFooter: React.FC = () => {
transition: color 0.15s ease-in-out;
}
- .footer-link svg {
- display: none !important;
- }
-
.footer-link:hover {
color: var(--grayscale-12);
}
@@ -258,9 +280,9 @@ export const FernFooter: React.FC = () => {
@@ -268,7 +290,7 @@ export const FernFooter: React.FC = () => {
+
+
-
-
+
{/* Dashed Pattern - Right Side */}
-
-
-
+
{/* Hero Section */}
@@ -120,13 +108,13 @@ import { FernFooter } from "../../../components/FernFooter";
{/* Action Buttons */}
+
diff --git a/fern/products/sdks/guides/configure-auto-pagination.mdx b/fern/products/sdks/guides/configure-auto-pagination.mdx
index b0c8d660a..37a3efa02 100644
--- a/fern/products/sdks/guides/configure-auto-pagination.mdx
+++ b/fern/products/sdks/guides/configure-auto-pagination.mdx
@@ -1,8 +1,165 @@
---
-title: Configure Auto-Pagination
-description: Guide to configuring auto-pagination in your SDKs.
+title: Configure Auto Pagination
+description: Paginate through API responses easily with offset, cursor, and link-based pagination.
---
-Learn how to enable and configure auto-pagination for paginated endpoints in your SDKs.
+
-
- Quickstart
+
+ Introduction
-
- Capabilities
+
+ Configuration
@@ -143,8 +131,8 @@ import { FernFooter } from "../../../components/FernFooter";
+
@@ -293,7 +281,7 @@ import { FernFooter } from "../../../components/FernFooter";
View
-
-
- Capabilities
+
+ Configuration
@@ -143,8 +131,8 @@ import { FernFooter } from "../../../components/FernFooter";
Docs
-
-
+
+
+
@@ -261,7 +249,7 @@ import { FernFooter } from "../../../components/FernFooter";
View
-
+
@@ -276,7 +264,7 @@ import { FernFooter } from "../../../components/FernFooter";
View
-
-
+
+
A beautiful, interactive documentation website. @@ -202,12 +190,12 @@ import { FernFooter } from "../../../components/FernFooter";
- AI Search
-
-
+ Ask Fern
+
+
@@ -246,7 +234,7 @@ import { FernFooter } from "../../../components/FernFooter";
Docs
-
-
+ Ask Fern
+
+
- Let users find answers in your documentation instantly + AI Search that lets users find answers in your documentation instantly.
+
+
+
+
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature.
+ {/* Dashed Pattern - Left Side */}
+
+
+
+
diff --git a/fern/products/sdks/overview/mcp-server/introduction.mdx b/fern/products/sdks/overview/mcp-server/introduction.mdx
new file mode 100644
index 000000000..4eddfb077
--- /dev/null
+++ b/fern/products/sdks/overview/mcp-server/introduction.mdx
@@ -0,0 +1,64 @@
+---
+title: Model Context Protocol
+description: Learn how to use the Model Context Protocol (MCP) to integrate AI capabilities with your Fern documentation
+---
+
+
+ {/* */}
+
+
+ {/* Dashed Pattern - Right Side */}
+
+ {/* */}
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ TypeScript
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ Python
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ Go
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ Java
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ .NET
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ PHP
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ Ruby
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ MCP Server
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ Request Rust
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ Request Swift
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ 
+
+
+
+ Request C++
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ Request Kotlin
+
+
+
+
+
+ + +## Why "Built with Fern"? + +There are a few advantages in partnering with Fern to build your MCP server: + +- **Keep your MCP server in sync with your API** - our implementation augments your existing TypeScript SDK. +- **Integrate with Fern Docs and AI Chat** - give your users the ability to query your docs directly from inside of Cursor, Claude Desktop, and more. +- **For APIs at scale** - leverage our team’s expertise developing, testing, and deploying MCP servers for products with hundreds of API endpoints. +- **Thought partnership** - the AI ecosystem is changing fast and we’re here to navigate it together with you, from the latest techniques to the tools that power them. + +## How else can Fern support my MCP server launch? + +We can provide **ready-to-use social media assets** for announcing your MCP support: + +- LinkedIn post template +- X (Twitter) post template +- Email announcement template +- Social media graphics + +As well as all of the **detailed documentation** that you’ve come to expect from Fern: + +- Getting started guide +- API reference +- Usage guidelines and best practices diff --git a/fern/products/sdks/overview/python/custom-code.mdx b/fern/products/sdks/overview/python/custom-code.mdx index 65ee99a1c..b24dc83c7 100644 --- a/fern/products/sdks/overview/python/custom-code.mdx +++ b/fern/products/sdks/overview/python/custom-code.mdx @@ -1,8 +1,144 @@ --- title: Adding custom code -description: Augment your TypeScript SDK with custom utilities +description: Augment your Python SDK with custom utilities --- -Learn how to extend your Fern Python SDK with custom code and utilities. +Fern-generated SDKs are designed to be extended with custom code. Your custom +code can add additional functionality to the SDK and live in harmony with the +generated code. This page explains how to configure custom logic using a +`.fernignore` file, create custom SDK methods, and add additional dependencies to your Python SDK. -🚢 We just launched our Webflow MCP server! Check out Allan’s thread to learn more, watch the demo video below, then give it a try here: https://t.co/T2K3OpJ6O8 https://t.co/bFUfC64pcf pic.twitter.com/oonYuyjHiT
— Webflow (@webflow) April 2, 2025