MCP Integration Guide
Model Context Protocol (MCP) allows Claude to interact with external systems through standardized tool interfaces.
Built-in MCP Components
Sqlite
Give Claude access to SQLite databases:
import { Sqlite } from "smithers/components/MCP";
<Claude model="sonnet" maxTurns={10}>
<Sqlite path="./data.db" readOnly>
Database schema:
- users(id, name, email)
- orders(id, user_id, total)
</Sqlite>
Find users who have placed orders over $100.
</Claude>
Read-Only for Safety
<Sqlite path="./production.db" readOnly>
Production data - read only access.
</Sqlite>
Multiple MCP Servers
<Claude model="sonnet" maxTurns={15}>
<Sqlite path="./users.db">User database</Sqlite>
<Sqlite path="./analytics.db">Analytics database</Sqlite>
Cross-reference user signups with analytics events.
</Claude>
Custom MCP Configuration
For advanced MCP setups, configure tools directly:
<Claude
tools={[
{
name: "query_database",
description: "Query the PostgreSQL database",
inputSchema: {
type: "object",
properties: {
query: { type: "string", description: "SQL query to execute" },
},
required: ["query"],
},
execute: async (input, context) => {
const result = await db.query(input.query);
return JSON.stringify(result);
},
},
]}
>
Query the database for user statistics.
</Claude>
Common Patterns
Data Analysis Pipeline
function DataPipeline() {
const [phase, setPhase] = createSignal("query");
const [data, setData] = createSignal<string | null>(null);
return (
<Ralph maxIterations={5}>
{phase() === "query" && (
<Claude
model="sonnet"
onFinished={(result) => {
setData(result.output);
setPhase("analyze");
}}
>
<Sqlite path="./sales.db" readOnly>
Sales database with orders and products.
</Sqlite>
Query the top 10 products by revenue.
</Claude>
)}
{phase() === "analyze" && (
<Claude
model="sonnet"
allowedTools={["Write"]}
onFinished={() => setPhase("done")}
>
Analyze this data and write a report:
{data()}
Save to reports/sales-analysis.md
</Claude>
)}
</Ralph>
);
}
Database with File Output
<Claude model="sonnet" maxTurns={10} allowedTools={["Write"]}>
<Sqlite path="./analytics.db" readOnly>
Event tracking database.
</Sqlite>
Generate a CSV export of daily active users.
Save to exports/dau.csv
</Claude>
Security Considerations
Always use readOnly for production databases to prevent accidental modifications.
// Safe - read only
<Sqlite path="./prod.db" readOnly>...</Sqlite>
// Risky - allows writes
<Sqlite path="./prod.db">...</Sqlite>
<Claude
allowedTools={["query_database"]} // Only database access
disallowedTools={["Bash"]} // No shell commands
>
<Sqlite path="./data.db" readOnly>
Schema here.
</Sqlite>
Analyze the data (no shell commands needed).
</Claude>
