> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Use skybridge/server

> Add view registration and TypeScript type inference to your existing MCP server with skybridge/server.

# Use skybridge/server

This guide shows you how to add `skybridge/server` to an existing MCP server to enable view support with full TypeScript type inference.

## Prerequisites

You should already have:

* A working MCP server using the official [TypeScript MCP SDK](https://github.com/modelcontextprotocol/typescript-sdk)
* Node.js 24+

## Install Skybridge

```bash theme={null}
pnpm add skybridge
```

## Update your server

Replace your `McpServer` import with Skybridge's enhanced version:

```typescript theme={null}
// Before
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

// After
import { McpServer } from "skybridge/server";
```

Keep your existing dependency to @modelcontextprotocol/sdk in your project, skybridge does not replaces it, but depends on it.

Your existing tools, resources, and prompts will continue to work as before. With `skybridge/server`, `registerTool` provides an optional `view` field so you can bind a tool to a React view in a single call.

## Project structure

```
your-project/
├── src/
│   ├── server.ts             # MCP server entry
│   └── views/
│       └── my-view.tsx     # View component
├── vite.config.ts            # Vite + Skybridge plugin
├── tsconfig.json
└── package.json
```

By default views are located in `src/views/`. This is configurable via the `viewsDir` option in the provided Vite plugin.

### View naming convention

A view's file name must match `view.component` in `registerTool`. See [registerTool](/api-reference/register-tool).

## Set up Vite

Install the web dependencies and create `vite.config.ts` at the project root:

```bash theme={null}
pnpm add react react-dom
pnpm add -D vite typescript @types/react @types/react-dom
```

```typescript theme={null}
// vite.config.ts
import { defineConfig } from "vite";
import { skybridge } from "skybridge/vite";

export default defineConfig({
  plugins: [skybridge()],
});
```

Make sure `tsconfig.json` includes the generated types:

```json theme={null}
{
  "include": ["src", ".skybridge/**/*.d.ts"]
}
```

## Create your first view

Create `src/views/my-view.tsx` and `export default` a React component:

```tsx theme={null}
export default function MyView() {
  return (
    <div>
      <h2>Hello from Skybridge!</h2>
      <p>Your view is working!</p>
    </div>
  );
}
```

## Register the view

In your server code, register the view with `registerTool` and `view`:

```typescript theme={null}
import { McpServer } from "skybridge/server";
import { z } from "zod";

const server = new McpServer({ name: "my-app", version: "1.0" }, {})
  .registerTool(
    {
      name: "my-view",
      description: "My first view",
      inputSchema: { message: z.string() },
      view: { component: "my-view" }, // must match src/views/my-view.tsx
    },
    async ({ message }) => {
      return { content: message || "Hello World" };
    },
  );
```

## Configure your dev server

Update your server startup to serve the MCP endpoint. If you're using Express:

```typescript theme={null}
import { McpServer } from "skybridge/server";
import { z } from "zod";
import express from "express";

const app = express();
const server = new McpServer({ name: "my-app", version: "1.0" }, {})
  .registerTool(
    {
      name: "my-view",
      inputSchema: { message: z.string() },
      view: { component: "my-view" },
    },
    async ({ message }) => {
      return { content: message };
    },
  );

// Serve the MCP endpoint
app.use("/mcp", server.handler());

// Start the server
app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});
```

## Type Safety

For full type inference and autocomplete, use method chaining and `generateHelpers`. See [Type Safety](/concepts/type-safety) for the complete setup.

Quick summary:

1. Use method chaining when registering tools
2. Export `type AppType = typeof server`
3. Create a `helpers.ts` file with `generateHelpers<AppType>()`
4. Import typed hooks from your helper file