DEV Community: Marvellous

Build a Pear Protocol DeFi trading agent with MCP

Marvellous — Sat, 18 Jul 2026 23:35:46 +0000

If you want an AI agent that can actually trade, not just chat about charts, the Model Context Protocol (MCP) is the cleanest way to wire a model to a real exchange. This post builds a Pear Protocol DeFi trading agent: one that can browse pair markets, read your positions and portfolio, and (when you turn it on) open and close leveraged pair trades on Hyperliquid.

We'll use mcp-pear, an open-source MCP server that wraps Pear Protocol's API.

What is Pear Protocol?

Pear Protocol is a Hyperliquid-backed platform for pair trading. You go long one basket and short another in a single position, and profit from the ratio between them moving your way, regardless of overall market direction. Classic example: long ETH, short BTC if you think ETH outperforms, without betting on crypto as a whole.

Pear settles on Hyperliquid, so every pair position is really a pair of perp legs executed on-chain.

What is MCP, and why use it here?

The Model Context Protocol is an open standard that lets an LLM call external tools through one uniform interface. Instead of gluing Pear's REST API to your model by hand, you run an MCP server that describes its tools to the model, and any MCP client (Claude Desktop, Cursor, Cline, or your own agent) can use them.

mcp-pear exposes Pear as a set of MCP tools:

Public (no auth): list_markets, get_active_markets, get_pair_ratio, get_health
Authenticated read: get_open_positions, get_open_orders, get_portfolio, get_trade_history, get_account_summary
Write (opt-in): open_position, close_position, adjust_position, adjust_leverage, set_risk_parameters, cancel_order

Step 1: run the server

No install needed. npx fetches it:

npx -y @marvelcodes/mcp-pear@latest

The public tools work with zero config, so your agent can browse markets and pair ratios right away.

Step 2: wire it into Claude Desktop

Add this to your Claude Desktop MCP config:

{
  "mcpServers": {
    "pear": {
      "command": "npx",
      "args": ["-y", "@marvelcodes/mcp-pear@latest"]
    }
  }
}

Restart Claude and ask: "What are the top gaining pair markets on Pear right now?" It calls get_active_markets and answers from live data.

Step 3: add your account (read tools)

To read your positions and portfolio, mint a Pear API key:

npx -y @marvelcodes/mcp-pear@latest setup

This opens a browser, asks you to sign once with your wallet, and writes PEAR_API_KEY + PEAR_ADDRESS. Add them to the config:

{
  "mcpServers": {
    "pear": {
      "command": "npx",
      "args": ["-y", "@marvelcodes/mcp-pear@latest"],
      "env": {
        "PEAR_API_KEY": "your_key",
        "PEAR_ADDRESS": "0xyour_address"
      }
    }
  }
}

Now "How's my portfolio doing this week?" works. It calls get_portfolio with your real PnL.

Step 4: let the agent trade (carefully)

Trade execution is off by default. You opt in on purpose:

"env": {
  "PEAR_API_KEY": "your_key",
  "PEAR_ADDRESS": "0xyour_address",
  "PEAR_TRADE_ENABLED": "true"
}

With that flag set, the agent can call open_position. A pair trade looks like this: long ETH, short BTC, 3x, $100 notional.

{
  "executionType": "MARKET",
  "leverage": 3,
  "usdValue": 100,
  "slippage": 0.01,
  "longAssets":  [{ "asset": "ETH", "weight": 1 }],
  "shortAssets": [{ "asset": "BTC", "weight": 1 }]
}

open_position also takes TRIGGER, TWAP, and LADDER execution types, plus attached stopLoss / takeProfit. Pear signs the trade server-side, so the MCP server never holds your private keys.

Two Hyperliquid gotchas worth knowing:

~$10 minimum notional per order. Smaller orders get rejected.
Spot vs Perps balance. USDC bridged onto Hyperliquid often lands in your Spot balance. Move it to Perps first or open_position fails with insufficient margin.

Putting it together

Here's the shape of an agent loop that uses it:

get_active_markets to find pairs with strong momentum
get_pair_ratio to check the current ratio and funding
Model decides direction
open_position with a stop-loss attached
Poll get_open_positions, then close_position when the thesis plays out

Everything is a tool call, so the model reasons over live data and acts. No custom API glue.

Safety notes

Keep PEAR_TRADE_ENABLED off until you've tested read-only behaviour.
Start with tiny notionals.
The write tools execute real trades with real money. Constrain the agent, monitor it, and set risk parameters like you would any trading bot.

Converting CSV to JSON: A Quick Guide + An Online Tool

Marvellous — Thu, 26 Sep 2024 14:19:55 +0000

CSV (Comma-Separated Values) is a widely used format for storing tabular data, often seen in spreadsheets and data exchanges. While CSV is simple and effective for data storage, JSON (JavaScript Object Notation) has become the go-to format for working with structured data in web applications. Whether you're building APIs, importing/exporting data, or simply working on a JavaScript-heavy project, converting CSV to JSON is a common need.

In this article, I'll walk you through:

What CSV and JSON formats are
Why converting CSV to JSON is important
How to easily convert CSV to JSON
Introducing csvtojson.marvellous.codes – a free online tool I built for quick conversions.

What is CSV?

CSV files are plain text files that store data in rows and columns. Each line in the file represents a row, and values within the row are separated by commas. It’s a popular format for data exchange because it's simple and compatible with many tools and applications.

Example of a CSV file:

Name, Age, Occupation
Alice, 30, Developer
Bob, 25, Designer

What is JSON?

JSON, on the other hand, is a lightweight data-interchange format that's easy to read and write for both humans and machines. It's widely used in web development for transmitting data between a server and a web application, especially in REST APIs.

Example of a JSON file:

[
  {
    "Name": "Alice",
    "Age": 30,
    "Occupation": "Developer"
  },
  {
    "Name": "Bob",
    "Age": 25,
    "Occupation": "Designer"
  }
]

Why Convert CSV to JSON?

While CSV is great for basic data storage and exchange, JSON is the preferred format for modern web applications because:

JavaScript Friendly: JSON integrates seamlessly with JavaScript, making it easier to work with in front-end frameworks like React, Vue, and Angular.
Nested Data: JSON supports hierarchical and complex structures, unlike CSV which is limited to flat data.
Readability: JSON is often more readable and structured, which is beneficial when dealing with large datasets or APIs.

Methods to Convert CSV to JSON

1. Manual Conversion

For small datasets, you could manually rewrite CSV data into JSON format. However, this can be time-consuming and error-prone.

2. Using Code

There are many ways to programmatically convert CSV to JSON using different languages and libraries.

For instance, in JavaScript:

const csv = require('csvtojson');
const fs = require('fs');

csv()
  .fromFile('input.csv')
  .then((jsonObj) => {
    fs.writeFileSync('output.json', JSON.stringify(jsonObj, null, 2));
  });

This method works well for developers familiar with coding, but for non-developers or those seeking a quick, no-code solution, a web-based tool is more practical.

3. Using Online Tools

For those who don't want to deal with code or install libraries, online tools provide an easy and quick solution.

Introducing csvtojson.marvellous.codes

To simplify the CSV to JSON conversion process, I built csvtojson.marvellous.codes, a free and easy-to-use web tool that does the heavy lifting for you. No need to install software or write code – just upload your CSV file and download the JSON output.

Why Use csvtojson.marvellous.codes?

Fast & Free: Upload your CSV, get your JSON – simple!
No Installation: Access the tool from any browser without worrying about installations.
Open & Transparent: The tool is straightforward, and your data isn’t stored after conversion.
For Developers and Non-Developers: Whether you're a seasoned developer or someone just looking to convert a CSV file quickly, this tool fits your needs.

How to Use It

Visit csvtojson.marvellous.codes.
Upload your CSV file.
Click "Convert".
Download the JSON file generated.

It’s as simple as that!

Conclusion

Converting CSV to JSON is a common task in web development, especially when working with APIs and JavaScript applications. Whether you choose to use code or tools like csvtojson.marvellous.codes, understanding both formats is essential for modern data handling.

Give the tool a try, and feel free to share any feedback. Happy coding!

How to create a container component

Marvellous — Tue, 09 Aug 2022 12:45:00 +0000

Need to create a component that can take in other components/elements as children or just a component that wraps your app? Well you're in luck, here's a short tutorial on how to do it.

A really straight to the point answer is having your component have a prop with a type JSX.Element

const Card = ({ children }: { children: JSX.Element }) => {
  return (
     <div>
       { children }
     </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Card>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
      </Card>
    </div>
  );
}

Fixing ClassName did not match error

Marvellous — Wed, 09 Mar 2022 20:33:32 +0000

Warning: Prop `className` did not match. Server: Client:

This is probably one of the most annoying problem with Next.js, Typescript and styled-component luckily there's a work around for this.

You're gonna need to install babel-plugin-styled-components

yarn add --dev babel-plugin-styled-components

Create a file named .babelrc in the root directory and configure it. Here's the config file.

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "styled-components",
            {
                "ssr": true,
                "displayName": true,
                "preprocess": false
            }
        ]
    ]
}

Restart your server and refresh your server and you should be good.

Here's the issue on Github

Ciao

CSS StyleSheets

Marvellous — Wed, 09 Dec 2020 14:52:03 +0000

The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.

Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.

Author stylesheets are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme

The user (or reader) of the website can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes.

Learn more from MDN

HTML & CSS Comments

Marvellous — Sat, 29 Aug 2020 21:46:43 +0000

Writing lots of lines of code and you're worried you might not understand your code next week?

Want to make your project understandable to other programmers?

Comments are the way to go about it. A comment is a programmer-readable explanation or annotation in the source code of a computer program.

Comments are added to make the source code easier for humans to understand and are generally ignored by compilers and interpreters.

Comments are started with a language-specific symbol

HTML5

<!--This is a comment -->

CSS

/* This is a comment */

JavaScript

//This is a comment

When to use comments

"A handy rule of thumb is: a comment should only be added to answer a question that the code can't. If you aren't confused by what a piece of code is doing, but rather why it's doing it at that moment, then a comment should be added." - Mark Cronin

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines. This allows commenting inside a block of code and between a group of codes. What matters is making your code glanceable.

/* A one-line comment */

/*
A comment
which stretches
over several
lines
*/

Note

The /* */ comment syntax is used for both single and multiline comments. There is no other way to specify comments in external style sheets.