Installation

Add WildwoodComponents to your project. The library is available for multiple platforms — choose your framework below.

Step 1: Add the Package

Install the WildwoodComponents NuGet package using the .NET CLI:

dotnet add package WildwoodComponents

Or add it directly to your .csproj file:

<ItemGroup>
    <PackageReference Include="WildwoodComponents" Version="1.1.0" />
</ItemGroup>

Tip: Use a project reference during development so you get live changes and IntelliSense from the source. Switch to the NuGet package for production deployments.

Install the React SDK packages via npm or pnpm:

npm install @wildwood/core @wildwood/react

Or with pnpm:

pnpm add @wildwood/core @wildwood/react

The @wildwood/core package provides the API client and services. The @wildwood/react package provides React hooks and pre-built components.

Install the React Native SDK packages:

npm install @wildwood/core @wildwood/react-native

The @wildwood/react-native package provides native components using View, Text, and Pressable instead of HTML.

Install the Node.js SDK for server-side usage:

npm install @wildwood/core @wildwood/node

The @wildwood/node package provides Express middleware for JWT validation and API proxying. Express is an optional peer dependency.

Step 2: Setup

Static Assets

Add the theme stylesheet in your <head> and the JS interop before </body>:

<!-- In <head> -->
<link rel="stylesheet" href="_content/WildwoodComponents.Blazor/css/wildwood-themes.css" />

<!-- Before </body> -->
<script src="_content/WildwoodComponents.Blazor/js/wildwood-components.js"></script>

Namespace Imports

Add to your _Imports.razor:

@using WildwoodComponents.Blazor.Models
@using WildwoodComponents.Blazor.Services
@using WildwoodComponents.Blazor.Components.Base
@using WildwoodComponents.Blazor.Components.Authentication
@using WildwoodComponents.Blazor.Components.Registration

Important: Add @using WildwoodComponents.Blazor.Components.Base if any pages reference BaseWildwoodComponent or ComponentErrorEventArgs.

App Entry Point

Wrap your app with WildwoodProvider to initialize the SDK:

import { WildwoodProvider } from '@wildwood/react';

function App() {
  return (
    <WildwoodProvider config={{
      baseUrl: 'https://api.example.com',
      appId: 'your-app-id',
      enableAutoTokenRefresh: true,
    }}>
      {/* Your routes and components */}
    </WildwoodProvider>
  );
}

Import components and hooks as needed:

import { useAuth, AuthenticationComponent } from '@wildwood/react';
import type { AuthenticationResponse } from '@wildwood/core';

App Entry Point

Wrap your app with WildwoodProvider:

import { WildwoodProvider } from '@wildwood/react-native';

function App() {
  return (
    <WildwoodProvider config={{
      baseUrl: 'https://api.example.com',
      appId: 'your-app-id',
      enableAutoTokenRefresh: true,
      storage: 'memory', // or pass AsyncStorage adapter
    }}>
      {/* Your screens */}
    </WildwoodProvider>
  );
}

Import hooks and components:

import { useAuth, useTheme } from '@wildwood/react-native';

Express Middleware Setup

Add the auth middleware to your Express app:

import express from 'express';
import { createAuthMiddleware, createProxyMiddleware } from '@wildwood/node';

const app = express();

// Validate JWT tokens on protected routes
const auth = createAuthMiddleware({
  baseUrl: 'https://api.example.com',
  apiKey: process.env.WILDWOOD_API_KEY,
});

app.use('/api', auth);

// Access validated user in route handlers
app.get('/api/profile', (req, res) => {
  res.json(req.wildwoodUser);
});

Theming: All platforms share the same --ww-* CSS custom property system. Built-in themes include woodland-warm (default), cool-blue, and fall-colors. In Blazor, set data-theme="cool-blue" on your body. In React, use the useTheme() hook.

Install via Claude Code Plugin

If you use Claude Code (Anthropic's CLI for Claude), you can install the Wildwood plugin with two slash commands — no shell installer, no restart, no manual MCP registration. Claude Code's native plugin system bundles everything: the /wildwood slash command, the Wildwood MCP server, OAuth-aware authentication, and platform context.

Step 1: Install the Plugin

Open Claude Code and run the slash commands below.

Run each command separately — don't paste multiple lines at once. Claude Code parses slash commands one input at a time. If you submit two lines together, the second line is interpreted as a positional argument to the first command and the install fails with Invalid argument (Git can't create a directory containing \plugin install wildwood@wildwood in its name).

Path A — Fresh install

Step 1a — add the marketplace:

/plugin marketplace add WildwoodWorks/WildwoodComponents.Claude

Wait for the success message (something like "Successfully added marketplace: wildwood").

Step 1b — install the plugin (only after 1a succeeds):

/plugin install wildwood@wildwood

Path B — Already installed? Update instead

If Step 1a errors with Marketplace 'wildwood' is already installed, you already have an older version of the marketplace. Don't re-add it — refresh and reinstall:

Step 1a — refresh the marketplace from GitHub:

/plugin marketplace update wildwood

Step 1b — if the plugin was previously installed, uninstall it first:

/plugin uninstall wildwood@wildwood

(Skip this step if the previous install attempt failed — only the marketplace was added in that case, not the plugin.)

Step 1c — install:

/plugin install wildwood@wildwood

Complete reset (only if the update path doesn't help)

/plugin uninstall wildwood@wildwood

/plugin marketplace remove wildwood

Then redo Path A from Step 1a.

Step 2: Authenticate (one click)

Type /mcp in Claude Code, select wildwood from the server list, and click Authenticate. Your browser opens to Wildwood, you click Allow once, and Claude Code catches the callback and stores the tokens. You don't need to copy any URLs, paste any tokens, or set any environment variables.

Windows firewall: When you click Authenticate, Windows may ask whether to allow Claude Code to listen on a network port. Click Allow — this is a temporary localhost-only listener to catch the OAuth callback (same as az login, gh auth login, and every other CLI OAuth flow). It's a one-time prompt with no external network access.

If you can't allow it (corporate IT policy, restricted machine): click Cancel. Your browser will still redirect but show “This site can't be reached.” Copy the full URL from your browser's address bar (it contains the auth code even though the page didn't load) and paste it back in Claude Code when prompted.

How it works under the hood: the plugin bundles an .mcp.json that auto-registers the Wildwood MCP server. When Claude Code first hits an MCP tool, the Wildwood server returns 401 Unauthorized with a WWW-Authenticate header pointing at its OAuth discovery URL (RFC 9728). Claude Code follows the discovery chain, performs the OAuth 2.1 authorization-code flow with PKCE, and stores the resulting tokens in its internal credential store. Refresh-token rotation keeps the session active for 30 days.

Step 3: Integrate WildwoodComponents into Your Project

From your project directory, ask the skill to set up WildwoodComponents in your app:

/wildwood integrate

The skill detects your project type (Blazor, React, React Native, or Node.js), installs the correct packages, registers services, adds theme files, and wires up the provider — all in a single prompt.

Step 4: Deploy (Optional)

Deploy your app to Wildwood hosting at apps.wildwoodworks.io:

/wildwood deploy

Why use the plugin? The Claude plugin uses fewer tokens than manual integration because the heavy lifting — which packages to install, which services to register, which imports to add, and which configuration values to set — is pre-encoded in the bundled skill. Your AI agent just follows the instructions. The plugin also auto-updates from the marketplace, so you always get the latest integration patterns without re-running an installer.

The `/wildwood` Command

Everything is accessed through a single command. Just tell it what you need:

Command	Description
`/wildwood setup`	Create account, configure your first app
`/wildwood integrate`	Add WildwoodComponents SDK to any project — auth, AI, messaging, payments
`/wildwood deploy`	Build and deploy your app to a hosting service
`/wildwood hosting`	Manage Wildwood-hosted app deployments
`/wildwood database`	Manage hosted Azure SQL databases
`/wildwood status`	Check platform health, app status, and usage
`/wildwood diagnose`	Troubleshoot MCP connection / OAuth issues

For the full list of AI tools and universal prompts (compatible with GPT, Copilot, Cursor, and more), see AI Tools & Skills.

Updating / Uninstalling

The plugin auto-updates from the marketplace on Claude Code startup. To pull a new version manually, or to remove the plugin entirely:

# Pull the latest version manually
/plugin marketplace update wildwood

# Uninstall the plugin
/plugin uninstall wildwood@wildwood

Legacy install path (older Claude Code builds)

If you're on a Claude Code version that pre-dates the native plugin system (released mid-2026), the /plugin commands won't be recognized. Update Claude Code to the latest version, or as a fallback, register only the MCP server directly:

claude mcp add --transport http --scope user wildwood https://api.wildwoodworks.io/mcp

Then restart Claude Code and run /mcp to trigger OAuth. Note: this manual path doesn't install the /wildwood slash command — for that, you need the full plugin via the native install path above.

Verify the Installation

Build your project to verify everything is wired up correctly:

dotnet build

You should see a clean build with no errors related to WildwoodComponents. If you see missing type or namespace errors, double-check that:

The package reference or project reference is in your .csproj file.
Your _Imports.razor includes the required @using directives.
You have restored packages with dotnet restore.

Run a TypeScript type check to verify everything is wired up correctly:

npx tsc --noEmit

You should see no type errors. If you see missing module errors, double-check that:

Both @wildwood/core and your framework package are installed.
Your tsconfig.json has "moduleResolution": "bundler" or "node16".
You have run npm install or pnpm install.

Next, you need to register the WildwoodComponents services in your dependency injection container. Head to Service Registration to continue.

Installation

Step 1: Add the Package

Step 2: Setup

Static Assets

Namespace Imports

App Entry Point

App Entry Point

Express Middleware Setup

Install via Claude Code Plugin

Step 1: Install the Plugin

Path A — Fresh install

Path B — Already installed? Update instead

Complete reset (only if the update path doesn't help)

Step 2: Authenticate (one click)

Step 3: Integrate WildwoodComponents into Your Project

Step 4: Deploy (Optional)

The /wildwood Command

Updating / Uninstalling

Legacy install path (older Claude Code builds)

Verify the Installation

The `/wildwood` Command