Skybridge

v1.0.2Developer Toolsstable

Skybridge is a full-stack TypeScript framework for MCP Apps and ChatGPT Apps. Type-safe. React-powered. Platform-agnostic.

agentaiapps-sdkchatgptclaude
Share:
1,143
Stars
0
Downloads
0
Weekly
0/5

What is Skybridge?

Skybridge is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to skybridge is a full-stack typescript framework for mcp apps and chatgpt apps. type-safe. react-powered. platform-agnostic.

Skybridge is a full-stack TypeScript framework for MCP Apps and ChatGPT Apps. Type-safe. React-powered. Platform-agnostic.

This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.

Features

  • Skybridge is a full-stack TypeScript framework for MCP Apps

Use Cases

Type-safe MCP app development
React-powered AI application framework
alpic-ai

Maintainer

LicenseMIT
Languagetypescript
Versionv1.0.2
UpdatedMay 21, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux

Installation

NPM

npx -y skybridge

Manual Installation

npx -y skybridge

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

How to Set Up and Use Skybridge

Skybridge is a full-stack TypeScript framework for building MCP applications and ChatGPT apps with React-powered views, tRPC-style type safety, and live hot-module reload via a built-in development tunnel. It bridges the gap between MCP tool servers and visual UI by letting you attach React components directly to MCP tool outputs, making it suitable for ecommerce, travel, SaaS, and productivity AI apps that need both backend tool logic and a rendered frontend. Teams use Skybridge to migrate existing MCP servers to a richer application framework or scaffold new AI-native apps from scratch.

Prerequisites

  • Node.js 18 or later installed
  • npm 7 or later (for npx and workspace support)
  • An MCP-compatible client such as Claude Desktop or ChatGPT with plugin support
  • Basic familiarity with TypeScript and React
1

Scaffold a new Skybridge app

Use the create command to scaffold a new Skybridge application with a pre-configured project structure, TypeScript setup, and example MCP tools.

npm create skybridge@latest my-app
2

Install dependencies

Navigate into your new project and install all npm dependencies.

cd my-app
npm install
3

Start the development server

Launch the Skybridge dev server which provides hot module reload and a permanent tunnel so your local app is immediately reachable from Claude or ChatGPT without any additional configuration.

npx skybridge dev
4

Add a new MCP tool with a React view

Use the Skybridge CLI to generate a new tool scaffold. The generated file will include the MCP tool definition and the corresponding React component in a single type-safe module.

npx skybridge add view my-tool
5

Configure your MCP client to use Skybridge

Register your Skybridge app as an MCP server in Claude Desktop or another MCP client. Use the npx command with the skybridge package so the client can launch the server on demand.

{
  "mcpServers": {
    "skybridge": {
      "command": "npx",
      "args": ["-y", "skybridge"]
    }
  }
}
6

Add Skybridge as an agent skill

For coding agents that support the skills protocol, install Skybridge as a reusable skill so the agent can scaffold and extend MCP apps autonomously.

npx skills add alpic-ai/skybridge -s skybridge

Skybridge Examples

Client configuration

Claude Desktop configuration to launch a Skybridge MCP app server using npx.

{
  "mcpServers": {
    "skybridge": {
      "command": "npx",
      "args": ["-y", "skybridge"]
    }
  }
}

Prompts to try

Example prompts for working with Skybridge in an agent or MCP client context.

- "Create a new MCP app using Skybridge with a product catalog view"
- "Migrate my existing MCP server to the Skybridge framework and add React views"
- "Add a new view to my Skybridge app that displays search results as cards"
- "Show me all available Skybridge tools and their type signatures"
- "Generate a travel booking MCP app with Skybridge that has a flight results component"

Troubleshooting Skybridge

The dev tunnel is not accessible from Claude or ChatGPT

Ensure 'npx skybridge dev' is still running in your terminal — the tunnel is only active while the dev process is alive. Check for firewall rules blocking the tunnel port and verify your network allows outbound connections to the Skybridge tunnel service.

TypeScript type errors when adding new tools or views

Skybridge uses tRPC-style inference, so tool input/output types must be defined with the Skybridge schema helpers before they propagate to React components. Run 'npx tsc --noEmit' to see the full error chain and ensure your tool's return type matches the view's props type.

npx skybridge fails with 'package not found' on first run

Confirm you are using npm 7 or later ('npm --version'). If the package is not resolving, run 'npm install -g skybridge' to install globally and then invoke 'skybridge' directly instead of using npx.

Frequently Asked Questions about Skybridge

What is Skybridge?

Skybridge is a Model Context Protocol (MCP) server that skybridge is a full-stack typescript framework for mcp apps and chatgpt apps. type-safe. react-powered. platform-agnostic. It connects AI assistants to external tools and data sources through a standardized interface.

How do I install Skybridge?

Install via npm with the command: npx -y skybridge. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).

Which AI clients work with Skybridge?

Skybridge works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.

Is Skybridge free to use?

Yes, Skybridge is open source and available under the MIT license. You can use it freely in both personal and commercial projects.

Browse More Developer Tools MCP Servers

Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.

Quick Config Preview

{ "mcpServers": { "skybridge": { "command": "npx", "args": ["-y", "skybridge"] } } }

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide →

Ready to use Skybridge?

Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.

33,000+ ServersFree & Open SourceStep-by-Step Guides