# SvelteKit

> Set up the inference shell proxy in SvelteKit applications.

**URL:** https://inference.sh/docs/api/sdk/proxy/sveltekit
**Last updated:** 2026-10-11

---

Set up the inference shell proxy in SvelteKit applications.

---

## Installation

```bash
npm install @inferencesh/sdk
```

---

## Basic Setup

Create `src/routes/api/inference/proxy/+server.ts`:

```typescript
import { createHandler } from "@inferencesh/sdk/proxy/svelte";

const handler = createHandler({ allowedEndpoints: ["my-team/*"] });

export const GET = handler;
export const POST = handler;
```

The proxy forwards app runs and agent chats only; `allowedEndpoints` limits them to your apps and agents. See [options](/docs/api/sdk/server-proxy#options).

> [!WARNING]
> Anyone who can reach the proxy route runs apps and agents on your API key. In production set `allowedEndpoints` and `isAuthenticated` (see [what the proxy forwards](/docs/api/sdk/server-proxy#what-the-proxy-forwards)), and create a **Run only** key in a workspace that holds nothing else.

---

## Environment Variable

Add to your `.env`:

```bash
INFERENCE_API_KEY="inf_your_key_here"
```

Make sure to expose it in `svelte.config.js` if needed:

```javascript
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";

export default defineConfig({
  plugins: [sveltekit()],
  define: {
    // Expose to server-side code
    "process.env.INFERENCE_API_KEY": JSON.stringify(process.env.INFERENCE_API_KEY),
  },
});
```

---

## Client Configuration

```typescript
// src/lib/inference.ts
import { inference } from "@inferencesh/sdk";

export const client = inference({
  proxyUrl: "/api/inference/proxy"
});
```

Use in components:

```svelte
<script lang="ts">
  import { client } from "$lib/inference";

  let prompt = "";
  let result = null;
  let loading = false;

  async function generate() {
    loading = true;
    result = await client.run({
      app: "infsh/flux",
      input: { prompt }
    });
    loading = false;
  }
</script>

<input bind:value={prompt} />
<button on:click={generate} disabled={loading}>
  {loading ? "Generating..." : "Generate"}
</button>

{#if result}
  <img src={result.output.url} alt={prompt} />
{/if}
```

---

## With Authentication

`isAuthenticated` gets the `RequestEvent`; `false` answers `401`:

```typescript
// src/routes/api/inference/proxy/+server.ts
import { createHandler } from "@inferencesh/sdk/proxy/svelte";

const handler = createHandler({
  allowedEndpoints: ["my-team/*"],
  isAuthenticated: (event) => Boolean(event.locals.user), // set by hooks.server.ts
});

export const GET = handler;
export const POST = handler;
```

---

## Custom API Key Resolution

```typescript
import { createHandler } from "@inferencesh/sdk/proxy/svelte";

const handler = createHandler({
  resolveApiKey: async () => {
    // Load from secrets manager or database
    return await getSecret("INFERENCE_API_KEY");
  }
});

export const GET = handler;
export const POST = handler;
```

---

## Streaming

The SvelteKit handler supports streaming responses for real-time task updates.

```typescript
import { client } from "$lib/inference";

const result = await client.run(
  { app: "infsh/flux", input: { prompt } },
  {
    onUpdate: (update) => {
      console.log("Status:", update.status);
    }
  }
);
```