Skip to content

[mcp] Make tool more reliable and fix integration issues with babel #33074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 30, 2025
+48 −50
Merged

[mcp] Make tool more reliable and fix integration issues with babel #33074

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
359dddc
Fix @babel usage and remove timeouts
jorge-cab Apr 30, 2025
682fbcb
Fix @babel usage and remove timeouts
jorge-cab Apr 30, 2025
47d4fc0
Minor style changes
jorge-cab Apr 30, 2025
b549ec0
Add more context to the tool
jorge-cab Apr 30, 2025
3141c9f
Fix incorrect property access
jorge-cab Apr 30, 2025
1900e35
prettier
jorge-cab Apr 30, 2025
9e52151
Refactor babel functions and inline them
jorge-cab Apr 30, 2025
eea64bf
prettier
jorge-cab Apr 30, 2025
6a3ca9c
Fine tunning tool context
jorge-cab Apr 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion compiler/packages/react-mcp-server/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ Server Components - Shift data-heavy logic to the server whenever possible. Brea

server.tool(
'review-react-runtime',
'Review the runtime of the code and get performance data to evaluate the proposed solution, the react code that is passed into this tool MUST contain an App component.',
'Review the runtime of the code and get performance data to evaluate the proposed solution, the react code that is passed into this tool MUST contain an App functional component without arrow function. And DO NOT export anything',
Copy link
Member

@poteto poteto Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also add something like "run this tool every time you propose a performance related change to verify if your suggestion actually improves performance"

{
text: z.string(),
},
Expand Down
15 changes: 6 additions & 9 deletions compiler/packages/react-mcp-server/src/utils/runtimePerf.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export async function measurePerformance(code: any) {
let options = {
configFile: false,
babelrc: false,
presets: [['@babel/preset-env'], '@babel/preset-react'],
presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
};

const parsed = await babel.parseAsync(code, options);
Expand All @@ -14,24 +14,21 @@ export async function measurePerformance(code: any) {
throw new Error('Failed to parse code');
}

const transpiled = await transformAsync(parsed);
const transpiled = await transformAsync(parsed, options);

if (!transpiled) {
throw new Error('Failed to transpile code');
}

const browser = await puppeteer.launch({
protocolTimeout: 600_000,
});
const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.setViewport({width: 1280, height: 720});
const html = buildHtml(transpiled);
await page.setContent(html, {waitUntil: 'networkidle0'});

await page.waitForFunction(
'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)',
{timeout: 600_000},
'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)'
);

const result = await page.evaluate(() => {
Expand All @@ -48,10 +45,10 @@ export async function measurePerformance(code: any) {
* @param {Object} opts - Transformation options
* @returns {Promise<string>} - The transpiled code
*/
async function transformAsync(ast: babel.types.Node) {
async function transformAsync(ast: babel.types.Node, options: any) {
Copy link
Member

@poteto poteto Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can fix the any here by just removing this function and parseAsync. You can inline it directly into measurePerformance so everything is typed correctly.

const result = await babel.transformFromAstAsync(ast, undefined, {
...options,
filename: 'file.jsx',
presets: [['@babel/preset-env'], '@babel/preset-react'],
plugins: [
() => ({
visitor: {
Expand Down
Loading